FUEL: REFUELED is an enhancement modification for the game FUEL, which brings multiple bug-fixes, improvements and the addition of various new content.

Report RSS FUEL: REFUELED - Create Your Own UI Theme

A quick and moderately difficult guide to customizing various elements of the FUEL: REFUELED UI to create your own Theme.

Posted by on - Intermediate UI/HUD

F UEL: REFUELED has seen a significant revision of the User Interface, but the current theme may not be to everyones tastes - so heres how to change it!

NOTE: If your not familiar with programming it may look a bit complicated, but its actually a lot simpler than it looks.


DECOS OR HALOS?

For the most part, the basic customizable elements are seperated into two groups - DECOS & HALOS. A DECO is what is used to refer to those grey rectangles and they commonly come in two parts as seen below:

AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO1_BACKGROUND GROUP_1 355 280 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO1 GROUP_1 350 275 550 40 0 0 255:30:30:30 255:30:30:30 255:30:30:30 0 1 1 0

ITEM_ID_DECO1_BACKGROUND is the background shadow added to the boxes, whereas the ITEM_ID_DECO1 is the main foreground object. You must always declare the background object first, because the foreground object will overwrite it.

AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO1_BACKGROUND GROUP_1 360 285 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO1 GROUP_1 360 285 20 20 0 0 255:255:156:18 255:255:156:18 255:255:156:18 0 1 1 0

ITEM_ID_HALO1_BACKGROUND is the grey square used in the selection system when an item is NOT selected. ITEM_ID_HALO1 is the selected object and the default color is yellow.

Those who have worked with languages such as these should recognize the values, but for the sake of keeping things simple I will only go over some of the values here. Looking at ITEM_ID_DECO1: the

  • 350 = x,
  • 275 = y,
  • 550 = x size,
  • 40 = y size,
  • 255:30:30:30 is color, the 255 of this is the transparency and 30:30:30 being RGB

Changing the values above will let you change the basics of the menu appearance.

Groups

All objects have been placed into groups, for instance the Create Session menu has Groups_1 to Group_5 to refer to each menu block. This makes navigating the code easier - an example is shown below.

AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO1_BACKGROUND GROUP_1 355 280 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO1 GROUP_1 350 275 550 40 0 0 255:30:30:30 255:30:30:30 255:30:30:30 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO2_BACKGROUND GROUP_2 355 330 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO2 GROUP_2 350 325 550 40 0 0 255:30:30:30 255:30:30:30 255:30:30:30 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO3_BACKGROUND GROUP_3 355 380 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO3 GROUP_3 350 375 550 40 0 0 255:30:30:30 255:30:30:30 255:30:30:30 0 1 1 0

Because one menu object may comprise of several elements, the groups can be an invaluable tool to identifying which elements belong to which object.

Example

Ok so I've talked about the basics... so now I'll show you how to switch the color theme from Yellow on Grey to Red on Black and for this example I will be using the OnlineCreateGame aka "Create Session Menu"

//------------- DECOS - Square Menu Boxes
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO1_BACKGROUND GROUP_1 355 280 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO1 GROUP_1 350 275 550 40 0 0 255:30:30:30 255:30:30:30 255:30:30:30 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO2_BACKGROUND GROUP_2 355 330 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO2 GROUP_2 350 325 550 40 0 0 255:30:30:30 255:30:30:30 255:30:30:30 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO3_BACKGROUND GROUP_3 355 380 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO3 GROUP_3 350 375 550 40 0 0 255:30:30:30 255:30:30:30 255:30:30:30 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO4_BACKGROUND GROUP_4 355 430 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO4 GROUP_4 350 425 550 40 0 0 255:30:30:30 255:30:30:30 255:30:30:30 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO5_BACKGROUND GROUP_5 355 480 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO5 GROUP_5 350 475 550 40 0 0 255:30:30:30 255:30:30:30 255:30:30:30 0 1 1 0
//------------- HALOS - Square Selection Boxes
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO1_BACKGROUND GROUP_1 360 285 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO1 GROUP_1 360 285 20 20 0 0 255:255:156:18 255:255:156:18 255:255:156:18 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO2_BACKGROUND GROUP_2 360 335 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO2 GROUP_2 360 335 20 20 0 0 255:255:156:18 255:255:156:18 255:255:156:18 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO3_BACKGROUND GROUP_3 360 385 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO3 GROUP_3 360 385 20 20 0 0 255:255:156:18 255:255:156:18 255:255:156:18 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO4_BACKGROUND GROUP_4 360 435 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO4 GROUP_4 360 435 20 20 0 0 255:255:156:18 255:255:156:18 255:255:156:18 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO5_BACKGROUND GROUP_5 360 485 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO5 GROUP_5 360 485 20 20 0 0 255:255:156:18 255:255:156:18 255:255:156:18 0 1 1 0

Above is how it looks with the standard theme, now see the changed code below that has switched the colors of all objects.

//------------- DECOS - Square Menu Boxes
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO1_BACKGROUND GROUP_1 355 280 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO1 GROUP_1 350 275 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO2_BACKGROUND GROUP_2 355 330 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO2 GROUP_2 350 325 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO3_BACKGROUND GROUP_3 355 380 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO3 GROUP_3 350 375 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO4_BACKGROUND GROUP_4 355 430 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO4 GROUP_4 350 425 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO5_BACKGROUND GROUP_5 355 480 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_DECO5 GROUP_5 350 475 550 40 0 0 225:0:0:0 225:0:0:0 225:0:0:0 0 1 1 0
//------------- HALOS - Square Selection Boxes
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO1_BACKGROUND GROUP_1 360 285 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO1 GROUP_1 360 285 20 20 0 0 255:255:0:0 255:255:0:0 255:255:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO2_BACKGROUND GROUP_2 360 335 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO2 GROUP_2 360 335 20 20 0 0 255:255:0:0 255:255:0:0 255:255:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO3_BACKGROUND GROUP_3 360 385 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO3 GROUP_3 360 385 20 20 0 0 255:255:0:0 255:255:0:0 255:255:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO4_BACKGROUND GROUP_4 360 435 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO4 GROUP_4 360 435 20 20 0 0 255:255:0:0 255:255:0:0 255:255:0:0 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO5_BACKGROUND GROUP_5 360 485 20 20 0 0 255:160:160:160 255:160:160:160 255:160:160:160 0 1 1 0
AddMenuItemFillRect OnlineCreateGame ITEM_ID_HALO5 GROUP_5 360 485 20 20 0 0 255:255:0:0 0 1 1 0

The changes above would set that menu to a Red on Black Theme like shown in the image below.

New Create Session Menu [V15.2 Rev.1]tutorialimage1

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Follow Report Profile
Icon
FUEL
Game
FUEL
Creator
Vetron
Contact
Send Message
Release date
Mod watch
Follow
Tutorial
Browse
Tutorials
Report
Report
Share
Related Mods
Related Games
FUEL
FUEL Racing