3. 3
Problems
JavaScript - Dynamic binding interpreter language
Low performance
Hard to manage memory
Browser quirks
Browser/device performance discrepancy
Sound and device API
Packaging
HTML5 is originally not for games!
4. 4
HTML5 for game development
Controlling
• JavaScript
Rendering
• HTML5 DOM/CSS3
• HTML5 Canvas
• HTML5 WebGL
Sound
• HTML5 Audio API
• WebAudio API(Chrome)
5. 5
Renderer for games
In view of commercializing HTML5 games;
Devices Game types
HTML5 • PC Browsers (Even non-HTML5 Plain, Tile-map,
DOM/CSS3 Browsers) Arcade
• Android/iOS
• TIZEN
• Some TV/Set-top-box
HTML5 • HTML5 PC Browsers Plain, Tile-map,
Canvas • iOS Arcade, Physics
• TIZEN(?)
• Some TV/Set-top-box(?)
HTML5 • Chrome Brower on Windows 3D(OpenGL like)
WebGL
6. 6
Market perspectives by renderer
In view of commercializing HTML5 games;
HTML5 DOM+Canvas
• Cross device running
• Game type : Social, Casual
HTML5 Canvas
• PC
• Game type : Social, Casual, Physics
WebGL
• Existing iOS and Android games to Chrome web store
• Game type : 3D
7. 7
Technical Issues - JavaScript
Interpreting, dynamic binding
Implicit garbage collection
Vulnerable environment for developers
Need to impose strict coding pattern
Need framework, engine
Recycling of resource
8. 8
Technical Issues – HTML5 Specs (1/2)
HTML5 implementations are stable over browsers.
But, problems are mostly on Device API.
Viewport control – Screen lock, Orientation lock, Full-
screen
For some platform, need to package as native application
Android has more problems when running as web site
Audio API
Unstable and lots of quirks in implementation
Only 1 channel for many browsers
Preparing new WebAudio API
9. 9
Technical Issues – HTML5 Specs (2/2)
Storage API
Using File-System API along with Cookie
For permanent and critical data, need server backup.
Packaging & Installation
PC : Hard to package large game. Hard to add Ad with installable
package. Mostly hosting with CDN.
Mobile : W3C widget like package. Native application(Hybrid).
Hosting is relatively good for iOS(without sound)
MouseLock API, JoyStick API
Developing by Google
10. 10
Technical Issues – Screen sizes
Matter of game geometric type, level design, graphical
assets and layouts. Not specific to HTML5 games.
HTML5 itself is good for resizing - Relative coordination
system, CSS, Zooming
Relative coordination from the beginning of development
CSS tricks
Zooming : Drops performance a lot. (But, TIZEN looks good!)
BLUEGA : Using Game level editor
11. 11
Technical Issues – Game UI
Need to develop game’s other screens, dialogs and menu.
Need some UI framework library for renderer
HTML5 itself is very good for developing UI. UI
frameworks such jQuery, Sencha, …
BLUEGA : Developing all Game UI in HTML5 DOM even running
with HTML5 Canvas. (Using own jBLUX)
13. 13
BLUEGA – Vision on HTML5 games
Native Web
Web Web Web
Game Game Game
iOS
Android Game Game Logic Engine
OS Editor Scroll Engine
Tile Map Engine
Isometric Engine Web
Browser
Game Engine Network
Core Core
Network
jBLUX HTML5 UI Framework
server
HCL (Handset Capability Layer)
iPhone / iPad Android Phone/Tab PC Phone / Pad Smart TV
BXG-RUN BXG-RUN
14. 14
BLUEGA - Performance
BLUEGA is focusing on “Cross device running game” and
“Serviced game”
FPS : 20~30
Dynamic objects : 30~60 with collision detection
Static image : 1000~4000
Sound
• 3~4 Channel with stable Audio API
• 1 Channel with unstable Audio API
15. 15
BLUEGA – Twinkle Pop
Bubble game with hexagonal tile-map
Published in Facebook, CWS, Google Play, Apple Store,
TIZEN, Web portal
• CWS URL
https://chrome.google.com/webstore/detail/jlmcmmeajfebnmfkjipnmkbjkdcfgbbj
• Web URL
http://laputagames.com/each/tp/
• Technical notes
http://www.bluega.com/html5-game-engine_technical_notes_twinkle_pop/
16. 16
BLUEGA – Crazy Chicken
Tower defense game with orthogonal tile-map
Published in K-Apps
18. 18
BXG - HTML5 Game Engine
HTML5 Game Engine for
Cross game, Hybrid web game
• High and consistent performance for
wide range of devices
• Hot swap between three renders
(DOM, DOM+Canvas, Canvas)
• Virtual input devices, Audio
• Casual, arcade, shooting, social
game
- Isometric, Orthogonal, Hexagonal
- Scrolling
- Multi-layer
• Game Editor
• Run-time for iOS, Android
19. 19
Engine release plan
BXG Core - Early August, 2012
• JavaScript library
• API Reference, Tutorials and Knowledge Base
• Sample games and code
• WRT – WAC, PhoneGap, BXGrun(Android, iOS)
• Hands-on class planning in August, 2012
BXG Editor - Early October, 2012
• Hosted as web site, not only for BXG
• “Dropbox” as file storage
20. 20
THANK YOU
Contact Us
www.bluega.com
www.facebook.com/bluega
sales@bluega.com
Korea:
Phone: +82-70-8228-8721
FAX : +82-31-714-0847
USA:
Phone: +1-714-325-0264