Menu Skins

For discussing and sharing all forms of artwork related to the game

Moderator: Staff

User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Menu Skins

Postby Roots » Sun Jun 17, 2007 9:42 pm

I'm working on adding support for using multiple menu skins in the game right now. Eventually I'll add something in the artwork standards page of the wiki about how to make a new menu skin, but for now I'll just post the instructions here. We'll need at least one additional menu skin for our next demo, since the current "black sleet" menu skin doesn't look the greatest in certain areas of the game.


Okay, to make a menu skin you need to create an image that contains all of the borders. Here is the image for the black sleet borders:

http://svn.sourceforge.net/viewvc/allac ... iew=markup

The left half of the image contains the normal side borders, plus the normal four corner pieces. The middle section is not used (even if you had some graphics in that middle area, it wouldn't be used in the game). The right half of the image contains the various "connector" pieces for when you glue multiple menu windows together. The very middle piece is the quad connector (ie it is drawn when there is a menu window to the top left, top right, bottom left, and bottom right of the corner). The other four are the various tri-way connectors, top, bottom, left, and right.

This skin is a bad example of illustrating all the connectors and corners, since the same sub-image is used for all connectors and corners. There are no size requirements for border images. In the black sleet example, all border pieces are 16x16 pixels, but you can make a menu skin with 8x8 borders, 32x32, 64x64, etc. All pieces must be the same size though, and they must be square. When the game loads the border images, it takes the main image and slices it up into multiple smaller images that are 6 columns long and 3 rows tall.

Menu windows can have an optional background image (a texture, essentially). This image should also be square, and also has no size requirements. Here's the background texture used for the black sleet skin. Also, it should be obvious but you can re-combine different border images with different textures.

http://svn.sourceforge.net/viewvc/allac ... iew=markup


If you don't want a background image, you can use background colors instead. Actually, you can use four background colors; one for each corner (or you can just make all corners the same color to have a uniform background color). The colors have alpha value too, so they can be partially transparent. This feature allows us to create color gradients in the menu, for example we could have a dark blue color at the bottom and a light blue color at the top, and the colors would blend in the middle and gradual fade from light to dark.


Actually that brings up an interesting design point. Technically, it would be possible to allow the user to customize their own windows (choose between different border images, background colors/fading, background textures, etc). Maybe we can add that ability somewhere down the road. :shrug:
Image

Return to “Artwork”

Who is online

Users browsing this forum: No registered users and 6 guests