Announcement

[Aindra]

Windowskins Tutorial

For those people that wish to design their own windowskins. I will explain how the windowskin works. All windowskins I did here, is not meant to be pretty. I want to make them easy to understand about how they works. So if you are here, expecting to find any good-looking skins - don't. Go to the resources section for that.


Template for the Windowskin:


"1" = Background (light red)

» Click to show Spoiler - click again to hide... «

The background is the text box's background. It appears behind everything (pattern, frames, etc) The background is stretchable. It will goes all way to edges of the text box.

I filled the background section like this:

Notice the background now has the red and yellow splash. How would it looks like in the game?:


That is what I meant by stretching to the edges. If you use the images in the background, it can look awkward in some parts. If you put a person in there, he will look fat in the wide text message, and thin in narrow text message, something like it.

I recommand using the gridents (you can spice it up with few spots, lines, or some texture if you want), it usually would look pretty nice ingame.
I made this grident background:


Result is this:

Now it looks pretty.

"2" = Pattern (light yellow)

» Click to show Spoiler - click again to hide... «

It works simliar to the background. It appears on the background of the text message. However, it will COVER the background. Unlike the background, the pattern do not stretch to the edges. It is tiled. In other words, the pattern will repeat its picture until it fills the text box.

I moved the red and yellow splash to the pattern area:


The result is this:

You can see, it repeats the image. But it doesn't look very good. You will need to make the pattern that flows smoothly as it repeats.


I used the squares (because it is easy) in the patterns. You can use any patterns you like. However, I recommand you to set the patterns to transparent. That way you can see the background too. This one is not transparent.


You can see it flows nicely, and you can't see the obvious gaps. Notice that there is no black. The pattern covers them all. Hence why you should set it to transparent.


I put the grident in background, and set the pattern, so it's very transparent. The result is this:

"3" = Frames (green)

» Click to show Spoiler - click again to hide... «

The frames are important. They can make your text box look great. I'll show the template picture again if you don't want to scroll up.

It has few things you should to know:

1. I made the frames thick as possible. The template windowskin's frames are at max. You can make thin frames if you want. It's entirely up to your preference.
2. Dark green squares at corners are just there. It will appear on the corners only.
3. Light green squares between the corners are the tile-able. It works same as the pattern. It will repeat the line until it reaches the edge.

I will borrow couple images from the background section-
Skin:

Result:

I designed it so you can see the repeat-able lines, and corners easily.

"4" - Arrows (dark red)

» Click to show Spoiler - click again to hide... «

There are four arrows, in four different directions. There is not really much I can say about it. Check out this skin:

You can see the arrows inside the frame. The arrows will only appear in the text box if the box is scroll-able. For an example, if you have too many items in your inventory menu. You will have to scroll down to see it all. The arrow will appear at there. You don't even have to make it arrow, you can just throw a circle, or anything like it. Although I prefer to make it arrow-y.

"5" Selections (orange)

» Click to show Spoiler - click again to hide... «

It is the selection part. It will highlight the select-able sentences, such as in the choice boxes, menu options, and other things. It has a couple tricks. I'll explain them.
I'll show the template picture again if you don't want to scroll up.

You can see two different shades of the orange. Keep it in mind that the selection is stretchable, like the background, not pattern.

1. Bright Orange (non-blur. It will appear as it is.)
2. Dark Orange (blurry. It will make the colors more blurry.)

Check this skin's selection:

It is hard to see, so I'll zoom in and set the background to black:

On left, I set the 2 pixels line on the edges. On right, I set the 2 pixels line, not nearing the edge.

The result is this:

and

I made the face, and other fonts more darker so you can easily see the selection.

It's important that you keep those differences in your mind when designing the selection.

"6" Animations (blue)

» Click to show Spoiler - click again to hide... «

It is the little animated icon on central bottom of the text box. I'll show the template picture again if you don't want to scroll up.

You can see there are four blue squares, marked with white numbers. The game will start with "1" square, then change it to "2", then to "3", then "4". And repeat. The order is like this (1,2,3,4, 1,2,3,4, repeat)
You can animate the icon, such as the arrow moving down and back up. Or just glowing orb, or anything you want.

Example of the arrow going down and back up:

Color Panels

» Click to show Spoiler - click again to hide... «

Above is the enlarged version of the color panels used in the game. Each color has its assigned number, and you can use the number to change the color if you use the code \C[#].

The color panels that have the text (ex: "Knockout") are used by RPG Maker VX program. The game will change the text color to "Knockout" if your party member dies, etc.

Another note to remember: All unused items or disabled options will appear "gray". It's actually just normal color (white, 0) but with less opacity.

You can't do fancy design in one panel. The game will only recongize ONE pixel in the color panel (it's top-left corner) and use it. All you can do is just paint it one color of your choice.

Important! Always test your windowskin in the game!
Do not use the bright background/pattern if you're using the white fonts. Players will have hard time reading the fonts.

This post has been edited by Aindra: Jan 23 2009, 07:10 PM

[Grafikal007]

Hmm. This is very informative. I like it. I think I'll go and see what I can make myself knowing what each part does and how it'll appear in game. Thanks.