Beginning HTML5 Mobile Game Programming
Upcoming SlideShare
Loading in...5
×
 

Beginning HTML5 Mobile Game Programming

on

  • 1,939 views

HTML5 is the hottest buzzword on the web. It gives a lot of new features to websites, so many in fact that it makes it possible to create a fairly decent game in the browser without using a ...

HTML5 is the hottest buzzword on the web. It gives a lot of new features to websites, so many in fact that it makes it possible to create a fairly decent game in the browser without using a proprietary solution like Flash. Now, we aren't talking about a sequel to Call of Duty, but instead a casual game more in the vein of Bejeweled. When you combine HTML5 with jQuery Mobile you have a great platform for making games which can be played on all of the latest and greatest 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.

Statistics

Views

Total Views
1,939
Slideshare-icon Views on SlideShare
1,924
Embed Views
15

Actions

Likes
1
Downloads
37
Comments
0

1 Embed 15

http://speakerrate.com 15

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Beginning HTML5 Mobile Game Programming Beginning HTML5 Mobile Game Programming Presentation Transcript

    • Beginning HTML5 Mobile Game Programming SiliconValley Code Camp 5 October 2013 Thursday, October 3, 13
    • Please RateThisTalk http://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 Won’t Cover? • 3D Graphics • Audio • Multiplayer 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
    • TheViewport • 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 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 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 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 not a Soda Pop 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
    • A sprite sheet 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 ofVision • 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 RateThisTalk http://spkr8.com/t/26291 Thursday, October 3, 13