Beginning HTML5 Mobile Game Programming with jQuery Mobile

  • 10,121 views
Uploaded on

For more cool mobile tutorials, be sure to visit my blog: http://therockncoder.blogspot.com/ …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,121
On Slideshare
0
From Embeds
0
Number of Embeds
49

Actions

Shares
Downloads
81
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Beginning HTML5 Mobile Game Programming with jQuery MobileSaturday, October 13, 12
  • 2. spkr8.com/t/16001 Please Rate This TalkSaturday, October 13, 12
  • 3. Twitter handle: @therockncoderSaturday, 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/rockncoderSaturday, 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 • FreeSaturday, 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 • MultiplayerSaturday, 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 • DebuggingSaturday, 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 FasterSaturday, 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 lazySaturday, October 13, 12
  • 13. JavaScript NotesSaturday, 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 downSaturday, October 13, 12
  • 15. HTML5 CanvasSaturday, 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 flySaturday, October 13, 12
  • 17. A Sprite is not a Soda PopSaturday, October 13, 12
  • 18. A Sprite is not a Soda Pop • A Sprite is... • Sprite sheet / map • Sprite object • Sprite EngineSaturday, October 13, 12
  • 19. A Sprite is... A two-dimensional image or animation that is integrated into a larger sceneSaturday, 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 assetsSaturday, October 13, 12
  • 21. A sprite sheet or mapSaturday, October 13, 12
  • 22. Sprite object • JavaScript - functions serve as Object constructors • Invoked with the new operator • Never call the constructor function directlySaturday, October 13, 12
  • 23. Sprite Engine • Building a game using individual objects would be very cumbersome • Three parts • Sprite Map • Draw Method • SpritesSaturday, October 13, 12
  • 24. Drawing • Save the context • Move the origin to the center of the sprite • Perform transforms • Draw the sprite • Restore the contextSaturday, October 13, 12
  • 25. Collision DetectionSaturday, October 13, 12
  • 26. Collision Detection • True Collision Detection • Pseudo Collision Detection • Pseudo is fasterSaturday, October 13, 12
  • 27. True Collision Detection • Detects actual pixels of the sprites overlapping • Very time consuming without hardware supportSaturday, October 13, 12
  • 28. Pseudo Collision Detection • Looks for bounding boxes overlapping • Or circles intersecting • Is much faster than true collision detectionSaturday, October 13, 12
  • 29. InputSaturday, 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 doSaturday, October 13, 12
  • 31. DebuggingSaturday, October 13, 12
  • 32. Debugging • The Challenge • Google and Apple to the Rescue • DemoSaturday, October 13, 12
  • 33. ReferencesSaturday, 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/rockncoderSaturday, 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 StepsSaturday, October 13, 12
  • 37. Next Steps • Download the code • Add sound and other enhancements • Join me on Google+ for more game making presentationsSaturday, October 13, 12