Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1392737 Posts in 66997 Topics- by 59854 Members - Latest Member: N1mb4t

June 23, 2021, 12:21:47 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTechnical (Moderator: ThemsAllTook)Isometric drawing order
Pages: [1] 2
Print
Author Topic: Isometric drawing order  (Read 16623 times)
Gauss Jordan
Level 2
**


This world!


View Profile WWW
« on: July 18, 2009, 07:50:51 AM »

Hi!

I'm working on an 2D isometric RTS and I'm having some problem in the initial code design. The problem is how to handle the drawing order. Yes, it's important even in this stage because it will probably affect how I will manage moving entities.

Because it will have walls that's partly overlaping entities (lots of the scenery will be inside in corridors and such) they will have to be drawn together with the wall tiles for proper order. This means that the tiles will have to link to the entities occupying it. What worries me then is fast moving objects like projectiles. They will have to change tile position very often and will not have very clear tile position as they doesn't move along the tiles in the same way units does. This makes it much more difficult to implement this way.

This problem is giving me headache and I guess that means I need some guidance. Any ideas?
Logged

Lefty-concepty, righty-pixley, but bothey programmey.
Alex May
...is probably drunk right now.
Level 10
*


hen hao wan


View Profile WWW
« Reply #1 on: July 18, 2009, 07:56:29 AM »

I would say draw the tile, then draw the top two walls, then draw any entities on the tile from top to bottom. Then repeat for the next tile over. You'll have to do some funny maths for drawing diagonally across your logical tile map, and for finding out the top->bottom order for entities on a tile, but it should work out okay.

The alternative is to draw them in 3D and use the Z buffer to automatically sort them for you - it shouldn't compromise your visuals as you can still use orthographic projection and match it to pixels, and you don't have to worry about z sorting your dudes.
Logged

Gauss Jordan
Level 2
**


This world!


View Profile WWW
« Reply #2 on: July 18, 2009, 09:34:36 AM »

Thanks for the reply!

It's lining up to be even more difficult though. Sad

Unit sizes can be larger than one tile. It will be quite easy to solve as for the floor and wall tiles. For example i draw all the floor tiles at first then draw wall along with the units in the diagonal order you talked about.

It makes the drawing of projectiles horrible though, and even worse lasers. I don't know how im supposed to draw laser if i couldn't draw it on top of everything else.

I think i will have to compromise the graphical style so that walls do not overlap units. Kinda like the inside levels in Starcraft. That, or make it in real 3D instead :/
Logged

Lefty-concepty, righty-pixley, but bothey programmey.
Kadoba
Level 3
***



View Profile
« Reply #3 on: July 18, 2009, 11:46:08 AM »

You could split up images of the large sprites that are on different tiles and draw them in the same order you do your ground tiles. But you would have to make dead sure that all other images are drawn the same way or they'll start to clip.

Just draw large effects like lasers on top of everything or draw them the same way I mentioned above. Of course some projectiles like arrows would just look weird being draw on walls but the player might forgive you for drawing bright magically effects over everything. Even games as recent and large as FFT:A2 do it like this.
Logged
Aquin
Level 10
*****


Aquin is over here.


View Profile WWW
« Reply #4 on: July 18, 2009, 11:48:16 AM »

Am I missing something?

Shouldn't you draw the tiles (and consequently what is touching them) in the order from back to front?

The top-right corner runs to the bottom-left corner.  Just draw everything from back to front.  The sprites in front should blend with the sprites behind it and everyone goes home happy.

I don't understand why it would be more difficult than this.  Of course, I'm an idiot sometimes.  Please explain?  Beg
Logged

I'd write a devlog about my current game, but I'm too busy making it.
Kadoba
Level 3
***



View Profile
« Reply #5 on: July 18, 2009, 11:55:51 AM »

because some sprites and images are bigger than their base tiles. If a unit takes up a 2x2 space then where do you draw it? The bottom most one? Well if you draw the walls in the same manner as the sprites and that unit is behind a long wall it's going to clip because it's being draw over part of it. You can't draw walls last over the sprites either or sprites in front of the wall will also appear behind it.
Logged
Aquin
Level 10
*****


Aquin is over here.


View Profile WWW
« Reply #6 on: July 18, 2009, 12:24:06 PM »

Oh!  So the issue is that there are tall walls that should be...in...

No, I lost it.  I still don't really get it.  Regardless of sprites or walls, just draw everything in the right order as they come.

Where is the basis for each sprite (in terms of co-ordinates)?  The bottom-left corner of the sprite/wall image. 

I *still* don't see why this wouldn't work.  If a wall is tall, it will draw over things that are behind it, since we base it's distance into the screen on the bottom-left corner. 
Logged

I'd write a devlog about my current game, but I'm too busy making it.
Kadoba
Level 3
***



View Profile
« Reply #7 on: July 18, 2009, 01:58:39 PM »

Its not a tall wall. Its the different sections of the wall.


Ok. Let's assume there is an isometric grid. The drawing order is from left to right, top to bottom. The ground tiles are drawn first and the units and walls are drawn together.


This is Warrior Dude. He's the protagonist and he just takes up a single tile space.

Let's add some scenery.

Warrior Dude is rightfully draw behind the tree because of the drawing order. This is because Warrior Dude is safely constrained inside his little isometric box. Nothing can clip him and all is good in the land of isometricism.


But wait! A happy flesh golem approaches. Unlike Warrior Dude, happy flesh golemn takes up 2x2 isometric spaces. He is drawn from the bottom most tile space and he's running straight for Warrior Dude!


Run away warrior dude!.... Hey wait a second..



WTF?!


It's because of the drawing order. If your image spills over into another tile this is going to happen.





 
Logged
Aquin
Level 10
*****


Aquin is over here.


View Profile WWW
« Reply #8 on: July 18, 2009, 02:04:10 PM »

Shouldn't the drawing order be from right to left?

I don't know if that would change anything, but you could try it.
Logged

I'd write a devlog about my current game, but I'm too busy making it.
Kadoba
Level 3
***



View Profile
« Reply #9 on: July 18, 2009, 02:17:15 PM »

it would just clip if the wall was in the same potion on the left side. and what if the sprite was bigger? like 3x3. then it wouldn't matter what order the rows were drawn in.
Logged
Aquin
Level 10
*****


Aquin is over here.


View Profile WWW
« Reply #10 on: July 18, 2009, 02:19:32 PM »

Yeah, but you would want it to clip on the left side, since it is technically in front of the wall given the perspective of the user.

As for the 3x3, I really don't know.  I suppose one thing you *could* do is divide up every graphic into those particular tiles and test each tile for each graphic.  Of course, then you wouldn't get the overlap when you want it....

Man.  My brain hurts thinking about it.  I think I actually need to try it out before I can really understand.   Shrug
Logged

I'd write a devlog about my current game, but I'm too busy making it.
Gauss Jordan
Level 2
**


This world!


View Profile WWW
« Reply #11 on: July 18, 2009, 02:35:45 PM »

Thanks for all the replies! :D The drawings explains one of the problems really well.

As for that problem, it's probably impossible to solve... If it was 3x3 it would be possible to draw it correctly though, as long as all the tiles it occupies are free and as long as all the floor is drawn first of all.

This is all causing me too much problem at this very stage of the project so I'm going for simple instead and will construct the tiles so that i can draw all entities on top of the level. So for me, it's all solved. Thanks for the help, it gave me some insight!

Although it's very true that drawing projectiles, lasers and effects on top of everything while still having overlapping walls won't look too bad. I dunno, will maybe try it later on the development. Smiley
Logged

Lefty-concepty, righty-pixley, but bothey programmey.
Aquin
Level 10
*****


Aquin is over here.


View Profile WWW
« Reply #12 on: July 18, 2009, 02:43:00 PM »

Yeah, Kadoba draws awesome pictures.  It helped me out a lot!

Of course, I still have no clue if there is a simplish solution.  I'm positive I could figure something out if I just sat down for a few days.
Logged

I'd write a devlog about my current game, but I'm too busy making it.
Kadoba
Level 3
***



View Profile
« Reply #13 on: July 18, 2009, 02:49:23 PM »

Actually in the time I spent making those overly elaborate examples I came up with a much more specific solution than the one I had earlier. I'll post it later when I have more time.

Yeah, Kadoba draws awesome pictures.  It helped me out a lot!

Aww shucks...  Embarrassed
Logged
Lemming
Level 2
**


victim of gravity


View Profile WWW
« Reply #14 on: July 18, 2009, 03:14:41 PM »

But wait! A happy flesh golem approaches. Unlike Warrior Dude, happy flesh golemn takes up 2x2 isometric spaces.

Shouldn't you be able to solve that by having him drawn at the same time as the part of him furthest away from the camera? In this case he would not be in front of that box. Aka. draw him as early as possible.



Do you see a problem with drawing in the red square's order??
Logged

Gauss Jordan
Level 2
**


This world!


View Profile WWW
« Reply #15 on: July 18, 2009, 03:38:48 PM »

But wait! A happy flesh golem approaches. Unlike Warrior Dude, happy flesh golemn takes up 2x2 isometric spaces.

Shouldn't you be able to solve that by having him drawn at the same time as the part of him furthest away from the camera? In this case he would not be in front of that box. Aka. draw him as early as possible.



Do you see a problem with drawing in the red square's order??

Yes, the tile to the right of the red tile (but one of the diagonal to it in the isometric space) would be drawn on top of it.

I have the solution though Smiley Draw him based on his rightmost square instead :D
Logged

Lefty-concepty, righty-pixley, but bothey programmey.
Lemming
Level 2
**


victim of gravity


View Profile WWW
« Reply #16 on: July 18, 2009, 03:42:06 PM »

Yes, the tile to the right of the red tile (but one of the diagonal to it in the isometric space) would be drawn on top of it.

I have the solution though Smiley Draw him based on his rightmost square instead :D

Isn't that space already occupied by him? This would only be a problem if you have non-square isometric objects. In which case I recommend splitting them into multiples.

Rightmost square would only be a special case, think of the flipped sprite location. This would have the same issues as using the left.

Edit: Ah, split him up then?
« Last Edit: July 18, 2009, 03:57:21 PM by Lemming » Logged

Kadoba
Level 3
***



View Profile
« Reply #17 on: July 18, 2009, 07:25:05 PM »

Yeah, drawing him on any one space isn't going to work. You're always going to get situation with clipping. You'd have to draw certain parts of him at different times. WHICH I AM ABOUT TO EXPLAIN!


Let's say happy flesh golem has a slightly different colored variation of him later in the game. We'll call this variation the "rather happy flesh golem". He has a slightly different moveset, hue, and even size! In fact the rather happy flesh golem instead takes up a 3x3 space. Yowza!


 Shocked

Ok, so what is this solution? How do we split him up and draw him? I propose that we cut up the image along the x axis where the tiles meet at the corners starting with the lowest tile. We separate the image only at the x axis, he can be as long we want on the y axis as long as it's above the tile. Which he should be anyway. Once we separate the image we can draw the pieces in their respective columns on the lowest tile.

Having trouble visualizing? Pictures!


The image is separated by the colors on the image on the left and draw in the respective tiles on the right.

This will cause the complete image to look good even if surrounded completely by walls. Here is a mockup of the drawing order:


Logged
Lemming
Level 2
**


victim of gravity


View Profile WWW
« Reply #18 on: July 19, 2009, 12:30:19 AM »

You'd have to draw certain parts of him at different times. WHICH I AM ABOUT TO EXPLAIN!

Nice, good job! Gentleman
Logged

Gauss Jordan
Level 2
**


This world!


View Profile WWW
« Reply #19 on: July 19, 2009, 12:53:45 AM »

I'm pretty sure it will work.

I edited your drawing to show how i mean:


The whole sprite is drawn based on the red marked square. This wouldn't change anything compared to drawing it split, right?

Of course, this assumes that floor tiles are drawn before everything else and that the golems space is not shared with other objects. And if units could have different height position this wouldn't work either. So in my game i wouldn't have those problems.
Logged

Lefty-concepty, righty-pixley, but bothey programmey.
Pages: [1] 2
Print
Jump to:  

Theme orange-lt created by panic