Depth Perception

Here's an odd little quirk, I have just noticed.

Notice how the finger sprite passes behind the panel icons.

This is clearly not right.

It is because, apart from the panel icons - which were set at a depth to bring them in front of the panel, we have have not yet explicitly set the depth of anything in the project.

I was going to get around to it honest.

When new objects such a sprites and text are created, they have a default depth value of 10.

If two objects have the same depth value, they are drawn in the order they were created, from the back to the front.

So here, both the panel sprite and the finger sprite have a depth of 10 and since the Panel was created first, it is at the back.

The icon sprites were set to be 1 in front of the panel so have a value of 9 and are in front of everything.

Because the Icon sprite already take their depth from the Panel, we just have to move the panel back to sort this out.

But now is probably a good time to do some planning for the rest of the project.

Here's a list of the kind of things we are going to have on screen and any relationships between them

• Workspace 
• Workspace Icons - in front of workspace
• The Panel - in front of workspace
• The Panel Grid - in front of panel
• The Panel Icons - in front of panel Grid
• Messages to the user - in front of everything
• A Score - in front of everything

This gives us a rough idea of the order things should be arranged in.

Some of these could also have multiple layers, for example we might want each icon to have a visible name which would probably be better in front of the icon.

We might want icons to cast a shadow onto the workspace and / or panel

Also we want any icons being dragged from the panel to the workspace to be in front of them both.

As with the number of icons on the grid, a good way to set the initial depths is using constants.  Then if we decide later to change the depth of an item, we simply change the constant and the program will adapt.

Add the following constants to the start of the program

#constant DEPTH_SCORE 20

#constant DEPTH_PANEL 30

#constant DEPTH_WORK 40

These will provide three baselines for the object we use.  Score and messages, The Panel and it's icons and the Work area and it's icons.  Its a good idea not to over do it at first, we can always expand on it later.

Now we set the depth of the panel ny adding the following command immediately after the setSpritePosition() command which sets the initial position of the panel.

setSpriteDepth( PanelSprite() , DEPTH_PANEL)

and this command immediately after the setTextPosition() command which sets the initial position of the panel text.

setTextDepth( panelText() , DEPTH_PANEL - 1 )

Which puts the panel text slightly in front of the panel.

Because we caught this early on, these are the only places we need to worry about depth for now.