Tutorials‎ > ‎

XNA Framework II

posted Dec 26, 2011, 10:41 PM by Reza Aggi Prasetyo   [ updated Aug 15, 2016, 11:40 PM by Surya Wang ]

2D Game Basic (Text)

 

How to Load Text

                With XNA, we can also print text with its provided feature. Here are the steps:

a.       First, add your font file that you want to use into your project solution.

Right click Content in Solution explorer > Add > New Item.


 

b.      There will be a window to choose which item to be imported. Because we need a file with font file format, so we choose Sprite Font.


After imported the Font file, we can see its properties.

 

c.       Then automatically there will be a window about the Font properties.



-          FontName, represents the name of Font that will be used. Fonts that are available when XNA has been installed are:

+     Kooten.ttf

+     Linds.ttf

+     Miramo.ttf

+     Bold Moramob.ttf

+     Peric.ttf

+     Pericl.ttf

+     Pesca.ttf

+     Pescab.ttf

To use other Fonts, you can see from your own Windows.

-          Size, used to define the size of the Font.

-          Spacing, used to define space between characters.

-          UseKerning, used to define the layout of the Font.

-          Style, used to define style of the Font.

-          DefaultCharacter, used to change the used Font.

-          CharacterRegions, used to control characters that contained in the Font. Every character from Start to the End will be created and available when drawn. The default is 32 (space ASCII) to 126 (‘~’ ASCII).

 

d.      Add the container image for the image.


 

e.      Add some code to the LoadContent() method.


 

f.        In Draw() method, add this code below to load the Font.


 

g.       Here is the result when we run our program.


 

h.      If you want to move the text to the center of the screen, so you must change some code.


 

i.         Then, in LoadContent() method, add this code below.


 

j.        Change some code in Draw() method.


 

k.       Here is the result after the code is changed.


 

 

 

2D Basic (Animation)

 

Simple Animation

                Here, I will explain about how to create a simple animation like a bouncing ball. Here are the steps:

a.       First, we have to add the image file that would be used into our Project solution.

The images that I will use here is:


Right click Content in Solution explorer > Add >Existing Item.


 

b.      Then, choose the image file that want we to be used.

 

c.       Add the container class for the image.


 

d.      Add some code to the LoadContent() method.


 

e.      Add this code to UnloadContent() method for cleaning memory.


 

f.        In Update() method, add this code below to check whether if the ball has touched the end of the screen side.


 

g.       In Draw() method, add this code below to load the image. We need SpriteBatch class that provided by XNA to show it on the screen.


 

h.      Here is the result when we run our program.


On the screen, you will see an animation of your image moving and bouncing in your XNA program window.

 

 

 

2D Game Basic (Collision)

 

Collision Detection

                Collision is a state where two or more objects release a strong force each other in a short time or in other words, one touches another and makes each object must bounce to the opposite direction than it should.

                I will explain how to make it real in our XNA program with two images. Here are the steps:

a.       First, we have to add two image files that would be used into our Project Solution.

I would like to use these images.



Right click Content in Solution explorer > Add > Existing Item.


 

b.      Then, choose two image files that we want to use. After you choose the image files, you can see their properties.

 

c.       Add the container class for the two images.


 

d.      Add some code to the LoadContent() method.


 

e.      Add this code to UnloadContent() method for cleaning memory.


 

f.        In Update() method, add this code below to check whether if the ball has touched the end of the screen side.


 

g.       Create a new function named Collide(). This function will check whether the two objects touch each other or not.


 

h.      Add this code below in Update() method, to change the direction of objects movement if a collision happened.


 

i.         In Draw() method, add this code below to load the image. We need SpriteBatch class that provided by XNA to show it on the screen.


 

j.        Here is the result when we run our program.


On the screen, you will see an animation of your image moving and bouncing in your XNA program window and when the objects touches each other, they will bounce to the opposite direction that they should.