Game Development Reference
In-Depth Information
Skinning the user interface
Simple skinning is implemented to go with the PulseUI framework. Skinning and
PulseUI serves only to aid a new game to be developed at top speed, letting the
developer focus only on the game play while the boring stuff such as chat, friend-
making, and lobby can be taken for granted. A different skin than the one provided
with the SDK can be changed by simply replacing the three files under
rsrc
directory, namely:
•
Ui.png
•
Frame.png
•
Outline.png
Note that the skin elements must follow the original size and positions. If, however,
you need to have a different size or position, simply subclass the Skinner class from
the PulseUI and tweak the Skinner itself.
Skinning for Hello World
This is where you customize the UI for your game. In this class, you only need to
load the three skin files. The super class Skinner defined in the PulseUI will actually
do all the cutting of individual UI elements. We gain access to the image files via the
following definition:
[Embed(source="/hw/rsrc/Outline.png")]
private static var OutlineClass:Class;
[Embed(source="/hw/rsrc/ui.png")]
private static var UIClass:Class;
[Embed(source="/hw/rsrc/frame.png")]
private static var FrameClass:Class;
We override the
load()
method and actually create the bitmap data from the image
files ready to be sliced and diced. Note that the properties
m_outline
,
m_ui
,
and
m_frame
are protected properties defined in the super class Skinner.
public function HelloSkinner()
{
super();
}
protected override function load():void {
m_outline =
(new OutlineClass() as BitmapAsset).bitmapData;
m_ui = (new UIClass() as BitmapAsset).bitmapData;
