A research about an HTML5 game engine called Phaser, including reviews about tools, learning curve, build pipeline and quick comparisons to other engines. Project link: https://github.com/DancingPhoenix88/phaser-features-test

2. INTRODUCTION
§ FREE game framework
§ JavaScript based
§ Render in browser / web-view
§ Widely used, helpful doc and active community
§ Official website: http://phaser.io/
§ Documentation: http://phaser.io/docs/2.6.2/index
§ My repository: https://github.com/DancingPhoenix88/phaser-features-test

3. TESTED FEATURES
§ Rendering
§ Tween / Animation
§ Particles
§ Audio
§ Screen scaling
§ Plugin

4. SHOWCASE
https://phaser.io/news/2018/04/mahjong-dynasty

5. SHOWCASE
http://www.html5gamedevs.com/topic/17873-phaser-fruit-dating-
puzzle-game/

6. SHOWCASE
http://engine.qiciengine.com/demo/Project/dota/index.html

7. SHOWCASE
https://phaser.io/news/2018/03/five-nations

8. VERSION
§ Latest stable: 2.6.2 (my recommendation)
§ Community Edition: 2.10.6
§ Latest official: 3.10.1
§ Archive: http://phaser.io/download/archive

9. RENDERING
§ Support WebGL & HTML 5 canvas
§ Can be switched based on browser support
§ Phaser 2 uses modified PixiJS 2.2.9 as renderer (fastest
2D WebGL renderer, which is v4 now)
§ Performance: stable 60FPS on mobile for casual game

10. SPRITE
§ Must be pre-loaded before using
§ Pre-loaded assets will be saved in
cache
§ Atlas support

11. TWEEN
§ Built-in tween system
§ Tween almost everything
§ Chain, pause, resume, repeat, speed control ...
§ NO built-in animation tool !

12. ANIMATION
§ Support sprite animation
§ Support Spine animation by a free plugin

13. PARTICLES
§ Code only L
§ ParticleStorm (20$): https://phaser.io/shop/plugins/particlestorm
§ External libraries (Tweak in visual tool à JSON export à import by plugin)
§ Ezelia Particles System Editor: http://labs.ezelia.com/epsy/
§ Phaser Particle Editor Plugin: https://github.com/koreezgames/phaser-particle-editor-plugin
§ Pixi Particles Editor: https://github.com/pixijs/pixi-particles-editor
§ All are failed to work (might need some more works)
§ But still helpful due to visual tools

14. SOUND
§ Support Web Audio API &
HTML Audio
§ Play, pause, resume, repeat,
speed control ...
§ Audio Sprite supported

15. SCREEN SCALING
§ Auto scale via configuration
§ Full screen via Cordova plugin(s)

16. PLUGIN
§ Install easily via <script> tag and plugin.add function
§ There're many plugins from community

17. https://github.com/samme/phaser-plugin-scene-graph

18. https://github.com/samme/
phaser-view-cache

19. https://github.com/samme
/phaser-plugin-step

20. https://github.com/netcell/phaser-inspector

21. UI
§ Only text and button are available L
§ Other UI components must be implemented, or using HTML
component as overlay
§ Bitmap font supported
(we can even pack bitmap font with other sprites with tricks)

22. PHYSICS
§ 3 built-in systems:
Arcade < Ninja < P2 (< Matter, Chipmunk)
§ Box2D (15$/25$) can be added via plugin
§ *Not tested yet

23. EDITOR - Phaser Editor
§ https://phasereditor2d.com/
§ Free with limited atlas (5), canvas (15), tile maps (3)
§ Price: 30$ / year, 45$ / 2 years or 75$ forever (PER SEAT)
§ Features:
§ Code completion
§ Visual level editor
§ Integrated documentation & examples
§ Atlas support
§ Web server included

25. EDITOR – Qici Engine
§ https://github.com/qiciengine/qiciengine
§ Free but no longer maintained
§ Features:
§ Web-based editor
§ Built-in HTML UI components
§ Visual level editor & inspector
§ Atlas support
§ Built-in animation tool

26. EDITOR – Mighty Editor
§ http://mightyfingers.com/
§ Price: 5$ (Basic) or 20$ (Advanced)
§ Features:
§ Web-based editor
§ Built-in HTML UI components
§ Visual level editor & inspector
§ Atlas support
§ Built-in animation tool

27. DEBUGGING
§ Plugins are helpful
§ Browser's console (for both local / remote game)
§ Browser's profiling tool is helpful for locating bottleneck
§ Firefox's canvas inspector is helpful for frame debugging

28. DEBUGGING
§ PhoneGap Desktop &
PhoneGap Developer App
§ Hot reload right on device

29. DISTRIBUTION
§ Need a wrapper with a web-view:
§ Cordova / PhoneGap (popular & free)
§ Ludei / Cocoon / Crosswalk (paid & Canvas+ / WebView+ / WKWebView)
§ Performance on device varies:
§ WebGL / Canvas ?
§ Android / iOS / iOS 8+
§ DOM interaction ?

30. Q & A

31. EXTRAS

32. § *Better performance
§ Lot of tools
§ Consistent
à For complex games
§ Lightweight (game & IDE)
§ Lower cost
§ Use Web Technology
à For simple 2D games
VS

33. § FREE
§ Easy to use
§ Active
§ Windows only (Construct)
§ Just tools (CreateJS, Pixi)
§ 3D (BabylonJS, ThreeJS)
§ Inactive / $$$ (ImpactJS)
§ Young (MelonJS, Panda)
VS
Alternative: Defold

34. MORE
hoang.vu@punch.vn