# C++ Render isometric tiles

## Recommended Posts

Hello. Can somebody create or post an example of simple isometric tile rendering Thanks

##### Share on other sites
Have you tried checking out any of the articles here?

##### Share on other sites
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 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! ).

## Create an account

Register a new account

• ### Forum Statistics

• Total Topics
627694
• Total Posts
2978673

• 19
• 14
• 12
• 10
• 12