Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Maps
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
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) { theSpriteBatch.Draw( mSpriteTexture, Position, 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; base.Initialize(); }
12. Horizontal scrolling map Loading 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); }
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;
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?
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++) { 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{ } } }
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 Viewport What’s difference from? How to change coordinate? Find a position of 2D poin
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
