Skinning tutorial part 3

From TrillWiki

[edit] Part 3 - Building A Window

Reference Files:

Ok, so we know how to create references to files. Now we need to put something into the files. This is where we actually start what would be referred to as "skinning". I'm going to (hopefully) guide you through the process of creating a transfer window (also referred to as xfer windows). If you are designing your own skin along with this tutorial: great. If you are just running through to learn, you can get the image files to create the example I will be using from here. Unzip xfer-controls.gif into graphics/controls, and xfer-window.gif into graphics/windows.

In the next pages, our aim will be to create the transfer window - making it look a little like this:

The goal

Ok.

So to start constructing this window, first of all we need to create the "<component>", and give it some code to display the background. The image for the background is stored in the xfer-window.gif file. But at present Trillian doesn't have a clue that file exists, let alone what's in it. So first of all we need to declare the bitmap. Don't worry, this is really easy. Open up XML/misc/files.ext (this is the file linked in trillian.xml by &files; ).

Copy and paste the <skindesc> bits from your trillian.xml file. You will see I have added a few comments, so that we can categorize our files as we add them. By the time we're finished with the skin, we will have a lot of bitmaps and sounds etc, so it is useful to categorize them as we progress.

You will also see this line:

This is what we use to tell trillian where to find a bitmap file. Rather than typing images/windows/xfer-window.gif every time we use it, much like the dtd references, we give it an alias, or "name" within trillian. Every time trillian sees this name, it goes and looks for the file, and this is where we tell it where that file is.

So, in the file="" part, we add the path and filename to the file - in this case graphics/windows/xfer-window.gif. for the name, we want to give it a name we will be able to remember. The name can be anything you like, but it is easier for you to remember the names as you go along, if you come up with some sort of naming system. A good way to do this would be to add a prefix of "bmp" and then a dash and then a name, so you know it is a graphic file, and not, say, a control. So, for this file we will call it "bmpXferWindow". Adding this to the name="" bit, we get the following line:

Note: You can use BMP files, GIF files, JPG files, and, as of Trillian 2.01, PNG files. See the PNG notes for support of alpha blending. Trillian 2.0 supports animated GIFs in switchers. Remember, skinviewer doesn't support Pro features.

Make sure you are familiar with creating these file links, as you will be using them alot, and it is important you know how to make them. Under the 'controls' comment, add the other file (xfer-controls.gif), give it a name such as bmpXferControls.

Ok, so now Trillian knows where to find the graphics. We need to tell it what part of the graphics to use to make our window background.

Open up your XML/windows/xfer.ext file. This is where we will be holding all the information on the component and the IControls ( Controls are stored elsewhere.)

As you can see, it's fairly empty at present. Change all that stuff at the top (as usual).

Then we see our first glimpse of Component code.

</component>

You will notice that all things in XML start with a tag <name> and finish with a tag </name>. This is very similar to HTML. Everything we want to include in the component, has to be either inside these tags, or linked somehow (ie controls). Whenever we create a component, it has to be started with <component name=""> and finished with </component>.

Contained within the top tag are the minx="" maxx="" etc. These are properties of the tag, and are used to make the tags actually do things, instead of just being tags. In a component, you have 6 of the properties, all listed above. They are used to set details on how big/small you want the user to be able to make your window. They are also used to set the default size of a newly-created window. If you don't wish to set a maximum height, for example, just delete the maxy="" bit. You only included those you want. (See the reference for more details on what the parts mean.)

"Y" corresponds to height and "X" to width.

Personally, for my window, I don't want it to resize vertically, so I will set miny, maxy, and defaulty all to 174. I will have a minx and defaultx of 216, but no maximum on the horizontal, so users can make the window wider. So i have a line that looks like this:

Note: The SkinViewer will not use the "deafultx" or "defaulty" values when it creates the window, so don't be worried if your window appears to be wider/taller than it should be. It does adhere to the min and max values though.

Ok. Before we go ahead and code the sections that build up the window, I need to explain what each one does.

Every component is built up of a selection of Background "types". There are 8 types. (Refer to the image to the right.) These are:

The different background types

Corners

Upperleft
Upperright
Lowerleft
Lowerright

Sides

Upper
Lower
Left
Right

Notice that I have separated the "corner" types from the sides. This is because they function slightly differently. The first 4 types are the corners. We code these, and they stay the same size, they don't change. The sides are the pieces of the window which resize. They resize by repeating and not by stretching. This is very important to remember, especially when you are working with a textured skin, as you have to make sure that the texture will repeat properly, and join up, otherwise it will look silly.

But remember, the right/left/upper/lower are repeating images, so when we code them, we don't need to have the whole long graphic, we can do them like this:

You will see in the <background> code we go through in a minute that you give the background tag two bits of information: where in the graphics file to find the graphics you want, and where to put them in the skin. In this way, we just select a small image for the repeating regions, and merely tell Trillian to use them to fill in expanding pieces.

This is one of the hardest parts of Trillian skinning to explain, and as such, is integral to skinning Trillian. If this needs more explaining, comment this article and I will try and explain it some more.

With my window, I am going to break it down like this:

Breakdown of the goal window into sections

Ok, so now we want to actually add the upperleft bit into our skin. We will add the upperleft, and then test it in the skin viewer (get it from our Skinning Resources section) to make sure it works.

Every background section looks basically like this:

<rect>

</rect>

</background>

Ok, so we're going to go through this step by step, so you know what each piece does. First line:

This tells us 2 things. First it tells us that this piece is the "upperleft" bit. We will just copy and paste this code for the other 7 bits, and each time, we will have to remember to change this bit in the first line, so trillian knows which part of the background it is looking at. The transred, transgreen, and transblue bits are also very important. These tell Trillian what parts of your bitmap to make transparent. If you have a completely square window, then you won't need these, but most windows have some sort of corner on them, as does mine. So we set the colour here to 255,0,255 - the magenta colour used by almost all skinners for their transparencies, as it is rarely used for actual graphics. (See note on RGB colors.) You can set it to whatever you want, but for my example graphics, I have made the regions pink, so we will use 255,0,255 - check the xfer-window.gif to get an idea of what bits are this colour.

The next bit tells trillian what graphics file to use:

We have to set the name="" bit to the name we gave our bitmap earlier in files.ext. If you recall, I set mine to bmpXferWindow, so here we put name="bmpXferWindow". The left right top and bottom bits refer to which part of the bitmap file we want to use. Below is a quick example of a zoomed in bitmap (not the actual one we are using), with a grid on top of it.

Pixel grid

In this example, we want to select the area in the white box as our background. The top and left values, are obviously 0 and 0, as it starts in the top left corner. Use PSP or Photoshop, or whatever graphics package you have to get these pixel coordinates. The top left pixel is always 0,0 though. The bottom right corner is at pixel coordinates 3,2 and a common mistake is to use 3 as the "right" property and 2 as the "bottom". However, this is incorrect. Trillian sees these values and takes everything up to that number, and not including. Thus, using these values, we would miss out our final row and column of pixels. We want trillian to go up to the right of the "3" coordinate, and the bottom of the "2" coordinate. Therefore, we must enter the right as "4", and the bottom as "3", taking the left and top of the next pixels along and below respectively.

In short, a 3x3 square, starting at 0,0 will have properties: left="0", top="0". right="3", and bottom="3".

For my example here, I am going to go from 0,0 to 66,66 so my line looks like this:

Ok, so now trillian knows which part of which bitmap to use for the upperleft. Now we need to tell it where to put the upperleft. Which is what the next bit is for:

<rect>

</rect>

As this is the upperleft, i want it to start at 0,0 so left and top are easy. They are both 0. The right and bottom values here are 66 and 66 - make sense? The upperleft is always the easiest of the backgrounds to do, because chances are you will be using the same values as you just used for source. Leave all the widths and heights at 0 - we will go through what these do in a second. So now our background code looks like this:

<rect>

</rect>

</background>

Time to test it! If you haven't already, download the Skin Viewer and install it. In the skin viewer directory, there is a sub-dir called "skins". This is where we put the skin we are working on in. However, instead of having another directory inside skins for each separate skin, we can only have one skin at a time with the skin viewer. So what was previously your Sample Structure directory, now becomes you skin directory in the skin viewer dir, with trillian.xml at "skin viewer/skins/trillian.xml". Now run the skin viewer. If all goes well, you wont get any errors on startup (if you have, check you haven't missed any quotation marks or whatever), and will be presented with a simple form. From the drop-down box, we get a list of components, like this:

CS's Skin Viewer

Scroll to the bottom, select xfer (our transfer window component) and click "load". Up will come our window:

Component loaded in Skin Viewer

As I'm sure you've noticed though, our pink bits are still there. Although we told trillian what colours to make transparent, we didn't tell it to go ahead and do it. We need to insert the following line:

We only need to insert it once for every component, so stick it at the top, just after the <component> tag. Save and run the skin viewer again, and it will work! (Or at least it should ;)).

Ok so before we add in our "upper" and "upperright" regions, we need to go through what these height and width properties are for. Unfortunately, it's another of those concepts which is hard to grasp at first, but don't panic!, we're running out of them :). Also, I don't think it's that hard to get, so here goes:

To get the upper to resize, you can't have it set to a left of 35, and a right of 120 - what if the window is bigger? the upper is still only going to cover those 85 pixels, because that is all we have told it to cover. So, what we need to do, is tell it to go from 35 pixels from the left, to a value from the right-hand-side. In other words, we need the "right" property to be relative to the right of the window, rather than the left. In this way, when we resize it, the right hand end will stay at the same distance from the right edge as it was, forcing the middle bit to stretch out (it actually repeats rather than stretches). So what we need to do is set the "width" property of "right" to 1.

For left/right tags;

width="0" means 'from the left'

width="1" means 'from the right'

Similarly with top and bottom;

height="0" means 'from the top'

height="1" means 'from the bottom'

For our "upperright" background, (top right corner), both values will have to come from the right edge (width="1"). We will add in the upperright section first, because then our "right" property for the upper section will already be known :). In my example, I want the upperright section to go from coordinates 190,0 to 218,50. The top will be "0", the bottom "50". The right num will be 0, as we want it to go all the way to the edge. The left num will be 218-190; "28". Both left and right 'width's will be "1" as discussed. So our upperright will look like this:

<rect>

</rect>

</background>

Fire it up in the skin viewer, and you should now have your two top corners - mine looks like this:

Component in Skin Viewer with UL and UR corners

The upper bit is easy. I want pixels 66,0 to 190,50, so that's what I put in the source line. For "top" I have "0" and "bottom" "50", same as upperright. Now here's the "repeating" bit. I want it to go from the edge of the upperleft to the edge of the upperright. So I want the left of the upper to start where the upperleft finishes, and the right of the upper to finish where the upperright starts. Confused? Basically, take the "right" property of upperleft and use it for the "left" of upper (left num="66" width="0"), and the "left" property of upperright for the "right" (right num="28" width="1"). Your upper code will look like this:

<rect>

</rect>

</background>

Save and test, and you should now have a complete top section of your window :) - we have 3/8 of the background done. Next you should add in the bottom row. Note with the bottom, that the "height" values will be "1", as you want to measure from the bottom - much in the same way the the upperright had the width properties of both "left" and "right" set to "1". Remember: to find the "top" value, remember that "bottom" is at zero, and subtract the two pixel references - eg. bottom at 174, top at 140; 174-140 gives a "top" of 34. The "width"s will be the same layout for the bottom row, "0" for both on lowerleft, "0" for left, "1" for right on lower, and "1" on both for lowerright. Finally add in the left and right sections - as you would the upper. For their "top" values use the "bottom" of the upperleft / upperright, and for their "bottom"s, use the "top"s of the lowerleft / lowerright. Filling it all in, your xfer file should now look like this file (Right-click->Save as...). In the skin viewer, our window looks like this:

Component in Skin Viewer with all borders defined

The last thing I want to do is to get rid of that blue. The blue is what the skin viewer puts where nothing else exists. (The other colour it uses is yellow where an unknown control type is placed). To do this is simple - we use a <color> tag. If you follow the link, it will take you to the reference page for this tag. This is a code page - very useful for grabbing a quick chunk of code like this, and checking how it works to refresh your memory. As the page states, any areas of "color" will go behind the background bits we just coded. Therefore, we will place a "color" area, which covers the entire window - far easier than working out the particular area we want. This is common practice, as it just saves a bit of time. We want the colour to be white, so our RGB is 255,255,255. The code looks like this - place it under the background code.

<rect>

</rect>

</color>

Add a comment, which reminds you what it does - that way, when you look at your code again, you will remember how it works, and why it stretches over the whole window. You may remember now, but you will forget, trust me :).

The background part of our window is now complete, congratulations.

Back: Part 2 - The File Structure
Next: Part 4 - Resizing

Retrieved from "http://developer.ceruleanstudios.com/index.php/Skinning_tutorial_part_3"

Category: DREADNOUGHT's Skinning Tutorial

Skinning tutorial part 3

From TrillWiki

[edit] Part 3 - Building A Window

Views

Personal tools

Navigation

Search

Toolbox