0
Beginning HTML5 Mobile                   Game Programming                           with jQuery MobileSaturday, October 13...
spkr8.com/t/16001                            Please Rate This TalkSaturday, October 13, 12
Twitter handle:                           @therockncoderSaturday, October 13, 12
The Rock n Coder                     • http://therockncoder.blogspot.com                     • http://www.youtube.com/user...
Google+ Hangout on Air                     • Tuesday, October 16th at 6 PM PDT                     • The first of four sess...
jssaturday.com                           Nov. 10th, Long Beach Convention                                         Center  ...
What We Won’t Cover?                     • 3D Graphics                     • Audio                     • MultiplayerSaturd...
What We Will Cover?                     •     HTML5 vs Device Apps                     •     Why jQuery Mobile?           ...
HTML5                  Device Apps                 Can migrate web skills       Longer learning curve    2D only (WebGL do...
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 ...
Why jQuery Mobile?                     • jQuery Mobile used as a framework                     • Follows normal HTML synta...
JavaScript NotesSaturday, October 13, 12
JavaScript Notes                     • Single threaded                     • Functions are first class constructs          ...
HTML5 CanvasSaturday, October 13, 12
HTML5 Canvas                 The canvas element provides scripts with a                 resolution-dependent bitmap canvas...
A Sprite is not a Soda                                    PopSaturday, October 13, 12
A Sprite is not a Soda                                    Pop                     • A Sprite is...                     • S...
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 n...
A sprite sheet or mapSaturday, October 13, 12
Sprite object                     • JavaScript - functions serve as Object                           constructors         ...
Sprite Engine                     • Building a game using individual objects                           would be very cumbe...
Drawing                     • Save the context                     • Move the origin to the center of the sprite          ...
Collision DetectionSaturday, October 13, 12
Collision Detection                     • True Collision Detection                     • Pseudo Collision Detection       ...
True Collision Detection                     • Detects actual pixels of the sprites                           overlapping ...
Pseudo Collision                              Detection                     • Looks for bounding boxes overlapping        ...
InputSaturday, October 13, 12
Input                     • Mobile devices don’t have keyboards or                           mice                     • We...
DebuggingSaturday, October 13, 12
Debugging                     • The Challenge                     • Google and Apple to the Rescue                     • D...
ReferencesSaturday, October 13, 12
The Rock n Coder                     • http://therockncoder.blogspot.com                     • http://www.youtube.com/user...
Resources                     • http://jquerymobile.com/                     • http://www.html5rocks.com/en/              ...
Next StepsSaturday, October 13, 12
Next Steps                     • Download the code                     • Add sound and other enhancements                 ...
Upcoming SlideShare
Loading in...5
×

Beginning HTML5 Mobile Game Programming with jQuery Mobile

11,349

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,349
On Slideshare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
98
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Beginning HTML5 Mobile Game Programming with jQuery Mobile"

  1. 1. Beginning HTML5 Mobile Game Programming with jQuery MobileSaturday, October 13, 12
  2. 2. spkr8.com/t/16001 Please Rate This TalkSaturday, October 13, 12
  3. 3. Twitter handle: @therockncoderSaturday, October 13, 12
  4. 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. 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. 6. jssaturday.com Nov. 10th, Long Beach Convention Center Discount code: RiaConsultingLLC Save $65!!!Saturday, October 13, 12
  7. 7. What We Won’t Cover? • 3D Graphics • Audio • MultiplayerSaturday, October 13, 12
  8. 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. 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. 10. Why jQuery Mobile?Saturday, October 13, 12
  11. 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. 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. 13. JavaScript NotesSaturday, October 13, 12
  14. 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. 15. HTML5 CanvasSaturday, October 13, 12
  16. 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. 17. A Sprite is not a Soda PopSaturday, October 13, 12
  18. 18. A Sprite is not a Soda Pop • A Sprite is... • Sprite sheet / map • Sprite object • Sprite EngineSaturday, October 13, 12
  19. 19. A Sprite is... A two-dimensional image or animation that is integrated into a larger sceneSaturday, October 13, 12
  20. 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. 21. A sprite sheet or mapSaturday, October 13, 12
  22. 22. Sprite object • JavaScript - functions serve as Object constructors • Invoked with the new operator • Never call the constructor function directlySaturday, October 13, 12
  23. 23. Sprite Engine • Building a game using individual objects would be very cumbersome • Three parts • Sprite Map • Draw Method • SpritesSaturday, October 13, 12
  24. 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. 25. Collision DetectionSaturday, October 13, 12
  26. 26. Collision Detection • True Collision Detection • Pseudo Collision Detection • Pseudo is fasterSaturday, October 13, 12
  27. 27. True Collision Detection • Detects actual pixels of the sprites overlapping • Very time consuming without hardware supportSaturday, October 13, 12
  28. 28. Pseudo Collision Detection • Looks for bounding boxes overlapping • Or circles intersecting • Is much faster than true collision detectionSaturday, October 13, 12
  29. 29. InputSaturday, October 13, 12
  30. 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. 31. DebuggingSaturday, October 13, 12
  32. 32. Debugging • The Challenge • Google and Apple to the Rescue • DemoSaturday, October 13, 12
  33. 33. ReferencesSaturday, October 13, 12
  34. 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. 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. 36. Next StepsSaturday, October 13, 12
  37. 37. Next Steps • Download the code • Add sound and other enhancements • Join me on Google+ for more game making presentationsSaturday, October 13, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×