STEP 4 The Elements Of Disaster.
Why do I call this the Elements Of Disaster? Well the element files act as a middle-man
so to speak for your graphic files and the container layout tags. If you have problems
with your xml, it will most likely be here. The element file assigns identification names
to your graphics. These names in turn are used to define what graphic is used where in
the layout scheme of your container. To make matters worst there are also x y h w coordinates
that can be attached to each element. But you won't have to worry about that for now.
It Has to do with creating graphic files that contain more then 1 element. This sounds a bit
troublesome, but this is where the fun really begins. Because we cannot create an element file
without anything to define.
So get that graphics program smoking. We're going to make a purty picture.
Got yer graphics program going. Good..
Now we've got to have a background for our container.
So make one. This is the greatest thing about free-form skinning.
Make it any size you want. But for now, lets keep it square. In order to make
cool shapes we have to get into alpha channels and this tutorial isn't about that
just yet.
I made mine 275x116, the size of the old 2x player face.
Pretty boring hey. Well it's a background and it will do just fine.
Now we need to save it somewhere. It's time to create another folder.
Once again we go to our skins directory. Now create a new folder.
Call it player. You will be linking to this folder and the background
graphic in a minute. Once you have created your folder, save your background
in that folder. Name it background and save it in the png image format.
Now! lets review what files we have so far and where they are stored.
We have our main skin directory.
And in in that folder we have a hierarchy like so.
All linking back to the main file.
Skin.xml
^
^
xml folder <------ player.xml
^
^
player folder <------ background.png
O.k. Its time to define our background in the player-elements.xml.
Time to open up that text editor again. This file is going to be called player-elements.xml
Every graphic you create will be defined in an elements file. You are going to give the
background image you just created an ID or identification name. This name will be used in the
next xml file you create call the player-normal.xml, so it's important at this point to start
thinking about the ID you use.
First you must make the beginning tag that designates the file as an elements file.
The first tag of all element files is [elements]
and this tag has a corresponding closing tag [/element]
All of the elements that you define are nested between these tags.
Lets give that background an ID. I'm naming mine main.bg
So the beginning of my first element tag looks like this.
[bitmap id="main.bg"
Alright, did you come up with a name. Great!
But your not done. This ID is linked to the background pic that you just made.
So lets finish this tag out.
[bitmap id="main.bg" file="player/background.png"]
This is pretty simple math here. If you look at this tag as a whole entity. It basically
is doing the same thing we have been doing all along.
Bitmap ID = > main.bg = > The file = > in the player folder = > background.png
There you have it, your background is defined. If your on the right track and understanding
what I have been teaching then you should have the following code in your file.
[elements]
[bitmap id="main.bg" file="player/background.png"/]
[/elements]
But, we're not done yet. We need to put something on this background.
So let's add the play button. Open up your graphics program again and make a play button.
Heres mine
Lets define it in the player-elements.xml
[bitmap id="play" file="player/play.png"/]
The full code.
[elements]
[bitmap id="main.bg" file="player/background.png"/]
[bitmap id="play" file="player/play.png"/]
[/elements]
This is what you should have now.
Simply huh, We are on the move now. These tags should be nested between the [elements] tag.
You can now save this file in your xml folder as player-elements.xml
It's time to lay it all out an the table. Lets move on..
Next Page ->
|
