Image for post
Image for post

Isometric Grids in Python

A bit down and to the left

Here's a typical isometric Grid/Image and a simple approximation of what's going on which we will use throughout, starting from a simple square you rotate it 45° and then squish it so it is twice as wide as it is tall. 
Image for post
Image for post
Prerequisites: If you want to code along you'll need pygame, although hopefully what we learn here will work for other libraries that can draw lines and place sprites on a canvas, same goes for other languages. If you need a primer on grids/Pygame check this other post : Making Grids in Python.Note: Not an optimized Pygame solution, use/tweak the game loop as per your needs, this one for instance runs all the time which might not be what you want, the last example adds some basic animations if hat's what you are after.
Image for post
Image for post
isometricfromCartesianX = pointX - pointY
isometricfromCartesianY = (pointX + pointY)/2
Cartesian is the regular x,y's we've been using for our coordinates, the following code snippet does this transformation...
Image for post
Image for post
Once more there's not much to it, I am using the exact same grid code I used for my 2D grid post and then using the cartToIso function on each point, just be careful to encase the points correctly, so a point like (origin[0], hw + origin[1]) turns into cartToIso([origin[0], hw + origin[1]]) notice the inner list brackets [].
Image for post
Image for post
Behold an isometric grid!

Isometric Tiles

Image for post
Image for post
Few things worth noticing from this example: We (I) have a mess of coordinates, borders and other small details, this is mostly fine for a quick example on how to draw isometric tiles. The main problem is that we don't have a way to tie up the container ( the grid ) and the content ( the tiles ), a secondary problem is that there is no clear relationship between the cartesian grid and the isometric one, while you might not need the graphical representation in your program you still need a coordinate system and starting from a cartesian one and converting to isometric is fairly common, so you might still need to check on these coordinates before moving them to isometric ones, so these 2 issues are our next order of business...

Tidying up

Image for post
Image for post
Once more the weird thing here is the rotation of the coordinates since top left is now visually top right, if you need to rotate them in other direction either change your map or how you loop over it.
Image for post
Image for post
There are a few methods for animating tiles and Pygame in general, here we added a timer variable which we check for in one second increments and then we create a new random cell map, but you could use pygames native timer and/or FPS, check pygame's time documentation for.

Where to now?

Written by

AI, Software Developer, Designer : www.k3no.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store