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


http://spkr8.com/t/16001

http://spkr8.com/t/16001

Twitter handle:@therockncoder


The Rock n Coder

• http://therockncoder.blogspot.com

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

• https://github.com/Rockncoder

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


http://therockncoder.blogspot.com/2012/10/my-iphone-5-nightmare.html


http://www.youtube.com/user/rockncoder?feature=mhee




http://www.slideshare.net/rockncoder


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


jssaturday.comNov. 10th, Long Beach Convention

CenterDiscount code: RiaConsultingLLC

Save $65!!!


What We Won’t Cover?• 3D Graphics

• Audio

• Multiplayer


What We Will Cover?

• HTML5 vs Device Apps

• Why jQuery Mobile?

• HTML5 Canvas

• A Sprite is not a Soda Pop

• Collision Detection

• Input

• Debugging


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


Why jQuery Mobile?


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.


Why jQuery Mobile?

• jQuery Mobile used as a framework

• Follows normal HTML syntax

• Easy page navigation

• Standardizes input events

• I am lazy


JavaScript Notes


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


HTML5 Canvas


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


A Sprite is not a Soda Pop


A Sprite is not a Soda Pop

• A Sprite is...

• Sprite sheet / map

• Sprite object

• Sprite Engine


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


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


A sprite sheet or map


Sprite object

• JavaScript - functions serve as Object constructors

• Invoked with the new operator

• Never call the constructor function directly


Sprite Engine

• Building a game using individual objects would be very cumbersome

• Three parts

• Sprite Map

• Draw Method

• Sprites


Drawing

• Save the context

• Move the origin to the center of the sprite

• Perform transforms

• Draw the sprite

• Restore the context


Collision Detection


Collision Detection

• True Collision Detection

• Pseudo Collision Detection

• Pseudo is faster


True Collision Detection

• Detects actual pixels of the sprites overlapping

• Very time consuming without hardware support


Pseudo Collision Detection

• Looks for bounding boxes overlapping

• Or circles intersecting

• Is much faster than true collision detection


Input


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


Debugging


Debugging

• The Challenge

• Google and Apple to the Rescue

• Demo


References


The Rock n Coder

• http://therockncoder.blogspot.com

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

• https://github.com/Rockncoder

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










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/


http://jquerymobile.com

http://jquerymobile.com

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

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/




Next Steps


Next Steps

• Download the code

• Add sound and other enhancements

• Join me on Google+ for more game making presentations


beginning html5 mobile game programming with jquery mobile

Technology