Using Vectors to Position Draw actions in XNA
/I did a session yesterday for Three Thing Game (work progressing nicely) about positioning objects in XNA using vectors. I said I’d post the content, and here it is.
The basis of the chat was that for maximum object drawing satisfaction you should use vectors to position objects you want to draw on the screen. I then had all kinds of fun with Visual Studio IntelliSense (bless its cotton socks) trying to be “helpful” as I filled in the more complicated draw calls.
The simplest version of XNA drawing uses a Rectangle to specify the position and size of the item to be drawn. This works well, but it does have some disadvantages, the most notable of which is that you can’t rotate sprites when you draw them this way. Another significant problem is that the position of a rectangle is specified by an integer value, which means that if you want to make something which changing in position by less than one pixel per update (which is often the case) then you can’t just use a rectangle to record its position. Vectors contain floating point values, which give you much more precise object positioning.
So, my vector powered sprite starts off as two things:
Texture2D logo;
Vector2 logoPosition;
The logo gives the image I want to draw, and the logoPosition says where. I can use a very simple drawing call to draw using this if I like:
spriteBatch.Draw(logo, logoPosition, Color.Red);
This draws the logo using a red light at the position held in the vector. The position is given as the top left hand corner of the texture, so this call works very like the use of a Rectangle to position the texture, where the X and Y properties of the Rectangle give the position of the top left hand corner of the object. The difference is that with this draw operation the texture is always drawn full size. If you use a Rectangle you can give width and height values that will get XNA to scale and transform your texture when it is drawn. If you want to do this kind of thing you have to use the monster version of Draw, which lets you specify all kinds of fun stuff:
spriteBatch.Draw(
logo, // Texture
logoPosition, // Position
null, // Source area in texture to draw
// null for all of it
Color.Blue, // draw colour
logoRotation, // rotation angle
new Vector2(logo.Width / 2.0f, logo.Height / 2.0f),
// origin of the draw
1, // scale value
SpriteEffects.None, // can flip the sprite
0); // layerdepth
This version of Draw lets you do pretty much anything. You still give it a texture and a position but you also give it a whole heap more. We can look at some of these:
Source Area: this is the region of the source texture you want to draw. This lets you have a single sheet of sprites and then pull the particular one you want to draw from that sheet. Alternatively you can have a huge map texture and then just display part of it. If you put null there this means the entire texture is used as the source, which is what I’ve done.
Rotation Angle: this is really nice. You can rotate your sprites when you draw them. The angle is given in radians - which means that the value 2 * pi (6.28 or so) is a complete revolution.
Origin of the Draw: OK. This bit is fiddly. The origin is given in coordinates relative to the source texture (i.e. if the texture is 100 pixels square the value 50,50 would mean the centre of the sprite). I do a simple sum to get this centre position in my example. This is the point at which the draw and rotation behaviours will act. This means that if you do both draw operations with the position vector holding the same value you get an effect like the one you see below:
The red logo is being drawn with the vector giving the top left hand corner of the draw operation. The blue logo is being drawn with the origin set to the middle of the texture as shown above. To make things even more interesting I’ve rotated the logo a bit. Having a draw action that works on the middle of the sprite is actually very useful if you want to centre draws around things like touch positions. The thing to remember is that the units for this value are relative to the texture, not the drawing coordinates.
Scale Value: This scales the draw. If you want to stretch the image in X or Y there is another version of Draw where this is given as a vector where you can express different X and Y scale values.
Sprite Effects: You can flip or mirror the sprite with this.
Layer Depth: Normally XNA will layer things in the order they are drawn, in other words new draws will lay on top of older ones. If you want to control the layering of your drawing you can set a layer depth for a draw action. A depth of 0 means the front and 1 means the back. If you use the simple version of spriteBatch.Begin() these depth values are ignored, they only have an effect if you select an appropriate SpriteSortMode value.
