CF.Objective Notes -- Building HTML5 games with PhoneGap, JavaScript, and CSS3
July 08, 2012
Building HTML5 Games With Phonegap -- Jason Kadrmas
(Hands down, this was one of the best presentations at CFObjective! Tons of great information, incredibly informative and inspiring. I'd done quite a bit of desktop game development in the past, but haven't done much with HTML-based games yet. Jason's was the first presentation I've see that didn't make HTML games seem like a total hack; I now see many more similarities in HTML games and desktop games than I did before.)
HTML5 Gaming 101
can build using canvas
or DOM
Canvas -- kind of like building with an etch-a-sketch, shake it and redraw every time
bitmap based
pixels are RGBA
Easy to redraw every frame
you do the work
performance issues
you have to keep track of "how big is this tree? where is it? is it colliding with something else?" etc
Canvas is not hardware accelerated EXCEPT for IOS 5
Building games w/ the DOM
build games same as building a web app
the browser does a lot of the work
you don't have to think about repaints, etc
gaming 101
assets in the game
for crazy movements/details -- you'll want an actual image
for simple movements/details -- can use CSS for all of it
Choosing your stack--
DOM manipulation
state management
animation / game engine
tempting -- breaking your game up into sections
crazy amount of options
DOM -- zepto, jQuery, native
State -- Backbone, spine mobile, sencha, jQuery Mobile
animation -- zepto, query, crafty.js, impack (sp?)
template -- enderscore, jquery template, mustache, handlebars
Crafty and Impact are gaming-specific libraries
My usual stack (personal preference):
DOM - Zepto
State - Backbone
Animation - Zepto
Template - underscore
...it's all personal preference, just pick 1 that works well for you.
Zepto is small, 7K, built just for mobile
Zepto.Animate uses CSS transform under the hood, can be hardware accelerated
jQuery does not do this
Backbone -- gives concept of "routes"
handles transitions between "help" and "about" screens, etc.
Chome add-on, Canary
Backbone has a hard dependency on Underscore
I use Backbone for "state" and Underscore for "template" since it's already loaded anyway
PhoneGap -- for things you cannot do WELL with HTML, CSS, and JS
Accelerometer, Geolocation, Camera, Media, Push Notifications, etc
Note: before using any PhoneGap features, be sure to listen for the "read" event
Setting up a Development Environment
Same as building a web app
Use whatever IDE tools, procedures, that you are comfortable with
Mobile Boilerplate
Cross platform compatible (Android, iOS)
Fights against blank page syndrome
html5boilerplate.com/mobile
Set up a local project domain
Separating "work" and "play" projects
HOSTS file, Virtual host in Apache, etc
Testing on Mobile
-- is really bad, really hard
1. Webkit Inspector (first line of defense)
2. Simulators
3. Live on device
Each harder to debug than the previous
Continually testing at all stages will help
Some remote debugging options now
Adobe Shadow
Chrome remote debugging
Quick and dirty ANT build script, to get it onto the device
a target for each device
Building a game...
Scale
Devices are not the same size!
Android Market Place = game available for like 600 devices!
Typography uses ems, not pixels
CSS percentages / independent grid system
ems = independent system for fonts
set your base style (16px by default)
so 1 em = 16 pixels
it's like a "scale factor", so the fonts look good in different screen sizes
can also use percentages
also think about % / ems for elements on the screen
"the angry bee is 6% of the screen", not "he's 50x50 pixels in size" -- that would make it really bit on iPhone but tiny on iPad, etc
With ems you can use media queries
if this is on iPhone, just use a different font "base size"
block system
this item on the screen is 1 "block" in size and just set a block to, say, 50 pixels
use "blocks" to calculate things, instead of pixels
organize your game into scenes
templates
Game animation
3 ways to do that:
1. Transitions
2. Sprite Sheets
3. Game loop
Transitions -- uses CSS entirely to animate
progress info not available
Sprite Sheet
Uses CSS background-position property to animate w/ JavaScript
This is how google does "google doodles"
Game loop
when simple animations won't do
example: collision detection
Putting it all together
DOM Mario
Mario is a DIV, Guupa is a DIV
question marks are blinking as sprite sheets
all the blocks are on an independent grid system
good ex because almost everything is already a grid system
saving data
lawnchair
local storage or web sql adapters
makes client storage easy
Deploying your game
Apple App Store -- 99 bucks a year, for a dev license
Manage thru iTunes
-- choose keywords wisely!
3 - 4 days to publish
Building your game is 1 step
Coming up w/ the description, screen shots, etc, is a big time sink. need different sizes, info for iPhone, Android, etc
Android
25 bucks on Android Market, free for Nook, Kindle Fire
instant publish on Android Market
1 month to publish on Nook
1 week to publish to Kindle Fire
Related links
Tale of Two App Stores
Return of the Animated GIF
WebSQL Databases
Underscore Templating Revealed
Push Notifications With Urban Airship
Paul Irish -- Chrome Canary guru, has lots of videos showing how to profile your game w/ Chrome and some plugins
(Hands down, this was one of the best presentations at CFObjective! Tons of great information, incredibly informative and inspiring. I'd done quite a bit of desktop game development in the past, but haven't done much with HTML-based games yet. Jason's was the first presentation I've see that didn't make HTML games seem like a total hack; I now see many more similarities in HTML games and desktop games than I did before.)
HTML5 Gaming 101
can build using canvas
or DOM
Canvas -- kind of like building with an etch-a-sketch, shake it and redraw every time
bitmap based
pixels are RGBA
Easy to redraw every frame
you do the work
performance issues
you have to keep track of "how big is this tree? where is it? is it colliding with something else?" etc
Canvas is not hardware accelerated EXCEPT for IOS 5
Building games w/ the DOM
build games same as building a web app
the browser does a lot of the work
you don't have to think about repaints, etc
gaming 101
assets in the game
for crazy movements/details -- you'll want an actual image
for simple movements/details -- can use CSS for all of it
Choosing your stack--
DOM manipulation
state management
animation / game engine
tempting -- breaking your game up into sections
crazy amount of options
DOM -- zepto, jQuery, native
State -- Backbone, spine mobile, sencha, jQuery Mobile
animation -- zepto, query, crafty.js, impack (sp?)
template -- enderscore, jquery template, mustache, handlebars
Crafty and Impact are gaming-specific libraries
My usual stack (personal preference):
DOM - Zepto
State - Backbone
Animation - Zepto
Template - underscore
...it's all personal preference, just pick 1 that works well for you.
Zepto is small, 7K, built just for mobile
Zepto.Animate uses CSS transform under the hood, can be hardware accelerated
jQuery does not do this
Backbone -- gives concept of "routes"
handles transitions between "help" and "about" screens, etc.
Chome add-on, Canary
Backbone has a hard dependency on Underscore
I use Backbone for "state" and Underscore for "template" since it's already loaded anyway
PhoneGap -- for things you cannot do WELL with HTML, CSS, and JS
Accelerometer, Geolocation, Camera, Media, Push Notifications, etc
Note: before using any PhoneGap features, be sure to listen for the "read" event
Setting up a Development Environment
Same as building a web app
Use whatever IDE tools, procedures, that you are comfortable with
Mobile Boilerplate
Cross platform compatible (Android, iOS)
Fights against blank page syndrome
html5boilerplate.com/mobile
Set up a local project domain
Separating "work" and "play" projects
HOSTS file, Virtual host in Apache, etc
Testing on Mobile
-- is really bad, really hard
1. Webkit Inspector (first line of defense)
2. Simulators
3. Live on device
Each harder to debug than the previous
Continually testing at all stages will help
Some remote debugging options now
Adobe Shadow
Chrome remote debugging
Quick and dirty ANT build script, to get it onto the device
a target for each device
Building a game...
Scale
Devices are not the same size!
Android Market Place = game available for like 600 devices!
Typography uses ems, not pixels
CSS percentages / independent grid system
ems = independent system for fonts
set your base style (16px by default)
so 1 em = 16 pixels
it's like a "scale factor", so the fonts look good in different screen sizes
can also use percentages
also think about % / ems for elements on the screen
"the angry bee is 6% of the screen", not "he's 50x50 pixels in size" -- that would make it really bit on iPhone but tiny on iPad, etc
With ems you can use media queries
if this is on iPhone, just use a different font "base size"
block system
this item on the screen is 1 "block" in size and just set a block to, say, 50 pixels
use "blocks" to calculate things, instead of pixels
organize your game into scenes
templates
Game animation
3 ways to do that:
1. Transitions
2. Sprite Sheets
3. Game loop
Transitions -- uses CSS entirely to animate
progress info not available
Sprite Sheet
Uses CSS background-position property to animate w/ JavaScript
This is how google does "google doodles"
Game loop
when simple animations won't do
example: collision detection
Putting it all together
DOM Mario
Mario is a DIV, Guupa is a DIV
question marks are blinking as sprite sheets
all the blocks are on an independent grid system
good ex because almost everything is already a grid system
saving data
lawnchair
local storage or web sql adapters
makes client storage easy
Deploying your game
Apple App Store -- 99 bucks a year, for a dev license
Manage thru iTunes
-- choose keywords wisely!
3 - 4 days to publish
Building your game is 1 step
Coming up w/ the description, screen shots, etc, is a big time sink. need different sizes, info for iPhone, Android, etc
Android
25 bucks on Android Market, free for Nook, Kindle Fire
instant publish on Android Market
1 month to publish on Nook
1 week to publish to Kindle Fire
Related links
Tale of Two App Stores
Return of the Animated GIF
WebSQL Databases
Underscore Templating Revealed
Push Notifications With Urban Airship
Paul Irish -- Chrome Canary guru, has lots of videos showing how to profile your game w/ Chrome and some plugins