Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply



Published on

Published in: Technology, Education

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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
  • Transcript

    • 1. Maps
      Tran Minh Triet – Nguyen Khac Huy
      Faculty of Information Technology
      University of Science, VNU-HCM
    • 2. Texture and Frame Scrolling
      One image file for one frame
      Many files
      Slow loading
      Hard management
      One image file for one sprite
      Only One file
      Loading at once
    • 3. Scrolling Map
    • 4. Scrolling map
    • 5. Scrolling map
      Vertical scrolling
      Chicken Invaders
      Horizontal scrolling
      How do they do that?
    • 6. HorizontalScrolling Map
    • 7. Horizontal 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;
    • 8. Horizontal 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));
    • 9. Horizontal scrolling map
      Change the Draw method
      //Draw the sprite to the screen
      public void Draw(SpriteBatch theSpriteBatch)
      new Rectangle(0, 0, SpriteTexture.Width, mSpriteTexture.Height),
      Color.White, 0.0f, Vector2.Zero, Scale, SpriteEffects.None, 0);
    • 10. Horizontal scrolling map
      Adding some new Sprites to Game class
      Sprite mBackgroundOne;
      Sprite mBackgroundTwo;
      Sprite mBackgroundThree;
    • 11. Horizontal scrolling map
      Modify the Initialize method
      protected 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;
    • 12. Horizontal scrolling map
      Loading the content
      protected override void LoadContent() {
      mBackgroundOne.Position = new Vector2(0, 0);
      mBackgroundTwo.LoadContent(this.Content, Background02");
      mBackgroundTwo.Position = new Vector2( mBackgroundOne.Position.X + mBackgroundOne.Size.Width, 0);
      mBackgroundThree.Position = new Vector2( mBackgroundTwo.Position.X + mBackgroundTwo.Size.Width, 0);
    • 13. Horizontal scrolling map
      Moving the background images across the screen in a snake like fashion
      Adding 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;
    • 14. Horizontal 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;
    • 15. Horizontal scrolling map
      Drawing the Sprites
      protected override
      void Draw(GameTime gameTime) {
      // TODO: Add your drawing code here
    • 16. Vertical Scrolling Map
    • 17. Vertical 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?
    • 18. 2D Scrolling Map
    • 19. 2D Scrolling Map
      • Square map
      • 22. Rhombus map
    • Square map
    • 23. Square map - Viewport
      A rectangular region shown on your screen
    • 24. Square 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);
    • 25. Square map – How to do
      Define two points to draw the viewport
      // Get x-axis of the left top cell index of the viewport
      int i1 = (int)this._currentRootCoordinate.X / CELL_SIZE.Width;
      // Get y-axis of the left top cell index of the viewport
      int j1 = (int)this._currentRootCoordinate.Y / CELL_SIZE.Height;
      // Get x-axis of the right-bottom cell index of the viewport
      int i2 = (int)(this._currentRootCoordinate.X + Game.Window.ClientBounds.Width) / CELL_SIZE.Width;
      // Get y-axis of the right-bottom cell index of the viewport
      int j2 = (int)(this._currentRootCoordinate.Y + Game.Window.ClientBounds.Height) / CELL_SIZE.Height;
    • 26. Square map – How to do
      Completing the DrawBackGround method
      for (int i = i1; i <= i2; i++) {
      for (int j = j1; j <= j2; j++) {
      // 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{ }
    • 27. Rhombus map
    • 28. Rhombus map
      What’s difference from the square map?
      Rhombus map
      How to draw a rhombus map?
      Find a position of 2D point
    • 29. Rhombus map - Technique
    • 30. Rhombus map – How to do
      Convert square coordinate to rhombus coordinate
    • 31. Rhombus 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);
    • 32. More shape map
      What’s difference from?
      How to change coordinate?
      Find a position of 2D poin
    • 33. Demo Rhombus map
    • 34. Map Editor
    • 35. Results (1)
    • 36. Results (2)
    • 37. Results (3)
    • 38. Results (4)
    • 39. Q&A
    • 40. References
      Learning XNA 3.0 – Aaron Reed