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.
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
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
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
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
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
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
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
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