1

Aaron Yuen

Outline8.1 Sprite Font8.2 Type of Scrolling Background8.3 Tile-based Scrolling Background 8.4 2D Camera Movement8.5 2.5D Isometric Map

MTA-4201 Game ProgrammingChapter 8 : Scrolling Background & Font

2

Aaron Yuen

8.1 Sprite Font

There are Three ways to output text in XNA games:

(1) Xml based spritefont (For English)

To draw text on screen :

http://msdn.microsoft.com/en-us/library/bb447673.aspxhttp://msdn.microsoft.com/en-us/library/bb447673.aspx

3

Aaron Yuen

8.1 Sprite Font

The following list of fonts are installed by XNA Game Studio and are redistributable:

• Kooten.ttf, Linds.ttf, Miramo.ttf, Bold Miramob.ttf, Peric.ttf, Pericl.ttf, Pesca.ttf, Pescab.ttf

4

Aaron Yuen

8.1 Sprite Font

5

Aaron Yuen

(2) Bitmap Font (For English)

(3) Customized Content Pipeline (For Asian Language)

http://msdn.microsoft.com/en-us/library/bb447751.aspx

6

Aaron Yuen

(1) Side-Scrolling Background (2) Vertical-Scrolling Background (3) Parallax-Scrolling Background

8.2 Types of Scrolling BackgroundScrolling Background games allow game

Developers to present a much larger world

To the game player because things could

Be outside of the view of the immediate game

Screen. Layers of scrolling backgrounds to

Improve the quality of the game screens.

7

Aaron Yuen

8.3 Horizontal / Vertical Scrolling(1) In the project, add the images, and the library files : Sprite.cs and

HorizontallyScrollingBackground.cs .

(2) Add the new variable//Create a Horizontally scrolling background

HorizontallyScrollingBackground mScrollingBackground;

(3) Modify the LoadContent() method to look like this. protected override void LoadContent() {

mScrollingBackground = new HorizontallyScrollingBackground(this.GraphicsDevice.Viewport);

mScrollingBackground.AddBackground("Background01");

mScrollingBackground.AddBackground("Background02");

mScrollingBackground.AddBackground("Background03");

mScrollingBackground.AddBackground("Background04");

mScrollingBackground.AddBackground("Background05");

// Load the content for the Scrolling background

mScrollingBackground.LoadContent(this.Content);

}

8

Aaron Yuen

8.3 Horizontal Scrolling(4) Modify the Update() method to look like this.

protected override void Update(GameTime gameTime) {

//Update the scrolling backround.

mScrollingBackground.Update(gameTime, 160,

HorizontallyScrollingBackground.HorizontalScrollDirection.Left);

}

(5) Modify the Draw() method to look like this. protected override void Update(GameTime gameTime) {

spriteBatch.Begin();

// Draw the scrolling background

mScrollingBackground.Draw(spriteBatch);

spriteBatch.End();

}

Detailed Explanation of Horizontal Scrolling :

http://www.xnadevelopment.com/tutorials/scrollinga2dbackground/ScrollingA2DBackground.shtml

9

Aaron Yuen

8.3 Tile-based Scrolling / Parallax Scrolling

A sprite class is added to provide extra features for the sprite uses in the game.

10

Aaron Yuen

8.3 Tile-based Scrolling / Parallax Scrolling

A sprite class is added to provide extra features for the sprite uses in the game.

11

Aaron Yuen

It supports a large world / level, and the game controls the camera to show proportion of the world.

8.4 2D Camera Movement

12

Aaron Yuen

8.5 Isometric View