Well, I happened to have posted this in a
different post (I was talking about how SOE could fix some of its current implementation by allowing us to override things differently, but that's of no relevance to this post), so here's something to start you off:
I'll call this lesson "Understanding the XML Object Model". Today we'll work backwards from existing XML code to understand it's object model, then we'll modify it a little bit for some practice. I'm assuming you know something about coding in general at this point (at least enough to understand the object model stuff below). If not, we'll have some backtracking to do, but no worries. And I'm going to copy some equivalent abstract C++ code - if it looks like gobbletygook then just ignore it. If you understand it, it could prove useful. Please stop me if you don't understand something because this is going to move too fast if you have no coding experience.
If you know HTML at all (it's ok if you don't), you'll notice something strikingly familiar between it and XML, namely both use a bunch of tags with stuff inbetween.
If you don't know HTML, a "tag" is some text enclosed in <>'s. Tags begin with <TagNameGoesHere> and end with </TagNameGoesHere>. The information between the opening tag (<Foo>) and the closing tag (</Foo>) is what we'll call (for the sake of EQ UIs at least) the "value" for the element "Foo". So in this example
we're basically saying Foo=Bar (set Foo to be "Bar"). That's how the XML works for EQ UI creation.
Now, look at this XML code:
Code:
<Ui2DAnimation item = "A_GaugeFill">
<Cycle>true</Cycle>
<Frames>
<Texture>window_pieces01.tga</Texture>
<Location>
<X>110</X>
<Y>20</Y>
</Location>
<Size>
<CX>100</CX>
<CY>8</CY>
</Size>
<Hotspot>
<X>0</X>
<Y>0</Y>
</Hotspot>
<Duration>1000</Duration>
</Frames>
</Ui2DAnimation>
It happens to be the same as this (abstract) C++ code:
Code:
A_GaugeFill = new Ui2DAnimation();
A_GaugeFill.Cycle = true;
A_GaugeFill.Frames[0] = new Frames();
A_GaugeFill.Frames[0].Texture="window_pieces01.tga";
A_GaugeFill.Frames[0].Location.X=110;
A_GaugeFill.Frames[0].Location.Y=20;
A_GaugeFill.Frames[0].Size.CX=100;
A_GaugeFill.Frames[0].Size.CY=8;
A_GaugeFill.Frames[0].Hotspot.X=0;
A_GaugeFill.Frames[0].Hotspot.Y=0;
A_GaugeFill.Frames[0].Duration=1000;
Which happens to correspond to the following object model:
Code:
A_GaugeFill (Ui2DAnimation)
|-----Cycle (boolean) = true
|-----Frames (collection)
|-----Frame 0 (structure)
|-----Texture (string) = "window_pieces01.tga"
|-----Location (structure)
| |-----X (int) = 110
| |-----Y (int) = 20
|-----Size (structure)
| |-----CX (int) = 100
| |-----CY (int) = 8
|-----Hotspot (structure)
| |-----X (int) = 0
| |-----Y (int) = 0
|-----Duration (int) = 1000
So all XML is really doing is setting up a list of objects with information in them. This example is a 2D-Animation (hence the Ui2DAnimation type) with one frame in it (one set of <Frame></Frame> tags) and a bunch of information in the frame.
For example, take the X value inside Location. Working backwards through the tags, we end up with:
X is inside Location which is inside Frames which is inside A_GaugeFill (the parent object). In other words, we have an object called A_GaugeFill with (Frame information containing (Location information containing (an X value))).
Ok. Now to teach you what all these elements mean for a Ui2DAnimation object...
<Ui2DAnimation item=A_GaugeFill> is the first thing we see and it's the outermost tag (if you haven't figured it out, XML uses a lot of nested logic to figure out what belongs where). Therefore A_GaugeFill is the name of the "object" that is of type Ui2DAnimation. This definition continues until we find a </Ui2DAnimation> tag to close it.
<Cycle> determines whether the animation should cycle through all the frames of the animation (loop it, i.e. go back to the first one when the last one completes), or just play through the animation once, so <Cycle>true</Cycle> means to loop it, and <Cycle>false</Cycle> means to play once.
<Frames></Frames> says to make a frame definition.
<Texture> tells us which graphic file to use.
<Location> tells us where the animation frame is within that graphic file, <Size> tells us how big it is.
<Duration> says how long to show this frame before going on to the next one.
------------------
Now for some practice. Please perform the following conceptual modifications to the original XML file. (Also feel free to post questions if you have those too)....
1. We've created a new graphic file that we want to use for A_GaugeFill. The filename is "window_shards_gauge.tga".
2. This new file only has one frame of animation (i.e. it's a static graphic) just like the old one, so we don't have to add another <Frames></Frames> tag, but we do need to make some modifications to the old one because we've changed a couple things.
3. Since this new graphic file just contains a gauge fill texture, and nothing else (look inside "window_pieces01.tga" and you'll see what I mean - you'll see a ton of different graphics in it), we're going to have to change its location. The new graphic starts at the top-left corner of the file with no space to the left or above. (Note: we're in a zero-based coordinate world, so the top-left is 0,0 and NOT 1,1!)
4. Our new gauges are THICKER and WIDER because we want them to be more easily seen. The old ones are just too dainty for our tastes, so we went ahead and increased the width 50% and made the height a whopping 25 pixels. We're not gonna miss these bad boys!
--------------
This concludes the lesson "Understanding the XML Object Model". If anyone feels the need to correct me on something, please do. I understand I'm probably not using the world's best terminology for some things...
Bring on the questions.
Any Easy Way?
a small starter lesson...hopefully not a middle lesson
Linear Mode
