Gradient editor

This section details the gradient editor window, and explains how to use it to create a create. Color gradients allows you to draw rectangular and circular shapes. To open the gradient editor, you may select the Rect or Circle tool, and click on Edit gradient.

Please note that the gradient selected on the left side of this window will be the current gradient once the window is closed. This means that the shape you will draw will use (if needed) the gradient that was selected prior to close the gradient editor. For instance, here the current gradient will be "Rainbow shield".

Managing gradients

The left side of the list shows all the available gradients. You may delete them, edit them or create new ones. Note that the gradients you created will still be there even if you restart Game Character Hub (whatever change you make through this editor, Game Character Hub will save them automatically as long as you exit the window by clicking on OK).

Creating a new gradient

You may create a new gradient by clicking on Add > New. A new gradient will appear on the right side of the window.

If you want to create a new gradient based upon an existing one, you will want to duplicate the gradient and edit its copy. For this, select the gradient on the left list, and click on Add > Duplicate.

Moving a gradient within the list

To move a gradient, simply select it and click on the button displaying an up arrow, or a down arrow. Note that the position of a gradient has no importance, and this is only provided for user convenience.

Deleting a gradient

To delete a gradient, simply select it, and click on Delete (the button is located below the left side list). This operation cannot be undone, unless you close the window by clicking on upper-right red closing cross (Note that this will cancel every change you have made on every gradient since you opened the window).

Editing a gradient

If you select a gradient on the left-side list, you will be able to edit it. You may completely customize every aspect of the gradient: whether it's a linear gradient, a radial gradient, or a conical gradient, fully change its colors, etc...

The first field (Name) holds the name of the gradient. This is the name as it will appear on the left side list. The name is purely informative, and is here for the user to distinguish different gradients.

Gradient type will define the type of the gradient: three types are available: linear, radial, and conical.

A linear gradientA radial gradientA conical gradient

Diffusion type will define how the gradient will propagate. If the gradient is linear, it is bounded between a starting point and an end point. If it's radial, it's bounded within a circle defined by its center and radius. A conical gradient has no boundaries. This property defines how to draw the gradient outside its boundaries. Here are the available options:

  • Normal: The gradient won't be drawn outside its boundaries.
  • Reflect: Outside its boundaries, the gradient will be mirrored every time it's drawn.
  • Repeat: The gradient will simply be repeated outside it's boundaries.

Gradient color points

You may edit the gradient colors by defining its color points. The color points define the colors the gradient will take from its starting point to its end point.

To add a color point, simply click below the gradient, on an blank space. This will add a color point where you clicked. You may move the color point along the gradient by simply drag and dropping it to its new location.

To delete a color point, select it (i.e. click on it). Then click on Delete (The one which is displayed below the gradient). Also, in the drop-down Options menu, you will find a command to delete all color points.

To modify the color of a color point, select it, then click on the color frame (which displays the current color). A new window shall appear, with which you may select the new color:

This window operates like the Colors dock window of the main window. The main difference is that you only have to select on color, and that you may also pick the color by clicking on the chromatic circle (top-left corner). Click on OK to select the color.

Any change on the color points will update the gradient preview on the right.

Gradient shape

On the right side of the window, a preview of the gradient is displayed. This is what your shapes will be filled up with once drawn on your character.

This is not just a preview window, as it also enables you to edit the boundaries of the gradient. Indeed, two or three colored points are displayed in this frame. The meaning of each point is displayed at the bottom of the window.

  • If the gradient is linear, the red point is the starting point, and the green point is the end point of the gradient.
  • If the gradient is radial, the red point is the center of the gradient, the distance between the green point and the red point defines the radius, and the blue point defines the starting point of the gradient.
  • If the gradient is conical, the red point is the center of the gradient, and the green point defines the angle.

You may move those points to change the gradient shape and orientation. To do so, simply click on a point, and drag and drop it to its new location. In the drop-down Options menu, you will find a command to restore the points to their default position, and another option to move the focal point over the center point.


To save all your changes, simply click on OK. The gradients will still be there even if you restart Game Character Hub.

The gradient that was selected on the left list upon validating will be the gradient used by the tools Rect and Circle.

If you want to discard every change made with the gradients, simply press Escape or the red closing cross to close the window without saving.

Copyright © 2012-2018 Sébastien Bini, all rights reserved. Please report any problem.