You can check out the post for this video on my website at wintermutedigital.com/post/isometric-art-games/ with several other Unity tutorials and many Blender ones. Cheers!
You could instead of rotating the game board rotate the camera position, then global directions are still there. Right is still right on the X axis just to the player its top-right. Then its simple as using 3d objects with a pixel texture for the ground such as a default cube.
It's relatively easy... Use blender with camera 0'60'45... And then test that on tiled... And if you want to export that as pixel art.... Yea that also possible... But it's need cleanup.... Then I use librasprite...
you can also fix it by having the pixels at the top of the sprite 4 long. it makes sense if you draw the line over multiple sprites space. However, if you are going for a higher-up perspective the examples in the video works very well
Another way to think about it is that if you have a square number of tiles (4, 9, 16, 25, etc) the overall shape of the grid should be a perfectly scaled up version of your starting square. WMD made the incorrect assumption that the "artifacts" were caused by the lines not being exactly 60degrees, but it doesn't matter as long as the slope is consistent. Any X by X square of tiles should have a consistent slope long the entire side.
Hello! I am a fan already and have been for a while, you make some pretty great stuff. If anyone else is interested in pixel art tutorials, Pixel Pete's channel is an amazing resource!
Couldnt you just bring up each tile by 1px relative to the one above so it would cover the edge highlight of the tile above? That would solve the problem of inner edge highlights as well as the shifted outer edges.
Woah! You're totally right! I think that might cause problems when describing the position of each tile, as now there's an offset. Let me experiment with the resolution - perhaps an odd number of pixels would work?
Here's an image of 16x16 isometric tiles fitting nicely when moved 1px up compared to the video: imgur.com/a/nAajmy5 Same applies to 32x32 isometric tiles.
I stalled out on an isometric deckbuilding game like this a while ago because the math went way over my head. I should give it another shot. Glad I found this video :D Edit after watching: This is interesting. In my case I created all the tiles on grid of sprites that are visually isometric. When I needed to move or search for something I took the grid sprite and used it's world space position to move other sprites around. I don't think it was the cleanest solution hah. I should try that game again some day.
Ha! That's definitely a unique solution, I'd recommend that you just implement the following method to get a (Vector3) world space position from rectangular grid coordinates. It'll implement the "matrix multiplication" as two equations. You could break this down more, like by storing as a vector2, but a vector3 seemed like a natural way to encode positions. Also, please do give that game of yours another chance! Use what you've learned since then and build on it, iteration is the way to a great game. eg. If you wanted to move the player one step in the positive Y and three steps in the positive X position, you could simply do this: player.localPosition += XYToIso(new Vector3(3,2,0)); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ public Vector3 IsoToXY(Vector3 v) { return new Vector3(0.5f * v.x - v.y, 0.5f * v.x + v.y, 0); } public Vector3 XYToIso(Vector3 v) { return new Vector3(v.x + v.y, 0.5f * (v.y - v.x), 0); }
Hey man! Been loving your channel recently. Do you think you could do an overall "How to Get Started Creating Games" video where you walk us through what programs to use, what to learn, and pretty much all basic things? I would love to see that!
6:44 you know it's supposed to be actually overlapping the highlighted line of the previous block. There won't be any jagged lines on sides and tiles will have a seamless transition.
Having four horizontal pixels for the top/bottom corners of the diamond and two for the remaining corners interlocks just as well, with no gaps or overlaps. I think it is easier to implement this way when the underlying graphic system is based on non-overlapping 8x8 square tiles.
Haha well, anyone can come up with the transform equations just by writing down some coordinates and guessing. The LA part is just a different, more abstract way of understanding it which lets you generalize to other transformations (eg. different viewing angles), and offers an interesting perspective on what you're doing on a fundamental level. That being said, you don't need to know LA at all to do this stuff, it's just interesting :)
I know right?! I learned linear algebra the first time about a year before, and when I saw that it somehow worked its way into my unconscious during game design I was very surprised xD
I'm working on it! So far it's a bit prototype-y but I think I like where it's going, and designing synergies + lovecraftian enemies is pretty fun, so I'll be sticking with this until it's done.
The way that my computer graphics taught me linear transformations, is about thinking in different planes or worlds, thinking of the top-down as a world where everything is seen from that perspective, and the transformation matrix is simply a way to move a point or vector from a world to another, in this case to the isometric one. This transformation matrix does not need to change for this purpose, meaning that you can always work with a top-down logic and then multiply anything you need to port to the isometric space by multiplying the matrix and the point (or vector). If anyone is interested in the topic you can do some research on the rendering pipeline, where this concept is heavily used.
I'm somewhat surprised, since isometric games have existed for decades, that nobody has thought of creating an engine that bases everything, including art, on an isometric grid, just for ease of development. Though, this is probably a bit complicated when you consider that not every isometric grid is equal, as you can have the rhombus grid, or triangle grids with either vertical (which is the most common iso grid) or horizontal (probably the least common iso grid) lines, or a hybrid of both that results in an iso grid with a square grid that has a stretched axis. I've used the two triangular versions of the grids for varying uses, though you could also use a ruler to bisect a rhombus if you're using just a rhomboid grid. I do some isometric art, and I really wish programs like AI and PS would have iso grids natively built into them, rather than just 1:1 square grids. Especially when moving an object a precise amount, as it's not always the easiest to do those calculations on paper or a separate program, and those numbers don't always translate well due to decimal limitations, and those limitations eventually result in stacking errors. These issues also get worse when you get into other axonometric projections, dimetric and trimetric, and even oblique projections, cabinet, cavalier, and military projections. Personally, especially when getting into 3D/voxel-based styles of art and games, I prefer dimetric. Only because isometric just doesn't stack as well, and doesn't have great depth; basically an object of height will line up with the grid of the ground, if the ground extends far enough for this to happen, it's a weird optic and is only fixed if you have a non-integer height for objects. Or switching to dimetric fixes that issue, I also feel you get a greater sense of depth, as the viewing angle is a bit shallower, and not focusing directly where two opposing vertices of a cube line up.
For the person that deleted their comment of, "how would an engine base 2d images on an isometric grid when 2d has no depth? it is up to the artist if the 2d image is iso or not." First, you really need to learn what projection is and how it works, it's literal prerequisite knowledge to understand what isometric projection is and how we derive an isometric grid from the projection type. As for depth, no, it doesn't have true depth, but it simulates depth, that's how you can project a true 3D cube to a 2D surface; how do you think any 3D object works on your flat monitor(?), it's because of projection. The most common isometric grid, which uses equilateral triangles, or the 60°-120° rhombuses vertically split, is technically three dimensional on a 2D plane, as you have three lines, thus three coordinate values, which can be translated to the more typical 2D XY grid, which makes the 2D plane; the same works for any projection, though perspective projections are much more difficult as their grids are warped, and other parallel projections, both oblique and axonometric, use a different set of angles in their triangles or rhombuses. Secondly, you need to understand how my concept would work, which I thought it was fairly clear, but apparently not. The engine itself isn't taking isometric art and basing a grid off of it, which could still be a useful tool but not the focus of what I suggested. I suggested that an engine is based on the isometric grid, both for the coordinate system and art, as a tool for making isometric games easier, rather than leaving all of the 2D XY translations to the three axis isometric grid to the person building the game; both as an efficiency tool and as a simpler entry to game design for someone that doesn't understand the math or programming behind it. Just like how you use the 2D grid for everything in the XY coordinate plane, this too would have the same use, except in the isometric grid rather than the square grid, it just removes all the work of translating between the two. Third, as an extension of the game engine idea, I wanted more programs to use isometric grids, as most programs do not allow for the translation between square and isometric grids, and using only square is an annoyance when working with isometric art. If you've ever done any isometric art, either on grid paper or digitally, you'd understand this, and this is also why they make isometric grid paper. If they can produce isometric grid paper, why can we not have isometric grids in the most used 2D art and illustration programs? I really hope you deleted your comment after the realization of your arrogance. How can you look at any isometric art and say it has no depth, when the literal purpose of projection is to simulate depth? How can you read an entire comment and entirely miss the point so badly that I question if you read past the first sentence? I'm also disappointed you deleted your comment, even if you're entirely wrong and arrogant, as now you'll never learn from this reply, maybe don't take the fool's way out next time, marahuyo; maybe also consider what nonsense you're spewing before actually commenting, it only adds to your arrogance and ignorance, especially when you lack the most basic knowledge of the topic.
This is cool, and I love Isometric! I doubt I'll ever do true 2d isometric, and because I plan to make a 3d isometric game(s), if I do ever make a 2d one, I'll probably just use 2.5d to handle the mechanics of it.
3:03 did anyone already pointed out that in the perfect isometry *1:2 is the cosine*, and 0.5 is not equal to 0.6, as well as √3÷1 is not equal to 2÷1 because √3 ≠ 2
@Wintermute I applaud you for knowing (and actually using) algebra this way. I don’t even understand the basic concept of Vector and Matrix, so to understand your explanation I will have to figure out those first. One very silly question though. If I were to use an existing game Engine (Unreal, Unity, etc), shouldn’t it be easier to craft the world as a 3D object and tilt the camera so that it looks isometric? Seems like it would require less “thinking power” to implement.
isometric projection is just orthographic with the camera at a very specific angle so your not wrong with your idea of just being able to tilt the camera! im not sure exactly how you would map pixelart onto a diagonal cube face without any weird things happening, but im sure its possible. also if your looking to learn more about vectors and matrices (especially if your looking to build an intuition for them) you should look up 3b1b's seris on linear algebra.
Isometric combines the illusion of 3d with the ease of making 2d graphics, meaning you can easily make a deep game that looks 3d. Diablo 1 & 2, final fantasy tactics, warcraft 2 and starcraft, civilization all use isometric and are all cult classics.
11:58 in this case wouldn't you just need to select the adjacent squares? In most games like this, you are either in a square or you are not. So there is no need to check if something is in the circle but rather if they are in an adjacent square.
The terms "world space" and "screen space" are useful here. All game logic in world space. Then render world space to screen space using the provided matrix transformations. Great vid 👍
Yeah that's a good point, thanks for contributing! It is clearer to make the distinction between how data is represented and manipulated logically in the backend, and how it's displayed on the frontend.
Hi👋 I really love the look of the game you showed in the video. I'm relatively new to programming, but I'd like to make a game like that. Is there anywhere I can look at the code for it and/or play it?
That was some potentially very complex content and you boiled it down to the basic fundamentals very well. I also like your approach of leaving the isometric stuff purely as a concern for the presentation layer, removing any excess complexity in the business logic. Nice one!
Thanks! I guess that designing a system to with the maths of isometric systems directly integrated into business logic to create more complex gameplay (like vertical heights and such) would be interesting too, but I was really just prototyping this design so I just handled it for presentation purposes, as you said. I'm not sure if that'll bite me in the backside later on for more advanced features, but I guess we'll see. I'm glad to hear you enjoyed the video! Cheers :)
Thanks! Honestly, the matrix multiplication isn't super necessary but I like how it describes the fundamental structure of the transformation better than four equations, and the applications of abstract mathematics in game design overall is just really interesting. I' tend to keep a lookout for using interesting maths when working on a game, and if I find something, I'll usually note it down for a video like this one. I'm actually considering shifting my channel to primarily gamedev X maths or gamedev X compsci topics, but we'll see how the future turns out. I'd love if you had any suggestions about bits of math (quaternions, ELO, optimization, randomness, etc) you find interesting in games. Thank you for your feedback!
I find, the hardest thing about isometric rendering, is the sorting. Once you could "jump" on blocks, you probably need a topological sorting graph to solve the rendering order. Without any dynamic entity moving fluently on the vertical axis, sorting is easy back to front by object origin, which should be at the vertical side edges right at the center of the top piece =)
Thank you for the video! It was a really good overview, and helped me remember some concepts. I also really hadn't thought about using everything as carthesian for easier computing.
Find the overlap circle example confusion. I understand it's easier to work in regular coordinates but if objects are physically placed in the scene in an isometric system surely the circle won't necessarily intersect the desired game objects?
You're completely right there, I can't actually use the physics2D.overlapcircleall, because that acts in the world space which is isometric which I totally forgot. Instead, for an AOE attack, I'll do a sort of circular raycast, where I use a foreach loop to get all the enemies in the scene (because I've tagged all of them "_Enemy"), and then transform all their coordinates from iso to rect coordinates. Then, I'll see if that distance in the standard rectangular coordinates between the enemy and the epicenter of the AOE is less than the circle radius, and if it is damage the enemy.
@@WintermuteDigital Very interesting. As the regular cartesian coordinates are being stored in script I take it game objects such as enemies have a function to make those coordinates easily accessible from other scripts.
@@SneakingMilk Sort of. The "coordinates" of the game entities are baked into the transform component, and to reference an enemy at (1,3), I can sort of "grab" a an entity's reference with a small raycast at the isometric coordinates given by XYToIso(1,3). The coordinates aren't stored by me exactly, they're natively integral to Unity's transform component as isometric coordinates and I can get them/transform them at will. It's not a pretty system, but it works well enough :P
One thing really that's confusing is that the objects in the bottom is supposed to be closer to the camera so it means it must be bigger right? And the objects at the top is far and therefore should be smaller. But they are not. And it hurts my brain everytime i play clash of clans. It this some kind of visual trickery? Optical illusion?
I think you're seeing the effects of an orthographic projection. There are two general categories of projection, orthographic and perspective, and isometric (subclass of axonometric, subclass of orthographic) falls in the former. In perspective, you see things closer to you as bigger, but in orthographic, you don't. Additionally, lines that are parallel in perspective will converge at the horizon/some vanishing point, but in orthographic, these lines will remain parallel. It's pretty interesting and definitely not how we see the world, but it has its uses :)
Well they don't really use the Z coordinate, that's just the distance from camera and in an orthogonal perspective, this only affects the order in which sprites are drawn (ie. on top of each other). Z coordinate scaling doesn't do anything for 2D sprites as far as I'm aware.
Good video, thanks. The problem with the edge highlights showing in the middle of the ground is because you were technically placing the tiles incorrectly. You can see this because the lowest tile was two pixels beneath the grid line. If each tile was moved up by one pixel relative to the higher tiles the lines would disappear, you would be on grid, and the kinks along the edge of the floor would be fixed. Subscribing for more good videos. :)
For those interested in the linear algebra aspect, the way you can find the values for the transformation matrix is to think about where the basis vectors map to. The first basis vector is the column vector (1,0)^T - the 'T' means transpose. You can see it at 9:25 as the vector in red. It transforms into the vector (1,-0.5)^T. Therefore, the first column of our transformation matrix should be (1,-0.5)^T which you can see that it is at 10:30. Repeat for the second column: we have (0,1)^T mapping to (1,0.5)^T and voila we have our matrix. This will work for any linear transformation you want to do
One thing really that's confusing is that the objects in the bottom is supposed to be closer to the camera so it means it must be bigger right? And the objects at the top is far and therefore should be smaller. But they are not. And it hurts my brain everytime i play clash of clans. It this some kind of visual trickery? Optical illusion?
@@boomborgoyari5781 In reality, perspective will make objects further away look smaller. However, this is not done for orthographic projections in games simply because it would look worse if you tried to make it look accurate to reality. If you tried to be 100% accurate to reality, you would also have to continuously update the model of every object as the camera moves since the way an object looks is always relative to camera position. The simpler thing to do would be to use one model that looks the same not matter where the camera is
Considering the whole isometric display *is* just a display and only cosmetic, and also the fact that we as a programmer both will use xy coordinates easier *and* have a conversion algorithm into our isometric coordinates (I know you said "I don't think" so I'm just clarifying) there are *no* disadvantages to doing our maths in xy coordinates and then telling the computer to convert to isometrics. This goes for about anything though: if you're going to be manually calculating something repeatedly, make an algorithm for the calculation where you just need to input x, y, and so on. This not only makes it easier on you as you're doing any given calculation but it *also* mitigates the human error to any given use.
great video for explaining how iso work. but then again, i dont get why ppl will do 2D Isometric while you can do 3D and slap the pixel art on a 3D cube and just adjust the camera to make it look isometric.
I know I am late to ask this question but why do you use Vector3 instead of Vector2 in your function wouldn't it be better since it is a 2D path and the z coordinate is still the same(that is 0)?
I'm confused, why do some games use top down cartesian movement instead of using isometric movement (where down is south, not south-west)? Great vid, Hope you'll do more, since In-depth Isometric videos like these are a bit scarce.
never made an iso game (thought about it of course) and must say my first though was to only draw in iso and keep the rest in a 'normal' coordinate system, nice vid !
Okay, but what if I do a 3D Game and the top down view is the view in the code, but I just place the camera at the Isometric angle? This way I could just run the code like a top down grid based game, but it would look isometric
I won't pretend my methods are perfect, only approximations, and it's not like perfection is the goal here. As you may have noticed, several people have helpfully provided solutions to this issue, and I'm grateful to them for improving my approximation. Also, you may notice your comment is a bit hypocritical in pointing out my highlighting of a problem without providing a solution.
I usually get best results with a normal sprite sheet and applying the matrix transform to make it isometric if you do antialiasing it works really well and the creation of sprites is really easy in comparison.
You seem to be into this business. I would be glad if you answer a couple questions. I am in the process of a game design, and thinking if top-down 2d or isometric is better. 1) What is the software that you use for creating pixel-art assets? 2) For the graphics like those of Caesar 3 and Pharaoh in isometric view, would that be sufficient? Or more openly, (if you know) how do you think they come up with those nice graphics?
1) Aseprite, it's cheap and works great 2) I think if you do want to render geometrically simple things like buildings as in the games you mentioned, you should use 3D assets and use a pixelation filter (eg, Unity Pixel Perfect Camera addon) rather than try to do the pixel art yourself. I don't know how they make those assets, but I'm guessing it's just looking at historical reference and modelling from there.
sure, it's possible and has been done may times before - see Fae Tactics for example. However, it significantly complicates everything from rendering to AI pathfinding and is certain to produce a ton of headaches. So, it will help to consider what gameplay you want to produce and see if there's an easier way to accomplish it, as adding height to a 2d isometric game is kinda pushing it to the point where you should just use a 3d system instead!
Well, since we're treating the game, in code, as a standard rectangular grid, we need not design AI specifically for the isometric system. I set up a simple BFS pathfinding system based on a normal grid, and only when moving the enemies do I transform their coordinates to isometric. Remember, pretty much all the logic and code operates on a standard, XY grid system. It is only when you need to display/move things that you need cast things into the isometric system.
I have once tried to make a game in UE4 and I will never try it again 🤣 That's why I like all your videos you put the time and It is satisfying watching it.. also everything you create has cohesion and thought behind it deffinitely a unique skillset 👍👍❤ Edit: It's :) jesus
Pokémon Diamond I hear? I see you are a person of culture ;) The example block looks a little soggy at the bottom. As if it were an amazon package that was put down in a puddle. Your jam game also inspired me to dabble around with isometric art. Can confirm that thinking about it as essentially a warped cartesian grid helps a lot. I really enjoy your videos. Keep up the good work!
I'm working on the experimentation phase of a game, this in full 3D, this video should come handy even tho it uses 2D all the way. In my case what I did was adding a cube into the scene (I use Godot) and tweaked the camera until the cube looks "isometric" but I don't really like that way of discovering the correct values for the camera.
Oh, you rock, this is relevant to me and good content on isometric game programming is either not deep enough to be useful or too heavy for me to immediately apply.
