1
\$\begingroup\$

I am working on a tile based game that renders the playing surface in a viewport. I am struggling with getting my head around the mechanics and best practices of rendering a viewport, specifically a scrollable viewport.

Typically the entire playing surface is made up of many adjoining tiles, and will display a portion of the surface to the user. The user will be able to scroll around the viewport by dragging or scrolling (North, east, South, west directions)

What would be considered best practice, for example.

  • would one render and update every tile in the playing surface whether visible or not (I could see this using potentially a lot of processing time on larger maps with processing and needing to update every tile), or;
  • should one only render what is visible to the user (and a few additional tiles around the edges to ensure that it looks like everything is rendered and avoid holes in the map)

I am quite new to game programming and would appreciate any thoughts and guidance of best practice in this area

\$\endgroup\$
1
  • \$\begingroup\$ Start with the simplest approach and optimize after measuring. It really depends on the size and complexity of your maps and devices you're running on. \$\endgroup\$ Jun 27, 2015 at 20:23

2 Answers 2

1
\$\begingroup\$

Both technics are ok. It's not that consuming to render more than it needs on modern devices, and the half of clipping/culling work made by graphical library itself. Most common technic is rendering chunks, such as rooms.

\$\endgroup\$
0
\$\begingroup\$

If you have maps that contain thousands of blocks, updating and drawing them all isn't efficient, and you lose a lot of valuable processing time. All you need to do is just draw what is in the viewport. Update blocks that are in the viewport as well, but make sure to update any moving blocks as well.

Say you have a camera and a 2-dimensional array of blocks.

You would do something like this:

for(int y = (camera.position.y - blockHeight) / blockHeight; y != (camera.position.y + screenHeight + blockHeight) / blockHeight; y++)
{
    for(int x = (camera.position.x - blockWidth) / blockWidth; x != (camera.position.x + screenWidth + blockWidth) / blockWidth; x++)
    {
        Blocks[x, y].draw/update();
    }
}

This will work for most setups.

One thing to note: This is a good option for Drawing 2D games.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .