Use HTML5 <canvas> element
and/or webGL if available
closed-source
See all on html5gameengine.com
Cordova,
Cordova + Crosswalk on Android,
Cordova + WKWebView on iOS
iOS only
closed-source
Lua / C++
Render with OpenGL ES/native platform libraries, run all the game logic with a cross-platform language
GDSCript/C++
JS / C++
Lua
C#
C++
C++
Scene
Layer/View
Layer/View
DisplayObject
Text
Sprite
Particles
Sprite
SceneStack/Director
Rendered objects are stored in a graph
Lower levels rendering engines (SDL, OpenGL, WebGL, Canvas) don't have graphs, only primitives
Manage inputs
Update world
Update physics
Render
Update time
dt = time elapsed since last frame
fps = 1 / dt
{
check collisions, move objects, update scores (business logic)...
{
HTML5 audio, WebAudio API
Most engines have a
built-in audio support
You need to map your entities to the physics engine bodies
World
Joint
RigidBody
Fixture
RigidBody
Fixture
Fixture
Forces can be applied on body
Callbacks can be attached for collisions
Discard objects, use simple physics models, split heavy computations if possible in more than one frame.
Avoid rendering objects far from the player (culling)
In general, minimize objects and textures
Avoid creating too much objects, release unused ones/too far from player
Garbage collector can be a frame killer
Avoid creating objects, reuse an existing one or a pool of objects
iOS JS engine and devices are quite fast
Harder to get a jank free game on Android even with Crosswalk