1. Mohammad Shaker
mohammadshaker.com
@ZGTRShaker
2011, 2012, 2013, 2014
XNA Game Development
L09 – 2D Graphics and Particle Engines

2. 2D Graphics

3. 2D Graphics Topics
• Introduction to 2D Graphics
• SpriteBatches
• Drawing Text with SpriteFonts
• Texure Atlases
• Rotating Sprites
• Additive Blending with Sprites
• 2D Particle Engines

4. 2D World - Intro

5. SpriteBatch

6. SpriteBatch
• Create a Place to Store the Images In Game
private Texture2D background;
private Texture2D shuttle;
private Texture2D earth;

7. SpriteBatch
• Create a Place to Store the Images In Game
• LoadContent() method
private Texture2D background;
private Texture2D shuttle;
private Texture2D earth;
background = Content.Load<Texture2D>("stars");
shuttle = Content.Load<Texture2D>("shuttle");
earth = Content.Load<Texture2D>("earth");

8. Textures,
Content

9. Textures,
Content

10. SpriteBatch
• SpriteBatches Declaration
SpriteBatch spriteBatch;

11. SpriteBatch
• SpriteBatches Declaration
• Initializing in LoadContent()
SpriteBatch spriteBatch;
protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
// TODO: use this.Content to load your game content here
}

12. SpriteBatch
• Drawing with SpriteBatches
spriteBatch.Begin();
spriteBatch.Draw(background, new Rectangle(0, 0, 800, 480), Color.White);
spriteBatch.End();

13. SpriteBatch
• Drawing with SpriteBatches
spriteBatch.Begin();
spriteBatch.Draw(background, new Rectangle(0, 0, 800, 480), Color.White);
spriteBatch.End();

14. SpriteBatch
• A Few More Sprites
spriteBatch.Begin();
spriteBatch.Draw(background, new Rectangle(0, 0, 800, 480), Color.White);
spriteBatch.Draw(earth, new Vector2(400, 250), Color.White);
spriteBatch.Draw(shuttle, new Vector2(450, 250), Color.White);
spriteBatch.End();

15. SpriteBatch
• A Few More Sprites
spriteBatch.Begin();
spriteBatch.Draw(background, new Rectangle(0, 0, 800, 480), Color.White);
spriteBatch.Draw(earth, new Vector2(400, 250), Color.White);
spriteBatch.Draw(shuttle, new Vector2(450, 250), Color.White);
spriteBatch.End();

16. SpriteBatch
• A Few More Sprites
spriteBatch.Begin();
spriteBatch.Draw(background, new Rectangle(0, 0, 800, 480), Color.White);
spriteBatch.Draw(earth, new Vector2(400, 250), Color.White);
spriteBatch.Draw(shuttle, new Vector2(450, 250), Color.White);
spriteBatch.End();
You can find this in
“App1-SimpleTextures”

17. Going on with 2D!

18. Acquiring Fonts
• Making a SpriteFont

19. Acquiring Fonts
• Down at about line 14 in the new created file you will see the following:
• You can use any font you want that’s installed in your system
• Fonts can be installed by dragging the font file to your Fonts folder, which is
located in C:/Windows/Fonts
<FontName>Segoe UI Mono</FontName>

20. Acquiring Fonts
• Down at about line 14 in the new created file you will see the following:
<FontName>Segoe UI Mono</FontName>

21. Acquiring Fonts
• Down at about line 14 in the new created file you will see the following:
• Also look down at line 20, where it says:
<FontName>Segoe UI Mono</FontName>
<Size>14</Size>

22. Acquiring Fonts – the using of
• Global Scope
private SpriteFont font;
private int score = 0;

23. Acquiring Fonts – the using of
• Global Scope
• LoadContent()
private SpriteFont font;
private int score = 0;
font = Content.Load<SpriteFont>("Score"); // Use the name of your font here instead of 'Score'.

24. Acquiring Fonts – the using of
• Global Scope
• LoadContent()
• Draw()
private SpriteFont font;
private int score = 0;
font = Content.Load<SpriteFont>("Score"); // Use the name of your font here instead of 'Score'.
spriteBatch.Begin();
spriteBatch.DrawString(font, "Score", new Vector2(100, 100), Color.Black);
spriteBatch.End();

25. Acquiring Fonts – the using of

26. Acquiring Fonts – the using of
• Enhancing visual with Update() method

27. Acquiring Fonts – the using of
• Enhancing visual with Update() method
score++;

28. Acquiring Fonts – the using of
• Enhancing visual with Update() method
• Now let's replace our original spriteBatch.DrawString() line with the following:
score++;
spriteBatch.DrawString(font, "Score: " + score, new Vector2(100, 100), Color.Black);

29. Acquiring Fonts – the using of
• “App2-ShowingText”

30. Texture Atlases

31. Texture Atlases

32. Texture Atlases

33. Texture Atlases
• Creating an AnimatedSprite Class
• Class scope members
public class AnimatedSprite
public Texture2D Texture { get; set; }
public int Rows { get; set; }
public int Columns { get; set; }
private int currentFrame;
private int totalFrames;

34. Texture Atlases
• Update() method
public void Update()
{
currentFrame++;
if (currentFrame == totalFrames)
currentFrame = 0;
}

35. Texture Atlases
• Draw() method
public void Draw(SpriteBatch spriteBatch, Vector2 location)
{
int width = Texture.Width / Rows;
int height = Texture.Height / Columns;
int row = (int)((float)currentFrame / (float)Columns);
int column = currentFrame % Columns;
Rectangle sourceRectangle = new Rectangle(width * column, height * row, width, height);
Rectangle destinationRectangle = new Rectangle((int)location.X, (int)location.Y, width, height);
spriteBatch.Begin();
spriteBatch.Draw(Texture, destinationRectangle, sourceRectangle, Color.White);
spriteBatch.End();
}

36. Texture Atlases
• Draw() method
public void Draw(SpriteBatch spriteBatch, Vector2 location)
{
int width = Texture.Width / Rows;
int height = Texture.Height / Columns;
int row = (int)((float)currentFrame / (float)Columns);
int column = currentFrame % Columns;
Rectangle sourceRectangle = new Rectangle(width * column, height * row, width, height);
Rectangle destinationRectangle = new Rectangle((int)location.X, (int)location.Y, width, height);
spriteBatch.Begin();
spriteBatch.Draw(Texture, destinationRectangle, sourceRectangle, Color.White);
spriteBatch.End();
}

37. Texture Atlases
• Draw() method
public void Draw(SpriteBatch spriteBatch, Vector2 location)
{
int width = Texture.Width / Rows;
int height = Texture.Height / Columns;
int row = (int)((float)currentFrame / (float)Columns);
int column = currentFrame % Columns;
Rectangle sourceRectangle = new Rectangle(width * column, height * row, width, height);
Rectangle destinationRectangle = new Rectangle((int)location.X, (int)location.Y, width, height);
spriteBatch.Begin();
spriteBatch.Draw(Texture, destinationRectangle, sourceRectangle, Color.White);
spriteBatch.End();
}

38. Texture Atlases
• Now, in Game1 Class there’s just two calls!

39. Texture Atlases
• Now, in Game1 Class there’s just two calls!

40. Texture Atlases
• Now, in Game1 Class there’s just two calls!

41. Texture Atlases
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
animatedSprite.Update();
base.Update(gameTime);
}

42. Texture Atlases
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
animatedSprite.Update();
base.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
animatedSprite.Draw(spriteBatch, new Vector2(400, 200));
base.Draw(gameTime);
}

43. Texture Atlases
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
animatedSprite.Update();
base.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
animatedSprite.Draw(spriteBatch, new Vector2(400, 200));
base.Draw(gameTime);
}

44. Texture Atlases
• “App3-AnimatedSprite”

45. Rotating Sprites

46. Rotating Sprites
• Preparing the Content
private Texture2D arrow;
private float angle = 0;

47. Rotating Sprites
• Preparing the Content
private Texture2D arrow;
private float angle = 0;

48. Rotating Sprites
• Preparing the Content
• In LoadContent() method
• In Update() method
private Texture2D arrow;
private float angle = 0;
// use the name of your texture here, if you are using your own
arrow = Content.Load<Texture2D>("arrow");
angle += 0.01f;

49. Rotating Sprites
• Draw() Method
spriteBatch.Begin();
Vector2 location = new Vector2(400, 240);
Rectangle sourceRectangle = new Rectangle(0, 0, arrow.Width,
arrow.Height);
Vector2 origin = new Vector2(0, 0);
spriteBatch.Draw(arrow, location, sourceRectangle, Color.White,
angle, origin, 1.0f, SpriteEffects.None, 1);
spriteBatch.End();

52. Rotating Sprites
• Draw() Method

53. Rotating Sprites
• Compile and run and c it!
• “App3-RotatingSpriteV0.1”

54. Rotating Sprites
• It’s not what we need!

55. Rotating Sprites
• It’s not what we need!
• We need a“Center Point Rotation”!

56. Using a Center Point for Rotation
• In Draw(), change
Vector2 origin = new Vector2(0, 0);
Vector2 origin = new Vector2(arrow.Width / 2, arrow.Height);
• To

57. Using a Center Point for Rotation
• Compile and run

58. Using a Center Point for Rotation
• Compile and run

59. Particle Engines
The Concept

60. 2D Particle Engine

61. 2D Particle Engine
• Introduction

62. 2D
Particle
Engine

63. 2D Particle Engine
• images

64. 2D Particle Engine
• Anatomy of a Particle Engine

65. 2D Particle Engine
• Anatomy of a Particle Engine
– particles,

66. 2D Particle Engine
• Anatomy of a Particle Engine
– particles,
– particle emitter,

67. 2D Particle Engine
• Anatomy of a Particle Engine
– particles,
– particle emitter,
– the engine itself

68. 2D Particle Engine
• Anatomy of a Particle Engine
– particles
• Velocity
– particle emitter,
– the engine itself

69. 2D Particle Engine
• Anatomy of a Particle Engine
– particles
• Velocity, Angles
– particle emitter,
– the engine itself

70. 2D Particle Engine
• Anatomy of a Particle Engine
– particles
• Velocity, Angles
– particle emitter
• Location that the particles are coming from
– the engine itself

71. 2D Particle Engine
• Anatomy of a Particle Engine
– particles
• Velocity, Angles
– particle emitter
• Location that the particles are coming from
• Responsible for determining how many particles will be created at any given time
– the engine itself

72. 2D Particle Engine
• Anatomy of a Particle Engine
– particles
• Velocity, Angles
– particle emitter
• Location that the particles are coming from
• Responsible for determining how many particles will be created at any given time
– the engine itself
• Manages the state of the previous two components

73. 2D Particle Engine
• Anatomy of a Particle Engine
– particles
• Velocity, Angles
– particle emitter
• Location that the particles are coming from
• Responsible for determining how many particles will be created at any given time
– the engine itself
• Manages the state of the previous two components
• Responsible for removing dead particles from the system

74. 2D Particle Engine
• Anatomy of a Particle Engine
– particles
• Velocity, Angles
– particle emitter
• Location that the particles are coming from
• Responsible for determining how many particles will be created at any given time
– the engine itself
• Manages the state of the previous two components
• Responsible for removing dead particles from the system.

75. 2D Particle Engine
• Particle
Public class Particle

76. 2D Particle Engine
• Particle
• ParticleEngine2D
Public class Particle
Public class ParticleEngine2D

77. 2D Particle Engine
• Particle
Public class Particle

78. 2D Particle Engine
• Particle
• The Particle's Properties
Public class Particle

79. 2D Particle Engine
Public class Particle
public Texture2D Texture { get; set; }
public Vector2 Position { get; set; }
public Vector2 Velocity { get; set; }
public float Angle { get; set; }
public float AngularVelocity { get; set; }
public Color Color { get; set; }
public float Size { get; set; }
public int TTL { get; set; }
• Particle
• The Particle's Properties

80. 2D Particle Engine
• Particle
• The Particle's Properties
Public class Particle
public Texture2D Texture { get; set; }
public Vector2 Position { get; set; }
public Vector2 Velocity { get; set; }
public float Angle { get; set; }
public float AngularVelocity { get; set; }
public Color Color { get; set; }
public float Size { get; set; }
public int TTL { get; set; }

81. 2D Particle Engine
• Particle
• The Particle's Properties
Public class Particle
public Texture2D Texture { get; set; }
public Vector2 Position { get; set; }
public Vector2 Velocity { get; set; }
public float Angle { get; set; }
public float AngularVelocity { get; set; }
public Color Color { get; set; }
public float Size { get; set; }
public int TTL { get; set; }

82. 2D Particle Engine
• Update()

83. 2D Particle Engine
• Update()
public void Update()
{
TTL--;
Position += Velocity;
Angle += AngularVelocity;
}

84. 2D Particle Engine
• Update()
public void Update()
{
TTL--;
Position += Velocity;
Angle += AngularVelocity;
}

85. 2D Particle Engine
• Draw()
public void Draw(SpriteBatch spriteBatch)
{
Rectangle sourceRectangle = new Rectangle(0, 0, Texture.Width, Texture.Height);
Vector2 origin = new Vector2(Texture.Width / 2, Texture.Height / 2);
spriteBatch.Draw(Texture, Position, sourceRectangle, Color,
Angle, origin, Size, SpriteEffects.None, 0f);
}

86. 2D Particle Engine
• Particle
• ParticleEngine2D
Public class Particle
Public class ParticleEngine2D

87. 2D Particle Engine
Public class ParticleEngine2D

88. 2D Particle Engine
Public class ParticleEngine2D
• Properties
private Random random;
public Vector2 EmitterLocation { get; set; }
private List<Particle> particles;
private List<Texture2D> textures;

89. 2D Particle Engine
public void Update()
{
int total = 10;
for (int i = 0; i < total; i++)
{
particles.Add(GenerateNewParticle());
}
for (int particle = 0; particle < particles.Count; particle++)
{
particles[particle].Update();
if (particles[particle].TTL <= 0)
{
particles.RemoveAt(particle);
particle--;
}
}
}

90. 2D Particle Engine
public void Update()
{
int total = 10;
for (int i = 0; i < total; i++)
{
particles.Add(GenerateNewParticle());
}
for (int particle = 0; particle < particles.Count; particle++)
{
particles[particle].Update();
if (particles[particle].TTL <= 0)
{
particles.RemoveAt(particle);
particle--;
}
}
}

91. 2D Particle Engine
public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Begin();
for (int index = 0; index < particles.Count; index++)
{
particles[index].Draw(spriteBatch);
}
spriteBatch.End();
}

92. 2D Particle Engine
public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Begin();
for (int index = 0; index < particles.Count; index++)
{
particles[index].Draw(spriteBatch);
}
spriteBatch.End();
}

93. 2D Particle Engine
• Game1 calling

94. 2D Particle Engine
• In Update()
• In Draw()

95. 2D Particle Engine
• In Update()
• In Draw()
particleEngine.EmitterLocation = new Vector2(Mouse.GetState().X, Mouse.GetState().Y);
particleEngine.Update();

96. 2D Particle Engine
• In Update()
• In Draw()
particleEngine.EmitterLocation = new Vector2(Mouse.GetState().X, Mouse.GetState().Y);
particleEngine.Update();
particleEngine.Draw(spriteBatch);

97. 2D Particle Engine
• In Update()
• In Draw()
particleEngine.EmitterLocation = new Vector2(Mouse.GetState().X, Mouse.GetState().Y);
particleEngine.Update();
particleEngine.Draw(spriteBatch);

98. 2D Particle Engine
• Test it, Very nice!
• Can easily be ported to windows phone!
– Visit my mobile crash course on slideshare / Windows Phone slide:
http://www.slideshare.net/ZGTRZGTR/mobile-software-engineering-crash-course-c06-windowsphone/
• App-2DParticleEngines
• You can test it on Windows Mobile!