Modern Skin: Layer Composition

From Winamp Developer Wiki
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