Post on 06-May-2015
description
Beginning HTML5 Mobile Game Programming
Silicon Valley Code Camp5 October 2013
Thursday, October 3, 13
Please Rate This Talkhttp://spkr8.com/t/26291
Thursday, October 3, 13
Who am I?Hi, I am Troy. I have fun as a full stack programmer. I develop using ASP.NET MVC or Node.js on the backend and the web or mobile up front.
I can be reached at: rockncoder@gmail.com
Thursday, October 3, 13
Who are you?I am assuming you are familiar with web programming. Have some knowledge of JavaScript. And that you like games.
Thursday, October 3, 13
What We Will Cover?• HTML5 vs Device Apps
• Why jQuery Mobile?
• HTML5 Canvas
• A Sprite is not a Soda Pop
• The Game Loop?
• Collision Detection
• Input
• Debugging
Thursday, October 3, 13
JavaScript Notes
• Single threaded
• Functions are first class constructs
• Objects are dynamic, can be modified at run-time
• Programs must return control to the browser or be shut down
Thursday, October 3, 13
Strict Mode
• Functional “strict mode” used heavily
• Eliminates some JS silent errors
• Fixes some JS mistakes
• Will tend to run faster than non strict mode code
Thursday, October 3, 13
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
Cross Platform Good luck
Restricted device access Full access to device hardware
Slower Faster
Thursday, October 3, 13
Great for Games Like:
• Angry Birds
• Plants vs. Zombie
• 80’s arcade games
• Casual games in general
• Not 1st person shoots
Thursday, October 3, 13
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.
Thursday, October 3, 13
Why jQuery Mobile?
• Finger friendly UI
• Follows normal HTML syntax
• Easy page navigation
• Standardizes input events
Thursday, October 3, 13
The Viewport
• By default mobile browser scale web pages
• A single line meta tag near top of HTML
• Sets the relationship between CSS & device pixels
• Turns “tap to zoom” on/off
• Can equalize display differences
Thursday, October 3, 13
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
Thursday, October 3, 13
HTML5 Canvas
• Like a dynamic version of the image tag
• Displays a modifiable bitmap
• Has width and height attributes
• Takes CSS stylings like other HTML tags
Thursday, October 3, 13
The Canvas 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>Module 1</title> 6 <meta charset="utf-8"/> 7 <meta name="viewport" content="width=device-width, initial-scale=1"/> 8 <meta name="apple-mobile-web-app-capable" content="yes"/> 9 </head>10 11 <body>12 <canvas id="myCanvas" width="300" height="300" style="background-color:#6495ed;">13 <strong>[Your browser can not show this example.]</strong>14 </canvas>15 <script>16 </script>17 </body>18 </html>
Thursday, October 3, 13
What is the Context?
• The context allows access to the API
• There are many methods in the API
• Most important to us are: translate(), rotate(), and drawImage()
Thursday, October 3, 13
A Sprite is...
• A two-dimensional image or animation that is integrated into a larger scene
• Built from a png image
• We use png files since they support transparency
Thursday, October 3, 13
A Sprite is...
• A two-dimensional image or animation that is integrated into a larger scene
• Built from a png image
• We use png files since they support transparency
PNGs let the back shine through
JPGs don’t
Thursday, October 3, 13
Loading an Image
• Two ways to load an image
• Using HTML: <img src=”aShape.png”/>
• Using JavaScript:1 <script>2 var shape = new Image();3 4 /* called once the shape is loaded into memory */5 shape.onload = function () {};6 /* load the shape into memory */7 shape.src = "onePlane.png";8 9 </script>
Thursday, October 3, 13
A sprite sheet
• Is a collection of sprites in a single file
• Reduces the number of files to download
• Makes it easier to maintain and modify assets
Thursday, October 3, 13
Sprite object
• Directly manipulating each image on the canvas would be challenging
• The sprite object takes care of the grunt work
• Invoked with the new operator
• Never call the constructor function directly
Thursday, October 3, 13
Sprite Engine
• Building a game using individual objects and functions would be very cumbersome
• Three parts
• Sprite Map
• Draw Method
• Sprites
Thursday, October 3, 13
Persistence of Vision
• Traditionally games use a loop as the main construct
• This is not possible in the browser
• If you don’t release control, the browser will take it
• Rendering only occurs when the browser has control
Thursday, October 3, 13
The Game Loop
• The heart of the game loop is setInterval() method
• setInterval(function, delay)
• 30 frames per second is needed for smooth animation
• This works out to about 33 milliseconds per frame
Thursday, October 3, 13
Drawing
• Save the context
• Move the origin to the center of the sprite
• Perform transforms
• Draw the sprite
• Restore the context
Thursday, October 3, 13
Collision Detection
• Can be very time consuming
• Must weigh accuracy against speed
• Pixel Collision Detection
• Pseudo Collision Detection
Thursday, October 3, 13
Pixel Collision Detection
• Detects actual pixels of the sprites overlapping
• Very time consuming without hardware support
Thursday, October 3, 13
Pseudo Collision Detection
• Also called “bounding box” detection
• Looks for bounding boxes overlapping
• Or circles intersecting
• Is much faster than true collision detection
• Must tune to prevent false collisions
Thursday, October 3, 13
Input
• Mobile devices don’t have keyboards, mice, or game controllers
• We use the touchstart event
• And the click event for desktop support
Thursday, October 3, 13
The App Structure
• index.html contains all of pseudo pages
• app.js is application logic
• pages.js is code for each page
• game.js is the game code
• sprite.js is the sprite object
Thursday, October 3, 13
The Kernel
• A simple structure which hooks most jQuery Mobile events
• This allows us to pair JS code with particular events
• The kernel is smart enough to only execute the handler if it exists
Thursday, October 3, 13
Debugging
• Used to be challenging
• Both Apple and Google have added remote debugging
• Can also use a desktop browser
Thursday, October 3, 13
Emulate the Device
• We can use Chrome, Safari, or Internet Explorer
• Chrome has many new features to support mobile emulation
• But always best to run game on a device
Thursday, October 3, 13
Remote Debugging
• Both Chrome and Safari allow you to remote debug a mobile device
• With Safari must have a Mac, must be an iOS device
• With Chrome must be an Android device
• For both, device must be connected to computer
Thursday, October 3, 13
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/
Thursday, October 3, 13
The RocknCoder
• http://therockncoder.blogspot.com
• http://www.youtube.com/user/rockncoder
• https://github.com/Rockncoder
• http://www.slideshare.net/rockncoder
Thursday, October 3, 13
Next Steps
• Download the code
• Get it working
• Add sound and other enhancements
Thursday, October 3, 13
Please Rate This Talkhttp://spkr8.com/t/26291
Thursday, October 3, 13