maps

MapsMaps

Tran Minh Triet – Nguyen Khac HuyFaculty of Information TechnologyUniversity of Science, VNU-HCM

Scrolling MapScrolling Map

Scrolling mapScrolling map

Scrolling mapScrolling map

Vertical scrollingChicken InvadersSkyforce

Horizontal scrollingMarioContra

How do they do that?

Horizontal Scrolling MapHorizontal Scrolling Map

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

Horizontal scrolling mapHorizontal scrolling map

Create Sprite class

Adding the following objects to the top of the Sprite class.

//The size of the Sprite public Rectangle Size;

//Used to size the Sprite up or down from // the original image public float Scale = 1.0f;

Horizontal scrolling mapHorizontal scrolling map

Modify the LoadContent method of the Sprite class

//Load the texture using the Content Pipeline public void LoadContent(ContentManager

theContentManager, string theAssetName) { mSpriteTexture = theContentManager.Load<Texture2D>(theAssetName); Size = new Rectangle(

0, 0, (int)(mSpriteTexture.Width * Scale), (int)(mSpriteTexture.Height * Scale)); }

Horizontal scrolling mapHorizontal scrolling map

Change the Draw method

//Draw the sprite to the screen public void Draw(SpriteBatch theSpriteBatch) { theSpriteBatch.Draw(

mSpriteTexture, Position,

new Rectangle(0, 0, SpriteTexture.Width, mSpriteTexture.Height),

Color.White, 0.0f, Vector2.Zero, Scale, SpriteEffects.None, 0);

}

Horizontal scrolling mapHorizontal scrolling map

Adding some new Sprites to Game class

Sprite mBackgroundOne; Sprite mBackgroundTwo; Sprite mBackgroundThree;

Horizontal scrolling mapHorizontal scrolling map

Modify the Initialize methodprotected override void Initialize() { // TODO: Add your initialization logic here mBackgroundOne = new Sprite(); mBackgroundOne.Scale = 2.0f;

mBackgroundTwo = new Sprite(); mBackgroundTwo.Scale = 2.0f;

mBackgroundThree = new Sprite(); mBackgroundThree.Scale = 2.0f;

base.Initialize(); }

Horizontal scrolling mapHorizontal scrolling mapLoading the content protected override void LoadContent() {

//…

mBackgroundOne.LoadContent(this.Content,"Background01");

mBackgroundOne.Position = new Vector2(0, 0);

mBackgroundTwo.LoadContent(this.Content, Background02");

mBackgroundTwo.Position = new Vector2( mBackgroundOne.Position.X +

mBackgroundOne.Size.Width, 0);

mBackgroundThree.LoadContent(this.Content,“Background03");

mBackgroundThree.Position = new Vector2( mBackgroundTwo.Position.X + mBackgroundTwo.Size.Width, 0);}

Horizontal scrolling mapHorizontal scrolling map

Moving the background images across the screen in a snake like fashionAdding the code to Update method

if (mBackgroundOne.Position.X < -mBackgroundOne.Size.Width) mBackgroundOne.Position.X = mBackgroundThree.Position.X + mBackgroundThree.Size.Width;

if (mBackgroundTwo.Position.X < -mBackgroundTwo.Size.Width) mBackgroundTwo.Position.X = mBackgroundOne.Position.X + mBackgroundOne.Size.Width;

if (mBackgroundThree.Position.X < -mBackgroundThree.Size.Width) mBackgroundThree.Position.X = mBackgroundTwo.Position.X + mBackgroundTwo.Size.Width;

Horizontal scrolling mapHorizontal scrolling map

Update the positions

Vector2 aDirection = new Vector2(-1, 0); Vector2 aSpeed = new Vector2(160, 0);

mBackgroundOne.Position += aDirection * aSpeed *

(float)gameTime.ElapsedGameTime.TotalSeconds; mBackgroundTwo.Position += aDirection * aSpeed *

(float)gameTime.ElapsedGameTime.TotalSeconds; mBackgroundThree.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;

Horizontal scrolling mapHorizontal scrolling map

Drawing the Sprites

protected override void Draw(GameTime gameTime) {

graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

// TODO: Add your drawing code herespriteBatch.Begin();mBackgroundOne.Draw(this.spriteBatch);mBackgroundTwo.Draw(this.spriteBatch);mBackgroundThree.Draw(this.spriteBatch);spriteBatch.End();

base.Draw(gameTime); }

Vertical Scrolling MapVertical Scrolling Map

Vertical scrollingVertical scrolling

Can you think of some things you can change?

How hard would it be to make this scroll vertically?

Do you think you know what you might change?

2D Scrolling Map2D Scrolling Map

2D Scrolling Map2D Scrolling Map

Age of Empire II

Age of Wonder

StarCraft

Square map

Rhombus map

Square mapSquare map

Square map - ViewportSquare map - Viewport

A rectangular region shown on your screen

Square map – How to doSquare map – How to do

Load cell map textures

protected override void LoadMapCells(int[,] matrixmap) { this.cells = new MapCell[MAP_SIZE_IN_CELL.Width,

MAP_SIZE_IN_CELL.Height]; for (int i = 0; i < MAP_SIZE_IN_CELL.Width; i++) { for (int j = 0; j < MAP_SIZE_IN_CELL.Height; j++) { Texture2D imgCell =

Game.Content.Load<Texture2D>(SQUARE_MAP_IMG _PATH + “BG0001");

// Create a new map cell this.cells[i, j] = new MapCell(

imgCell, i * CELL_SIZE.Width, j * CELL_SIZE.Height); } }}

Square map – How to doSquare map – How to do

Define two points to draw the viewport

// Get x-axis of the left top cell index of the viewportint i1 = (int)this._currentRootCoordinate.X / CELL_SIZE.Width;

// Get y-axis of the left top cell index of the viewportint j1 = (int)this._currentRootCoordinate.Y / CELL_SIZE.Height;

// Get x-axis of the right-bottom cell index of the viewportint i2 = (int)(this._currentRootCoordinate.X + Game.Window.ClientBounds.Width) / CELL_SIZE.Width;

// Get y-axis of the right-bottom cell index of the viewportint j2 = (int)(this._currentRootCoordinate.Y + Game.Window.ClientBounds.Height) / CELL_SIZE.Height;

Square map – How to doSquare map – How to do

Completing the DrawBackGround methodfor (int i = i1; i <= i2; i++) {

for (int j = j1; j <= j2; j++) { try{

// calculating the coodinate on screen and drawing Rectangle recToDraw = new Rectangle((int)( this.cells[i, j].X -

this._currentRootCoordinate.X), (int)(this.cells[i, j].Y-this._currentRootCoordinate.Y), CELL_SIZE.Width, CELL_SIZE.Height);

spriteBatch.Draw(this.cells[i, j].Background, recToDraw, Color.White);

} catch{ }}

}

Rhombus mapRhombus map

Rhombus mapRhombus map

ViewportWhat’s difference from the square map?

Rhombus mapHow to draw a rhombus map?Find a position of 2D point

Rhombus map - TechniqueRhombus map - Technique

Rhombus map – How to doRhombus map – How to do

Convert square coordinate to rhombus coordinate

Rhombus map – How to doRhombus map – How to do

// Abstract methods to convert coordinate

public abstract Point PointToCell(Point p);public abstract Point CenterToCell(Point p);public abstract Point CellToPoint(Point cell);public abstract Point CellToCenter(Point cell);

More shape mapMore shape map

ViewportWhat’s difference from?

How to change coordinate?Find a position of 2D poin

Demo Rhombus map

Demo Rhombus map

Map EditorMap Editor

Results (1)Results (1)

Results (2)Results (2)

Results (3)Results (3)

Results (4)Results (4)

Q&AQ&A

?

ReferencesReferences

Websitehttp://www.xnadevelopment.com

EbookLearning XNA 3.0 – Aaron Reed