Maps<br />Tran Minh Triet – Nguyen Khac Huy<br />Faculty of Information Technology<br />University of Science, VNU-HCM<br />
Texture and Frame Scrolling<br />One image file for one frame<br />Many files<br />Slow loading<br />Hard management<br />...
Scrolling Map<br />
Scrolling map<br />
Scrolling map<br />Vertical scrolling<br />Chicken Invaders<br />Skyforce<br />Horizontal scrolling<br />Mario<br />Contra...
HorizontalScrolling Map<br />Source: http://www.xnadevelopment.com/tutorials/scrollinga2dbackground/ScrollingA2DBackground...
Horizontal scrolling map<br />Create Sprite class<br />Adding the following objects to the top of the Sprite class. <br />...
Horizontal scrolling map<br />Modify the LoadContent method of the Sprite class<br />//Load the texture using the Content ...
Horizontal scrolling map<br />Change the Draw method <br />	//Draw the sprite to the screen<br />public void Draw(SpriteBa...
Horizontal scrolling map<br />Adding some new Sprites to Game class<br />        Sprite mBackgroundOne;<br />        Sprit...
Horizontal scrolling map<br />Modify the Initialize method<br />protected override void Initialize()        {<br />// TODO...
Horizontal scrolling map<br />Loading the content<br />protected override void LoadContent()      {<br />	//…<br />mBackgr...
Horizontal scrolling map<br />Moving the background images across the screen in a snake like fashion<br />Adding the code ...
Horizontal scrolling map<br />Update the positions<br />Vector2 aDirection = new Vector2(-1, 0);<br /> Vector2 aSpeed = ne...
Horizontal scrolling map<br />Drawing the Sprites<br />protected override <br />	void Draw(GameTime gameTime)        {<br ...
Vertical Scrolling Map<br />
Vertical scrolling<br />Can you think of some things you can change? <br />How hard would it be to make this scroll vertic...
2D Scrolling Map<br />
<ul><li>Age of Empire II
Age of Wonder
StarCraft</li></ul>2D Scrolling Map<br /><ul><li>Square map
Rhombus map</li></li></ul><li>Square map<br />
Square map - Viewport<br />A rectangular region shown on your screen<br />
Square map – How to do<br />Load cell map textures<br />protected override void LoadMapCells(int[,] matrixmap)        {<br...
Square map – How to do<br />Define two points to draw the viewport<br />// Get x-axis of the left top cell index of the vi...
Square map – How to do<br />Completing the DrawBackGround method<br />for (int i = i1; i <= i2; i++)	{<br />	for (int j = ...
Rhombus map<br />
Rhombus map<br />Viewport<br />What’s difference from the square map?<br />Rhombus map<br />How to draw a rhombus map?<br ...
Rhombus map - Technique<br />
Rhombus map – How to do<br />Convert square coordinate to rhombus coordinate<br />
Rhombus map – How to do<br />// Abstract methods to convert coordinate<br />public abstract Point PointToCell(Point p);<br...
More shape map<br />Viewport<br />What’s difference from?<br />How to change coordinate?<br />Find a position of 2D poin<b...
Demo Rhombus map<br />
Map Editor<br />
Results (1)<br />
Results (2)<br />
Results (3)<br />
Upcoming SlideShare
Loading in …5
×

Maps

1,153 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,153
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • The Size object will be used to store the height and width of the scaled sprite and the Scale object will be used to increase or decrease the size of the sprite from the original image. We are defaulting the Scale variable to 1.0 which tells the SpriteBatch to leave the image at its original size. Making Scale a larger number will increase the size of the sprite and a smaller number for scale will being to shrink the sprite.
  • we will modify the LoadContent method to calculate and initialize the size of our Sprite
  • Next, we want to use one of the many overrides of the SpriteBatch object to draw our image with our new Scale applied. We have added a whole lot of parameters to pass into the Draw method of the SpriteBatch, but the one we are tracking is “Scale”. This will tell the SpriteBatch object to increase or decrease the size of the sprite proportionally. Do a quick build now to make sure everything compiles. If you’re working off the source code for “Creating a 2D Sprite”, you should see the two sprites drawn to the screen.
  • These Sprite objects will be used to move our background images across the screen.
  • These Sprite objects will be used to move our background images across the screen. You can see we have created a new instance of each of our Sprite objects and adjusted the Scale for our background images.
  • You can see that we load the content for each of the Sprite images we added for our backgrounds. We then position each of the images in a trail from left to right. The first image starts at 0,0 which is the top left corner of the screen and then each image is placed in a line after that. Scrolling backgrounds work by moving the background images across the screen in a snake like fashion. When an image moves all the way off the screen on the left, it is placed at the end of the snake tail so that the images can continually loop in that fashion giving you a seamless horizontally scrolling background.
  • we need to both move the images and then check to see if the image has moved off the screen and re-position it at the end. We do that by modifying the Update method to look like this. You might expect to move the background images first, but this will actually begin to create gaps between the images. Often in game development, you have to be very aware in the order that you are doing things. If we move the images first, then check to see if they’ve moved off the screen, you have to remember that the player has never seen that happen yet because they haven’t been drawn to the screen yet! That doesn’t happen until Draw is called.
  • So, instead, we first move images that have moved off the screen (and hopefully the player has seen this occur already) to the end of the trail of images. This is done by checking the Sprite’s current position and seeing if it’s moved further then it’s width off the screen. This means that the entire image is now out of the viewable area for the player. If this is true, then we move the image to the one it should be following. The first image follows the fifth, and then the fifth follows the fourth and so on and so on. Direction is just a -1 or 1 in the X and or Y direction. In our case, we want to move the sprites to the left, so we are decreasing in the X direction, so we use a negative one. We are not moving at all in the Y direction, so we leave that 0 for our Direction vector. Speed is how fast you want the sprite to move. We want the Sprite to move at a decent pace in the X direction and not at all for Y. You can increase or decrease the speed of the scrolling by increasing or decreasing this number. Now let’s look at the second part of the code, the movement.
  • Finally, you multiply by time elapsed. This is done so that computers that are faster and with faster refresh rates see the same speed of scrolling that slower computers with slower refresh rates see. By default, the XNA framework tries to maintain this internally by keeping everything moving at a fixed time step, but it’s a good habit to get into. Ok, we’re re-positioning our background sprites as necessary and moving them along at a steady clip in the right direction. The only thing left to do it draw them to the screen.
  • Introduce some games. How does the map look?
  • A scene in Starcraft
  • Drawing the viewport via the two points.Yep! Everthing done!  Trying to complete the code by yourself
  • Something likes this
  • How to draw a rhombus map?Change coordinate
  • Maps

    1. 1. Maps<br />Tran Minh Triet – Nguyen Khac Huy<br />Faculty of Information Technology<br />University of Science, VNU-HCM<br />
    2. 2. Texture and Frame Scrolling<br />One image file for one frame<br />Many files<br />Slow loading<br />Hard management<br />One image file for one sprite<br />Only One file<br />Loading at once<br />
    3. 3. Scrolling Map<br />
    4. 4. Scrolling map<br />
    5. 5. Scrolling map<br />Vertical scrolling<br />Chicken Invaders<br />Skyforce<br />Horizontal scrolling<br />Mario<br />Contra<br />How do they do that?<br />
    6. 6. HorizontalScrolling Map<br />Source: http://www.xnadevelopment.com/tutorials/scrollinga2dbackground/ScrollingA2DBackground.shtml<br />
    7. 7. Horizontal scrolling map<br />Create Sprite class<br />Adding the following objects to the top of the Sprite class. <br />//The size of the Sprite<br />public Rectangle Size;<br />//Used to size the Sprite up or down from <br /> // the original image<br />public float Scale = 1.0f;<br />
    8. 8. Horizontal scrolling map<br />Modify the LoadContent method of the Sprite class<br />//Load the texture using the Content Pipeline<br />public void LoadContent(ContentManager theContentManager, string theAssetName)<br /> {<br /> mSpriteTexture = theContentManager.Load<Texture2D>(theAssetName);<br /> Size = new Rectangle(<br /> 0, 0, (int)(mSpriteTexture.Width * Scale), (int)(mSpriteTexture.Height * Scale));<br /> }<br />
    9. 9. Horizontal scrolling map<br />Change the Draw method <br /> //Draw the sprite to the screen<br />public void Draw(SpriteBatch theSpriteBatch)<br /> {<br /> theSpriteBatch.Draw(<br />mSpriteTexture,<br />Position, <br />new Rectangle(0, 0, SpriteTexture.Width, mSpriteTexture.Height),<br />Color.White, 0.0f, Vector2.Zero, Scale, SpriteEffects.None, 0);<br /> }<br />
    10. 10. Horizontal scrolling map<br />Adding some new Sprites to Game class<br /> Sprite mBackgroundOne;<br /> Sprite mBackgroundTwo;<br /> Sprite mBackgroundThree;<br />
    11. 11. Horizontal scrolling map<br />Modify the Initialize method<br />protected override void Initialize() {<br />// TODO: Add your initialization logic here<br /> mBackgroundOne = new Sprite();<br /> mBackgroundOne.Scale = 2.0f;<br /> mBackgroundTwo = new Sprite();<br /> mBackgroundTwo.Scale = 2.0f;<br /> mBackgroundThree = new Sprite();<br /> mBackgroundThree.Scale = 2.0f;<br />base.Initialize();<br /> }<br />
    12. 12. Horizontal scrolling map<br />Loading the content<br />protected override void LoadContent() {<br /> //…<br />mBackgroundOne.LoadContent(this.Content,"Background01"); <br /> mBackgroundOne.Position = new Vector2(0, 0);<br />mBackgroundTwo.LoadContent(this.Content, Background02");<br />mBackgroundTwo.Position = new Vector2( mBackgroundOne.Position.X + mBackgroundOne.Size.Width, 0);<br />mBackgroundThree.LoadContent(this.Content,<br />“Background03");<br /> mBackgroundThree.Position = new Vector2( mBackgroundTwo.Position.X + mBackgroundTwo.Size.Width, 0);<br />}<br />
    13. 13. Horizontal scrolling map<br />Moving the background images across the screen in a snake like fashion<br />Adding the code to Update method<br />if (mBackgroundOne.Position.X < -mBackgroundOne.Size.Width)<br />mBackgroundOne.Position.X = mBackgroundThree.Position.X + mBackgroundThree.Size.Width;<br />if (mBackgroundTwo.Position.X < -mBackgroundTwo.Size.Width)<br />mBackgroundTwo.Position.X = mBackgroundOne.Position.X + mBackgroundOne.Size.Width;<br />if (mBackgroundThree.Position.X < -mBackgroundThree.Size.Width)<br />mBackgroundThree.Position.X = mBackgroundTwo.Position.X + mBackgroundTwo.Size.Width;<br />
    14. 14. Horizontal scrolling map<br />Update the positions<br />Vector2 aDirection = new Vector2(-1, 0);<br /> Vector2 aSpeed = new Vector2(160, 0);<br /> mBackgroundOne.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;<br /> mBackgroundTwo.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;<br /> mBackgroundThree.Position += aDirection * aSpeed * (float)gameTime.ElapsedGameTime.TotalSeconds;<br />
    15. 15. Horizontal scrolling map<br />Drawing the Sprites<br />protected override <br /> void Draw(GameTime gameTime) {<br />graphics.GraphicsDevice.Clear(<br />Color.CornflowerBlue);<br /> // TODO: Add your drawing code here<br /> spriteBatch.Begin();<br /> mBackgroundOne.Draw(this.spriteBatch);<br /> mBackgroundTwo.Draw(this.spriteBatch);<br /> mBackgroundThree.Draw(this.spriteBatch);<br /> spriteBatch.End();<br /> base.Draw(gameTime);<br /> }<br />
    16. 16. Vertical Scrolling Map<br />
    17. 17. Vertical scrolling<br />Can you think of some things you can change? <br />How hard would it be to make this scroll vertically? <br />Do you think you know what you might change? <br />
    18. 18. 2D Scrolling Map<br />
    19. 19. <ul><li>Age of Empire II
    20. 20. Age of Wonder
    21. 21. StarCraft</li></ul>2D Scrolling Map<br /><ul><li>Square map
    22. 22. Rhombus map</li></li></ul><li>Square map<br />
    23. 23. Square map - Viewport<br />A rectangular region shown on your screen<br />
    24. 24. Square map – How to do<br />Load cell map textures<br />protected override void LoadMapCells(int[,] matrixmap) {<br /> this.cells = new MapCell[MAP_SIZE_IN_CELL.Width, MAP_SIZE_IN_CELL.Height];<br />for (int i = 0; i < MAP_SIZE_IN_CELL.Width; i++) {<br />for (int j = 0; j < MAP_SIZE_IN_CELL.Height; j++) {<br /> Texture2D imgCell = Game.Content.Load<Texture2D>(<br /> SQUARE_MAP_IMG _PATH + “BG0001");<br />// Create a new map cell<br />this.cells[i, j] = new MapCell(<br /> imgCell, i * CELL_SIZE.Width, j * CELL_SIZE.Height);<br /> }<br /> }<br />}<br />
    25. 25. Square map – How to do<br />Define two points to draw the viewport<br />// Get x-axis of the left top cell index of the viewport<br />int i1 = (int)this._currentRootCoordinate.X / CELL_SIZE.Width;<br />// Get y-axis of the left top cell index of the viewport<br />int j1 = (int)this._currentRootCoordinate.Y / CELL_SIZE.Height;<br />// Get x-axis of the right-bottom cell index of the viewport<br />int i2 = (int)(this._currentRootCoordinate.X + Game.Window.ClientBounds.Width) / CELL_SIZE.Width; <br />// Get y-axis of the right-bottom cell index of the viewport<br />int j2 = (int)(this._currentRootCoordinate.Y + Game.Window.ClientBounds.Height) / CELL_SIZE.Height;<br />
    26. 26. Square map – How to do<br />Completing the DrawBackGround method<br />for (int i = i1; i <= i2; i++) {<br /> for (int j = j1; j <= j2; j++) {<br /> try{<br /> // calculating the coodinate on screen and drawing<br />Rectangle recToDraw = new Rectangle((int)(<br /> this.cells[i, j].X - this._currentRootCoordinate.X),<br /> (int)(this.cells[i, j].Y-this._currentRootCoordinate.Y),<br /> CELL_SIZE.Width, CELL_SIZE.Height);<br /> spriteBatch.Draw(this.cells[i, j].Background, <br /> recToDraw, Color.White);<br /> } catch{ }<br /> }<br />}<br />
    27. 27. Rhombus map<br />
    28. 28. Rhombus map<br />Viewport<br />What’s difference from the square map?<br />Rhombus map<br />How to draw a rhombus map?<br />Find a position of 2D point<br />
    29. 29. Rhombus map - Technique<br />
    30. 30. Rhombus map – How to do<br />Convert square coordinate to rhombus coordinate<br />
    31. 31. Rhombus map – How to do<br />// Abstract methods to convert coordinate<br />public abstract Point PointToCell(Point p);<br />public abstract Point CenterToCell(Point p);<br />public abstract Point CellToPoint(Point cell);<br />public abstract Point CellToCenter(Point cell);<br />
    32. 32. More shape map<br />Viewport<br />What’s difference from?<br />How to change coordinate?<br />Find a position of 2D poin<br />
    33. 33. Demo Rhombus map<br />
    34. 34. Map Editor<br />
    35. 35. Results (1)<br />
    36. 36. Results (2)<br />
    37. 37. Results (3)<br />
    38. 38. Results (4)<br />
    39. 39. Q&A<br />?<br />
    40. 40. References<br />Website<br />http://www.xnadevelopment.com<br />Ebook<br />Learning XNA 3.0 – Aaron Reed<br />

    ×