Beginning HTML5 Mobile Game Programming with jQuery Mobile
•
4 likes•11,959 views
For more cool mobile tutorials, be sure to visit my blog: http://therockncoder.blogspot.com/ or follow me @therockncoder Want to create a game for your hot new phone or tablet but not up to slogging through chapter after chapter of Objective-C or Java? Then this is the session for you. Take the web skills you already have and enhance them with HTML5 and jQuery Mobile to build fun games which run on all of the latest mobile devices. In this session, I will present a simple HTML5 game engine, explain the various pieces of its architecture, and most of all explain how you can further expand it. All of the source code and slides shown will be available for download after the session.
Recommended
More Related Content
More from Troy Miles
More from Troy Miles (20)
Recently uploaded
Recently uploaded (20)
Beginning HTML5 Mobile Game Programming with jQuery Mobile
- 1. Beginning HTML5 Mobile Game Programming with jQuery Mobile Saturday, October 13, 12
- 2. spkr8.com/t/16001 Please Rate This Talk Saturday, October 13, 12
- 3. Twitter handle: @therockncoder Saturday, October 13, 12
- 4. 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
- 5. 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
- 6. jssaturday.com Nov. 10th, Long Beach Convention Center Discount code: RiaConsultingLLC Save $65!!! Saturday, October 13, 12
- 7. What We Won’t Cover? • 3D Graphics • Audio • Multiplayer Saturday, October 13, 12
- 8. 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
- 9. 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
- 10. Why jQuery Mobile? Saturday, October 13, 12
- 11. 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
- 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
- 13. JavaScript Notes Saturday, October 13, 12
- 14. 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
- 15. HTML5 Canvas Saturday, October 13, 12
- 16. HTML5 Canvas The 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
- 17. A Sprite is not a Soda Pop Saturday, October 13, 12
- 18. A Sprite is not a Soda Pop • A Sprite is... • Sprite sheet / map • Sprite object • Sprite Engine Saturday, October 13, 12
- 19. A Sprite is... A two-dimensional image or animation that is integrated into a larger scene Saturday, October 13, 12
- 20. 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
- 21. A sprite sheet or map Saturday, October 13, 12
- 22. Sprite object • JavaScript - functions serve as Object constructors • Invoked with the new operator • Never call the constructor function directly Saturday, October 13, 12
- 23. Sprite Engine • Building a game using individual objects would be very cumbersome • Three parts • Sprite Map • Draw Method • Sprites Saturday, October 13, 12
- 24. 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
- 25. Collision Detection Saturday, October 13, 12
- 26. Collision Detection • True Collision Detection • Pseudo Collision Detection • Pseudo is faster Saturday, October 13, 12
- 27. True Collision Detection • Detects actual pixels of the sprites overlapping • Very time consuming without hardware support Saturday, October 13, 12
- 28. Pseudo Collision Detection • Looks for bounding boxes overlapping • Or circles intersecting • Is much faster than true collision detection Saturday, October 13, 12
- 29. Input Saturday, October 13, 12
- 30. 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
- 32. Debugging • The Challenge • Google and Apple to the Rescue • Demo Saturday, October 13, 12
- 34. 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
- 35. 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
- 36. Next Steps Saturday, October 13, 12
- 37. Next Steps • Download the code • Add sound and other enhancements • Join me on Google+ for more game making presentations Saturday, October 13, 12