Home
Starting From
Scratch
Starting To Customize
Extras
Tips And Hints
Downloads
Links
News
Feedback Form
Coming
Coming
Coming

      The player-elements.xml



	                 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 -> 
   
Introduction Folders and xml basic Pointing 
The xml folder and player.xml The elements of disaster Laying it all out
Checklist The code

   
Alpha Channels Photoshop A Basic Animation Adding Components
 The Player Button Png Using TTF files.
All contents of this site copyright Neoart Designs
Unless otherwise specified.