game on! with html5
DESCRIPTION
Game On! With HTML5. AUTHD on oreilly.com. 40% off print book and 50% off the ebook . How a Game Works. Frame 3. Frame 4. Frame 1. Frame 2. Time Passed. The Canvas Element. < canvas id =" game_canvas ">. DOM Structure. DOM Structure. # container. # game_canvas. - PowerPoint PPT PresentationTRANSCRIPT
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