Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS


Published on

You already created an HTML5 game, and you want to make it a Windows 8 game to get all the benefits of this new platform? The recipe is simple: take your HTML5 games, add some WinJS dressing, use Visual Studio to make these stick together, and get in the Windows Store oven to get a perfectly cooked app!

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • DO NOT brush over this slide. Pure Imagination is as much a social event as it is a technical event. Get people talking and sharing. Remind them of this and encourage them to LIKE the page or follow on twitter if they haven’t done so already. Ensure that they use the right hashtag when tweeting. Also clarify that in the FB address, it is “pee-eye” on “pee-elle”.
  • Fill in your session code. Your track owner will provide this to you. The final hashtag should look like #[track][code] #Win8PI. Eg. #DES1 #Win8PI.
  • Windows reimaginedFor consumers, for developers
  • [Speak to bullets as presented above]Analytics DetailsKey pivots:Audience demographics (age, gender, country)Device class (tablet, laptop, etc.)Paid vs. FreeKey MeasuresVol. of apps (download and submissions)Top grossingTop AppsRatingsReviewsApp quality (hangs, crashes)App performance (relative to category/sub-category)Referrals (how did people discover your app?)
  • Windows is, by far, the largest platform in the world. There are over a billion Window PCs in current use, including 500m Windows 7 devices as of last December. In fact, over the last two years, there have been more Windows licenses sold than Android, iOS and Macs combined.Every Windows 7 PC can run Windows 8Most Windows licenses are sold with a new PCThis is a huge developer opportunity..
  • We are everywhere.Mention localization. You can capitalize on that and make a lot more money. NOTE: YOU MUST READ THIS BLOG POST FOR YOUR LOCAL DETAILS Buy from 231 markets.. 45 market-specific app catalog..sLocal pricing in 40 markets *** Developer payments in 51 markets.. Is not in slide, keep it relevant to locale **
  • You are here !! The focus will be HTML/JS… Click… But do remember WInRT is helping.. And is available to provide infrastructure.. We will see a little bit of WinRT in action in some demos
  • Talking Track:IE10 is the next step in hardware-accelerated standards with 33 new standards supported (3x more than IE9). It’s easier to design your site layout including flexbox, grid, animations, and transitionsDrag and drop, forms, and FileAPI make the web feel more like native applicationsSandbox, IndexedDB and a new set of Performance APIs help you build faster, more secure sites with large data setsChanges between IE9 to IE10 also demonstrate how standards-based technologies evolve:WebSockets is a great example of this, which delivers real-time notifications and updates in the browser. The spec has made significant progress in the past months in working groups like the W3C. Microsoft tests and vets specs like WebSockets in our HTML5 Labs and has contributed over 456 new test cases since IE9 launch. In this case, WebSockets was stabilized and recommended to the Internet Engineering Steering Group for final approval. It was included into IE10 through our platform previewsLinks:List of IE10 supported standards ( web sockets ( Labs ( Testing Center (
  • Now we can get into the details.. Again, since the platform is HTML you can take advantage of the HTML DOM elements.. WinJS has CSS that customizes the look & feel of standard DOM elements to match the Windows personality..
  • Don’t forget to mention these are optimized too.. We have ensured the library is all independent animation.. Also, explain to the users that if they need their own animations for their own controls, they can still use the core animations for their own controls.. Use the default
  • Become familiar with these by running the animation demo first.
  • If you prefer to use your own library, you can. As long as your app is compliant with SDK, you will be fine.. At build, we explicitly wrote a sample (finance) using jQuery… It works very well.. If you are bringing your own library, here is the advise that I can give you:Mix & Match works fine. WinJS does a lot of things well, such as simplifying the object model, wrappers for file system, implementing the promise pattern, etc.. Use WinJS for all of that.. Use your favorite library for everything else, but do try to adhere to the Windows UI and the Windows personality. Your users will appreciate it if you do..
  • Your app can be displayed in any of the following sizes:Snapped: 320x768 (a minimum of 1366x768 is required to support snapped view)Full screen landscape / filled: minimum 1024x768Full screen portrait: minimum 768x1024Although there are an infinite number of supported sizes, it is important to verify your application in the most common application dimensions, namely:1024px by 768px1366px by 768px
  • As screen’s pixel density increase, UI elements will get smallerTo maintain consistent physical sizes of UI elements for touchability and readability, the system automatically scales UI up by 1.4x or 1.8x based on DPI & resolution
  • Inside of windows 8 we have the ability to make a more immersive app. And visual studio helps by giving us templates for a single page application.The application starts on the default.html page. This page has a container called contenthost. On page navigation instead of switching to a page, the application inserts the new page data into the contentHost container.This creates a fast and smooth experience, and allows scripts and data to be shared across pages.
  • We want to start our project using the Navigation App project template. You can find the Navigation App template under “javascript” in the New Project menu The template will give you an empty application to transfer the existing html5 game into.This will allow us to easily build out the different sections of our app
  • Porting your game is as easy as dropping your game assets into your new Visual Studio project. For YetiBowl we created a separate folder called GameLibrary to hold all of our game specific code.NOTE: if you did the live preview you used a blank up, but here we are preparing to add new features that can only be done inside an app, so we are using navigation to build different pages.
  • To add another page to the application:In the solution explorer, right click the pages folder and select New Folder. Name it “game.html”Right click the game folder and select Add > New Item.Select Page Control and use the name “game.html” and hit AddThis will generate three files: “game.html”, “game.js” and “game.css”Game.html will be document that your game canvas will liveFor this application we want to give the user the ability to add there own customized hikers to the game.We can repeat these steps to add a few pages for adding and editing hikers
  • Inside the package.appxmanifest file is where you will want to define your logos, names, splash screens and other key features of your app.Your app will not pass store certification unless you have customized the data in this file.NOTE: if you did the demo build on the app, you may not need to get into many details here, if not, besure you walk through requirements for logos, splashscreen etc..
  • WinJS is a library that visual studio adds for you to your windows 8 projects. Although it’s not a necessary component for an app, it provides you will many helpful APIs and utilities.
  • Were still using web technologies inside the app, so we are still using hyperlinks, but we want them to navigate in between our pages instead of to different websites.We want to override the links normal behavior and use WinJS.Navigation instead. We can do this by binding a click event to all links and calling “WinJS.Navigation.navigate”Now links load there content into our default.html page
  • This method is helpful to define blocks of script that you want to execute per page.This function is what we use to trigger the startgame() method, when a user navigates to the game page in the ready event.
  • One of our advanced features in this game, is the ability to customize your hikers. Hikers are saved as local data.We need to create a global list of hikers that we can display, add/edit and then use as a data source for our in game hiker characters. First we're going to create a WinJS.Binding.List and populate it with some default hikers.
  • This function allows you to create your own namespace as a way of organizing your code.To be able to access your methods or data objects from external sources (buttons in the DOM or other classes), it needs to have a public name space.This is another features that we get for free with “WinJS”
  • Now that we have our hikers data structure, we want to display our list of hikers using the WinJS.UI.ListView like this.
  • Using this binding list we can create a WinJS.UI.ListView in hikers.htmlWe pass in a few options to the controlitemDataSource: this tells the control where its data source comes fromitemTemplate: the template that should be rendered for each item (we will create this next)
  • the “win-data-bind” attribute lets you bind data from each item to DOM properties in template elements.
  • Inside the pagename.js file that is loaded when this file is linked to, a simple method called “WinJS.UI.processAll()” is called.This reviews the page and executes the templates, in this case building the views from the data object.
  • Using CSS you can change the template to look however you like
  • The shift in focus is crucial – it means that the users, instead of remembering how to use the software, are remembering the content – the news story they read about, the social updates from their friends, the products they are shopping for.
  • Windows 8 is about putting the app on the center stage. Content is the heart of any experience, and everything else are only tools to let you consume and interact with your contentIt’s important to think about how to leverage this real estate and place content first, so that users can actually be immersed in the things they love.Where does chrome come from? LayoutCommandsNavigationLet’s look at how we handle these in a Content first world
  • The app bar can give contextual commands to your ListView control.We will add our app bar to hikers.html
  • To add a command to the AppBar is simple
  • - id: this sets the id attribute - label: the text under the command - icon: the icon style
  • Attaching events to commands can be done with addEventListener
  • As the speaker of the session, we’ll depend on you encourage folks to submit their session evaluation. It is in the best interest of both you and the Pure Imagination team to get the details. For you, to know how your content and presentation skills landed, and for the Pure Imagination team to see which sessions did well for repeats and which sessions may need tweaking for future presentations.To facilitate getting the data, Pure Imagination is using Poll Everywhere. Since it is an external company, this slide must be shown to attendees and virtual followers. You can summarize verbally by saying “I’m required to show this to you. The gist is that for your evals, Pure Imagination is using a service called Poll Everywhere and as part of submitting your eval, there is absolutely no collection of personal information, etc.”
  • Fill in the URL with your session code. Your track owner will provide this to you. The final URL should look like[track][code]eval. Eg. For aesthetic purposes, do not include “http://” at the beginning of the URL.
  • Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS

    1. 1. Pur Imaginatio e nGetting Your HTML5 Game Windows 8 Ready withWinJSFrédéric Harper@fharper
    2. 2. Pure Imagination
    3. 3. #GM 2 #Win8PIG
    4. 4. Windows 8
    5. 5. Windows reimaginedA new Windows UI where touch is a first-class Designed from the chipset up for multiple form-citizen along with full mouse-and-keyboard factors – tablets, laptops, desktops & all-in-onessupportThe Windows Store on every device with a full New development models built on WinRT, includingcommerce platform and flexibility native support for HTML/CSS/JS, C#/XAML, C++/DirectX
    6. 6. The Windows StorePaid downloads, trials, and in-app purchases. You Use your own commerce engine and keep 100%keep 70% of the first $25k, 80% of the rest or use the Windows Store’s full commerce platformAdvertise with Microsoft Advertising or your Robust analytics for free, including demographics,preferred ad vendor. reviews, referrals, and usage & performance statistics Microsoft Confidential 7
    7. 7. Opportunity As of March 2012, IDC
    8. 8. Unprecedented Reach
    9. 9. Tools
    10. 10. CSS 2D Transforms DOM HTML HTML5 SelectionCSS 3D Transforms DOM Level 3 Core HTML5 semantic elementsCSS Animations DOM Level 3 Events HTML5 trackCSS Backgrounds & Borders DOM Style HTML5 video and audioCSS Color DOM Traversal and Range JavaScript Typed ArrayCSS Flexbox DOMParser and XMLSerializer ICC Color ProfilesCSS Fonts ECMAScript 5 IndexedDBCSS Grid File Reader API Page VisibilityCSS Hyphenation File Saving Pointer (Mouse, Pen, and Touch) EventsCSS Image Values (Gradients) FormData RequestAnimationFrameCSS Media Queries HTML5 Application Cache Navigation TimingCSS multi-column Layout HTML5 async Selectors API Level 2CSS Namespaces HTML5 BlobBuilder SVG Filter EffectsCSS OM Views HTML5 Canvas SVG, standalone and in HTMLCSS Positioned Floats (Exclusions) HTML5 Drag and drop Web MessagingCSS Selectors HTML5 Forms and Validation Web SocketsCSS Transitions HTML5 Geolocation Web WorkersCSS Values and Units HTML5 History API XHTML/XMLData URI HTML5 Parser XMLHttpRequest (Level 2)DOM Element Traversal HTML5 Sandbox XMLHttpRequest CORS
    11. 11. Windows Library for JavaScript(WinJS)library for building apps using JavaScript
    12. 12. Demo
    13. 13. HTML5 game demo
    14. 14. Page structure
    15. 15. WinJS.Utilities.query("a").listen("click", function (evt) { // dont load this link in the main window evt.preventDefault(); // get target element var link =; //call navigate and pass the href of the link WinJS.Navigation.navigate(link.href);});
    16. 16. 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 }});
    17. 17. Demo
    18. 18. Data binding
    19. 19. var 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);
    20. 20. var publicMembers = { itemList: hikerBindingList };WinJS.Namespace.define("DataHikers", publicMembers);
    21. 21. <div id="hikerListView" data-win- control="WinJS.UI.ListView" data-win-options="{ itemDataSource: DataHikers.itemList.dataSource, itemTemplate: select(‘#hikersTemplate’) }‚></div>
    22. 22. <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>
    23. 23. WinJS.UI.processAll();
    24. 24. App Bar
    25. 25. Demo
    26. 26. <div id=‚hikersAppBar" data-win-control="WinJS.UI.AppBar"></div>
    27. 27. <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>
    28. 28. <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>
    29. 29. // get add command elementvar cmdAdd = document.getElementById(cmdAdd);cmdAdd.addEventListener(click, function (ev) { // respond to add hiker command});
    30. 30. Demo
    31. 31. Get notified about upcomingCreateJS Workshops in Canada!
    32. 32.
    33. 33. Doing a Windows 8game?
    34. 34. Ping
    35. 35. Microsoft is committed to protecting your privacy. Survey responses arecollected by Poll Everywhere, a market research companycommissioned by Microsoft to conduct this survey.• This survey does not request or collect any additional personal information from you nor does this survey use any cookies or other technologies to track your responses to the survey.• Your responses to this survey will not be linked to the contact information previously collected by Microsoft. Your answers will be reported in aggregate with those of other respondents.• This privacy statement applies only to the survey for this event or session. It does not apply to other online or offline Microsoft sites, surveys, products, or services.
    36. 36. Submit your session eval