Susan Ibach | Technical Evangelist Sage Franch | Technical Evangelist

Outline Sprite sheets Creating a sprite from a sprite sheet Animating your sprite

Sprite Sheets

Animation is created by displaying a series of images with slight differences When overlayed on top of each other and displayed in sequence you get animation

These images are stored in a file called a sprite sheet Each image in the sprite sheet is called a frame

Creating a sprite from a sprite sheet

To add a sprite sheet to your game 1.Add the sprite sheet to your art library 2.Create a sprite sheet object in your code 3.Set the frame grid for your sprite sheet 4.Create a sprite based on a frame in your sprite sheet

Select add new action, event Create a new picture resource Upload and publish the sprite sheet (don't forget to remove the white background 1. Add the sprite sheet to your art library

2. Create a sprite sheet object in your code Use the create sprite sheet method of the board object Pass the sprite sheet you added to your art library as a parameter

set frame grid( nbrRows, nbrColumns, frame width, frame height, margin left, margin top, spacing) In this sprite sheet we have 5 rows 1 column 96 pixel frame width 128 pixels frame height 0 pixel left margin 0 pixel top margin 0 pixel spacing between frames 3. Set the frame grid for your sprite sheet

Use the create sprite method of the sheet object Specify which frame to display initially for the sprite You can also set the position of the sprite on the screen 4. Create a sprite based on a frame from the sprite sheet

DEMO Adding a sprite based on a sprite sheet

Animating your sprite

To animate your sprite 1.Define an animation for your sprite sheet 2.Create an animation for your sprite 3.Play animation

Add grid animation( animationName, start, count, duration, loops, yoyo) Let's create an animation called dance Start at frame 1 Rotate through 5 frames Change the animation each second Repeat the animation 100 times When I loop restart at frame 1 1. Specify the animation for your sheet

We have a sprite We need to create an animation object for our sprite so we can bring it to life 2. Create an animation for your sprite

Now we can play the animation and make our robot dance! 3. Play animation

DEMO Animating a sprite

Your challenge Find an existing sprite sheet Animate a sprite in your game!

Congratulations you can bring characters to life!

©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.