Changing Skins in

Clickteam Fusion

This document is brought to you by Xable Enterprises. Explore example files,

resources, and additional tutorials at Xable Enterprises!
Changing Skins in Clickteam Fusion

1 Introduction

1.1 Clickteam Fusion Skinning Introduction 5

2 Image Slicing

2.1 Image Slicing 7

3 Customizing Individual Skins

3.1 Creating New Skins or Modifying Existing Skins 10

4 Event Editor

4.1 Skinning the Event Editor 14

5 Event List Editor

5.1 Skinning the Event List Editor 28

6 Storyboard Editor

6.1 Skinning Storyboard Editor 33

7 Object Box

7.1 Skinning Object Box 39

8 Info.ini

8.1 The Info.ini and Clickteam Fusion Skins 41

9 Conclusion

9.1 The Customizable Toolbar Buttons 49

10 Post Tutorial Information

10.1 Post Tutorial Information 51

 Introduction

Changing Skins in Clickteam Fus ion - 4 M ay 2 8 th, 2 0 1 5

Clickteam Fusion Skinning Introduction
One of the new features of C lickteam Fusion is the ability to customize the appearance of
several windows.This tutorial acts as a reference document for all the major aspects over
skinning in C lickteam Fusion including:
• C ustomizing Individual Skins
• Description of Event Editor skin elements
• Description of Event List Editor skin elements
• Description of Storyboard Editor skin elements
• Description of Object Box skin elements
• Description of Info.ini properties & values

Webpage Link: http://www.xable.us/clickteam-fusion-skins.php

Changing Skins in Clickteam Fus ion - 5 M ay 2 8 th, 2 0 1 5

 Image Slicing

Changing Skins in Clickteam Fus ion - 6 M ay 2 8 th, 2 0 1 5

Image Slicing
This lesson gives a brief overview on the concept of image slicing and covers image slicing
within C lickteam Fusion.

Explanation

Image slicing is when a large image split into equal smaller images. The image slicing used
by C lickteam Fusion uses these smaller images and repeats them to recreate a larger
image. The images used to skin C lickteam Fusion are divided into 9 equal sections, as
shown in the image above.
1. C orner sections (1) do not undergo any kind of repetition.
2. Horizontal sections (2) repeat horizontally between the surrounding corner sections
3. Vertical sections (3) repeat vertically between the surrounding corner sections
4. The 'middle piece' (4) fills in the gap between the horizontal sections and the vertical
sections

Small Example of Image Slicing

Here is an example where each of the above sections are repeated once.

Changing Skins in Clickteam Fus ion - 7 M ay 2 8 th, 2 0 1 5

 Large Example of Image Slicing

Here is an example image where

• The horizontal pieces are repeated 6 times per row
• The vertical pieces are repeated 6 times per column
• The middle pieces are repeated 36 times overall

Uneven Example of Image Slicing

Depending on the actual graphic of each section, you may or may not be able to use
non-integer amount of sections. Each tile in this example is 32 x 32, but the entire image is
144 x 144, not evenly divisible by 32. Because of the dark outlines on each tile, dimensions
not divisible by 32 produce an awkward image. Remove these dark outlines, however, and
the image looks smoother.

Here is an example image where

• The horizontal pieces are repeated 2.5 times per row
• The vertical pieces are repeated 2.5 times per column
• The middle pieces are repeated 6.25 times overall

Changing Skins in Clickteam Fus ion - 8 M ay 2 8 th, 2 0 1 5

 Customizing
Individual Skins

Changing Skins in Clickteam Fus ion - 9 M ay 2 8 th, 2 0 1 5

Creating New Skins or Modifying Existing
Skins
This section explains how to actually change the skin within C lickteam Fusion.

Navigate to the Skins folder within the Clickteam Fusion Directory

First, navigate to the "Skins" folder within the C lickteam Fusion directory.

Changing Skins in Clickteam Fus ion - 10 M ay 2 8 th, 2 0 1 5

 Open/Copy an Existing Folder

C lickteam Fusion comes with four defaults skins, as shown above:

1. Dark
2. Default
3. Girly
4. Pastel

In order to create your own skin, you must modify an existing skin, or copy an existing
skin's folder (remember to rename the folder). Then you will modify any of the 61 files
within the skin folder, as explained in the next step.

**Notes**
• If you copy a skin folder, you should change the skin's name in Info.ini
• The 'C lassic' skin is a custom skin which resembles the traditional MMF2 layout. This
skin, along with additional skins, can be downloaded at the C lickStore. These skins can
serve as templates for your own skins!

Changing Skins in Clickteam Fus ion - 11 M ay 2 8 th, 2 0 1 5

 Edit any Image File or the Info.ini File

Asides from the Foreground and Background images (which can be any size), most of the
.png files have dimensions of 48 x 48. After you edit the image files, re-opening C lickteam
Fusion or selecting a new skin from within C lickteam forces a refresh for all skins; at which
point you can re-select the skin (or press Control + Shift + K) in C lickteam Fusion to
review the changes.

The following sections describe each individual skin element and what the item corresponds
to within C lickteam Fusion.

**Notes**
• There should be 61 files (60 images and 1 info.ini) within a skin's folder. If any files
are missing, the skin will not load nor appear in C lickteam Fusion

Changing Skins in Clickteam Fus ion - 12 M ay 2 8 th, 2 0 1 5

 Event Editor

Changing Skins in Clickteam Fus ion - 13 M ay 2 8 th, 2 0 1 5

Skinning the Event Editor
This lesson gives a description over each customizable skin element in the Event Editor, an
image of said element, and any special properties of the element. These affect any Event
Editor, including the Global Event Editor and Behaviour Event Editor,

EE_ActionInfo

This image is used as the background for the Action Info tool tip. The Action Info tool tip is
the tool tip when you hover above an action.

This image stretches to fit its element space.

Changing Skins in Clickteam Fus ion - 14 M ay 2 8 th, 2 0 1 5

 EE_Background

This image is used as the entire background for the Event Editor.

This image stretches to fit its element space.

EE_Blob

This image is located to the left for the first condition in any event.

Changing Skins in Clickteam Fus ion - 15 M ay 2 8 th, 2 0 1 5

 EE_Checkmark

This image is used to indicate which events have actions.

This image can be set to stretched to fit depending on its value in the Info.ini

EE_Checkmarks

This image is used as the background for events for every other row in the Event Editor.
Every other column after the first column uses this image.

This image is sliced.

EE_CheckmarksOdd

This image is used as the background for events for every other row in the Event Editor.
The first column and every other column after the second column uses this image.

This image is sliced.

Changing Skins in Clickteam Fus ion - 16 M ay 2 8 th, 2 0 1 5

 EE_CheckmarksSelected

This image is used as the background when an action is selected. Every other column after
the first column uses this image.

This image is sliced.

EE_CheckmarksOddSelected

This image is used as the background when a specific action has been selected. The first
column and every other column after the second column uses this image.

This image is sliced.

EE_EventButtonGroups

This image is used as the background for group's events buttons. Events buttons are the
buttons with the event number located towards the left of an event.

This image is sliced.

Changing Skins in Clickteam Fus ion - 17 M ay 2 8 th, 2 0 1 5

 EE_EventButtonGroupsSelected

This image is used as the background for group's events buttons when the event is selected.
Events buttons are the buttons with the event number located towards the left of an event.

This image is sliced.

EE_EventButtons

This image is used as the background for event buttons. Events buttons are the buttons with
the event number located towards the left of an event.

This image is sliced.

EE_EventButtonsSelected

This image is used as the background for event buttons when a non-group event is selected.
Events buttons are the buttons with the event number located towards the left of an event.

This image is sliced.

Changing Skins in Clickteam Fus ion - 18 M ay 2 8 th, 2 0 1 5

 EE_Events

This image is used as the background for non-group events.

This image is sliced.

EE_EventsSelected

This image is used as the background for non-group events when an event is selected.

This image is sliced.

EE_Filter

This image is used as the background for the Filter Box. The Filter Box is the top-leftmost
box in the Event Editor.

This image is sliced.

Changing Skins in Clickteam Fus ion - 19 M ay 2 8 th, 2 0 1 5

 EE_Foreground

This image is placed on top of the EE_Background image. It's position can be specified in the
Info.ini, as explained immediately below.

Horizontally it can be placed

• Left (places left most edge against the left side of the Event Editor)
• C enter (places center of image in the horizontal center of the Event Editor)
• Right (places right most edge against the right side of the Event Editor)

Vertically it can be placed

• Top (places top most edge against the top of the Event Editor)
• C enter (places center of image in the center of the vertical center of the Event Editor)
• Bottom (places right most edge against the right side of the Event Editor)

**Notes**
• You may need to add padding to the image for positioning purposes

Changing Skins in Clickteam Fus ion - 20 M ay 2 8 th, 2 0 1 5

 EE_Groups

This image is used as the background for all group events.

This image is sliced.

EE_GroupsSelected

This image is used as the background for group events if a group event is selected

This image is sliced.

EE_Inactivated

This image superimposed on top of an entire event if the event is deactivated. It is heavily
recommended to use alpha channels in this image.

This image is sliced.

Changing Skins in Clickteam Fus ion - 21 M ay 2 8 th, 2 0 1 5

 EE_Negation

This image is used for the negation symbol when events are negated.

EE_ObjectEvents

This image is used as the background for objects when their icon are used in conditions.

**Notes**
• This image is not used if Object Icons are disabled in the Event Editor via the "Tools >
Preferences" menu item.

EE_Objects

This image is used as the background for all columns in the Object Row in the Event Editor.

EE_ObjectsEventsSelected

This image is used as the background for objects when their icon are used in conditions if
the object is selected. C urrently has no effect as of build b284.10.

Changing Skins in Clickteam Fus ion - 22 M ay 2 8 th, 2 0 1 5

 EE_ObjectsSelected

This image is used as the background for all selected columns in the Object Row in the
Event Editor.

EE_Plus

This image is located to the left of the every condition in an event except the first in an
event.

EE_Remark

This image is used as the background for comments.

This image is stretched to fit.

This image is placed behind the comment text.

**Note**
• You may need to use alpha channels (semi-transparency) for this image to maximize
comment readability

Changing Skins in Clickteam Fus ion - 23 M ay 2 8 th, 2 0 1 5

 EE_Shade

This image is superimposed on a row and column when the mouse hovers above a specific
action.

This image is sliced over each previously mentioned skin element (except for comments).

Common EE_Objects

These images are uses as the icons for the default system objects. These name for each
object are, from left to right:
1. EE_System

Changing Skins in Clickteam Fus ion - 24 M ay 2 8 th, 2 0 1 5

2. EE_Speaker
3. EE_Storyboard
4. EE_C reate
5. EE_Keyboard
6. EE_Player1
7. EE_Player2
8. EE_Player3
9. EE_Player4

EE_Folder

This image is used as the folder icon for closed Event Editor Folders

EE_FolderOpen

This image is used as the opening brace for open Event Editor Folders

EE_FolderClose

This image is used as the closing brace for open Event Editor Folders

EE_FolderPrevious

This image is used as the previous/parent folder icon in the Event Editor

Changing Skins in Clickteam Fus ion - 25 M ay 2 8 th, 2 0 1 5

 EE_Import

This image is used as the Import Icon in the Event Editor

Changing Skins in Clickteam Fus ion - 26 M ay 2 8 th, 2 0 1 5

 Event List Editor

Changing Skins in Clickteam Fus ion - 27 M ay 2 8 th, 2 0 1 5

Skinning the Event List Editor
This lesson gives a description over each customizable skin element in the Event List Editor,
an image of said element, and any special properties of the element. These affect any
Event List Editor, including the Global Event List Editor and Behaviour Event List Editor.

EL_Background

This image is used at the background for the Event List Editor.

Changing Skins in Clickteam Fus ion - 28 M ay 2 8 th, 2 0 1 5

 EL_EventButtonGroups

This image is used as the background for group event buttons the Event List Editor.

This image is sliced.

EL_EventButtonGroupsSelected

This image is used as the background for group event buttons in the Event List Editor when
the group is selected.

This image is sliced.

EL_EventButtons

This image is used as the background for non-group event buttons in the Event List Editor.

This image is sliced

EL_EventButtonsSelected

This image is used as the background for non-group event buttons in the Event List Editor
when the event is selected.

Changing Skins in Clickteam Fus ion - 29 M ay 2 8 th, 2 0 1 5

This image is sliced.

EL_Foreground

This image is placed on top of the EL_Background image. It's position can be specified in the
Info.ini, as explained immediately below

Horizontally it can be placed

• Left (places left most edge against the left side of the Event List Editor)
• C enter (places center of image in the horizontal center of the Event List Editor)
• Right (places right most edge against the right side of the Event List Editor)

Vertically it can be placed

• Top (places top most edge against the top of the Event List Editor)
• C enter (places center of image in the center of the vertical center of the Event List
Editor)
• Bottom (places right most edge against the right side of the Event List Editor)

Changing Skins in Clickteam Fus ion - 30 M ay 2 8 th, 2 0 1 5

**Notes**
• You may need to add padding to the image for positioning purposes

EL_Groups

This image is used as the background for groups in the Event List Editor.

This image is sliced.

EL_GroupsSelected

This image is used as the background for selected groups in the Event List Editor.

This image is sliced.

Changing Skins in Clickteam Fus ion - 31 M ay 2 8 th, 2 0 1 5

 Storyboard Editor

Changing Skins in Clickteam Fus ion - 32 M ay 2 8 th, 2 0 1 5

Skinning Storyboard Editor
This lesson gives a description over each customizable skin element in the Storyboard
Editor, an image of said element, and any special properties of the element.

STB_Background

This image is used as the background for the Storyboard Editor.

Changing Skins in Clickteam Fus ion - 33 M ay 2 8 th, 2 0 1 5

 STB_Buttons

This image is used as the background for all buttons in the Storyboard Editor.

This image is sliced.

STB_FadeIn

This image is the image of the "Fade In" icon when a frame does not begin with a Frame
Transition.

Changing Skins in Clickteam Fus ion - 34 M ay 2 8 th, 2 0 1 5

 STB_FadeInSelected

This image is the image of the "Fade In" icon when a frame begins with a Frame Transition.

STB_FadeOut

This image is the image of the "Fade Out" icon when a frame does not end with a Frame
Transition.

STB_FadeOutSelected

This image is the image of the "Fade Out" icon when a frame ends with a Frame Transition.

Changing Skins in Clickteam Fus ion - 35 M ay 2 8 th, 2 0 1 5

 STB_Foreground

This image is placed on top of the STB_Background image. It's position can be specified in
the Info.ini, as explained immediately below

Horizontally it can be placed

• Left (places left most edge against the left side of the Storyboard Editor)
• C enter (places center of image in the horizontal center of the Storyboard Editor)
• Right (places right most edge against the right side of the Storyboard Editor)

Vertically it can be placed

• Top (places top most edge against the top of the Storyboard Editor)
• C enter (places center of image in the center of the vertical center of the Storyboard
Editor)
• Bottom (places right most edge against the right side of the Storyboard Editor)

**Notes**
• You may need to add padding to the image for positioning purposes

Changing Skins in Clickteam Fus ion - 36 M ay 2 8 th, 2 0 1 5

 STB_Framesize

This image is used as the icon for the size of a frame.

Changing Skins in Clickteam Fus ion - 37 M ay 2 8 th, 2 0 1 5

 Object Box

Changing Skins in Clickteam Fus ion - 38 M ay 2 8 th, 2 0 1 5

Skinning Object Box
This lesson gives a description over each customizable skin element in the Object Box, an
image of said element, and any special properties of the element.

OBX_Background

This image is used as the background for the Object Box in the Behaviour Editor, Event
Editor, Expression Editor, Event List Editor, and Global Event Editor.

This image stretches to fit.

Changing Skins in Clickteam Fus ion - 39 M ay 2 8 th, 2 0 1 5

 Info.ini

Changing Skins in Clickteam Fus ion - 40 M ay 2 8 th, 2 0 1 5

The Info.ini and Clickteam Fusion Skins
This lesson gives a description over each entry in the "Info.ini" file. C hanging any of these
values directly changes some aspect of the skin within C lickteam Fusion.

Fusion Skin

The display name of the skin in C lickteam Fusion Value Type - String

EE_Objects

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EE_Events

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EE_EventButtons

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type

Changing Skins in Clickteam Fus ion - 41 M ay 2 8 th, 2 0 1 5

- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EE_Checkmarks

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increase/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EE_Filter

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increase/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EE_Groups

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EE_Remarks

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -

Changing Skins in Clickteam Fus ion - 42 M ay 2 8 th, 2 0 1 5

Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EL_EventButtons

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EL_EventButtonGroups

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EL_Groups

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

Changing Skins in Clickteam Fus ion - 43 M ay 2 8 th, 2 0 1 5

 EL_Remarks

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

STB_Buttons

left = Increases/Decreases width of the left portion of specified skin element Value Type -
Integer
top = Increases/Decreases height of the top portion of specified skin element Value Type -
Integer
right = Increases/Decreases width of the right portion of specified skin element Value Type
- Integer
bottom = Increases/Decereases height of the bottom portion of specified skin element Value
Type - Integer

EE_Font

name = "Default" or Font Name for Event Editor Value Type - String
color = RGB value of font Value Type - C olor RGB ( Red Value, Green Value, Blue Value )
colorSelected = RGB value of selected font Value Type - C olor RGB ( Red Value, Green
Value, Blue Value )
colorTrueEventOK = RGB value of immediate conditions Value Type - C olor RGB ( Red
Value, Green Value, Blue Value )
colorTrueEventOKSelected= RGB value of selected immediate conditions Value Type - C olor
RGB ( Red Value, Green Value, Blue Value )
colorTrueEventBad = Unknown
colorTrueEventBadSelected = Unknown
colorOr = RGB value of 'Or' conditions Value Type - C olor RGB ( Red Value, Green Value,
Blue Value )
colorButton = RGB value of font for event buttons Value Type - C olor RGB ( Red Value,
Green Value, Blue Value )
colorButtonSelected = RGB value of font for selected event buttons Value Type - C olor RGB
( Red Value, Green Value, Blue Value )
colorGroup = RGB value of font for groups Value Type - C olor RGB ( Red Value, Green
Value, Blue Value )

Changing Skins in Clickteam Fus ion - 44 M ay 2 8 th, 2 0 1 5

colorGroupSelected = RGB value of font for selected groups Value Type - C olor RGB ( Red
Value, Green Value, Blue Value )
colorGroupInactive = RGB value of font for deactivated groups Value Type - C olor RGB (
Red Value, Green Value, Blue Value )
colorGroupInactiveSelected = RGB value of font for selected deactivated groups Value Type
- C olor RGB ( Red Value, Green Value, Blue Value )
colorButtonGroup = RGB value of font for group buttons Value Type - C olor RGB ( Red
Value, Green Value, Blue Value )
colorButtonGroupSelected = RGB value of font for selected group buttons Value Type -
C olor RGB ( Red Value, Green Value, Blue Value )
colorFilter = RGB value of font for Filter Box Value Type - C olor RGB ( Red Value, Green
Value, Blue Value )
aiFontName = "Default" or Font Name for Action Info tooltips Value Type - String
aiFontC olor = RGB value of font for Action Info tooltips Value Type - C olor RGB - ( Red
Value, Green Value, Blue Value )

STB_Font

color = RGB value of font Value Type - C olor RGB - ( Red Value, Green Value, Blue Value )
colorButton = RGB value of font for storyboard buttons Value Type - C olor RGB - ( Red
Value, Green Value, Blue Value )
colorButtonSelected = RGB value of font for selected storyboard buttons Value Type - C olor
RGB - ( Red Value, Green Value, Blue Value )
colorFade = RGB value of font for transition text Value Type - C olor RGB - ( Red Value,
Green Value, Blue Value )

STB_Foreground

horizontal = left | center | right (pick one of these options)

vertical = top | center | bottom (pick one of these options)

EE_Foreground

horizontal = left | center | right (pick one of these options)

vertical = top | center | bottom (pick one of these options)

EL_Foreground

horizontal = left | center | right (pick one of these options)

vertical = top | center | bottom (pick one of these options)

Changing Skins in Clickteam Fus ion - 45 M ay 2 8 th, 2 0 1 5

 EE_Checkmark

stretch = 0 | 1 (pick one of these options)

• 0 means the checkmark icon does not stretch to fit within the available checkmark
space
• 1 means the checkmark icon stretches to fit within the available checkmark space

EL_Font

name = "Default" or Font Name for Event List Editor Value Type - String
color = RGB value of font Value Type - C olor RGB - ( Red Value, Green Value, Blue Value )
colorSelected = RGB value of selected font Value Type - C olor RGB - ( Red Value, Green
Value, Blue Value )
colorTrueEventOK = RGB value of immediate conditions Value Type - C olor RGB - ( Red
Value, Green Value, Blue Value )
colorTrueEventOKSelected= RGB value of selected immediate conditions Value Type - C olor
RGB - ( Red Value, Green Value, Blue Value )
colorTrueEventBad = Unknown
colorTrueEventBadSelected = Unknown
colorOr = RGB value of 'Or' conditions Value Type - C olor RGB - ( Red Value, Green Value,
Blue Value )
colorButton = RGB value of font for event buttons Value Type - C olor RGB - ( Red Value,
Green Value, Blue Value )
colorGroup = RGB value of font for groups Value Type - C olor RGB - ( Red Value, Green
Value, Blue Value )
colorGroupInactive = RGB value of font for deactivated groups Value Type - C olor RGB - (
Red Value, Green Value, Blue Value )
colorButtonGroup = RGB value of font for group buttons Value Type - C olor RGB - ( Red
Value, Green Value, Blue Value )
colorFilter = RGB value of font for Filter Box Value Type - C olor RGB - ( Red Value, Green
Value, Blue Value )

EX_Editor

fontName = "Default" or Font Name for Expression Editor Value Type - String
fontHeight = Font Size for Expression Editor Value Type - Integer
colorExpressionOkFont = RGB value of foreground for correct syntax Value Type - C olor
RGB - ( Red Value, Green Value, Blue Value )
colorExpressionOkBack = RGB value of background for correct syntax Value Type - C olor
RGB - ( Red Value, Green Value, Blue Value )
colorExpressionBadFront = RGB value of foreground for incorrect syntax Value Type - C olor

Changing Skins in Clickteam Fus ion - 46 M ay 2 8 th, 2 0 1 5

RGB - ( Red Value, Green Value, Blue Value )
colorExpressionBadBack = RGB value of background for incorrect syntax Value Type - C olor
RGB - ( Red Value, Green Value, Blue Value )

STB_Editor

fontName = "Default" or Font Name for Storyboard Editor Value Type - String
colorLevelBack = Unknown
colorFadeBack = Unknown
colorLines = Unknown

OBX

mouseOverC olor = Unknown

selectedC olor = RGB value of background for selected objects in the Object Box Value Type
- C olor RGB - ( Red Value, Green Value, Blue Value )
fontName = "Default" or Font Name for Object Box Value Type - String
fontHeight = Font Size for Object Box Value Type - Integer
fontC olor = RGB value of font for Object Box Value Type - C olor RGB - ( Red Value, Green
Value, Blue Value )
fontC olorSelected = RGB value of font for selected objects in the Object Box Value Type -
C olor RGB - ( Red Value, Green Value, Blue Value )

Changing Skins in Clickteam Fus ion - 47 M ay 2 8 th, 2 0 1 5

 Conclusion

Changing Skins in Clickteam Fus ion - 48 M ay 2 8 th, 2 0 1 5

The Customizable Toolbar Buttons
This section covers how to customize individual buttons within the various toolbars. These
changes only affect your local machine.

Final Customization - Buttons

Hopefully after reading this reference doucment, you will be able to skin C lickteam Fusion to
fit your own preferences. Before you start making your own skins, the final element you can
change in C lickteam Fusion is the appearance of buttons and images in various property
menus, though these changes will stay only on your local machine. Right-click on any menu
and click "C ustomize" > 'Menu". From there, select any context menu and right click any of
the menu's items. You will be able to add/remove/change the icon of this image and the text
for the object. These individual icons can be changed by editing the "UserImages.bmp" file
located in the root directory of C lickteam Fusion.

**Note**
• Toolbar Button changes will be local to you own machine unless you redistribute the
"UserImages.bmp" file with your skin along with the toolbar settings.

Changing Skins in Clickteam Fus ion - 49 M ay 2 8 th, 2 0 1 5

 Post Tutorial
Information

Changing Skins in Clickteam Fus ion - 50 M ay 2 8 th, 2 0 1 5

Post Tutorial Information
Try out the Free Edition of Clickteam Fusion!

Interested in game development? Need a introductory program? C heck out the Free Edition
of C lickteam Fusion!

C lickteam Fusion, used by the hit game series Five Night at Freddy's, offers an innovative
introduction into Game Development! The Free Edition offers a glimpse into the possibilities
offered by C lickteam Fusion. Once you are satisfied with the free edition, you can upgrade
to the Standard Version or to the Developer Version ! C heck it out today!

Rate This Tutorial!

All tutorials on Xable Enterprises have a rating system located at the bottom of the
tutorial's web page. Rate the tutorial on how clear the content seems to you and the
tutorial's usefulness. Every piece of feedback helps improve tutorials on Xable Enterprises!

Changing Skins in Clickteam Fus ion - 51 M ay 2 8 th, 2 0 1 5

Any specific messages can be directly sent to Xable Enterprises through the contact page.

Explore On Your Own!

The best way to improve your skills with MMFusion is explore the software on your own! Try
making simple mechanics or replicating simple games. After you've mastered the basics,
begin integrating the various mechanics! C reate wacky sounds. Experiment with graphics!
Everything you do improves your skills!

Changing Skins in Clickteam Fus ion - 52 M ay 2 8 th, 2 0 1 5