beginning html5 mobile game programming with jquery mobile
TRANSCRIPT
![Page 1: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/1.jpg)
Beginning HTML5 Mobile Game Programming
with jQuery Mobile
Saturday, October 13, 12
![Page 2: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/2.jpg)
spkr8.com/t/16001Please Rate This Talk
Saturday, October 13, 12
![Page 3: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/3.jpg)
Twitter handle:@therockncoder
Saturday, October 13, 12
![Page 4: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/4.jpg)
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
![Page 5: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/5.jpg)
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
![Page 6: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/6.jpg)
jssaturday.comNov. 10th, Long Beach Convention
CenterDiscount code: RiaConsultingLLC
Save $65!!!
Saturday, October 13, 12
![Page 7: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/7.jpg)
What We Won’t Cover?• 3D Graphics
• Audio
• Multiplayer
Saturday, October 13, 12
![Page 8: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/8.jpg)
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
![Page 9: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/9.jpg)
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
![Page 10: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/10.jpg)
Why jQuery Mobile?
Saturday, October 13, 12
![Page 11: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/11.jpg)
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
![Page 12: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/12.jpg)
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
![Page 13: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/13.jpg)
JavaScript Notes
Saturday, October 13, 12
![Page 14: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/14.jpg)
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
![Page 15: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/15.jpg)
HTML5 Canvas
Saturday, October 13, 12
![Page 16: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/16.jpg)
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
![Page 17: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/17.jpg)
A Sprite is not a Soda Pop
Saturday, October 13, 12
![Page 18: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/18.jpg)
A Sprite is not a Soda Pop
• A Sprite is...
• Sprite sheet / map
• Sprite object
• Sprite Engine
Saturday, October 13, 12
![Page 19: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/19.jpg)
A Sprite is...A two-dimensional image or animation that is integrated into a larger scene
Saturday, October 13, 12
![Page 20: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/20.jpg)
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
![Page 21: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/21.jpg)
A sprite sheet or map
Saturday, October 13, 12
![Page 22: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/22.jpg)
Sprite object
• JavaScript - functions serve as Object constructors
• Invoked with the new operator
• Never call the constructor function directly
Saturday, October 13, 12
![Page 23: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/23.jpg)
Sprite Engine
• Building a game using individual objects would be very cumbersome
• Three parts
• Sprite Map
• Draw Method
• Sprites
Saturday, October 13, 12
![Page 24: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/24.jpg)
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
![Page 25: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/25.jpg)
Collision Detection
Saturday, October 13, 12
![Page 26: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/26.jpg)
Collision Detection
• True Collision Detection
• Pseudo Collision Detection
• Pseudo is faster
Saturday, October 13, 12
![Page 27: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/27.jpg)
True Collision Detection
• Detects actual pixels of the sprites overlapping
• Very time consuming without hardware support
Saturday, October 13, 12
![Page 28: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/28.jpg)
Pseudo Collision Detection
• Looks for bounding boxes overlapping
• Or circles intersecting
• Is much faster than true collision detection
Saturday, October 13, 12
![Page 29: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/29.jpg)
Input
Saturday, October 13, 12
![Page 30: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/30.jpg)
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
![Page 31: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/31.jpg)
Debugging
Saturday, October 13, 12
![Page 32: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/32.jpg)
Debugging
• The Challenge
• Google and Apple to the Rescue
• Demo
Saturday, October 13, 12
![Page 33: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/33.jpg)
References
Saturday, October 13, 12
![Page 34: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/34.jpg)
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
![Page 35: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/35.jpg)
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
![Page 36: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/36.jpg)
Next Steps
Saturday, October 13, 12
![Page 37: Beginning HTML5 Mobile Game Programming with jQuery Mobile](https://reader036.vdocument.in/reader036/viewer/2022062523/587a75a51a28abf0468b4fab/html5/thumbnails/37.jpg)
Next Steps
• Download the code
• Add sound and other enhancements
• Join me on Google+ for more game making presentations
Saturday, October 13, 12