beginning html5 mobile game programming with jquery mobile

Beginning HTML5 Mobile Game Programming

with jQuery Mobile

Saturday, October 13, 12

spkr8.com/t/16001Please Rate This Talk

Saturday, October 13, 12

Twitter handle:@therockncoder

Saturday, October 13, 12

The Rock n Coder

• http://therockncoder.blogspot.com

• http://www.youtube.com/user/rockncoder

• https://github.com/Rockncoder

• http://www.slideshare.net/rockncoder

Saturday, October 13, 12

Google+ Hangout on Air

• Tuesday, October 16th at 6 PM PDT

• The first of four session on HTML5 Game Programming

• Each will complete the Game further

• The final session we will ‘PhoneGap’ the Game

• Free

Saturday, October 13, 12

jssaturday.comNov. 10th, Long Beach Convention

CenterDiscount code: RiaConsultingLLC

Save $65!!!

Saturday, October 13, 12

What We Won’t Cover?• 3D Graphics

• Audio

• Multiplayer

Saturday, October 13, 12

What We Will Cover?

• HTML5 vs Device Apps

• Why jQuery Mobile?

• HTML5 Canvas

• A Sprite is not a Soda Pop

• Collision Detection

• Input

• Debugging

Saturday, October 13, 12

HTML5 Device Apps

Can migrate web skills Longer learning curve

2D only (WebGL doesn’t count) 2D or 3D

Difficult to monetize Monetization is built-in

Restricted device access Full access to device hardware

Slower Faster

Saturday, October 13, 12

Why jQuery Mobile?

Saturday, October 13, 12

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design. 

Requires jQuery.

Saturday, October 13, 12

Why jQuery Mobile?

• jQuery Mobile used as a framework

• Follows normal HTML syntax

• Easy page navigation

• Standardizes input events

• I am lazy

Saturday, October 13, 12

JavaScript Notes

Saturday, October 13, 12

JavaScript Notes

• Single threaded

• Functions are first class constructs

• Functions can be passed

• Objects are dynamic

• Program must return control to the browser or be shut down

Saturday, October 13, 12

HTML5 Canvas

Saturday, October 13, 12

HTML5 CanvasThe canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly

Saturday, October 13, 12

A Sprite is not a Soda Pop

Saturday, October 13, 12

A Sprite is not a Soda Pop

• A Sprite is...

• Sprite sheet / map

• Sprite object

• Sprite Engine

Saturday, October 13, 12

A Sprite is...A two-dimensional image or animation that is integrated into a larger scene

Saturday, October 13, 12

A sprite sheet or map

• Collection of sprites in a single graphics file

• Reduces number individual file to download

• Makes it easier to maintain and modify assets

Saturday, October 13, 12

A sprite sheet or map

Saturday, October 13, 12

Sprite object

• JavaScript - functions serve as Object constructors

• Invoked with the new operator

• Never call the constructor function directly

Saturday, October 13, 12

Sprite Engine

• Building a game using individual objects would be very cumbersome

• Three parts

• Sprite Map

• Draw Method

• Sprites

Saturday, October 13, 12

Drawing

• Save the context

• Move the origin to the center of the sprite

• Perform transforms

• Draw the sprite

• Restore the context

Saturday, October 13, 12

Collision Detection

Saturday, October 13, 12

Collision Detection

• True Collision Detection

• Pseudo Collision Detection

• Pseudo is faster

Saturday, October 13, 12

True Collision Detection

• Detects actual pixels of the sprites overlapping

• Very time consuming without hardware support

Saturday, October 13, 12

Pseudo Collision Detection

• Looks for bounding boxes overlapping

• Or circles intersecting

• Is much faster than true collision detection

Saturday, October 13, 12

Input

Saturday, October 13, 12

Input

• Mobile devices don’t have keyboards or mice

• We use the ‘touchstart’ event

• And the ‘click’ event for desktop support

• Input is associate with the player

• Actually fairly simple to do

Saturday, October 13, 12

Debugging

Saturday, October 13, 12

Debugging

• The Challenge

• Google and Apple to the Rescue

• Demo

Saturday, October 13, 12

References

Saturday, October 13, 12

The Rock n Coder

• http://therockncoder.blogspot.com

• http://www.youtube.com/user/rockncoder

• https://github.com/Rockncoder

• http://www.slideshare.net/rockncoder

Saturday, October 13, 12

Resources

• http://jquerymobile.com/

• http://www.html5rocks.com/en/

• http://www.widgetworx.com/widgetworx/portfolio/spritelib.html

• http://devmag.org.za/2009/04/13/basic-collision-detection-in-2d-part-1/

Saturday, October 13, 12

Next Steps

Saturday, October 13, 12

Next Steps

• Download the code

• Add sound and other enhancements

• Join me on Google+ for more game making presentations

Saturday, October 13, 12