windows 8 pure imagination - 2012-11-24 - getting your html5 game windows 8 ready with winjs
Post on 18-Oct-2014
1.711 views
DESCRIPTION
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!TRANSCRIPT
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 [email protected]
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