Jump to content
  • Advertisement
Sign in to follow this  

C++ Render isometric tiles

This topic is 3343 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
Hey, this example was perfect, thank you!, I got it working, your example was very helpful. ( And so where the links in the previous post too! ).

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!