Texture, Sprite, 2D Graphics<br />Tran Minh Triet – Nguyen KhacHuy<br />Faculty of Information Technology<br />University ...
Game Flow (1)<br />Load<br />Content<br />Start<br />Update<br />Draw<br />End<br />Unload<br />Content<br />
Game Flow (2)<br />Initialize<br />LoadContent<br />UnloadContent<br />Update<br />Draw<br />
Sprite and Texture2D<br />
Display 2D Images<br />Loading a Texture using SpriteBatch<br />Rendering Multiple Images to the Screen<br />Drawing an Im...
Rotate, Scale, Mirror an Image<br />
Display Text<br />Create a SpriteFont file<br />Add a SpriteFont variable to your class<br />String Length<br />
Display Text<br />
Adding a Sprite to Your Project<br />Create Images folder within Content<br />Add an image to Images folder<br />Building ...
Loading and Drawing Your Sprite<br />Adding a Texture2D variable<br />	Texture2D texture;<br />Loading the actual image fi...
Loading and Drawing Your Sprite<br />Draw method’s parameters<br />		public void Draw ( <br />			Texture2D texture, <br />...
Transparency and Other Options<br />Two ways to render portions of images transparently<br />Having a transparent <br />	b...
Layer Depth<br />The ordering of these overlapping images as the Z-order<br />Change option to draw in the order specified...
Layer Depth<br />Specify the layer depth value in the Draw method<br />public void Draw ( <br />Texture2D texture, <br />	...
Let’s Move<br />
Animation<br />
Animation<br />
Animation<br />
Animation<br />
Animation<br />Drawing current frame<br />Point frameSize = new Point(75, 75);<br />Point currentFrame = new Point(0, 0);<...
Animation<br />Moving next frame<br />++currentFrame.X;<br />if (currentFrame.X >= sheetSize.X)<br />{<br />    currentFra...
Framerate, Animation Speed<br />Framerate speed<br />The default is 60 frames per second (fps)<br />Change the framerate<b...
Framerate, Animation Speed<br />int timeSinceLastFrame = 0;<br />int millisecondsPerFrame = 50;<br />timeSinceLastFrame +=...
Q&A<br />?<br />
References<br />XNA SpriteBatch class<br />http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.sprite...
Upcoming SlideShare
Loading in …5
×

Chapter 02 sprite and texture

1,720 views
1,638 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,720
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • The Initialize method is used to initialize variables and other objects associatedwith your Game1 object. Your graphics device object will be instantiated at this pointand can be used in the Initialize method to help you initialize other objects thatdepend on its settings. You’ll use this method to initialize score values and othersuch items…The LoadContent method is called after the Initialize method, as well as any timethe graphics content of the game needs to be reloaded (e.g., if the graphics device isreset due to the player changing the display settings, or something like that). TheLoadContent method is where you will load all graphics and other content required byyour game, including images, models, sounds, and so on. The Updateand Draw method is called after the LoadContent method finishes, the Game1 object will enter into something known as a game loop. The game loop is running at 60 times per second and calling both Update andDraw.The UnloadContent Method perform special unload operations when the game finish.
  • Resource: Age of Empire II &amp; Age of Wonder
  • RotationUsing the rotationargument, you can rotate the image before it is drawn to the screen. You need to specify the angle in radians, so if you want to rotate your image clockwise over 20 degrees, you can specify MathHelper.ToRadians(20); which will do the conversion for you.ScalingIf you want to make your image larger/smaller before it is drawn to the screen, you can specify this in the scale argument. By default, the scaling value is 1, meaning the image should be rendered in its original size. Because this argument accepts a Vector2, you can stretch the image differently in the horizontal and vertical directions.MirroringUsing SpriteEffects.FlipHorizontally or SpriteEffects.FlipVertically, which has the same effect as rotating the image over 180 degrees.
  • If you have no build errors, this means the content pipeline recognized the format of the image and was able to convert it to an XNAinternal format, and XNAis ready to load and useyour image.The content pipeline uses an asset name to access content resources. By default, all assetnames will be the name of the file the asset represents without the file extension.
  • -Add a Texture2D variable to your game in the Game1.cs file near the variable declarationsfor your GraphicsDeviceManager and SpriteBatch:-
  • There are two ways to render portions of images transparently: either the image fileitself must have a transparent background, or the portion of the image that you wantto be transparent must be solid magenta (255, 0, 255)—XNAwill automatically ren-der solid magenta as transparent. Transparency can be saved to certain file formats(such as .png) that make use of an alpha channel. These formats do not contain onlyRGB values; instead, each pixel has an additional alpha channel (the A in RGBA)that determines the transparency of the pixel.
  • Because one of your images uses transparency, set the first parameter toSpriteBlendMode.AlphaBlendSpriteSortMode Defines the sorting options of rendered sprites. There are five options:• Deferred: sprites are not drawn until SpriteBatch.End is called. Calls are thenforwarded to the graphics device in the order in which they were made. MultipleSpriteBatch objects can make Draw calls without conflict in this mode. (This is thedefault mode.)• Immediate: the Begin call immediately sets the graphics device settings and newDraw calls are immediately drawn. Only one SpriteBatch object can be active at agiven time. This is the fastest mode.• Texture: same as Deferred mode, but sprites are sorted by texture prior to beingdrawn.• BackToFront: same as Deferred mode, but sprites are ordered in front-to-backorder based on the layer depth parameter in the Draw call.• FrontToBack: same as Deferred mode, but sprites are ordered in back-to-frontorder based on the layer depth parameter in the Draw call.SaveStateMode Defines the options for saving a graphics device’s state before and after an effect. There aretwo options:• None: no device state is saved.• SaveState: the device state is saved when Begin is called and restored when End iscalled
  • TargetElapsedTime = new TimeSpan(0, 0, 0, 0, 50); This tells XNA to only call Game.Update every 50 milliseconds, which equates to a frame rate of 20fps.timeSinceLastFrame: Track how much time has passed since the animation frame was changedmillisecondsPerFrame: The variable will be used to specify how much time you want to wait before moving the current frame index.
  • Chapter 02 sprite and texture

    1. 1. Texture, Sprite, 2D Graphics<br />Tran Minh Triet – Nguyen KhacHuy<br />Faculty of Information Technology<br />University of Science, VNU-HCM<br />
    2. 2. Game Flow (1)<br />Load<br />Content<br />Start<br />Update<br />Draw<br />End<br />Unload<br />Content<br />
    3. 3. Game Flow (2)<br />Initialize<br />LoadContent<br />UnloadContent<br />Update<br />Draw<br />
    4. 4. Sprite and Texture2D<br />
    5. 5. Display 2D Images<br />Loading a Texture using SpriteBatch<br />Rendering Multiple Images to the Screen<br />Drawing an Image into a Rectangle<br />Color Modulation<br />
    6. 6. Rotate, Scale, Mirror an Image<br />
    7. 7. Display Text<br />Create a SpriteFont file<br />Add a SpriteFont variable to your class<br />String Length<br />
    8. 8. Display Text<br />
    9. 9. Adding a Sprite to Your Project<br />Create Images folder within Content<br />Add an image to Images folder<br />Building your solution<br />Show properties window of the image<br />Remember Asset Name<br />
    10. 10. Loading and Drawing Your Sprite<br />Adding a Texture2D variable<br /> Texture2D texture;<br />Loading the actual image file<br />texture = Content.Load<Texture2D>( @"Images/threerings");<br />Drawing within the Draw method <br />spriteBatch.Begin( );<br />spriteBatch.Draw(texture, Vector2.Zero,Color.White);<br />spriteBatch.End( );<br />
    11. 11. Loading and Drawing Your Sprite<br />Draw method’s parameters<br /> public void Draw ( <br /> Texture2D texture, <br /> Vector2 position, <br /> Color color )<br />texture The sprite texture. <br />position The location, in screen coordinates, where the sprite will be drawn. <br />color The color channel modulation to use. Use Color.White for full color with no tinting.<br />
    12. 12. Transparency and Other Options<br />Two ways to render portions of images transparently<br />Having a transparent <br /> background (*.png)<br />The portion of the image <br /> to be transparent must <br /> be solid <br /> magenta (255, 0, 255)<br />
    13. 13. Layer Depth<br />The ordering of these overlapping images as the Z-order<br />Change option to draw in the order specified <br />spriteBatch.Begin ( <br /> SpriteBlendMode blendMode, <br /> SpriteSortMode sortMode, <br /> SaveStateMode stateMode )<br />blendMode Blending options to use when rendering. <br />sortMode Sorting options to use when rendering. <br />stateMode Rendering state options.<br />
    14. 14. Layer Depth<br />Specify the layer depth value in the Draw method<br />public void Draw ( <br />Texture2D texture, <br /> Vector2 position, <br /> Nullable<Rectangle> sourceRectangle, <br /> Color color, <br /> float rotation, <br /> Vector2 origin, <br /> float scale, <br /> SpriteEffects effects, <br />float layerDepth <br />)<br />
    15. 15. Let’s Move<br />
    16. 16. Animation<br />
    17. 17. Animation<br />
    18. 18. Animation<br />
    19. 19. Animation<br />
    20. 20. Animation<br />Drawing current frame<br />Point frameSize = new Point(75, 75);<br />Point currentFrame = new Point(0, 0);<br />Point sheetSize = new Point(6, 8);<br />spriteBatch.Draw(texture, Vector2.Zero,<br /> new Rectangle(currentFrame.X * frameSize.X,<br /> currentFrame.Y * frameSize.Y,<br /> frameSize.X, frameSize.Y),<br /> Color.White, 0, Vector2.Zero,<br /> 1, SpriteEffects.None, 0);<br />
    21. 21. Animation<br />Moving next frame<br />++currentFrame.X;<br />if (currentFrame.X >= sheetSize.X)<br />{<br /> currentFrame.X = 0;<br /> ++currentFrame.Y;<br /> if (currentFrame.Y >= sheetSize.Y)<br /> currentFrame.Y = 0;<br />}<br />
    22. 22. Framerate, Animation Speed<br />Framerate speed<br />The default is 60 frames per second (fps)<br />Change the framerate<br />TargetElapsedTime = new TimeSpan(0, 0, 0, 0, 50);<br />Animation Speed - Add two class-level variables to track the time between animation frames.<br />timeSinceLastFrame: track how much time has passed since the animation frame was changed<br />millisecondsPerFrame: specify how much time you want to wait before moving the current frame index.<br />
    23. 23. Framerate, Animation Speed<br />int timeSinceLastFrame = 0;<br />int millisecondsPerFrame = 50;<br />timeSinceLastFrame += gameTime.ElapsedGameTime.Milliseconds;<br />if (timeSinceLastFrame > millisecondsPerFrame)<br />{<br /> timeSinceLastFrame -= millisecondsPerFrame;<br /> // move to next frame<br />}<br />
    24. 24. Q&A<br />?<br />
    25. 25. References<br />XNA SpriteBatch class<br />http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.spritebatch.draw.aspx<br />Ebook<br />Learning XNA 3.0<br /> O’reilly, Aaron Reed, 2008<br />

    ×