StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIsometric, draw only on screen tiles
text
Body
copied!<p>I need to draw only the tiles on screen to increase performance. What is a viable way to do this?</p> <p>I tried this that brings me close but end up with a bug i cant seem to solve.</p> <pre><code>//world position to start drawing from int sPosX = (int)(cam.Position.X - (device.Viewport.Width / 2)); int sPosY = (int)(cam.Position.Y - (device.Viewport.Height / 2)); //tile position to start drawing from int sTileX = (int)((sPosX + (2*sPosY) - (Map.TileWidth/2)) / Map.TileWidth -1); int sTileY = (int)((sPosX - (2 * sPosY) - (Map.TileHeight / 2)) / -Map.TileWidth - 1); //amount of rows/collumns to draw int rowCount = (int)(device.Viewport.Height / (Map.TileHeight / 2) + 2); int colCount = (int)(device.Viewport.Width / Map.TileWidth + 2); //current tile to draw int tileX; int tileY; for (int row = 0; row < rowCount; row++) { for (int col = 0; col < colCount; col++) { tileX = sTileX + col + (int)((row / 2)); tileY = sTileY - col + (int)((row / 2)); if (tileX >= 0 && tileX < tileMap.GetLength(0) && tileY >= 0 && tileY < tileMap.GetLength(1)) { batch.Draw(grid, new Rectangle((tileX * (TileWidth / 2)) - (tileY * (TileWidth / 2)), (tileX * (TileHeight / 2) + (tileY * (TileHeight / 2))), TileWidth, TileHeight), Color.White); batch.DrawString(tiny, tileX + "," + tileY, new Vector2(tileX * (TileWidth / 2) - (tileY * (TileWidth / 2)) + 24, tileX * (TileHeight / 2) + (tileY * (TileHeight / 2)) + 12), Color.White); } } } </code></pre> <p>Here i try drawing my tilemap row by row. First i find out what the first tile to be drawn is (upper left corner) then i find out how many collumns and how many rows need to be drawn.</p> <p>At first i only worked with floats and cast to end at the last moment, while converting the floats step by step to int i was able to get the full X=0 and full Y=0 row on the screen but the rest still showed up as this picture.</p> <p><img src="https://i.stack.imgur.com/7m19Y.jpg" alt="Isometric display problem"></p> <p>While moving the camera, the tiles shown/rendered switch between uneven and even, so if i move a small amount down suddenly all the tiles show in the picture disappear and the blanks get shown. Moving further and it reverses, if i keep moving it flickers between those two states. I figured it has something to do with the (row/2) but i cant seem to fix it.</p> <p>The way i am calculating which tiles to draw seems to be good. I get this when i zoom out (zooming is not altering the formula yet). In the picture below you can see the 2nd state as well where the other tiles being drawn.</p> <p><img src="https://i.stack.imgur.com/5j0lO.jpg" alt="enter image description here"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload