Game On! With HTML5

1. Game On!With HTML5

2. AUTHDon oreilly.com 40% off print book and 50% off the ebook.

3. How a Game Works Frame 3 Frame 4 Frame 1 Frame 2 Time Passed

4. The Canvas Element • <canvasid="game_canvas"></canvas>

5. DOM Structure DOM Structure #container #game_canvas #snowball_btn

6. DOM – Code Example DOM – Code Example <divid="container"> <canvasid="game_canvas"width="768"height="1366"></canvas> <divid="snowball_btn"onclick="game.system.dominput.snowball();"></div> </div>

7. 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 */ }

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

9. Drawing Images to a Canvas Example 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 Canvas 100px 256px 50px 256px 261px 261px Source

10. Keyboard Input Building Blocks Animation Logic Inputs Entities Collision

11. Entities

12. Collision Update Not colliding. Colliding.

13. Sound varaudiosample = new Audio("media/Sounds/path.mp3"); audiosample.play();

14. Performance • 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.

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

16. demo Windows 8 app

17. Page Structure

18. Navigation Project Template

20. WinJS

21. Overriding Link Behavior WinJS.Utilities.query("a").listen("click", function (evt) { // dont load this link in the main window evt.preventDefault(); // get target element varlink = evt.target; //call navigate and pass the href of the link WinJS.Navigation.navigate(link.href); });

22. WinJS.UI.Pages.define WinJS.UI.Pages.define 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 } });

23. Data Binding with WinJS.Binding.List Data Binding with WinJS.Binding.List varhikerArray = [{ 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', … } ]; varhikerBindingList = newWinJS.Binding.List(hikerArr);

24. WinJS.Namespace.define WinJS.Namespace.define varpublicMembers = { itemList: hikerBindingList }; WinJS.Namespace.define("DataHikers", publicMembers);

25. WinJS.UI.ListView WinJS.UI.ListView

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

27. Define the template Define the Template <divid="hikersTemplate"data-win-control="WinJS.Binding.Template"> <divclass=“template_item"> <divclass=“img_wrap"> <imgclass="face"data-win-bind="src: face_img"/> <imgclass="body"data-win-bind="src: body_img"/> </div> <divclass=“overlay"> <divclass=“text"data-win-bind="innerText: title"></div> </div> </div> </div>

28. Define the template Define the Template WinJS.UI.processAll();

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

30. Adding commands to the AppBar Adding Commands to the AppBar <divid=“hikersAppBar"data-win-control="WinJS.UI.AppBar"> <buttondata-win-control="WinJS.UI.AppBarCommand"data-win-options="{id:'cmdAdd', label: 'New Hiker', icon: 'add'}"></button> </div>

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

32. Adding Functionality Adding Functionality // get add command element varcmdAdd = document.getElementById('cmdAdd'); cmdAdd.addEventListener('click', function (ev) { // respond to add hiker command });

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

34. Displaying Snapped View #snappedview{ display:none; } @mediascreenand(-ms-view-state: snapped){ #contentHost{/*hide main content*/ display:none; } #snappedview {/*show snapped view content*/ display:block; } }

35. Custom Logic for Snapview varviewStates = Windows.UI.ViewManagement.ApplicationViewState; varnewViewState = Windows.UI.ViewManagement.ApplicationView.value; if(newViewState === viewStates.snapped) { ... //Application is in snapped view };

36. Getting User Profile Data varuserInformation = Windows.System.UserProfile.UserInformation; varuserPic = userInformation.getAccountPicture(); varimg = new Image(); varimgurl = URL.createObjectURL(userPic); img.src= imgurl;

37. Using ContactPicker The contact picker launches a UI that will return a single contact.

38. Open the contact picker and handle the result // get reference to ContactPicker varpicker = Windows.ApplicationModel.Contacts.ContactPicker(); // open the picker picker.pickSingleContactAsync().then(function (contact) { // handle contact information });

39. Getting contact thumbnails Getting contact thumbnails 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; });

40. Implementing Ads using the Microsoft SDK Download the Microsoft Ad SDK: http://advertising.microsoft.com/windowsadvertising/developer <scriptsrc="/MSAdvertisingJS/ads/ad.js"></script> <divid="ad_bottom_rail“ data-win-control="MicrosoftNSJS.Advertising.AdControl" data-win-options="{applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043074'}"></div>

41. Live Tile varnotifications = Windows.UI.Notifications; vartemplate = notifications.TileTemplateType.tileWideSmallImageAndText02; vartileXml = notifications.TileUpdateManager.getTemplateContent(template); var line1 = tileXml.getElementsByTagName("text")[0]; line1.appendChild(tileXml.createTextNode(“Yeti Stats"));

42. Creating a Notification vartileNotification = newnotifications.TileNotification(tileXml); notifications.TileUpdateManager .createTileUpdaterForApplication().update(tileNotification);