Rendering Layers

[info-creaticode]

Introduction

In CreatiCode, you can place objects in different “rendering layers”. There are 4 rendering layers in total. All objects in layer 0 will be drawn on the stage first, followed by all objects in layer 1, etc. By default, all objects are in layer 0.

Rendering layers can help you achieve very interesting visual effects, such as making one object always show on top of another object.

The block to set the rendering layer for the current sprite object is:

 
 

Example 1 - Unblocking An Object

In this example, we have placed a red sphere behind a green box:

 
As a result, the sphere is blocked by the box:

https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/49f9afcb-457d-46e6-878e-7a8d5915cfb0.gif" width="450" style="border-radius: 5px; border: 1px solid #29622d;">

 
However, if we set the rendering layer of the sphere to 1, then it will be drawn after the box is drawn, so we can always see it completely. This is as if the box is allowing us to see the sphere through it.

 
 

Example 2 - Highlighting An Object

The rendering layer is especially useful when we are highlighting an object. In this program, we are trying to highlight the sphere in yellow. The green box is semi-transparent, so we can see the sphere through it.

 
However, the highlighting is not working for the sphere. The portion of the sphere that’s behind the box will all be covered in yellow, though we only want to show a yellow contour around it.

 
To solve this problem, we can move the red sphere to rendering layer 1. This way, we draw the sphere and its highlighting colors after the box is already drawn, so we get the correct result:

 
Whenever you need to highlight an object that’s blocked by another transparent object, you can use this technique.

 
You can play with this example here:

https://play.creaticode.com/projects/6eb3f6954926ab8db962ae20