Why Isometric? | Art, Code and Matrix Maths | A Devlog
HTML-код
- Опубликовано: 16 июн 2024
- This indie game development log (devlog) explains the high level concept, a method to make near perfect pixel art isometric tiles, the linear algebra of transformation matrices and the code changes and considerations you need when converting a game to an isometric format.
There's just something special about isometric games. They capture the retro feel of using 2D graphics to display a 3D world, in a time where immense, billion polygon 3D landscapes are now industry standard.
Join me for a dive into pixel ratios, matrix multiplications, and theoretically perfect but realistically rather buggy code.
-- Note -- Feedback on programming is appreciated! If you don't know how to code, that's alright, my explanation of the maths is much more technical. Linear algebra is quite cool! Do not take coding advice from me, I am definitely not an expert :) ---
A text version of this will be up on my website in a day or two, with other tutorials, game devlogs and interesting blog posts, at wintermutedigital.com.
Software Used:
Pixel Art - Aseprite
Game Engine - Unity 5
Math Equations - LaTeX + Google Slides (xD), rendered with the excellent online tool quicklatex.com/.
Video Editing/Motion Graphics - Blender 2.83 LTS
Audio - Audacity
Gameplay - Stardew Valley, my farm :3
Credits:
Music: X Ray Vision, by Slynk. Sourced from the RUclips Audio Library
Exploded View Isometric Diagram: wikimedia - by Duk - en.wikipedia.org/wiki/Explode...
Timestamps:
0:00 - Intro
0:30 - Video Overview
0:55 - Top Down to Isometric
2:35 - How to make tileable isometric tiles in Aseprite
8:08 - Linear Algebra, Transform Matrices and Projections
9:40 - Useful Formulae for Converting between Rectangular/Isometric systems
10:55 - Programming Considerations
#indiegamedev #gamedev #isometric #art #code #matrix #linearalgebra 
Кино
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...
@@subhashchandrabose315 you can also just rotate the game camera as well to create the isometric view
Instablaster.
0
you can fix that 'off-by-one' tiling issue by just moving the bottom tiles up 1 pixel. The edges overlap, but your overall shape comes out correct.
This also fixes the edge highlight problem, as all but the bottom tiles will have their edge highlights covered by another tile!
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
basically it fixes the outline issue he had
I use a different configuration and i have none of this problems.
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.
Wow, I just came here to learn how to make isometric games, but I ended up learning how matrix transformations work!
I really liked this art+programming knowledge pill format. Good job!
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.
Wow, that's an amazing explanation. Thanks, I would never have figured that out on my own!
Quick and to the point. Learned basically everything I'd need in just 13 minutes. Can't wait til my birthday, definitely getting Aseprite :)
You can compile it yourself for free if you want, the source code is public. github.com/aseprite/aseprite/blob/master/INSTALL.md
Amazing video and the game in the background looks amazing too!
I'm glad you made this. I have explored some isometric ideas but had a few problems which you've solved all in 1 video.
Glad to hear it!
I just love the artwork like damn dude you just got a new sub
I did an isometric map demo on vanilla javascript, it's fun how trying to do something blind makes you aproach a problem. Great video!
I just finished computational matrix algebra over the summer. Feels cool being able to see the stuff I learned used.
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
Great video! This is exactly what I was looking for. Thanks.
I really love this viewpoint, this game looks awesome!
Thank you. This got me started with my tileset. Very helpful.
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 :)
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!
That's a great idea! I've got a couple things in the works but that's definitely one I'll add to the list.
Great video, super useful! Can't wait to use in some project
Awesome work! Thank you for sharing.
Awesome content bro, it's nice to see some theorycraft about algebra, most tutorials totally ignore it since it's the part people usually hate on.
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!
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.
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.
Thank you very much! I love Isometric games, and I love this video!
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 !
This was really interesting. Thanks for making this.
Glad you enjoyed it!
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.
Great content my buddy keep it up
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.
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.
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);
}
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?
area of effect can also be done with a simple array that checks for every neighboring tile, or what ever tiles it is for the matter.
amazing game! I'm excited to play that
I am making a similar game with non-isometric view , and this inspired me to try isometric :P
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 =)
Game looks awesome, would love to play it!
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.
@@WintermuteDigital ah good to hear! Can't wait to see what you will make of it ^^
Wintermute Digital I would love to play as well. Can’t wait to see where it goes!
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.
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.
Wow, great video
really cool, keep it up
Dude, perfect. Thnx.
This is exactly what I needed thank you so much!
@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.
Baldurs Gate is the pinacle of isometric art design , there are many techtalks,postmortems and retrospectives on the series.
@Darkstar examples? There are ones I like too, but what do you recommend?
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.
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.
Awesome video
cool and helpful video
Nice video!
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. :)
4:21 dark/light colors switcheroo
Ah yes Good ol' twisteroo
This card game looks awesome. Are you planning to release it, and if so, where can we find it?
Wintermute YT:Isometric is the best way for 3d look by 2d sprites.
Stacked sprites:Cries in magica voxel
Nice video! I recently started my own game with isometric art inspired by your game jam :)
Bust i also have a question. How do you created your grid with the gameobjects in it so smoothly?
What do you mean smoothly? If you mean the tiling, each of the tiles has a position coordinate defined by the equations described in the video, and I've sized each tile to be exactly one square unit, so it tiles correctly.
@@WintermuteDigital I did something similar, i created a grid but if i creat the grid, it lags for some time and than the grid is just there. But you created it so you can see when the grid is created/spawend and how it is created/spawned. I hope this makes sense :)
oh, i came for a little isometric stuff lesson, and id go with a hard math lesson.... oh my brain....
interesting video, and very inspiring...
Most replayed section: linear algebra
Me: sigh* sounds about right
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 :)
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
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.
@@xaytana He deleted his comment jeez, chill dude
@@xaytana ωραίος
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.
Thanks! I'm glad I managed to strike that balance on my first try xD
I’ve played a lot of Boktai to know how blocks should be tiled!
It's really cool to see that someone else came up with the idea to put card games in an isometric tactics RPG, and it's cool to see your totally different take on it. (also it's cool that you are actually making it lol) I love the concept of this game
I really want to know how you program the AI to move at the end of the turn
how did u do that cool spawn animation ???
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
Me: "Pixel art looks fun"
Video: "Algebra?"
Me: "...yea it's no from me dawg"
Ok but like, say i threw a bomb that needed to draw particle effects within that isometric oval, how would you calculate the visual effect area?
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.
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)?
When we get to the math it makes me think maybe I'm too dumb to be a game developer
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!
Thank you! Pokemon Diamond was my first :) Thanks also for the feedback.
Since you are using Unity, have you considered using an orthographic camera pointed on a 3D world? It's a lot of fun because it allows you to use many of the engine's built in features like lighting or casting shadows. You can use Cartesian coordinates for everything and just angle the camera -- all object coordinates are stored in terms of the world space position they're in and the camera translates that to screen space.
Indeed that is a possibility, and if you had/started with a 3D game, it would be trivial to rotate the camera. But my problem with that is that your game would have to *be* in 3D, which introduces the complications of UV mapping, the impossibility of constant resolution, exporting/animating/rigging between Blender/Unity, doing 3D sculpting/retopology or modelling instead of easy pixel art, and so on.
2D games are simpler on the whole imo and while a 3D world would make this problem of projection trivial, it would introduce a thousand other, harder problems.
But of course, if you're more familiar with the 3D game dev pipeline and you find it easier than the 2D one, this problem (and this video) become pretty redundant :P
@@WintermuteDigital I played around a little bit with different ideas and made some prototypes because I'm quite infatuated with 2D/3D mixed graphics like for example Octopath Traveler has.
For example it's quite easy to "pixelate" the image in post-processing, although I guess it would lack the pixel-perfectness of hand drawn sprites. But you can still use sprites if you map them as textures to quads. So an idea would be 3D models for anorganic things like blocks (practically no modelling involved) and "sprites" for characters, items and so on.
Don't get me wrong I'm not trying to convince you to change something about your game. :D Just talking about things that you might find interesting to look into.
@@plasticflower Yeah I see your point, and the mixed 2.5D graphics thing that seems to be catching on is a pretty cool aesthetic. Personally, I'm not convinced that I can pull that off in a nice looking way though. Combining 2D and 3D seems like a completely crazy idea from the outset, just like combining multiple pixel resolutions in a game, but it's clear that it can be done well. Star Renegades, for example, is an absolutely beautiful game in this mixed perspective style, which you should totally check out if you haven't already.
Thank you for the feedback. You've really made me think about this style, and it seems much more feasible now that you've explained your idea of it
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.
There are a couple of camera angles corresponding to different projections - en.wikipedia.org/wiki/Isometric_projection. It's an interesting topic!
Someone please make an example of how to actually use the Cardinal-to-isometric equations because I'm dumb and I can't figure it out
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
do you think is that possible to create elevation level by using isometric method? like the character can jump into different height
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!
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
You can do it! UE4 is very powerful but its 2D tools are vastly inferior to Unity's imo, and I feel like it's overkill for a small game :P
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.
good overview of implementation but i dont think you address the title question of why particularly well beyond a description of what isometric is.
Hey wintermule, I wanna ask did you use a tile map component for the isometric view and logic or did you make your own custom tile map?
Hi! I didn't use the built in tilemap, though I know there is one for the isometric system. I thought it would be too complicated for my use, and I literally just arranged the tiles with a double for loop in the standard XY coordinates, and transformed each of their coordinates to isometric with the equations in the video. Basically everything is done in rectangular coordinates, and only transformed to isometric for display. Also, the tiles are sized exactly (eg. 32 px wide and with a Unity Pixel Size (set on texture import) of 32 px) so that their dimension is exactly 1x1.5, so they will perfectly tile in the game.
@@WintermuteDigital do you mean 1.5 on the y Axis? I'm tryna make an isometric turned base game with isometric combat so this was a really helpful resource
Yeah 1.5 on the Y axis, the dimension of my tiles are 32 x 48 which reduces to 2:3 or 1:1.5.
@@WintermuteDigital thanks
I'm lost when he started talking about the algebra thingy 😂😂😂
IIRC the "isometric" is because the cube height is as many pixels as it is from the front corner to the back corner of the top square. 2:1 is not quite genuine geometry but looks fine.
Iso + metric, same + measurement/distance, something like that.
Yes, in isometric views the measurement of any line on the 3 main axis should be the "real" length of it.
How do you plan solving sorting order problem for different height?
I've recently finished an isometric game and this was indeed an interesting problem. From what i've read online, the goal is to give every tile a "z-value", which you use when sorting tiles from the back to the front. It's definitely not an exact science but you can play with it. For our game we simply give the tiles with height a +1 in the display queue (with the base for each tile being x+y) and it worked perfectly.
@@winnie3334 Yeah. I figure this out. But my problem started when I added character with height or width bigger than tile size to a tilemap and he need to go behind tiles.
@@oppaibot Yeah, weird models which go over multiple tiles are a pain to deal with. We have one such issue too and simply chose to ignore it. If you have grid-based movement you can maybe try to split your sprite in multiple parts based on where it goes over the tile size and give those parts a different z value based on their individual coordinates. But really, I'm not sure how to properly tackle this problem.
lm a very experimented programmer. but i dont do that anymore. making your own game is great. still i just wanted some inspiration
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.
Nicely put!
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 :)
It's full 3d game but with pre rendered graphics. We can better visualize the slopes
the "issue" of the off-bt-one happened because you tiled it incorrectly, it should be higher
What is name of intro game?
I love how we easily see these from these guys and they act like what they created is no big deal lol.
Many make the mistake of moving the mouse too quickly and too much when explaining something. Using the mouse to gesture tends to confuse the viewer.
Are you planning to publish this game? I will most definitely buy it if you do, love isometrics, roguelikes, and deckbuilders. The Sprawl Trilogy is also top tier. Thanks for the video, cheers!
haha thanks! I'm working on it, thanks for the recommendation :)
It's not real time graphics but it's worth it
nice work, i teach pixel art if you want to learn :)
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!
Why use isometric style?
Me: Baldurs Gate, Icewind Dale, Planescape Torment.
I love isometric 2d
very nice but it's very annoying to hear all the table noises because I assume you have a table mic?
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
eyw reis
I lov3 thi$
interesting video!, as a lazy(creative) would it not simplify it further by just running it in 3D and let the engine do the work, but using the pixel aesthetics :)
Well that's definitely a consideration when starting a project. The difference, however, between 2D and 3D graphics is certainly not trivial. Animation in 3D is vastly different than in 2D and it's not clear to me which is easier. There are myriad other complications also, like UV mapping, texturing, rotation and other factors that come into the picture when you swap to a 3D space. The simplicity of using a 2D grid and using 2D position coordinates is kind of thrown out the window once we end up in 3D, as we need 3 coordinates to describe position and 4 to describe Quaternion rotation.
Anywho, my point is that yes, a camera rotation fitted to a 3D scene is much easier, setup wise, than creating 2D sprites, but comes with the new problem of having to make everything in 3D. I'm more comfortable with 2D, but that doesn't mean that 3D isn't a great option too. Someone commented below about the usage of voxel art, which is like 3D pixel art, and that's certainly a viable approach, so it's not at all impenetrable.
Thanks for the ideas :)
@@WintermuteDigital Now im not an expert at all, but could you not run a 2d animation on a normal 3d Plane , or even a billboard ? :D
more of a though :D
@@_Garm_ That is a possibility for sure. You could create a bunch of planes with animated 2D sprites projected onto it, or even cubes that only show one side at a time with each side having different projected sprites, but I think this creates more problems than it solves. Also, I think that billboard projections/2D projections on a 3D plane is precisely how the 2D system works anywho, so you'd be reinventing the 2D engine using a 3D engine lol. Of course, you could mix having real 3D voxels and animated 2D billboards but again, I don't think the complexity is worth it.
@@WintermuteDigital thank you for sharing the input, it shines a light the problem at hand :D ,some times you have to go in a circles to relize your going in a circle :P :D