|
|
Skinning is one of the great new features of Champman 4, and who better than Ter to give you a closer look at how to create your own skin. Due to the amount of changes and enhancements between the beta demo and the final version we would recommend that any skins you create are test skins (as they are likely not to be compatible)
Over the course of this week we'll eventually show you how to make a skin based on another skin but allow you to make subtle changes .. keep reading!!
Ter's Quick (but not so quick) Guide to making skin graphics!
Most images in CM4 are made up of three parts. Either left, middle, right or top, middle, bottom.
This allows the images to be stretched to any size, without a loss of quality. This is done by drawing the left image and the right image, and filling in the rest using the middle image. So if you have an button which is 40 pixels in length in CM4, you will have three images for the button in it's default state. button_left, button_middle and button_right.
If button_left and button_right are both 10 pixels in length and button_middle is 2 pixels in length then CM4 will draw button_left (10 pixels) then button_middle (2 pixels) 10 times and then finally button_right (10 pixels). This would give your button a length of 40 pixels.
Component States
Each component can also have different states. Most states for objects in CM4 are [over, clicked and disabled]
* [over] - This is the state of the object when you place the mouse over the object
* [clicked] - This is the state of the object when you click it
* [disabled] - This is the state of the object when it is disabled
Your files are named accordingly. A default button will just be called button.png [where .png is the file extension depending on which graphical format is used]. For your [over] button the file would be named button_over_left.png for the left side. The same applies to both the middle and right sections of the button. (So you would have button_over_middle.png and button_over_right.png too)
The same is used for clicked and disabled so you would have a total of 12 files for the button component. These are listed below.
Button component - list of files
* button_left
* button_middle - [default button state]
* button_right
* button_over_left
* button_over_middle - [button with the mouse over it]
* button_over_right
* button_clicked_left
* button_clicked_middle - [button when clicked]
* button_clicked_right
* button_disabled_left
* button_disabled_middle - [button when disabled]
* button_disabled_right
In order to be consistent, you should try (whenever possible) to keep all the file dimensions the same... for example, if button_left is 10 pixels in width and 22 pixels in height... then button_over_left, button_clicked_left and button_disabled_left should also be these dimensions. I would also recommend having the button_right sections these dimensions too as it could cause alignment problems. (especially with the popup menu component)
TOMORROW : WHAT ARE ALL THOSE DIRECTORIES ABOUT |
|
发表于 2003-3-4 19:31:54
置顶卡
变色卡
千斤顶
显身卡
发表于 2003-3-5 09:25:50