# Simulating 3D height in 2D scene (also shadows)

I recently stumbled across this http://vimeo.com/99118680 video and was stunned by the beautiful painted art and colors. But mostly I couldn't believe how everything appeared to have three dimensions despite all being 2D images and sprites. I've dug through the creator's blog and couldn't find any helpful ideas on how they managed this effect so I'm giving it a shot here.

My question is about the trees mostly: How could I go about making a tree out of 2D sprites that will orient correctly as if in 3D.

In addition if anyone has any ideas on how they did the shadows I would love to know that also (I feel like they are static but can't be sure).

• That is a truly beautiful game. – Chris Cooper Jul 4 '14 at 3:50
• This is a 3D game, take a look at the triangular based pyramids the main character touches at one point. – Theis Egeberg Jul 4 '14 at 11:38
• @TheisEgeberg I considered that but looking at the blog it appears he definitely drew 2D sprite animation for the animals at the very least. Guessing then that it's a combination of 2D and 3D. – Saliken Jul 4 '14 at 18:01

If you watch the trees you can clearly see that a perspective camera is in use as it changes relative to the viewing angle.

The fact that some things are drawn over other implies that a depth value is also in use so we have a 3D data set.

Therefore, because there is a perspective camera being used to render a 3D data set it's likely that a standard 3D rendering pipeline is in use. So to render something like those trees you would make a 3D model of trees and render it.

Now, although you seem to be mistaken as to how this game's rendering system works I feel your question regarding drawing trees made of sprites is still valid, so I'll answer that.

Drawing pseudo-3D trees using sprite tricks

WARNING: This is a bit of a guess and I can't test out the code supplied right now, but it should provide the kind of illusion you are looking for.

So let's assume you have a set of sprites you will layer one on top of the other, each smaller than the last, to give the image of a tree such as a pine from above. We will also assume your rendering with an orthographic camera (nothing changes with respect to depth).

Essentially what we want to do is layout the sprites in the direction away from the centre of the camera but make sure that it's a stronger effect at the edge and a weaker one nearer the camera, with all sprites one on top of the other when it's in the very centre.

First work out the vector from the tree to the centre of the camera, take the distance and normalise this vector.

Vector2 dir = treePos - cameraCenter; double dist = length(dir); dir = normalise(dir);

where length() returns the vector magnitude and normalise() returns the unit vector.

Now this gives you a nice direction and a distance. Now we want to set the position of the individual sprites. We will draw the bottom one in the treePos and as we go up the tree we will draw each slightly further along a line, in the direction dir, proportional to the distance dist.

double heightBetweenSprites = 0.2; // experiment with this value.
for (int i = 0; i < nTreeSprites; ++i)
{
// scaler = 0 when i = 0 so sprite i must be the bottom sprite.
double scaler = distance * heightBetweenSprites * i;
double x = treePos.x + scaler * dir.x;
double y = treePos.y + scaler * dir.y;
draw(treeSprite[i], x, y);
}


It should be noted that you might want to weight the scaler corresponding to the aspect ration as well. This should be done for each axis separately.

I suspect that there are several tricks in play.

It is entirely possible that the game camera or view is a 3D perspective camera and all the sprites are placed in a 3D environment just at different heights.

there could also be some clever parallax effects going on here.

I would most likely suspect that this is in fact either a 3D or "2.5D" game or it is a clever combination of all/some of the above including 3D.

I actually think that the shadows are dynamic and are based off of the models around them.

watch the subtle changes in the shadow when the player "equips/un-equips" the spear.

I can only guess but that is how I would achieve those things. With "Magics"

• Those shadows could be achieved by rendering the same objects again (sorted by Y), but with a skewing transform on the object center. – Gustavo Maciel Jul 4 '14 at 4:44
• true but that doesn't account for the way the persons shadows are rendered things like legs and arms don't look the same in shadow form – That Homeless Guy Jul 4 '14 at 14:39
• Yup, that's not a swiss knife, but you could try mixing more than one kind of shearing/offsetting for different object shadows. – Gustavo Maciel Jul 5 '14 at 14:43