Creating GUI Assets (a guide for Jess)

Guide for creating GUI assets

GUIskin contains lots of preset styles which you can call upon in scripts without having to create a custom style for the event or option. These styles include items such as buttons (often used for pause menus or main menus), boxes (boxes are often drawn for inventory, pause screens, narrative text).

Preset skins, and custom skins both have the option to add a hover over button, so that when the cursor is directly over the box, button, health bar or whatever GUI asset is tinted, or swaps the pngs template it's using. The most common way this is seen to he viewer is when you hover over a option buttons in a game (like narrative options, pause menus, main menus) the button might tint so you are receiving feedback as to where your mouse is without looking. Another tactic that can be used using this is having it so the button template swaps from its normal state, to a png of the template but with a little arrow that points towards it. Though this arrow would not change where on the template it was depending on the word on the button (so the arrow would beat the edge of the button template, and not on the edge of the word), this is a quick way of getting an arrow on the button template to appear. Essentially, the hover option just changes either the colour, or the texture of the style (button, box, etc) to whatever you want.

Button template. - a hover over button template. This will be the same picture for  every button background. If any button has been designed with a different image, or shape in mind, let me know and I can create a custom style for it.

Font.(look at other options for font? Font is the easiest way of doing it)

Box template (we can discuss sizes), possibly multiple sizes for different things -

Inventory box

Pause menu box?

Inventory description box

Health bar - clear without the filling. (Need to double check how that's done, need to steal the health variable off joe)

A close box button - hover over close box button.

An inventory item 'box', a hover over inventory 'box'

Each inventory item as blank pngs. (Maybe write a description of each item as the pictures are quite stylised?)

Dimensions - ratios are up to the artist, but make sure the images are done at 300dpi  (so if you have a printed portfolio you can print them nicely!) and bigger than they will be in game. Things look a lot better scaled down! Regular updates for checking in engine will be available if handed over to me.

File type - pngs.

List of things to be produced –

Button

Hover over button

Different Box Sizes (3x)

Inventory Empty Slot

Health bar fluid

Health bar

Filled Inventory Item Slots

Hover over filled inventory item slots

font

Possibly Winter Variations of all?