Sign in to follow this  

C++ Render isometric tiles

This topic is 3064 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

That depends on the type of map you're looking to render, a Staggered/Block type map or a Diamond map. Here's an example of each from my Wiki site: http://legendofmazzeroth.wikidot.com/staggered-isometric-maps.

Staggered maps are somewhat easier to optimize the rendering for as they are already rectangular. They're well suited to RPG, Turn-Based Strategy and any other game which doesn't have the straight angled edges typical of the diamond map. The rendering for such a map is very straight forward. The following is a snippet of code from the renderer that I use in my staggered/block implementation:


// Coordinates for the tile at the top left of the screen based on
// the current viewport's anchor coordinates.
mTileCoordX = mViewportAnchorX / mTileWidth, mTileCoordY = (mViewportAnchorY / mTileHeight) * 2;

// Tile render offset from base position.
mRenderOffsetX = -(mViewportAnchorX % mTileWidth), mRenderOffsetY = -(mViewportAnchorY % mTileHeight);

int renderX = mRenderOffsetX, renderY = mRenderOffsetY - mTileHeight;

// Loop through tile coordinates, pull out tile information from the Tileset and
// draw tiles to the screen.
for(int y = 0; y < mNumYTileLoops; y++)
{
// Determine if we're on an odd row and if we are subtract a half tile width
// to the X render offset.
renderX = mRenderOffsetX - ((y & 1) * mHalfTileWidth);

for(int x = 0; x < mNumXTileLoops; x++)
{
mRenderer->drawImage(image, renderX, renderY);
renderX += mOffsetX;
}
renderY += mOffsetY;
}


A few things to note about the above code -- it's somewhat simplified to make it easier to understand. There are a few values there that are determined outside of the function that are used for smooth-scrolling, namely the 'viewport' variables.

To note here is that depending on whether or not we're rendering an odd row we add (or subtract) a half tile's width from the x-coordinate render position. We always add a half tile height to the y-coordinate render position (this is to make all the tiles align properly).

Diamond maps are rendered somewhat different. What's difficult about rendering them is doing it efficiently -- e.g., you don't want to loop through all of the tiles in an entire map as that's very slow and a gross waste of power. Instead, you want to determine which tile in the diamond map is visible at the top-left corner of the screen (using a screen-tile coordinate function) and then use a bit of math to run through each tile in your tile array. I don't have the stuff in front of me because I haven't developed the diamond-map portion of the render code but it's pretty straight forward.

The tutorials linked to are actually a great start so hopefully this post coupled with those articles will set you in the right direction.

Share this post


Link to post
Share on other sites

This topic is 3064 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this