building windows 8 metro style casual games using html5 and javascript

49
Building Windows 8 Metro Style casual games using HTML5 and JavaScript Dave Isbitski Sr. Developer Evangelist blogs.msdn.com/davedev @thedavedev [email protected]

Upload: david-isbitski

Post on 10-May-2015

5.173 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Dave IsbitskiSr. Developer Evangelistblogs.msdn.com/[email protected]@microsoft.com

Page 2: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

AgendaHTML5, CSS3 and IE 10

HTML5 Canvas and Game Loop

Camera

Touch

Accelerometer

WinJS Controls

Page 3: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

You can build amazing sites and Metro style apps with the Windows 8 web platform

Page 4: Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Page 5: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Windows 8

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Metro style Apps

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

XAML HTML / CSS

HTMLJavaScri

pt

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

Page 6: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

HTML 5

Page 7: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

IE9 hardware-accelerated web platform

CSS 2D Transforms

CSS Backgrounds & Borders

CSS Color

CSS Fonts

CSS Media Queries

CSS Namespaces

CSS OM Views

CSS Selectors

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

HTML5 Canvas

HTML5 Geolocation

HTML5 Selection

HTML5 semantic elements

HTML5 video and audio

ICC Color Profiles

Selectors API Level 2

SVG, standalone and in HTML

XHTML/XML

Page 8: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Windows 8 hardware-accelerated web platform

CSS 2D Transforms

CSS 3D Transforms

CSS Animations

CSS Backgrounds & Borders

CSS Color

CSS Flexbox

CSS Fonts

CSS Grid Alignment

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 APIs

FormData

HTML5 Application Cache

HTML5 async

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 video and audio

ICC Color Profiles

IndexedDB

Page Visibility

Pointer (Mouse, Pen, and Touch) Events

Selectors API Level 2

Filter Effects

SVG, standalone and in HTML

Timing callbacks

Web Messaging

Web Sockets

Web Workers

XHTML/XML

XMLHttpRequest (Level 2)

Page 9: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Popular CSS3 features in Windows 8

2D & 3D transforms

Transforms Animations

Transitions

MotionGrid

Flexbox

Layout

Gradients

Filter Effects

Text-shadow

GraphicsMulti-column, hyphenation

Pagination

Position float

Content flow

Windows hardware acceleration makes these beautiful and fast

Page 10: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

CSS3 Features – Transforms, Web Fonts and Styles

demo

Page 11: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Popular HTML5 features in Windows 8Web Sockets

Web Workers

IndexedDB

Ecmascript 5

File API & Blobs

Geolocation

Audio tag

Video tag

Touch-first

Pointer events

Zoom regions

Snap Points

Forms

Validation

Input types

Spell checking

Page 12: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

HTML5 Features – Strict Mode, VS2012, Audio Tags

demo

Page 13: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

HTML5 Canvas

Page 14: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

The Power of the Whole PC

GREETINGS PROFESSOR FALKEN.

WOULD YOU LIKE TO PLAY AGAME OF CHESS?

Page 15: Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Page 16: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

HTML5 Canvas Dynamic, scriptable rendering of 2D shapes and bitmaps

Simple API; 45 methods and 21 attributes

Typically hardware-accelerated

Page 17: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

• state void save(); void restore();

• transformations void scale(…); void rotate(…); void translate(…); void transform(…); void setTransform(…);

• compositing globalAlpha; globalCompositeOperation;

• colors and styles strokeStyle; fillStyle; CanvasGradient

createLinearGradient(…); CanvasGradient

createRadialGradient(…); CanvasPattern createPattern(…);

• Line caps/joins attribute double lineWidth; attribute DOMString lineCap; attribute DOMString lineJoin; attribute double miterLimit;

• Shadows attribute double shadowOffsetX; attribute double shadowOffsetY; attribute double shadowBlur; attribute DOMString shadowColor;

• Rects void clearRect(…); void fillRect(…); void strokeRect(…);

• path API void beginPath(); void closePath(); void moveTo(…); void lineTo(…); void quadraticCurveTo(…); void bezierCurveTo(…); void arcTo(…); void rect(…); void arc(…); void fill(); void stroke(); void clip(); boolean isPointInPath(…);

• focus management boolean drawFocusRing(…);

• drawing images void drawImage(…);

• text attribute DOMString font; attribute DOMString textAlign; attribute DOMString textBaseline; void fillText(…); void strokeText(…); TextMetrics measureText(…);

• pixel manipulation ImageData createImageData(…); ImageData createImageData(…); ImageData getImageData(…); void putImageData(…);

• interface CanvasGradient { void addColorStop(…); };

• interface CanvasPattern {}; • interface TextMetrics {

readonly attribute double width; }; • interface ImageData {

readonly attribute unsigned long width; readonly attribute unsigned long height; readonly attribute CanvasPixelArray

data; }; • interface CanvasPixelArray {

readonly attribute unsigned long length; getter octet (…); setter void (…); };

Canvas on One Canvas!

Via Jatinder Mann – MIX11

Page 18: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

HTML5 Canvas

HTML5 Element Bitmap Based JavaScript Driven

2D API Rectangles, Paths, Lines,

Fills, Arcs, Curves, etc.

“Immediate Mode”

<canvas>U haz an old browser

</canvas>

control

fallback

Page 19: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Canvas 101

<canvas id="myCanvas" width="200" height="200"> No canvas support.</canvas>

<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(30, 30, 50, 50); </script>

Page 20: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

CanvasPad

demo

Page 21: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Gameloop

Page 22: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Game Loop Overview

All games do three things

Load content when they startUpdate the game worldDraw the game world

Efficient code (performance and memory use) is critical!

Initialize Engine

Load Resources

Free Resources

Get User Input

Calculate

Test Criteria

Give FeedBack

Typical Game Loop

22

Page 23: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

var FPS = 30;

init(){ // Load content/graphics here

// Start game loopsetInterval(gameLoop, 1000/FPS);

}

gameLoop(){// Update (Figure out what’s happening)// Draw (Show what’s happening)

}

Game Loop - setInterval

Page 24: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

function update() {

//RequestAnimationFrame faster pef than setInterval anim = window.msRequestAnimationFrame(update);

if (menuEnabled) { drawStars(); } else { //Game Loop updateShips(); drawShips(); }}

Game Loop - requestAnimationFrame

Page 25: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Stuff for Games HTML5 Gaming Libraries

github.com/bebraw/jswiki/wiki/Game-Engines

EaselJS EaselJS.com

Sample Game Apps (XNA, etc.) create.msdn.com/en-US/education/catalog

Tons of Frameworks MakeAwesomeWeb.com

Demos and More IETestDrive.com

Page 26: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Space Cadet - Canvas and Gameloop

demo

Page 27: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Touch

Page 28: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Windows 8 is a touch-first OS

Page 29: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Windows 8 Touch Interactions

Press and hold to learn Tap for primary action Slide to drag Swipe to select

Pinch to zoomSwipe from edge for app commandsRotate to rotate

Swipe from edge for system commands

Page 30: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

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!"

Page 31: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Pointer Events Pointer unifies all "pointing" devices into a single, consistent set of interfaces and events Input-specific properties allow you to provide a differentiated UX

when you want one

DOM pointer events follow the familiar pattern of mouse events, with extensions for touch properties and interaction principles If you know how to code for mouse input, you know the basics of

coding for pointer input!

Page 32: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Pointer Events in the DOM

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:

Page 33: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Touch – Space Cadet Touch

demo

Page 34: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Camera

Page 35: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Windows.Media APIsSnap a picture, record video and audio.Capture

Windows.Media.

Input and output audio devices such as Bluetooth.Devices

Work with audio playlists.Playlists

Stream media to a television or audio system.PlayTo

Use PlayReady or other content protection systems.Protection

Convert music or video to other formats or resolutions, trim, or make effects permanent.

Transcoding

Insert or remove well-known video effects.VideoEffects

Page 36: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

• Camera Capture UI Similar to ‘pick’ photos or videos from the file system Built-in camera control with pre-defined user workflow

• Media Capture API You control every pixel on screen Custom User Experience and workflow

Windows.Media APIsCapture

Windows.Media.

CameraCaptureUI

MediaCapture

Page 37: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Accessing Camera and Mic from your app

// Application manifest capabilities required to access camera and microphone<Capabilities>    <DeviceCapability Name="webcam" /> <DeviceCapability Name="microphone" /></Capabilities>

Page 38: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Using the camera to snap a photo<body><p id="message"></p><img id="imagedisplay" /><script type="text/javascript"> // Step 1: Invoke the camera capture UI for snapping a photovar captureUI = new Windows.Media.Capture.CameraCaptureUI();captureUI.captureFileAsync(Windows.Media.CameraCaptureUI.Mode.photo). then(function(capturedItem) {

if (capturedItem) { // Step 2: Display the photo document.getElementById("imagedisplay").src = URL.createObjectURL(capturedItem); } else { document.getElementById("message").innerHTML = "User didn’t capture a photo"; }

}); </script></body>

Page 39: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Camera – Space Cadet Photo

demo

Page 40: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Accelerometer

Page 41: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Accelerometer Sample Codevar accelerometer;accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();accelerometer.addEventListener("readingchanged",onAccReadingChanged);

function onAccReadingChanged(e) { var accelX = e.reading.accelerationX; var accelY = e.reading.accelerationY; var accelZ = e.reading.accelerationZ;}

Page 42: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Accelerometer – Gravity Pulse

demo

Page 43: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

WinJS

Page 44: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

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

Web technologies you’re already familiar with

Modern patterns for responsive, reliable apps

Use interactive design tools

Build your apps fast and with high quality

Matches the Windows Metro 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

Page 45: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

WinJSHelpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

Page 46: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

WinJS – App, AppBar, ViewBox

demo

Page 47: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

If you know web technologies, you are ready to build amazing Metro style apps.

Page 48: Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Page 49: Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Building Windows 8 Metro Style casual games using HTML5 and JavaScript

Dave IsbitskiSr. Developer Evangelistblogs.msdn.com/[email protected]@microsoft.com