Beginning HTML5 Mobile Game Programming

Beginning HTML5 Mobile Game Programming

Silicon Valley Code Camp5 October 2013

Thursday, October 3, 13

Please Rate This Talkhttp://spkr8.com/t/26291


http://spkr8.com/t/22971




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: [email protected]


mailto:[email protected]

mailto:[email protected]

Who are you?I am assuming you are familiar with web programming. Have some knowledge of JavaScript. And that you like games.


What We Won’t Cover?• 3D Graphics

• Audio

• Multiplayer


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


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


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


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


Great for Games Like:

• Angry Birds

• Plants vs. Zombie

• 80’s arcade games

• Casual games in general

• Not 1st person shoots


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.


Why jQuery Mobile?

• Finger friendly UI

• Follows normal HTML syntax

• Easy page navigation

• Standardizes input events


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


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


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


The Canvas


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>


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()


A Sprite is not a Soda Pop


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


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


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>


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


A sprite sheet


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


Sprite Engine

• Building a game using individual objects and functions would be very cumbersome

• Three parts

• Sprite Map

• Draw Method

• Sprites


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


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


Drawing

• Save the context

• Move the origin to the center of the sprite

• Perform transforms

• Draw the sprite

• Restore the context


Collision Detection

• Can be very time consuming

• Must weigh accuracy against speed

• Pixel Collision Detection

• Pseudo Collision Detection


Pixel Collision Detection

• Detects actual pixels of the sprites overlapping

• Very time consuming without hardware support


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


Input

• Mobile devices don’t have keyboards, mice, or game controllers

• We use the touchstart event

• And the click event for desktop support


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


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


Debugging

• Used to be challenging

• Both Apple and Google have added remote debugging

• Can also use a desktop browser


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


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


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/


http://jquerymobile.com

http://jquerymobile.com

http://www.html5rocks.com/en/

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/




The RocknCoder

• http://therockncoder.blogspot.com

• http://www.youtube.com/user/rockncoder

• https://github.com/Rockncoder

• http://www.slideshare.net/rockncoder


http://therockncoder.blogspot.com/2012/10/my-iphone-5-nightmare.html

http://therockncoder.blogspot.com/2012/10/my-iphone-5-nightmare.html

http://www.youtube.com/user/rockncoder?feature=mhee




http://www.slideshare.net/rockncoder

http://www.slideshare.net/rockncoder

Next Steps

• Download the code

• Get it working

• Add sound and other enhancements


Please Rate This Talkhttp://spkr8.com/t/26291






Beginning HTML5 Mobile Game Programming

Technology