Pure

Imagination

Getting Your HTML5 Game Windows 8 Ready with WinJSFrédéric Harper@fharperhttp://outofcomfortzone.net

Get Social at Pure Imagination

Chat about this session and ask questions on Twitter and Facebook.

w8pi.ca/PIonFB

@purelyimagineUse #Win8PI

#GMG

#Win8PI2

• Windows 8• WinJS• Application Structure• Navigation• Data Binding• App Bar Integration

Agenda

Windows 8

Windows reimaginedA new Windows UI where touch is a first-class citizen along with full mouse-and-keyboard support

New development models built on WinRT, including native support for HTML/CSS/JS, C#/XAML, C++/DirectX

Designed from the chipset up for multiple form-factors – tablets, laptops, desktops & all-in-ones

The Windows Store on every device with a full commerce platform and flexibility

Paid downloads, trials, and in-app purchases. You keep 70% of the first $25k, 80% of the rest

Microsoft Confidential 7

Robust analytics for free, including demographics, reviews, referrals, and usage & performance statistics

Use your own commerce engine and keep 100%or use the Windows Store’s full commerce platform

The Windows Store

Advertise with Microsoft Advertising or your preferred ad vendor.

Opportunity

As of March 2012, IDC

690M

Windows 7

345M

Android

196M

iOS

32M

Mac

Unprecedented Reach

100+languages

Store & Apps in:

200+markets

Buy from:

70+ markets ( including top 40 by GDP)

Local pricing & settlement:

Tools

Windows 8

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Windows 8 Store Apps

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

XAML HTML / CSS

HTMLJavaScri

ptCSS

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Syst

em

Serv

ices

Vie

wM

od

el

Contr

olle

rC

ore Windows Core OS Services

Communication

& Data

Application Model

Devices & Printing

Graphics & Media

Syst

em

Serv

ices

Core

All the good the stuffCSS 2D Transforms

CSS 3D Transforms

CSS Animations

CSS Backgrounds & Borders

CSS Color

CSS Flexbox

CSS Fonts

CSS Grid

CSS Hyphenation

CSS Image Values (Gradients)

CSS Media Queries

CSS multi-column Layout

CSS Namespaces

CSS OM Views

CSS Positioned Floats (Exclusions)

CSS Selectors

CSS Transitions

CSS Values and Units

Data URI

DOM Element Traversal

DOM HTML

DOM Level 3 Core

DOM Level 3 Events

DOM Style

DOM Traversal and Range

DOMParser and XMLSerializer

ECMAScript 5

File Reader API

File Saving

FormData

HTML5 Application Cache

HTML5 async

HTML5 BlobBuilder

HTML5 Canvas

HTML5 Drag and drop

HTML5 Forms and Validation

HTML5 Geolocation

HTML5 History API

HTML5 Parser

HTML5 Sandbox

HTML5 Selection

HTML5 semantic elements

HTML5 track

HTML5 video and audio

JavaScript Typed Array

ICC Color Profiles

IndexedDB

Page Visibility

Pointer (Mouse, Pen, and Touch) Events

RequestAnimationFrame

Navigation Timing

Selectors API Level 2

SVG Filter Effects

SVG, standalone and in HTML

Web Messaging

Web Sockets

Web Workers

XHTML/XML

XMLHttpRequest (Level 2)

XMLHttpRequest CORS

Windows Library for JavaScript (WinJS)library for building apps using JavaScript

Web technologies you’re already familiar with

Utilities and patterns for responsive, reliable apps

Use interactive design tools

Build your apps fast and with high quality

Matches the Windows 8 design style

Controls for common user experiences

Designed for touch as well as traditional input

Scales across form factors

Make your apps look and feel great

WinJSHelpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

Everyday widgetsButton

Checkbox

Combo Box

Date PickerRadio Button

Hyperlink

ListBox

Ratings

Progress Bar

Progress Ring

Time Picker

Toggle Switch

Slider

Windows 8 Animation LibraryContains key Windows Store app animationsHas the same storyboard values, curves, and even the same API that Windows uses

Aligns your app to the Windows 8 personality

Animation Library Scenarios

Content enterContent/exitContent Expand/collapse Peek

Reveal/Hide UI showEdgeUI/hideEdgeUI showPanel/hidePanelshowPopup/hidePopup

NavigationenterPage/exitPage

SelectionPointer animationsSwipe select/swipe deselectSwipe reveal

CollectionsAddItemToList Delete item from list

Demo

Prefer your own library? Go ahead! Adhere to the Windows UI and personality

Understand our web context & sandboxing model

Mix & match works fine

Design for Multiple Views

Widescreen (1366x768+) Snap view (required)Minimum (1024x768)

Portrait

People multi-task. An application can be displayed any one of these layouts:

Scaling

Watch BUILD talk APP-207T/847T Reach your customers’ devices with one beautiful HTML5/XAML user interface

PCs will have a wide range of screen sizes and resolution

Use fluid layout (e.g. -ms-grid control, ListView control) to take advantage of screen real estateScale to fit (e.g. viewbox control) for fixed layoutsUse the VS simulator to see how your app will look on different machinesSystem-provides automatic scaling based on resolutionUse scalable vector graphics, or Provide 3 sizes of assets (100%, 140%, 180%) and use resource loading for bitmap format images

Screen sizes

10” 1024x76813” 1400x105020” 1920x108030” 2560x160011.6” 1366x768

Screen sizes

The minimum app resolution is 1024x768 A good place to start designing your app is 1366x768Apps take advantage of added screen real-estateShow more contentManage white spaceUse the VS simulator to see how your app will look on different machines

HTML5 game demo

Page structure

Page Structure

Navigation Project Template

Porting your HTML5 Game

Adding Pages

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

Demo

Data binding

Data Binding with WinJS.Binding.List

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);

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

Styling the Template

App Bar

Content Before Chrome

Content comes first. Immerse users in the things they loveLeave only the most relevant elements on screen to minimize distractions

Traditionally chrome is added for:1. Layout2. Interactions3. Navigation

Demo

<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

Demo

Get notified about upcoming CreateJS

Workshops in Canada!

aka.ms/createjsworkshops

CreateJS.com

Ressources

Windows Dev Center http://dev.windows.com

Build New Games: http://buildnewgames.com/

From zero to hero! Building a Windows Store game in HTML5 http://channel9.msdn.com/Events/Build/2012/3-110

Developing, deploying, and monetizing Windows Store games with Unity http://channel9.msdn.com/Events/Build/2012/3-135

Doing a Windows 8 game?

Ping me fredh@Microsoft.com

Microsoft is committed to protecting your privacy. Survey responses are collected by Poll Everywhere, a market research company commissioned 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.

Session Evaluation

Submit your session eval at

Your feedback matters. We listen to your comments and feedback in order to continue to improve these types of sessions.

Session Eval

w8pi.ca/gmg2eval

Questions

Frédéric Harper

fredh@microsoft.com@fharper

http://webnotwar.cahttp://outofcomfortzone.net