KEMBAR78
HTML5 Games Status and issues | PDF
HTML5 Games
    Status and issues



                Hong,Sechul/CTO
                www.bluega.com
2


Why HTML5 Game?
 Cross device running (with one source code)

 Dynamic update (without explicit installation)




 However…
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


HTML5 for game development
 Controlling
  •   JavaScript
 Rendering
  •   HTML5 DOM/CSS3
  •   HTML5 Canvas
  •   HTML5 WebGL
 Sound
  •   HTML5 Audio API
  •   WebAudio API(Chrome)
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


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


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


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


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


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


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)
12




BLUEGA
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


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


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


BLUEGA – Crazy Chicken
 Tower defense game with orthogonal tile-map
 Published in K-Apps
17




BXG BLUX Game Engine
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


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




 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

HTML5 Games Status and issues

  • 1.
    HTML5 Games Status and issues Hong,Sechul/CTO www.bluega.com
  • 2.
    2 Why HTML5 Game? Cross device running (with one source code)  Dynamic update (without explicit installation) However…
  • 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 gamedevelopment  Controlling • JavaScript  Rendering • HTML5 DOM/CSS3 • HTML5 Canvas • HTML5 WebGL  Sound • HTML5 Audio API • WebAudio API(Chrome)
  • 5.
    5 Renderer for games Inview 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 byrenderer 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)
  • 12.
  • 13.
    13 BLUEGA – Visionon 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 – TwinklePop  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 – CrazyChicken  Tower defense game with orthogonal tile-map  Published in K-Apps
  • 17.
  • 18.
    18 BXG - HTML5Game 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 ContactUs 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