Modern Skin: Layer Composition

From Winamp Developer Wiki
Revision as of 18:14, 24 September 2008 by Tarik (Talk | contribs)

Jump to: navigation, search

Creating a Modern Skin --> Intro --> Winamp 2 to Winamp 3+ --> Simple Skin Tutorial --> XML Intro --> Simple Skin Tutorial (Continued) --> Container --> Group --> Relative Positioning --> Complex Skin --> Non-Rect Player --> Layer Composition --> Alpha Channels --> Animatedlayer --> Snap Points --> Drawers --> Skin Scripting --> Drawer Scripting --> Animating a Skin --> Maki Overview --> Glossary


Layer composition is the process by which several images lay on top of each other to produce a complex graphical visualization. It is similar to layers in Photoshop.

The process is:

  1. produce the images and save them in a file
  2. define an element to represent that image in your XML
  3. make a layer using that element
  4. if you put layers in same area, they will lay on top of each other based on the ordering of the xml code.


Complex Tutorial


File:Complexskin diag layercomp.png


In Complex Tutorial, Group #1 (the first circle from the left), has blue triangle on top of the red circle. This is done through layer composition. Here's the process.

  • Make the graphics: the red circle and blue triangle.
  • Define the elements in the XML code.
  • Define layers using those elements.
  • Place the layers in the same area.




Lets go through in detail how do to each step:

Make the graphics: The Red Circle and Blue Triangle.

red-circle.png    File:Red-circle.png

triangle.png       File:Triangle.png


Define the Elements in the XML Code

File:Layercomp xml.png



Define Layers Using those Elements

File:Layercomp xml2.png


File:Layercomp xml3.png


Place the Layers in the Same Area

File:Layercomp xml4.png