XNA Basic

Displaying Image

&

Collision Detect

What’s format image that XNA support?

XNA support only .bmp .png and .jpg image. .PNG have transparent region for draw on

another image. Usually, we’ll use .jpg for background

and .png for object on background.

How to include image in project?

Fist right click at content. Second choose add Exiting Item. Third choose your image.

Sample Code how to load into content manager.

Texture2D exceed;

protected override void LoadContent()

{

exceed = Content.Load<Texture2D>(“exceed”);

}

Type File or folder name

How to assign position?

There are two way to assign position.

- Vector2

- Rectangle

Rectangle

There are two type of Rectangle- DestinationRectangle- SourceRectangle

Both type of Rectangle is a parameter in SpriteBatch.Draw() but isn’t a class.

We’ll talk detail about DestinationRectangle but you can find more information about SourceRectangle in wiki

DestinationRectangle

Rectangle DestinationRectangle = new Rectangle(0,0,300,400);

The first two parameter is a x,y position. The second two parameter is size of picture.

First of the second two parameter is a width. Second of the second two parameter is a height.

Parameter type is int.

Vector2

Vector2 position = new Vector position(0,0); Parameter is a x,y position and parameter

type is float.

Which one we should use for assign position?

It’s up your design. Vector2 can give position in float that you

can assign pass thumbnail stick. Rectangle can give position in int but can

assign size of your picture.

Axis in XNA

There are two axis in XNA.– One is a axis of display screen.– Two is a axis of picture.

Axis of display screen is for assigning position of picture origin on screen.

Axis of picture is for assign origin.

Axis

Suppose we assign origin on (50,100) screen.

And assign origin on (-50,-50) picture

50

100

X+

Y+

-50

-50X+

Y+

Assume move picture from x = 50 to x=80.

100

X+

Y+

50

-50

-50X+

Y+

-50

-50X+

Y+

80

Origin

Origin is a position that show picture as previous section and we can assign origin from axis of picture.

Origin also is used for rotating picture. You can find more information about rotating

in wiki.

Collision Detecting

There are many collision algorithm. I will show two sample.

Vector2 Collision

bool CollisionDetect(Vector2 Player,Vector2 enemy)

{

float distance = Vector2.DistanceSquared(player,enemy);

if(distance*distance < 10f)

{ return true;}

return false;

}

Rectangle Collision

Bool RectangleCollision(Rectangle Player,Rectangle Enemy)

{return !( Player.Bottom > Enemy.Top || Player.Top < Enemy.Bottom || Player.Right < Enemy.Left|| Player.Left > Enemy.Right)

//check case that is not collision and revert it}

Let’s practice more

Write a program that picture can move around but picture is not out side screen display.

What’s code we should know?

GraphicsDeviceManager graphics; int displayheight = graphics.GraphicsDevice.Viewport.Height; It’s for height of display screen.

spriteBatch.Draw(Texture2D,Rectangle,Color)

spriteBatch.Draw(Texture2D,Vector2,Color)

Detecting base-level it’s enough for moving picture around.