Chapter 02 sprite and texture
Upcoming SlideShare
Loading in...5

Chapter 02 sprite and texture






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 & 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 Chapter 02 sprite and texture Presentation Transcript

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