simple animation using xnaciokan.weebly.com/uploads/2/8/2/6/2826457/digispired.day2.pdf · simple...

Simple animation using XNA

What will be created?

Let’s create a simple animation that introduces Digispired ii to the World.

Do you remember “storyboard”? A storyboard consists of graphical illustrations or images to visualize the

project or presentation like a motion picture or animation sequence.

In this activity, we will create the following storyboard.

Figure 1. Storyboard for Introduction to Digispired ii

To make the simple animation, start VC# Express and create a new project. Select “Windows Game(4.0)”

as project type and change the project name as “Digispiredii_intro” as shown below.

Figure 2. Introduction to Digispired ii project creation

After click “OK”, the Game1.cs source code will be shown up. As explained in the previous XNA project,

change the default class name and constructor name from “Game1” to “Digispiredii_intro” as shown

below.

Figure 3. Change main class and constructor name to “Digispiredii_intro”

Change the class file name to “Digispiredii_intro.cs” from “Game1.cs”.

Figure 4. Change program file name to “Digispiredii_intro.cs”

Change Game1 in the line “using (Game1 game = new Game1())” to “using (Digispiredii_intro game =

new Digispiredii_intro())” in the Program.cs file.

Create the first scene

Create text for the first scene

For the project, a sprite font is needed. Create a sprite font named “MainSpriteFont” in this project as you

did in the previous project; 1) create a Sprite Font, 2) edit the font property as needed, 3) create a

function for the text font, 4) load the font in the program, and 5) draw the font in the preferred location in

the program window.

• Create a sprite font by right click on “Digispiredii_introContent(Content)” in Solution Explorer,

click “Add” and then click “New Item” button. Then in the “Add New Item” dialog window,

select “Sprite Font”, change the name to “MainSpriteFont.spritefont”, and click “Add” button.

• Change the font size to “16” from “14” in the “MainSpriteFont.spritefont” file.

Figure 5. MainSpriteFont style

• Back to the Digispiredii_intro.cs file, type "SpriteFont sfMainSpriteFont { get; set; }" without

double quotes below the " SpriteBatch spriteBatch;" line in Digispiredii_intro class.

Figure 6. Code for MainSpriteFont

• The Sprite Font style should be loaded before used in the program. To load the style, type

'sfMySpriteFont = this.Content.Load<SpriteFont>("MainSpriteFont");' without single quote in

the LoadContent() function in Digispiredii_intro.cs file.

Figure 7. Code for loading MainSpriteFont

• Type a code for drawing a text with the loaded Sprite Font style. Put 'spriteBatch.Begin();

spriteBatch.DrawString(sfMainSpriteFont, "Intro. to", new Vector2(30f, 30f), Color.Blue);

spriteBatch.End();' without single quotes in Draw() function in Digispiredii_intro.cs file.

Figure 8. Code for draw “Intro. to” with MainSpriteFont

Setting preferred window size

Type “graphics.PreferredBackBufferWidth = 450; graphics.PreferredBackBufferHeight = 300;” in

between "graphics = new GraphicsDeviceManager(this);" and ‘Content.RootDirectory = "Content";’ in

“public Digispiredii_intro()” function in Digispiredii_intro.cs file to set the preferred window size.

Figure 9. Code for setting preferred window size

Let’s compile and run the program to see if the program works as expected. Remember if you have “No

suitable graphics card found” then change the project profile to “Use Reach to access a limited API set

supported by Windows Phone, Xbox 360, and Windows.”

Creating pictures for the project

Now it is the time to create pictures for the animation. The following pictures need to be created.

• Digispired smiley face (100 x 100 pixel)

• Person (100 x 100 pixel)

• Oval callout for “cool” (150 x 100 pixel)

• Cloud for “wow” (150 x 100 pixel)

• Left and right doors (120 x 180 pixel)

• Digispired ii logo (from Digispired web site)

Figure 10. Pictures are used in Digispiredii_intro project

Change the white background as transparent background, if possible. You can use paint.net, GIMP, or

photoshop to make a picture with transparent background.

Move the picture files to the project folder. Use Windows Explorer click on “Documents” or “My

Documents” => “Visual Studio 2010” => “Projects” => “Digispiredii_intro” => “Digispiredii_intro” =>

“Digispiredii_introContent”, and copy the picture files in the folder.

Back to the VC# Express then right click on “Digispiredii_introContent(Content)”, “Add”, and “Existing

Items”. Select “digispired_face.png” file.

To use the picture in the program; 1) create a texture function for the picture, 2) load the picture in the

program, and 3) draw the loaded picture in the program window.

• Type “Texture2D texDigispiredFaceSprite {get; set;}” without double quotes in between

“SpriteFont sfMainSpriteFont{get;set;}” and “public Digispiredii_intro()” in Digispiredii_intro.cs

file.

Figure 11. Code for Digispired face sprite

• Type ‘texDigispiredFaceSprite = this.Content.Load<Texture2D>(“digispired_face”);’ without

single quote below ‘sfMainSpriteFont = this.Content.Load<SpriteFont>(“MainSpriteFont”);’ in

LoadContent() function in Digispiredii_intro.cs file.

Figure 12. Code for loading Digispired face sprite

• Type “spriteBatch.Draw(texDigispiredFaceSprite, new Vector2(30f, 150f), Color.White);”

without double quoted above the line “spriteBatch.End();” in function Draw() in

Digispiredii_intro.cs file.

Figure 13. Code for drawing Digispired face in the window

Let’s compile and run the program to see, if the program works as expected.

One last thing in the first screen is the “Digispired ii”. The digispired ii logo will be used in the place of

“Digispired ii”. To include another picture in the project, similar steps should be done; 1) Add the picture

in the project, 2) create a texture function for the picture, 3) load the picture in the program, and 4) draw

the loaded picture in the program window.

• Right click on the “Digispiredii_introContent(Content)” in Solution Explorer and click “Add”

and “Existing Items”. Select the “digispiredii_logo.png” file and click “OK” button.

• Type “Texture2D texDigispirediiLogoSprite {get; set;}” without double quotes between

“Texture2D texDigispiredFaceSprite { get; set; }” and “public Digispiredii_intro()” in


• Type ‘texDigispirediiLogoSprite = this.Content.Load<Texture2D>("digispiredii_logo");’ without

single quote below ‘texDigispiredFaceSprite =

this.Content.Load<Texture2D>("digispired_face");’ in LoadContent() function in


• Type “spriteBatch.Draw(texDigispirediiLogoSprite, new Vector2(120f, 60f), Color.White);”

without double quoted above the line “spriteBatch.End();” in function Draw() in


Figure 14. Code for digispiredii logo sprite

Transition to another scene

Time, time, time

Computer animation is like a flip book, a series of pictures changes gradually from one page to another.

To create an animation, you can imagine putting items or spite in a blank page and gradually changed the

items shapes and location in the next page. An XNA program also runs like that. In one second, an XNA

program rewrites 60 frames, i.e. 60 fps. The function Update(), “protected override void

Update(GameTime gameTime)” will be called 60 times per seconds, and draw function, “protected

override void Draw(GameTime gameTime)” will actually draws each frame (screen). Therefore, if an

item (or items) should be moved or drawn in the screen, the Update() function should contains program

code that changes items’ locations and shapes. The Draw() function will actually draws based on the

changes.

The second scene

Keep the transition in your mind and look at the second scene. What is the difference between the first

and second scene? As you can see in the storyboard, the text “Intro. to” and the Digispired ii logo would

have disappeared. A new text “Digispired ii is Workforce Investigation Inspiration for STEM program

funded by National Science Foundation” will be appeared in the second scene. The digispired face will

kept in the second screen.

How does a computer know which scene it should display? Good question. That’s the programmer’s job

to tell how to. Computer does not do anything until it is instructed to do something.

Let’s use one of the simple ways to tell to the computer. Let’s have a variable called scene_no. If the

scene_no is 1 then let the computer display the first scene. If the scene_no is 2 then display the second

scene, and when the scene_no is 3 then display the third scene, and so forth.

Implement the idea in the C# code in this program.

• The variable scene_no will contain numbers and the variable should be accessed in Update() and

Draw() functions. So, the variable scene_no should be declared as int (which means integer

number) in class Digispiredii_intro.

• In the Draw() function should include code that what just explained in the above paragraph.

• The Update() function should include code that changes the variable scene_no properly based on

the time.

Before implement code for the second scene, let’s change the current code properly for the first scene.

Under the line “SpriteBatch spriteBatch;” in “public class Digispiredii_intro :

Microsoft.Xna.Framework.Game”, type “int scene_no = 1;”.

In the Draw() function in Digispiredii_intro.cs file, put “if (scene_no == 1) {” after the line

“spriteBatch.Begin();”, and put “}” before the line “spriteBatch.End();”.

Figure 15. Code for the first scene using scene_no

Using a timer variable

As explained before, the scene_no should be changed to the next scene after certain amount of time has

been passed. A scene will be transit to the next scene in five seconds in this program. A new variable,

timer, is needed to keep track of time. The timer value will be increased by one in the Update() function.

Once the timer value exceeds 300, then the scene_no will be changed to the next scene_no. It is important

to know “why 300?.” The Update() function will be called 60 times per second. So each second the timer

value will be increased by 60. This program will move to the next scene in five second, which means

when the timer value has more than 300 (= 5*60), then the scene_no will be changed to the next scene

number.

Type “int timer = 0” after the line “int scene_no = 1;” in Digispiredii_intro.cs file. Then type the

following code after “// TODO: Add your update logic here” in the Update() function, “protected override

void Update(GameTime gameTime)”, in Digispiredii_intro.cs file.

timer++;

if (timer >= 300)

{

timer = 0;

if (scene_no < 5)

{

scene_no++;

}

}

Double plus sign, “++”, after timer and scene_no means increase its value by one.

The timer will be reset to 0 only when the timer value is greater than and equal to 300. The scene_no is

increased by one only when the timer is greater than and equal to 300 and the scene_no is less than and

equal to 5 since we only have six scenes in this animation.

Figure 16. Code for using timer variable to change scene_no

Now the program has a code for increasing scene_no by one in five seconds. Type the following code

before the line “spriteBatch.End()” in Draw() function.

if (scene_no == 2)

{

spriteBatch.DrawString(sfMainSpriteFont, "Digispired ii is", new Vector2(30f, 30f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "Workforce Investigation", new Vector2(30f, 60f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "Inspiration for STEM program", new Vector2(30f, 90f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "funded by", new Vector2(150f, 150f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "National Science Foundation", new Vector2(150f, 180f), Color.Blue);

spriteBatch.Draw(texDigispiredFaceSprite, new Vector2(30f, 150f), Color.White);

}

Figure 17. Code for drawing the second scene

The third scene

From now on, it is very similar process what has been done so far.

For the third scene, type the following code before the line “spriteBatch.End()” in Draw function in


if (scene_no == 3)

{

spriteBatch.DrawString(sfMainSpriteFont, "In this program, we", new Vector2(30f, 30f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "explore STEM principles", new Vector2(30f, 60f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "behind game controllers,", new Vector2(30f, 90f), Color.Blue);


}

Figure 18. Code for drawing the third scene

The fourth scene

The fourth scene is almost same as before except, the Digispired face moved to the right side of the

window and a new picture “oval_callout.png” is included.

• Add the “oval_callout.png” as before. Right click on the “Digispiredii_introContent(Content)” in

SolutionExplorer, “Add”, and “Existing Item”. Select “oval_callout.png” and click “Add” button.

• Type “Texture2D texOvalCalloutSprite { get; set; }” without double quotes after the line

“Texture2D texDigispirediiLogoSprite { get; set; }” under the “public class Digispiredii_intro :

Microsoft.Xna.Framework.Game” in Digispiredii_intro.cs file.

• Type ‘texOvalCalloutSprite = this.Content.Load<Texture2D>("oval_callout");’ without single

quote after the line ‘texDigispirediiLogoSprite =

this.Content.Load<Texture2D>("digispiredii_logo");’ in LoadContent() function.

• Type the following code before the line “spriteBatch.End();” in Draw() function.

if (scene_no == 4)

{

spriteBatch.DrawString(sfMainSpriteFont, "Learn to use C#", new Vector2(30f, 30f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "Cool", new Vector2(80f, 180f), Color.Black);

spriteBatch.Draw(texOvalCalloutSprite, new Vector2(30f, 150f), Color.White);


}

Figure 19. Code for the fourth scene

The fifth scene

The fifth scene is similar to the fourth scene. Two pictures will be included; cloud.png and person.png.

The Digispired face will move in the center of the window.

• Add the two pictures as done before.

• Type “Texture2D texCloudSprite { get; set; }” and “Texture2D texPersonSprite { get; set; }”

without double quotes after the line “Texture2D texOvalCalloutSprite { get; set; }” in the

Digispiredii_intro class.

• Type ‘texCloudSprite = this.Content.Load<Texture2D>("cloud");’ and ‘texPersonSprite =

this.Content.Load<Texture2D>("person");’ without single quotes after the line

‘texOvalCalloutSprite = this.Content.Load<Texture2D>("oval_callout");’ in LoadContent()

function.


if (scene_no == 5)

{

spriteBatch.DrawString(sfMainSpriteFont, "and then", new Vector2(30f, 30f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "create games", new Vector2(30f, 60f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "Wow", new Vector2(80f, 150f), Color.Black);

spriteBatch.Draw(texCloudSprite, new Vector2(30f, 120f), Color.White);

spriteBatch.Draw(texPersonSprite, new Vector2(30f, 200f), Color.White);

spriteBatch.DrawString(sfMainSpriteFont, "Wow", new Vector2(350f, 150f), Color.Black);

spriteBatch.Draw(texCloudSprite, new Vector2(300f, 120f), Color.White);

spriteBatch.Draw(texPersonSprite, new Vector2(300f, 200f), Color.White);


}

Figure 20. Code for the fifth scene

The sixth scene

The sixth scene is similar to the previous scene, except two pictures are added; left_door.png and

right_door.png.

• Add the two pictures as done before.

• Type “Texture2D texLeftDoorSprite { get; set; }” and “Texture2D texRightDoorSprite { get;

set; }” without double quotes after the line “Texture2D texPersonSprite { get; set; }” in

Digispiredii_intro class.

• Type ‘texLeftDoorSprite = this.Content.Load<Texture2D>("left_door");’ and

‘texRightDoorSprite = this.Content.Load<Texture2D>("right_door");’ without single quotes after

the line ‘texPersonSprite = this.Content.Load<Texture2D>("person");’ in LoadContent() function.


if (scene_no == 6)

{


spriteBatch.DrawString(sfMainSpriteFont, "Welcome to", new Vector2(170f, 30f), Color.Blue);

spriteBatch.DrawString(sfMainSpriteFont, "Our World!", new Vector2(170f, 80f), Color.Blue);

spriteBatch.Draw(texLeftDoorSprite, new Vector2(10f, 100f), Color.White);

spriteBatch.Draw(texRightDoorSprite, new Vector2(330f, 100f), Color.White);

}

Figure 21. Code for the sixth screen

This is it. As you can see, once the program planned well (in this case storyboard clearly indicates what

should be done), programming could be much organized and structured.

Final code for Digispiredii_intro program

Digispiredii_intro.cs file �� !�� "� �� #�� $��%��&&&�'��(��&&&�)!��!�� &&&�'&��(�� *��#�� $��+�� %�� !��#�� !�� ,��!�� ,��!��$��-�.��-�/�� %��0��)1��2#�1#�� %��0��)1��2#�1#�� %��0��)1��2#�13�� %��0��)1��2#�1�� %��0��)1��2#�14�� %��0��)1��2#�1��#�� %��0��)1��2#�15��!#�� %��0�� *��#�� $��67��%�� !��-�� !��#��6!��7�� !�� 4��,��,��8��!�-�9:/�� !�� 4��,��,��;��!�-�<//�� 5��#��-�=��=��

��0��&&&�'��(��&&&��!�� >��*�� &&&�)!��!��?�� !��&&&�� *�� "��>��!��!�� &&&��>�!�� &&&�'&��(�� "��>67��%��&&�)3#3+��>��!��*�� "��>67��0��&&&�'��(��&&&��*�� !� ��&&&�� &&&�'&��(�� 67��%��&&�� ,��!@��!��!��*��1�� ,��!�-�� ,��!6�� !��#��7��&&�)3#3+��!�� !�� -�!�� '� ��(6=�� =7��1#�� -�!�� ')1��2#(6=�� $��=7��1#�� -�!�� ')1��2#(6=�� $��=7��13�� -�!�� ')1��2#(6=��$��=7��1�� -�!�� ')1��2#(6=��=7��14�� -�!�� ')1��2#(6= ��=7��1��#�� -�!�� ')1��2#(6=��$��=7��15��!#�� -�!�� ')1��2#(6=��!$��=7��0��&&&�'��(��&&&�A��*�� !� ��&&&�� &&&�'&��(�� A��67��%��&&�)3#3+�A��!��

��0��&&&�'��(��&&&��!��!�� !��@��&&&��!��@��!�� @�� &&&�'&��(��&&&�' ��-=��)��=(4�� !�� '& ��(�� A ��6��)��)��7��%��&&��!��1��6��4�� 64��"��1 3�7 ,�� ,��--�,�� 4��7��!�� B1�67��&&�)3#3+�� !��CC��6��(-�<//7��%��-�/��6��$��'-�:7��%��$��CC��0��0��*�� A ��6��)��7��0��&&&�'��(��&&&�)!��!��!��!�� &&&�'&��(��&&&�' ��-=��)��=(4�� !�� '& ��(�� #��6��)��)��7��%�� !��#�� 6�� ,��7��&&�)3#3+��!�� ,��! ,��67��6��$��--�.7��%�� ,��! #��6�� @�="�� =@��D��26</�@�</�7@�� ,��7�� ,��! #��61#�� @��D��26</�@�.:/�7@�� 8!�7�� ,��! #��61#�� @��D��26.2/�@�E/�7@�� 8!�7��0�

��6��$��--�27��%�� ,��! #��6�� @�=#�� =@��D��26</�@�</�7@�� ,��7�� ,��! #��6�� @�=8��"��=@��D��26</�@�E/�7@�� ,��7�� ,��! #��6�� @�="�� )B�� =@��D��26</�@�F/�7@�� ,��7�� ,��! #��6�� @�=��*�=@��D��26.:/�@�.:/�7@�� ,��7�� ,��! #��6�� @�=G��=@��D��26.:/�@�.H/�7@�� ,��7�� ,��! #��61#�� @��D��26</�@�.:/�7@�� 8!�7��0��6��$��--�<7��%�� ,��! #��6�� @�="��!�� @��=@��D��26</�@�</�7@�� ,��7�� ,��! #��6�� @�=1 ��)B�� =@��D��26</�@�E/�7@�� ,��7�� ,��! #��6�� @�=*!��@=@��D��26</�@�F/�7@�� ,��7�� ,��! #��61#�� @��D��26</�@�.:/�7@�� 8!�7��0��6��$��--�97��%�� ,��! #��6�� @�=��I=@��D��26</�@�</�7@�� ,��7�� ,��! #��6�� @�=��=@��D��26H/�@�.H/�7@�� ,��7�� ,��! #��613�� @��D��26</�@�.:/�7@�� 8!�7�� ,��! #��61#�� @��D��26<//�@�.:/�7@�� 8!�7��0��6��$��--�:7��%�� ,��! #��6�� @�=��!�=@��D��26</�@�</�7@�� ,��7�� ,��! #��6�� @�=��=@��D��26</�@�E/�7@�� ,��7�� ,��! #��6�� @�=8��=@��D��26H/�@�.:/�7@�� ,��7�� ,��! #��61�� @��D��26</�@�.2/�7@�� 8!�7�� ,��! #��614�� @��D��26</�@�2//�7@�� 8!�7�� ,��! #��6�� @�=8��=@��D��26<:/�@�.:/�7@�� ,��7�� ,��! #��61�� @��D��26<//�@�.2/�7@�� 8!�7�� ,��! #��614�� @��D��26<//�@�2//�7@�� 8!�7�� ,��! #��61#�� @��D��26.F/�@�.:/�7@�� 8!�7��0��6��$��--�E7��%�

�� ,��! #��61#�� @��D��26.F/�@�.:/�7@�� 8!�7�� ,��! #��6�� @�=8��=@��D��26.J/�@�</�7@�� ,��7�� ,��! #��6�� @�=3��8��K=@��D��26.J/�@�H/�7@�� ,��7�� ,��! #��61��#�� @��D��26./�@�.//�7@�� 8!�7�� ,��! #��615��!#�� @��D��26<</�@�.//�7@�� 8!�7��0�� ,��! B��67��*�� #��6��)��7��0��0�0�

Program.cs file �� #�� $��%�I��8"G#38��LL��,3��4��%��&&&�'��(��&&&�)!�� !�� &&&�'&��(��6��MN��7��%��6#�� $��-��#�� $��677��%�� 5��67��0��0��0�I��0�

MainSpriteFont.spritefont file 'O1��-=. /=��-=��?H=O(�'K??�

)!��1�� @��*��*��!��G��4� �� !��>�!�� !��@��!��!��!��!��!��*��! �??(�'��1��+�� !��-=�� 4� �� !��=(��'��)� -=�� !��+��#�� =(��'K??��!��!��!��!��*�� ??(��'��G��(��'&��G��(��'K??��>��@�� !��!��!��>��!�� ??(��'��>(.E'&��>(��'K??�� @�� 1�� !��!��!�� *��!�� ??(��'� ��(/'&� ��(��'K??��A�P��!��!�� "��!��@��*��!�� !�� ??(��'A�P��(��'&A�P��(��'K??��!��!�� D��=5��=@�=,��=@�="��=@��=,��@�"��=@�� ??(��'��(5��'&��(��'K??��"��!��@�!��!��*��*��1�!��!��!��!��!�� ??(��'K??�'#��!��(Q'&#��!��(�??(�

��'K??��!��5��!��*��!�� B��!��B��*�*��*�� )!��<2@�6��""�� 7@��.2E@�6RSR7@��!�*��!�� )!��!��!�A�� !�� ??(��'�!��5��(��'�!��5��(��'��(TI<2�'&��(��'B��(TI.2E�'&B��(��'&�!��5��(��'&�!��5��(��'&��(�'&��(�