2D Graphics CMT3311

This covers... How to make a transparent sprite How to add a sprite to your project and draw it Properties of sprites and how to transform them How to create and use a SpriteFont for writing text to the screen How to read the keyBoard or an Xbox 360 controller The onesprite program – everything you can do with a sprite

Create transparent sprite Images are stored in rectangles To make nice sprites we need specify some areas of an image to be transparent In XNA you have to create an image with transparency before it can be used You need two images: the original image and as mask image: where areas to be opaque are coloured white and areas to be transparent are coloured black

The Photoshop way - recommended If you are making your sprite from scratch then if you choose New in Photoshop Set mode to RGB and Contents to transparent background Then you draw on a transparent background, simply save as.png image and its ready for XNA If you are using a found image then you need to select the bit of the image you want and copy it into a new transparent image and save as a.png image as above.

Use magic wand tool to select the background Choose Select|Inverse to select only the object of interest Make a new image of same size with Mode set to RGB and Contents to Transparent Copy selection into new image and save a as.png Image

The Direct X way – long winded This involves using the DirectX Texture tool and is shown for completeness

Given a sprite with a single colour background (eg Grey), called eg ship.bmp In Photoshop choose the magic wand tool and click to select background Then set foreground colour to black and paint the sprite background black Then choose Select|Inverse, change foreground colour to white and paint in the selection Save this with a new filename eg: shipalpha.bmp

Use the DirectX Texture Tool Assuming you installed the DirectX sdk you can run the directX texture tool, eg found on my system:

In the DirectX Texture tool load your original image e.g. ship.bmp Choose Format|Change Surface Format and set the new format to “Unsigned 32 bit A8R8G8B8” Choose “File|Open onto alpha channel of this texture...” and select your alpha file e.g. shipalpha.bmp – the background will now be shown in a bright colour to indicate it will be transparent

Choose File|Save and it will save the file with a.dds extension e.g. ship.dds The.dds extension is a standard DirectX/XNA file format If you add ship.dds into your game and load it then it will now display with the appropriate transparency

Add a Sprite A sprite is represented by an object of the class Texture2D Its position is represented by a Vector2 It is drawn by a SpriteBatch object – this will determine how it is drawn and if any transformations will be applied to it

Add a Sprite Inside the LoadGraphicsContent() function –The texture is loaded (in this case called myTexture) –The SpriteBatch is instantiated

Draw a Sprite The lines above are added to the draw function Drawing occurs between begin and end SpriteBlendMode.AlphaBlend enables transparency The draw function has many overloads this is the simplest

Sprite properties Sprites are generally drawn from the top left of the texture down This is not always what we want The Sprite Origin is by default the top left of the texture but it can be set to a point inside the texture e.g. the middle – which is good for intuitive scaling and rotation

Sprite properties Sprites also have a depth property This ranges from 0 (near) to 1 (far) and determines the order in which sprites will be drawn A sprite texture may be sampled using the sourceRectangle parameter – ie a subsection of the texture can be drawn

Sprite Scaling Can be done by the draw function in three ways –By specifying a single float and scaling equally in the x and y directions –By specifying a Vector2 and scaling by different amounts in x and y directions –By specifying source and destination rectangles and scaling between them

Sprites A Sprite can be drawn with rotation by specifying a single float A sprite can be draw with SpriteEffects where the effect is one of FlipHorizontally, FlipVertically or None A sprite can be drawn with a tint by specifying a colour where White signifies no tint

Sprites The overall transparency of a sprite can also be set by setting the transparency of the tint colour (see the onesprite example).

Sprite Fonts XNA has a feature to take any TrueType font on your system and make it into a bitmap font that can be used by the SpriteBatch.DrawString function Choose Project|Add|New Item … and select Spritefont Give the new font a name e.g. of the font you want to use e.g. “Lucida Console”

Sprite Fonts An XML file will come up with properties of the font like name and size etc which you can edit

Sprite Fonts Create an instance of SpriteFont as a game1 class variable You need a vector2 for the position of your text

Sprite Fonts You need to load the font in the LoadGraphicsContent() function Then call the SpriteBatch.Draw method

Reading Input You can get input from keyboard or from a wired Xbox 360 controller Just plug a 360 controller to a spare USB port on your PC and get windows to find a driver and install it Up to four controllers may be attached

The 360 Controller Controller has buttons A,X,B,Y,Start,Back, LeftShoulder, RightShoulder, LeftStick and RightStick DPad has buttons Up,Down,Left,Right Triggers are analogue, return a number between 0-1 depending on how hard they are pressed Thumbsticks are analogue returning X and Y numbers from -1 to +1 depending on position

Get input states The GamePad and Keyboard states are easy to get and use For the GamePad PlayerIndex ranges from 1-4 to support 4 GamePads

Solving the button down problem A classic problem with buttons is the situation where you want to detect one button down event and not detect another until the button has been released. This is solved in XNA by having a second GamePadState and/or KeyboardState which is set to the last gamepad or keyboard state – then you just check the button was not pressed previously

Onespritecs.cs This example shows you all the things you can do with one sprite