Day 4 - Game Sprites In Action
- by dapostolov
Yesterday I drew an image on the screen. Most exciting, but ... I spent more time blogging about it then actual coding. So this next little while I'm going to streamline my game and research and simply post key notes.
Quick notes on the last session:
The most important thing I wanted to point out were the following methods:
spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
spriteBatch.Draw(sprite, position, Color.White);
spriteBatch.End();
The spriteBatch object is used to draw Textures and a 2D texture is called a Sprite
A texture is generally an image, which is called an Asset in XNA
The Draw Method in the Game1.cs is looped (until exit) and utilises the spriteBatch object to draw a Scene
To begin drawing a Scene you call the Begin Method.
To end a Scene you call the End Method.
And to place an image on the Scene you call the Draw method.
The most simple implementation of the draw method is:
spriteBatch.Draw(sprite, position, Color.White);
1) sprite - the 2D texture you loaded to draw
2) position - the 2d vector, a set of x & y coordinates
3) Color.White - the tint to apply to the texture, in this case, white light = nothing, nada, no tint.
Game Sprites In Action!
Today, I played around with Draw methods to get comfortable with their "quirks". The following is an example of the above draw method, but with more parameters available for us to use. Let's investigate!
spriteBatch.Draw(sprite, position2, null, Color.White, MathHelper.ToRadians(45.0f), new Vector2(sprite.Width / 2, sprite.Height / 2), 1.0F, SpriteEffects.None, 0.0F);
The parameters (in order):
1) sprite
the texture to display
2) position2
the position on the screen / scene
this can also be a rectangle
3) null
the portion of the image to display within an image
null = display full image
this is generally used for animation strips / grids (more on this below)
4) Color.White
Texture tinting
White = no tint
5) MathHelper.ToRadians(45.0f)
rotation of the object, in this case 45 degrees
rotates from the set plotting point.
6) new Vector(0,0)
the plotting point
in this case the top left corner
the image will rotate from the top left of the texture
in the code above, the point is set to the middle of the image.
7) 1.0f
Image scaling (1x)
8) SpriteEffects.None
you can flip the image horizontally or vertically
9) 0.0f
The z index of the image.
0 = closer, 1 behind?
And playing around with different combinations I was able to come up with the following whacky display:
Checking off Yesterdays Intention List:
learn game development terminology
(in progress) - We learned sprite, scene, texture, and asset.
how to place and position (rotate) a static image on the screen
(completed) - The thing to note was, it's was in radians and I found a cool helper method to convert degrees into radians. Also, the image rotates from it's specified point.
how to layer static images on the screen
(completed) - I couldn't seem to get the zIndex working, but one things for sure, the order you draw the image in also determines how it is rendered on the screen.
understand image scaling
(in progress) - I'm not sure I have this fully covered, but for the most part plug a number in the scaling field and the image grows / shrinks accordingly.
can we reuse images?
(completed) - yes, I loaded one image and plotted the bugger all over the screen.
understand how framerate is handled in XNA
(in progress) - I hacked together some code to display the framerate each second. A framerate of 60 appears to be the standard. Interesting to note, the GameTime object does provide you with some cool timing capabilities, such as...is the game running slow? Need to investigate this down the road.
how to display text , basic shapes, and colors on the screen
(in progress) - i got text rendered on the screen, and i understand containing rectangles. However, I didn't display "shapes" & "colors"
how to interact with an image (collision of user input?)
(todo)
how to animate an image and understand basic animation techniques
(in progress) - I was able to create a stripe animation of numbers ranging from 1 - 4, each block was 40 x 40 pixles for a total stripe size of 160 x 40. Using the portion (source Rectangle) parameter, i limited this display to each section at varying intervals. It was interesting to note my first implementation animated at rocket speed. I then tried to create a smoother animation by limiting the redraw capacity, which seemed to work. I guess a little more research will have to be put into this for animating characters / scenes.
how to detect colliding images or screen edges
(todo) - but the rectangle object can detect collisions I believe.
how to manipulate the image, lets say colors, stretching
(in progress) - I haven't figured out how to modify a specific color to be another color, but the tinting parameter definately could be used. As for stretching, use the rectangle object as the positioning and the image will stretch to fit!
how to focus on a segment of an image...like only displaying a frame on a film reel
(completed) - as per basic animation techniques
what's the best way to manage images (compression, storage, location, prevent artwork theft, etc.)
(todo)
Tomorrows Intention
Tomorrow I am going to take a stab at rendering a game menu and from there I'm going to investigate how I can improve upon the code and techniques.
Intention List:
Render a menu, fancy or not
Show the mouse cursor
Hook up click event
A basic animation of somesort
Investigate image / menu techniques
D.
