Why Isometric? | Art, Code and Matrix Maths | A Devlog

so i've been thinking a lot about isometric art recently after creating a small game for a game jam entry that utilized an isometric perspective i've been thinking a lot more about how to implement it in a larger project for the past couple of months i've been working on a deck building roguelike game and the art so far has felt a little stale so i decided to implement an isometric art style which came with a lot of complications and a lot of benefits which i'd like to discuss in this video so what this video is going to bring together is first a high level overview of why someone would want to use an isometric perspective then an explanation on how to create tileable isometric pixel art a discussion of the math involved and the utility of linear algebra and an overview of the code changes i had to make previously the game utilized a top-down perspective which you might see in pokemon diamond or stardew valley where the camera was only rotated on a single axis similar to looking down at a chess board now imagine looking down in the chess board but rotating it 45 degrees on the vertical axis and you'll see what it looks like from an isometric perspective however you can imagine this comes with a lot of complications both for art and for code coordinates for example become very strange and art becomes difficult to tile and very difficult to imagine after all rotation on a single axis is hard enough to picture let alone on two you'll see the style in monument valley and enter the breach which my game has been particularly inspired by so why would anyone use this style at all it's used in engineering and architectural drawings as it permits a view of the three-dimensional structure of an object in a way that's impossible otherwise it shows multiple faces at once and i think this particular way of projection permits someone to create a more pronounced 3d effect than pretty much any other method using 2d sprites i think it's a cool stylistic effect and really enhances the idea that you're working with and playing on a game board adding another level of abstraction to the experience i really like the idea of an indirect control of the game where you're not really moving the character but rather applying some other separate abstracted input to move it separately and it also solves to some degree the problem of sprites blocking each other when they're adjacent okay so now speaking of sprites how does one create pixel art particularly that tiles uh correctly in an isometric perspective i'm going to show you how to do this on a 32 by 32 grid on a sprite but you can use any resolution you want so we're going to start by creating a new 32 by 32 sprite and i'll be using a spread for this we can turn on the symmetry mirroring options in order to expedite the process and also i'm going to change the palette to rosie 42 because i really like this palette now you can start by putting a single pixel at the top uh going one step down and we're going to be holding down control and shift and it will automatically create this pattern of going down two steps uh two steps on the horizontal direction and for every one step on the vertical one now this ratio is essential to create isometric art at least in this projection and it creates in pixel art a perfect hexagon now in order to create the top face of this cube you can remove this horizontal symmetry and we're going to do the same thing here you want to start one step down as if this would be the top face and it's sort of just connected here and make sure it's symmetrical to the to the top that's actually there so we end with a section of two pixels a flat section two pixels not a four now we can shade in the square the outlines are sort of just to provide us an area to fill in conveniently and the way i'm going to do this is i'm just going to fill those in by using the line tool so again you can hold down ctrl and shift in order to fill in order to use the line tool with the brush selected and we're just going to fill in all of the areas that require an outline now if we imagine the light coming from the left side which i think is standard you can fill in this left side of the cube with a darker color and the right side with a lighter one okay now in order to shade this there are a couple of options for texturing you're kind of on your own here because i'm not so great at that but what i like to do for shading is just create a lower area that's a bit darker i'll copy this right side color onto the left side and then i'll make some vertical extrusions from the bottom just to create a nice shaded effect make sure the point where they meet in the middle has uh switching colors otherwise it'll look like it's blending weirdly now you can add all sorts of interesting additions to this like adding i don't know floating dots as well as like edge highlights which you might find quite useful this is the general procedure for making a tileable cube now in order to prove it's tileable and you don't need to do this i'd assume you would do this in whatever game engine you're using what we can do is scale everything up to a larger canvas and we'll duplicate this so i'm going to create a new layer and i'll turn down its opacity then i'm just going to paste in this option and you'll see that it fits the edge sort of like a jigsaw piece now you have to do this exactly with the correct two to one horizontal or vertical ratio and you have to start with this two pixel segment at the top and you'll see everything fits together perfectly and you need to have this specific configuration for everything to tile correctly otherwise it won't now the problem is that with edge highlights you'll see them overlapping on each other which is maybe not ideal so you may not want this edge highlight effect at all having it only appear on actual edges is a harder programming problem that is not going to be part of this tutorial you also notice that we have weird aberrations here it looks like it takes a step down at the intersections and really i don't think there's any way around this this is sort of due to the fact that we're not using exact 60 degree angles for our curves here for our edges rather we're using approximations we're using a two to one pixel ratio as we get to a higher and higher level of fidelity with higher resolutions we'll see this effect of having see we go from two two to one um to one to one and so we end up seeing a vertical drop on both these sides and if we apply an outline effect with uh shift o uh we'll see that we don't have an exact uh exactly perfect ratio here but there's not too much that can be done about this and we can sort of just hide it by applying other visual effects on top so yeah this is the general solution to creating uh tileable pixel art and of course it's not perfect but i'd say it's close enough that it's rather difficult to notice one of the ways you could hide this is with a an edge effect to sort of just blur it in and remove remove these edge highlights and that might be an option for you we can have some edge shadow and it might obscure the rather the uh rather jarring drop here but yeah this is how you do the pixel art all right so regarding the math involved playing with isometric coordinates really showed me the utility of matrices and linear algebra in video game programming my previous experience with matrices has always been pretty abstract and i think the example of isometric projections really shows you how matrices can be super useful specifically i'm going to be talking about transformation matrices what they do is take a vector and map it between coordinate systems if you're unfamiliar with vectors and matrices you can think of a vector as a list of numbers and a matrix as a grid of numbers there are pretty interesting mathematical objects that interact in unusual ways for example multiplying two matrices a times b is going to give you a different value than multiplying b times a that is they're not commutative in most cases now the cool thing is that matrices and vectors have many many interpretations in mathematics and engineering and in this case we can use a vector a list of numbers to represent a set of coordinates which is after all just a list of numbers like 0 0 and a matrix as a way to transform that coordinate system if we take measurements and create a table of values using an isometric system we'll find that the origin is the same in both systems the cartesian and the isometric system one zero however in the cartesian system turns into one negative 0.5 in the isometric system 0 1 turns into 1 positive 0.5 and 1 1 turns into 2 0 in the isometric system we can come up with a set of expressions that matches this if we call the coordinates in the isometric projection x prime and y prime and the coordinates in the cartesian system x and y we can create the following expressions x prime equals x plus y and y prime equals 0.5 y minus 0.5 x furthermore to reverse these to be in terms of x and y cartesian coordinates we get these expressions x equals 0.5 x prime minus y prime and y equals y prime plus 0.5 x prime so in order to express any pair of coordinates in the cartesian system and turn them into the isometric system what we can do is apply the two transformations simultaneously we can of course write out the two simple equations as we just did and solve each of them but what this actually is is the application of a transformation matrix that appears like this now if we apply a vector matrix multiplication between the uh the coordinate that we're looking at and the transformation matrix we can produce the isometric coordinates as a function of the cartesian coordinates or the other way around briefly we take the dot product uh the component-wise multiplication of the first row of the matrix and the first column of the vector to get x prime and we take the second row of the matrix and the first column of the vector dotted together to get y prime finally a couple complications in the programming emerge i'm just going to give a high level overview of what i'm doing to manage the isometric system in my game for a 2d grid like the game board we typically would store values in a two-dimensional array that's at least the simplest version and we'd have and we'd have to map between the 2d array coordinates and isometric coordinates in order to draw things on the screen in the correct places for example of the players at the position 2 3 on the grid we would draw it at 1 comma 0.5 on the screen and it becomes complicated and confusing to store both systems randomly so my protocol is just to use standard cartesian coordinates for pretty much everything except when we need to display things or get things from the screen all method inputs are given as cartesian coordinates and i provide a couple a couple of helper functions that can be used to transform between isometric and cartesian now this can be used this can be useful in a case where we have an area of effect attacked uh in order to get all entities within a distance of one from our player for example we'd have to draw an oval shape in the isometric system rather than a circle shape which becomes difficult to define especially for more complex shapes if we treat all entities as if they're on a regular grid we can just draw a circle which is much simpler to define find all the objects in that circle and transform our isometric tiles as necessary i don't actually think there's any advantage at all programmatically to do business logic on isometric coordinates and so this i think should be minimized in code alright so thanks for watching and i hope you learned something new about pixel art linear algebra or programming in this tutorial leave your thoughts and feedback in the comments and feel free to subscribe and click the bell icon if you want to be notified when i post something new for a text version of this video you can check out my website which i'll have linked in the description where you also find a couple of other links to resources and the software i've used in this video finally check out my game jam video where all of this started it's become the most popular video by far on my channel and practically double the amount of subscribers i've had over every single month so thanks to all of you who watched that and for all the helpful feedback i'll see you next time [Music] hello

Channel: Wintermute Digital

Views: 90,157

Keywords: art, indie game, gamedev, development, code, math

Id: 0fZXlxtMbC0

Length: 13min 32sec (812 seconds)

Published: Fri Aug 14 2020

Reddit Comments

[u/JoukoAhtisaari]

I recently tried doing an isometric game. I handled AoE by having the tiles link to each other so that they knew their neighbours, so the function to get a set of neighbours n tiles large was pretty straight forward with recursion. Ultimately I found I was spending too much time trying to emulate 3d for various effects, so I've decided to try just make a 3d game instead haha.

[u/Rob_Turner]

Very interesting watch!

I was making a very similar game earlier this year which I decided to stop working on. I have to agree that the isometric viewpoint presents a more interesting challenge than you first expect it to!

https://www.doubleonestudios.co.uk/post/dev-blog-10-system-raid

Take a gander through my blog, maybe you will pick up some dos and don'ts from my experience / failure. Good luck!

[u/stepppes]

I would also argue that isometric perspective is the easiest of the bunch to to get your foot in and get things done, from an artistical skillfloor and productivity perspective.

I found that determing elipses in 2+point perspective is surprisingly painful and requieres wrapping your head around something unintuitive aka the middle of an elipse, which is a circle/cylinder in space is not the middle of the object. My mind did not want to accept that at all.

I have an aquintance which makles his living as a freelance artist in the anime space. While I was teaching myself perspective drawing I asked for advice and how he does it. His response to my question "How do you get your elipses right" was "I just guess".

After being "done" with my education on the matter, I skimmed over his art and lo and behold 90% of those guesses were not even close.

[u/Isaacvithurston]

Yah Isometric is a lot of work for the effect. I have to imagine the main reason to want to do it is because you're a 2D artist/programmer one man show making a game.

It's funny because most people assume Isometric 2D is a shortcut to not just doing it in 3D but in reality it's more work and it only exists due to limitations of consoles at the time.

[u/Badwrong_]

I've been working on my first isometric game for a year now. There are some quirks for sure, like character movement also needing to be rotated from what the actual input the player does. The good part is the game logic is completely unchanged, its all just smoke an mirrors to project the look. In order to make my assets quicker and not draw them at tons of different angles, I used blender and made 3D models that are converted to sprites. The result is pretty decent: https://youtu.be/8Bn6yoL7kts

There are times however that I think making it in 3D with unreal or unity might be easier lol. But I'm using GMS2 and its working out fine so far.

[u/JoelMahon]

At around minute 7 you/they start talking about how the blocks step down and how you can see the boarders and how neither of them has a solution.

Would just moving the blocks up one more (per layer from the top) work?

As in, leave the top centre block where it is, move the two side blocks up one, and move the block at the bottom up two (one for the side blocks being moved up, and one for itself).

[u/wint3rmut3d]

Hello there! Thanks for watching my video, I didn't notice that someone posted this until a couple of minutes ago! Thanks for doing that u/Chii, and I hope that someone finds this video interesting :).

[u/__xor__]

One time I wanted to make a strategy game with a hex grid, and I thought it was going to be super hard. Like how do you pathing? How do you display it?

I realized it really isn't much harder than doing a square grid. Basically you have two parts which make it a little more complex - a function to determine neighboring cells given a specific cell, and a function to determine where to display something on the screen given coordinates, and they're not that crazy to write.

But everything else seemed mostly the same. A* works magically no matter what the topology of your world is. As long as you can calculate neighbors and write a basic heuristic that guesses the distance from A to B optimistically (which maybe can even be root( dx^2 + dy^2 ) while ignoring the hex), then A* will just work and find the best path. It doesn't care as long as it can figure out which neighboring cells to open and guess the distance. And you just have to figure out where to display the hex image and things on top to display it.

I never got too into gamedev tbh but I was able to make a simple proof of concept with units that had a certain amount they could move on that hex grid, display mountains/forest/grass on the map and the units, move them to where you pick with the best path using A* and even have different difficulties on certain terrain to move less on forest or something, and attack and deal damage, take turns, kill the units. I thought doing a hex grid would be over my head but I was able to do it my first try without looking up anything.

IIRC the function was simply something like this:

# width and height of graphic
width, height = 100, 100

def get_screen_coord(x, y):
    """ Assuming the returned coord is the center of the graphic. """
    screenx = x * width + (width / 2)
    screenx += (y % 2) * (width / 2)
    screeny = (height / 2) * y + (height / 2)
    return screenx, screeny

[u/Yxven]

I didn't get the point about linear algebra.

"If you have a function that translates between coordinate systems, you could use a matrix instead!" Ok, but why would I want to do that? I already have a function that does it.