How Location is Determined

Before we start adding Layers, you should understand how Objects are positioned on the screen. You have to consider all three dimensions when positioning things in your skins. First, we'll look at how Objects are positioned according to their x and y coordinates. As mentioned in the previous section, all positions are relative to the upper-left corner, which is known as the Origin. Below I have added two layers, a blue square and a green oval, to demonstrate the concept:

The black line points to the Origin, where x and y both equal 0. Let's first examine the square. Its position is based on the distance of its upper-left corner(marked in green) from the Origin. The square starts at 270 pixels to the right of and 50 pixels down from the Origin. Pretty easy, huh? The green oval, on the other hand, is a little more tricky to understand. When determining its location, you have to remember that its upper-left point is not along the oval itself, but instead where the blue mark is. Therefore, the oval starts at 49 pixels to the right of and 77 pixels down from the Origin. Basically, to determine a non-rectangular Object's x and y coordinates, you have to use the leftmost(x) and topmost(y) pixels of the image.

The third dimension is depth, which determines which Objects are on top or bottom of other Objects. In your XML, Objects that are defined later will show up on top of Objects that are defined earlier. For example, if you coded something like what follows, there would obviously be some overlap. In this case, the oval would draw on top of the square, thus hiding part of the square.

<layer id="square1" image="player.normal.square1" x="10" y="10"/>
<layer id="oval1" image="player.normal.oval1" x="10" y="10"/>

Alternatively, if you ordered them as follows, you would then have the square on top hiding some or all of the oval:

<layer id="oval1" image="player.normal.oval1" x="10" y="10"/>
<layer id="square1" image="player.normal.square1" x="10" y="10"/>

Adding a Layer

Now that we know how position is determined, let's add another layer to our skin. In the tutorial skin, there is an inset that houses the speakers and display area. Since it shows on top of the background, add this Layer in the XML after the background Layer at (26,29). Don't forget to add the actual image to the player folder and to add it to the Elements. If you make a bad reference to an image, you will see this where you expected your image to be:

After adding the inset Layer and saving all the changes you made, refresh the skin(F5). Now the tutorial skin looks like this:

Now that we have our background and an additional Layer, let's continue on to Groups and see how they can be used.