Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Andere mochten auch
Ähnlich wie 2D Graphics and Sprite Animation in XNA
Ähnlich wie 2D Graphics and Sprite Animation in XNA (20)
2D Graphics and Sprite Animation in XNA
- 1. Texture, Sprite, 2D Graphics Tran Minh Triet – Nguyen KhacHuy Faculty of Information Technology University of Science, VNU-HCM
- 2. Game Flow (1) Load Content Start Update Draw End Unload Content
- 3. Game Flow (2) Initialize LoadContent UnloadContent Update Draw
- 5. Display 2D Images Loading a Texture using SpriteBatch Rendering Multiple Images to the Screen Drawing an Image into a Rectangle Color Modulation
- 6. Rotate, Scale, Mirror an Image
- 7. Display Text Create a SpriteFont file Add a SpriteFont variable to your class String Length
- 8. Display Text
- 9. 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
- 10. 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( );
- 11. 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.
- 12. 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)
- 13. 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.
- 14. 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 )
- 15. Let’s Move
- 16. Animation
- 17. Animation
- 18. Animation
- 19. Animation
- 20. 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);
- 21. Animation Moving next frame ++currentFrame.X; if (currentFrame.X >= sheetSize.X) { currentFrame.X = 0; ++currentFrame.Y; if (currentFrame.Y >= sheetSize.Y) currentFrame.Y = 0; }
- 22. 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.
- 23. Framerate, Animation Speed int timeSinceLastFrame = 0; int millisecondsPerFrame = 50; timeSinceLastFrame += gameTime.ElapsedGameTime.Milliseconds; if (timeSinceLastFrame > millisecondsPerFrame) { timeSinceLastFrame -= millisecondsPerFrame; // move to next frame }
- 24. Q&A ?
- 25. References XNA SpriteBatch class http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.spritebatch.draw.aspx Ebook Learning XNA 3.0 O’reilly, Aaron Reed, 2008
Hinweis der Redaktion
- 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.