Working on skinnable components

I made initial tests showing that Flex-like skinning concept could easily be implemented with Unity.

Having skinnable components would mean a true separation of component functionality and it’s look and feel!

Skinning is a great concept indeed: a skin is a single child of the skinnable component and is sitting on top of it while covering it completely (having the same size).

The component itself does no rendering at all: it is all done by the skin.

Component skin could be changed on-the-fly (a StyleMapper-like system) and completely change the look and feel of the component.

When the skin is attached by the component, after the instantiation it reports back giving it references to instantiated parts. The component then uses these references for doing its part-related own logic (adding event listeners etc.).

Vertical scrollbar hierarchy (notice the skin)

Vertical scrollbar hierarchy (notice the skin)

In the example of a scrollbar, the skin consists of 4 parts (buttons), which are created by the separate (“skin”) class, and are injected to owner component after the instantiation.

Vertical scrollbar skin class

Vertical scrollbar skin class

Overall – skinning is a great concept, used by some of todays top UI platforms (Apache Flex, Silverlight).

It would work great with Unity because game UI design is all about drastically changing the look and feel of components (and this is hard to achieve with simple styling).

Posted in News