Using the Colour Picker with Variables

To use the Colour Picker from a UI Canvas, you will need to also use Game Creator variables and the Trigger "On Variable Change". The Variable can be a Global or Local Variable, but to learn the difference between the two, you need to review the Game Creator Documentation on Variable usage.

In this tutorial we will use a Colour Picker on a Canvas to change the colour of a Game Object, as shown in the UI Components example code. Follow the steps below and see the working example to verify that your code is working correctly.

1. Create a Canvas in your scene hierarchy and add the ColourPickerComponent from the UI Components Prefabs folder to a Panel on this Canvas.

2. The Canvas in your scene should now look similar to this. Note that the GameObject between the Canvas and the Panel is used for Animating the Canvas with the UI Components Actions, and is not needed if you are just going to fade in and out.

3. Click on the ColourPickerComponent in the Scene Hierarchyand you will see the Colour Pick Script in the Inspector Window. It will look like this.

4. The elements in the Color Palette and Thumb slots should correspond to the gameobjects in the hierarchy. For this example, we will use a Global Variable, but Local variables also work. Click on the blank dropdown button underneath the Global Variable shown above, to select a Varaible or to create one.

5. If you need to create one, click the Manager Global Variables to display the Game Creator Preferences Panel where the Varaiables are stored.

6. To create a new variable, click the "+" button on the top left, where it says (New Variable Name).

7. Give the Variable a name of your choice, and and select "Color" as the Variable Type.

8. Now when you click the Dropdown in the Color Picker Component Script, you will see the Variable you just created. Click on the Varaiable to use this for the Colour Picker.

9. Now when the Colour Picker is used, the slected colour will be stored in this variable. You can test this by having the Game Creator Preferences window open and run your game in play mode. Activate the Canvas where you added the Colour Picker, drag the Thumb, and when you release the mouse button, you will see the value in the Preferences window change to represent this colour.

10. Now we must add a GC Trigger to our scene, and set this to activate "On Variable Change", and select the Color Variable that you created as shown below. Then add an Action by clicking the Action icon.

11. Within this Action, select Object/Change Color.

12. Add the OGameObject you wish to change the Colour to the Target slot, and select your Variable from the Dropdown. Now you are done. Click Play, drag the Colour Picker and see the colour of your Object change.