maps
DESCRIPTION
TRANSCRIPT
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