Post on 18-Oct-2014
description
Pure
Imagination
Extending Your Game with Windows 8 FeaturesFré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
#Win8PI4
• Design for touch• Accelerometer• Snapped View• User Profile Data• Contracts• Live Tile• Monetize your apps
Agenda
Design for touch
Design for Touch FirstDesign with hands and fingers in mindHit targets should be sized and spaced for touch, your finger is not a pointerDesign with comfort, ergonomics and occlusion in mind
Design for Touch FirstDesign with hands and fingers in mind
Interaction areas Reading areas
Touch Platform Goals
Unify touch mouse and pen into a single pointer input AP
Express the touch interaction language in the platform
“Code for touch, get mouse and pen for free!”
MSPointer
MSPointerDown, MSPointerUpMSPointerMoveMSPointerOver, MSPointerOut, MSPointerHoverMSPointerCancel
Basic DOM pointer events:
Derives from the same event class
Includes capture/bubble phase
Pointer events behave similarly to mouse events
Position (in the usual choice of coordinate systems)
Pointer type (touch, mouse, pen)
Contact id
Commonly used event properties:
Demo
Accelerometer
The Accelerometer
accelerometer.addEventListener("readingchanged", function(evt){ // handle change});
When the Application loads, we need to setup the accelerometer device. This is done in the app.onactivated event.
The report interval specifies in milliseconds how often the device will update the accelerometer data.
accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault(); if (accelerometer !== null) { //accelerometer available on device // Establish the report interval var minimumReportInterval = accelerometer.minimumReportInterval; var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16; accelerometer.reportInterval = reportInterval; }
Accelerometer Setup
Snapped View
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
User Profile data
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
Demo
Contact contract
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});
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
Demo
Share
People love to share
Share provides a lightweight,
in context experience for
app to app sharing
From source to target
Demo
Data package Plain text Formatted text URI HTML Images Files Custom data formats
Share sourcedataTransferManager.addEventListener("datarequested", function (e) {…// Common propertiesvar request = e.request;request.data.properties.title = "Title for data"; request.data.properties.description = "Description of the data"; request.data.properties.thumbnail = thumbnail; // of type StreamReference
// Common methods request.data.setText("Text to share");request.data.setHtml("<HTML …>");request.data.setUri(uri /* of type Uri */);request.data.setBitmap(stream /* RandomAccessStream */);
// Custom data request.data.setText("FormatID", "Text to share");request.data.setData("FormatID", datastream /* RandomAccessStream */);
Share source example// set up data transfer managervar dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
// create event listener to be called on to fill out data packagedataTransferManager.addEventListener("datarequested", function (e) {// fill in data package with what to sharevar request = e.request;request.data.properties.title = "Title for data"; request.data.properties.description = "Description of the data"; request.data.setText("Text to share");...});
Share target example<!– extension needs to be added to package.appxmanifest --><Extensions>
<Extension Category="windows.shareTarget" StartPage="shareTarget.html">
<ShareTarget><SupportedFileTypes><FileType>.jpg</FileType>
</SupportedFileTypes><DataFormat>text</DataFormat>
</ShareTarget></Extension>
</Extensions>...// activation function in shareTarget.jsfunction activated(e) {
if (e.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
share = e.shareOperation;document.querySelector('.metadata h1').textContent = share.data.properties.title;document.querySelector('.metadata p').textContent = share.data.properties.description;
Demo
Settings
Settings contractprovides quick,
consistent, in-context access
to settings in your app
Add a settings page function scenario2AddSettingsFlyout() { WinJS.Application.onsettings = function (e) { e.detail.applicationcommands = { "helpDiv": { title: "Help",
href: "/html/2-SettingsFlyout-Help.html" } }; WinJS.UI.SettingsFlyout.populateSettings(e); };}
Demo
Live tile
Demo
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
Demo
Monetize your game
Flexible monetization models
Existing relationship
Subscriptions
Consumable purchases
Use Your Existing Commerce
Use our ad system
Bring your own
Ad Supported
Time limited trials
Feature differentiated trials
One time Purchase
Persistent purchases
Expiring purchases
Purchases over time
Trials Matter
70x
downloads
10%
conversion
10x
revenue
Windows Phone Developer blog, March 2011
Trials in Windows 8
Time limited Feature differentiated
Time-based trials
/* No code*/
Trial conversion(JS)// get current productvar currentProduct = Windows.ApplicationModel.Store.CurrentProduct;
// get the license informationvar licenseInformation = currentProduct.licenseInformation;// check to see if the user has an active non-trial license
if (licenseInformation.isTrial) { // user has trial version of the application // prompt them to purchase before so we can enable full functionality
currentProduct.requestAppPurchaseAsync().then( function () { // Purchase succeeded
EnableFullFunctionality(); });
}
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 MS
SDK
In-App Purhase(JS)// can’t do in-app purchase in trial mode, must convert first if (!appLicensingInformation.isTrial) { //load the listings with all the products currentApp.loadListingInformationAsync().then( function (listing) {
//lookup a specific product var product1 = listing.productListings.lookup("product1"); if (!product1.isActive) {
// purchase currentApp.requestProductPurchaseAsync("product1“, false ).then(
enableProduct1 ); }
});
Where to go from here
Combo System: Keep track of Hikers hit by each Snowball and reward the player for massive combos
Power-ups:Add other objects on the map to hit that make your Yeti stronger
Different Hikers:Hikers that have different paths or take multiple hits
Different Levels:Adding in different mountains for the Yeti to defend.
Game Features
Share Screenshots of the game with the Share Charm.
Customize the style of the App Bar.
In-App Purchases
Cropping and editing of profile, and contact images.
Extend the Settings charm.
Windows Features
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/gmg4eval
Questions
Frédéric Harper
fredh@microsoft.com@fharper
http://webnotwar.cahttp://outofcomfortzone.net