Game On!With HTML5

AUTHDon oreilly.com

40% off print book and 50% off the ebook.

How a Game Works

Time Passed

Frame 1 Frame 2 Frame 3 Frame 4

The Canvas Element

<canvas id="game_canvas"></canvas>

#container#game_canvas

#snowball_btn

DOM Structure

<div id="container"> <canvas id="game_canvas" width="768" height="1366"></canvas>

<div id="snowball_btn" onclick="game.system.dominput.snowball();"></div> </div>

DOM – Code Example

Resize with CSS@-ms-viewport { width: device-width; height: device-height; }

OR

@media screen and (orientation: portrait) { @-ms-viewport { width: 768px; height: 1366px; } /* CSS for portrait layout goes here */}

All systems in the game have an Initialize, Update, and Draw method:

Initialize, Update, Draw pattern

Drawing the Snowball to the canvas.canvascontext.drawImage( image, //image (‘snowball.png’); 0, 0, //source position 256, 261, //source size 50, 100, //destination position(canvas) 256, 261); //destination size

Game Canvas256px

261px

50px

100px

256px

261px

Source

Drawing Images to a Canvas Example

AnimationLogicInputsEntitiesCollision

Building Blocks

Entities

Update

Collision

Not colliding.

Colliding.

var audiosample = new Audio("media/Sounds/path.mp3"); audiosample.play();

Sound

Only Draw what you Need:Any call to the canvas draw is expensive. The best way to optimize drawing is

to draw less.Hikers are composited with their custom face image to make only one draw call

instead of two. The sky is just applied to the background-img property because it is static.

Re-use Objects:Re-using objects instead of deleting them minimizes calls to the garbage

collector.

Pass only integers to the canvas draw API: Floats cause anti-aliasing to trigger.

Performance

Watch out for Audio:Audio tags take up memory that could be used for gameplay

Read as little as possible, and never read from the same canvas

Using image data is much faster than drawing

Test, test, test: Test on many devices with different processors (don’t forget about Atom and ARM)

test, test, test: Really, test at every stage!

Performance

Windows 8 appdemo

Page Structure

Navigation Project Template

WinJS

WinJS.Utilities.query("a").listen("click", function (evt) { // dont load this link in the main window evt.preventDefault();

// get target element var link = evt.target;

//call navigate and pass the href of the link WinJS.Navigation.navigate(link.href); });

Overriding Link Behavior

WinJS.UI.Pages.define("/home.html", { // This function is called whenever a user navigates to this page.

ready: function (element, options) { //run code unique to this page }

});

WinJS.UI.Pages.define

Data Binding with WinJS.Binding.Listvar hikerArray = [{ title: 'John Smith', color:'#333333', body_img:'/images/body_333333.png', face_img:'/images/default_face.png', }, { title: 'Erin Dodge', color:'#00c0ac', body_img: '/images/body_00c0ac.png', face_img:'/images/default_face.png', }, { title: 'James Parker', … } ];

var hikerBindingList = new WinJS.Binding.List(hikerArr);

Data Binding with WinJS.Binding.List

var publicMembers = { itemList: hikerBindingList };

WinJS.Namespace.define("DataHikers", publicMembers);

WinJS.Namespace.define

WinJS.UI.ListView

<div id="hikerListView" data-win- control="WinJS.UI.ListView" data-win-options="{ itemDataSource: DataHikers.itemList.dataSource, itemTemplate: select(‘#hikersTemplate’) }“></div>

WinJS.UI.ListView

<div id="hikersTemplate" data-win-control="WinJS.Binding.Template"> <div class=“template_item"> <div class=“img_wrap"> <img class="face" data-win-bind="src: face_img" /> <img class="body" data-win-bind="src: body_img" /> </div> <div class=“overlay"> <div class=“text" data-win-bind="innerText: title"></div> </div> </div></div>

Define the Template

WinJS.UI.processAll();

Define the Template

<div id=“hikersAppBar" data-win-control="WinJS.UI.AppBar"></div>

WinJS.UI.AppBar

<div id=“hikersAppBar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd', label: 'New Hiker', icon: 'add'}"></button></div>

Adding Commands to the AppBar

<div id=“hikersAppBar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd', label: 'New Hiker', icon: 'add'}"></button></div>

Command Options

// get add command elementvar cmdAdd = document.getElementById('cmdAdd');

cmdAdd.addEventListener('click', function (ev) { // respond to add hiker command});

Adding Functionality

The Accelerometer

accelerometer.addEventListener("readingchanged", function(evt){ // handle change});

Displaying Snapped View#snappedview { display:none;}

@media screen and (-ms-view-state: snapped) { #contentHost {/*hide main content*/ display:none; } #snappedview {/*show snapped view content*/ display:block; }}

var viewStates = Windows.UI.ViewManagement.ApplicationViewState; var newViewState = Windows.UI.ViewManagement.ApplicationView.value; if (newViewState === viewStates.snapped) { ... //Application is in snapped view };

Custom Logic for Snapview

var userInformation = Windows.System.UserProfile.UserInformation;var userPic = userInformation.getAccountPicture();

var img = new Image();var imgurl = URL.createObjectURL(userPic);img.src = imgurl;

Getting User Profile Data

The contact picker launches a UI that will return a single contact.

Using ContactPicker

// get reference to ContactPickervar picker = Windows.ApplicationModel.Contacts.ContactPicker();

// open the pickerpicker.pickSingleContactAsync().then(function (contact) {

// handle contact information});

Open the contact picker and handle the result

contact.getThumbnailAsync().done(function (thumbnail) { // generate a URL for the thumbnail image thumbURL = URL.createObjectURL(thumbnail);

// use thumbURL to update the src of an image for // display face_img.src = thumbURL;});

Getting contact thumbnails

Download the Microsoft Ad SDK:http://advertising.microsoft.com/windowsadvertising/developer

<div id="ad_bottom_rail“ data-win-control="MicrosoftNSJS.Advertising.AdControl"

data-win-options="{applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab',

adUnitId: '10043074'}"></div>

<script src="/MSAdvertisingJS/ads/ad.js"></script>

Implementing Ads using the Microsoft SDK

var notifications = Windows.UI.Notifications;var template = notifications.TileTemplateType.tileWideSmallImageAndText02;var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var line1 = tileXml.getElementsByTagName("text")[0];line1.appendChild(tileXml.createTextNode(“Yeti Stats"));

Live Tile

var tileNotification = new notifications.TileNotification(tileXml);

notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Creating a Notification