Microsoft MakeCode

Using z(depth) to create a "3D" scene

I just wanted to share what I’ve learned about using a sprite’s z(depth) property in makecode arcade for allowing characters to move in front of and behind objects within a scene. I’ve used this concept in each of the games I’ve worked on so far, but the concept is buried in a lot of other code. I made this simple scene “BlueOx 3D-Scene” to show the inner workings that may otherwise be difficult to track down.

The onStart block in “BlueOx 3D-Scene” contains two boolean variables that can be set to either True or False: ‘updateOxLayerWhenMooving’ and ‘keepOxFromWalkingThroughObjects’. Please update these variables as described below to see how the scene is different for each case.

  • When both variables are set to False, the ox floats in the foreground as it moves around and does not interact with any of the objects in the scene.

  • When ‘updateOxLayerWhenMooving’ is set to True and ‘keepOxFromWalkingThroughObjects’ is set to False, the ox can now move in front of and behind the tree and rock. This is achieved by setting the z(depth) property of the ox sprite to the value of the ox’s “bottom” property. Note that the tree and rock have had their z(depth) property set in the same way. As the frame is rendered, the sprites with the lowest depth value are drawn first. When the ox’s bottom is lower on the screen than the rock’s bottom, the rock is drawn first. If the sprites overlap the ox appears to be in front of the rock. Likewise, if the ox’s bottom is higher on the screen than the rock’s bottom, the ox is drawn first and appears to be behind the rock. Using the method of setting the ox’s z(depth) to its “bottom” value provides an improvement to the sense of realism in the scene. The layering is correct, but with ‘keepOxFromWalkingThroughObjects’ set to False the ox can walk through the tree and the rock and up into the air.

  • When ‘updateOxLayerWhenMooving’ is set to True and ‘keepOxFromWalkingThroughObjects’ is also set to True, there are constraints on the movement of the ox. The functions “dontWalkThroughTree”, “dontWalkThroughRock” and “dontWalkThroughTheAir” are called and they do exactly what their names indicate. This adds a great sense of realism because the ox is now interacting with the objects in the scene. The ox can frolic in the field, hide behind the tree or rock, walk in front of them, and is no longer at risk of floating up into the sky. This is a great improvement from the first case where both variables were set to False.

  • Note: The last combination of the boolean variable states (when ‘updateOxLayerWhenMooving’ is set to False and ‘keepOxFromWalkingThroughObjects’ is set to True) is not meant to be part of the example. The movement of the ox is confusing with these settings, although the code is performing as intended.

I encourage anyone who is interested to experiment further. Feel free to change the sprites, add new objects, and adapt it to be the scene you envision. Of course there are additional improvements that can be made: animation of legs; turning the player sprite depending on the direction of movement; moving objects around, etc…

Have Fun!!!