1. Susan Ibach | Technical Evangelist Sage Franch | Technical Evangelist

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

3. Sprite Sheets

4. 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

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

6. Creating a sprite from a sprite sheet

7. 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

8. 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

9. 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

10. 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 128 96

11. 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 1 2 3 4 5

12. DEMO Adding a sprite based on a sprite sheet

13. Animating your sprite

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

15. 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

16. 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

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

18. DEMO Animating a sprite

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

20. Congratulations you can bring characters to life!

21. ©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.