Page 1
HTML5 Mobile Game Development
1/3/2015Brisbane Game Tech Meetup
Pablo Farias NavarroFounder of ZENVA@[email protected]
Page 2
HTML5 Game Development
New Technology
“XYZ”
People will hack games
with XYZ
XYZ Game Development
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 3
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 4
HTML
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 5
CSS
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 6
JavaScript
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 7
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 8
CANVAS
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 9
http://localhost:8110/js-gamedev-course/game/
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 10
Audio
● http://mdn.github.io/violent-theremin/
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 11
WebGL
● Babylonjs.com
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 12
HTML5 Games Distribution
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 13
Wrappers
HTML5
Nativewrapper
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 14
Cordova
● Cordova plugins: http://plugins.cordova.io/#/
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 15
Phonegap Build
● https://build.phonegap.com
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 16
Intel XDK
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 17
HTML5 game frameworks
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 18
Rule #1
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 19
Rule #2
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 20
Phaser
● Game rendering● Sounds● Asset preloading● Sprites● World● Groups● Input● Events● Screen sizes● Physics
- http://phaser.io
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 21
Basic structure
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 22
How to get started
● Basic to intermediate level of:– HTML
– CSS
– JavaScript
● Start with a very simple game. Client side.● Tutorials and courses:
– http://www.gamedevacademy.org/category/tutorials/html5-gamedev-phaser/
– https://academy.zenva.com
– http://html5hub.com/
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 23
Other topics
● Advantages and disadvantages of HTML5 games
● SVG● CocoonJS
We are on Kickstarter! http://tiny.cc/html5gamedev
Page 24
THANK YOU
ZENVA.com
Support us on Kickstarter!
http://tiny.cc/html5gamedev