Making a Z order system: Moving the player across layers

4

Features on these Courses

Stats

1,641 visits, 2,099 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 17 May, 2019. Last updated 2 Jun, 2019

In this third tutorial, we are going to add a final feature to the Z ordering system we made: Moving across layers.

Layers? Elevation.

Remember our layer system? T O S S . I T.

Just kidding, but we're gonna make small changes to it. Since we're moving our objects between "layers" it's not right to consider it a layer system anymore. Let's call it the Z axis instead.

Because it makes much more sense to view it as a 3rd axis of movement rather than as layers. Also because remember this arbitrarily large value we used? We're gonna change that too.

Now that value will be the "height" of the "Z unit". Aka, how many units on the Y axis will one unit of the Z axis move you by. For my game, I chose 32 pixels, because that's the size of a tile, or half a character.

That's the new Z order code:

Ok, but why does it work? Look at this screenshot.

Look at Lucy, Lucy, Lucy and Lucy over here. Lucy, Lucy and Lucy are standing on the elevated platform, while Lucy is on the ground, at Z = 0. Yet grounded Lucy appears in front of the elevated Lucy behind her. That's because, even though she's on the ground, she's more than 32 units down from Lucy.

If we had to project every Lucy on the same plane, this is what it would look like:

Grounded Lucy would be floating mid air on the same elevation as the other Lucies, and she'd still be in front of her.

However, this means that you must absolutely respect the unit in your art and level design. Let's imagine I said that this platform was on Z 4 even though, according to the unit, it's on Z 1. This happens:

Lucy gets stomped on by Lucy :(. Now why does this happen? Let's look at a case where it makes sense.

Here I replaced my blocks with glass blocks, and I made the platform respect the unit and be on Z 4, while grounded Lucy is still on Z 0. Now it makes sense why she's draw behind everything else, she's much much lower, and the platform hovers above her head. While it still looks like Lucy gets stomped on, she doesn't.

Stairs

Sure. It's super simple, all you need are stairs. Make them part of your Z order family, and give them two instance variables: UpZ and Down Z

Then it's only a matter of lerping the Z between the two if you're walking on the stairs.

This is the formula I used:

lerp(Stairs.DownZ, Stairs.UpZ, clamp(unlerp(Stairs.BBoxBottom-16, Stairs.BBoxTop+16, Player.Y), 0,1))

You'll see that I give 32 pixels of margin on the stairs and clamp the transition, which means that the first 16 and last 16 pixels of my stairs are on each end of the lerp. That's to make sure that the player doesn't get left between two Z units when moving fast across the stairs.

I also make a "for each stairs" to repeat the process on every stairs, if the player is walking on multiple stairs at once. That for each will only loop through one instance most of the time anyway.

Collisions!!!!!

The collision filtering system will need a few changes too to account for that. A simple hack would be to just make every object that are between floor(Player.Z) and ceil(Player.Z) be enabled.

Final look

That's how it looks in the end :D

Good question, and I'll answer that in the final tutorial.

  • 0 Comments

Want to leave a comment? Login or Register an account!