Как сделать скин для Fm 2009 - часть 2.

I'm going to go for a nice simple header, just to be a little different, I'll have a smallish area to the left that will be in the club's second colour, and the logos will go there. The rest will remain the same, in the club's first colour. We'll start by creating some more folders. In the graphics folder of your skin, create a new folder titled "interface" and inside that, another called "titlebar" you can then copy across the contents of the default skin's titlebar folder if you wish, but I'm not going to use all of it, so I won't bother.

If you look in the defaul folder though, you'll see the different files that we will be working with. You'll notice three .png files in the folder, and then a selection of further folders. A lot of the graphics in FM are split up into different parts. The game will put them together, and the way they are made allows them to be spread to cover an area of any size - this is how things like the continue button always cover the text, even when the text changes, and how the titlebar always covers the screen, even when you change the width of the screen.

For the titlebar here for instance, there is a left and a right side to the bar, and then a middle section that is just one pixel in width. The game will put the left and right sections in place and then will duplicate the middle image as many times as it takes to fill the distance between them. Therefore, if you have any design feature, you should make sure that it is all contained into either the left or the right section, and the middle will then be the part that will stretch to fill the screen, so it should be a single, flat image, no curves or design - because this will look wrong when it is duplicated. To give you an idea of what I mean, have a look at this:

Tip: When you create your titlebar graphics, always use red as the colour. The game will recolour the graphic to take the relevent colours from the team or competition being viewed, but it will not come across the same if you use other colours. In order to get the image to the correct size, try taking a screenshot of FM and draw your images to fit onto your screenshot, before copying them into their own images.

So for my titlebar, the only thing I want to change is a bit to the left which will be in the team's second colour. I leave the titlebar graphics alone then, and go into the "outline" folder - as it is the outline that takes on the team's secondary colour. The titlebar is 126 pixels high, so in order for it to fit in the right place, I create my graphic 126 px high and when I'm happy with the shape, I use the "colour overlay" function in photoshop to colour it in red. Remembering that it's only the left side I'm using a feature on, I create a generic 1px wide image to cover the middle and right graphics. My outline graphics look like this:

Everything that is red will take the club's #2 colour on, everything else (that is invisible) will just show what is below it smile.gif For the right and middle images, I just cut a slice 1px in width off the main (left) image once it had levelled off at the top. These files are saved as bar_left, bar_right and bar_middle to replace the existing titlebar outline images, and when I reload the skin, I get this:

You'll see how the outline image is now white, as that is Arsenal's second colour (even though the original images shown and saved are red), and that the outline continues along the top of the titlebar, where you can see the white line - this is the middle bar being duplicated, and ending where the right bar comes in right at the end of the picture. You'll also note that the team logos are now "missing" - in actual fact they've not moved anywhere, there just underneath the titlebar outline, so you can't see them.

To get around this, we need to edit some code. I've copied "titlebar.xml" from the default skin into the panels folder of my new skin. The way placement works in these xml files is a layers system. Things at the top of the file are read first, and things later on are read afterwards, naturally. This means that if you have two elements in the same place, the first one will be used and then the second will be placed on top of it. So for the above screenshot, I can tell that I have the titlebar, the club logos and then the titlebar outline in that order in the file. Therfore, I have the titlebar, with the logos on top of it, but the titlebar outline on top of those.

I want to swap this around then so that the titlebar outline is just on top of the titlebar itself, which will prevent anything else getting hidden underneath it. I'm not a genius at reading xml, but I can see from scanning through titlebar.xml that this is the code that covers the outline:

--- здесь будет часть кода---

Tip: Whenever you move, delete, or add any code to the xml files, may sure you use the correct number of opening and closing tags, or your next reload of the skin will bring up errors.

You can see there that the code starts with a "widget" tag, so I've cut the code right down to the corresponding closing "/widget" tag. It's the same as putting in items to a forum post or a website - you have an initial opening tag, and then a closing tag denoted by the forward slash.

I moved this bit of code and placed it at the top of the file, directly under the code for the titlebar itself:

--- часть кода № 2----

You can see that the next part is the beginning of the code for the logos, and so following the layers principle, these will now be shown above the outline and become visible once more, as shown in the new screenshot:

[img]http://img34.picoodle.com/img/img34/3/1/2/murray_g/f_titlebarimam_8f47aae.png[/img]

The menubar (the white bar with the continue button, manager, world etc) slightly overlaps my altered outline, but I'm not bothered about that, because I'll be changing the menubar later on.

More next time!