Skip to content

Button Template

Jump to bottom
Benedikt Hensen edited this page Jan 9, 2018 · 2 revisions

Button Template

A button template was developed for the framework in order streamline the design process of new menus.

The template can be found under "Assets/Prefabs/Button". It possesses a number of scripts which adapt the button to different configurations.

Button Scaler Component

The size of the button can be changed using the scale property of the game object. The button will dynamically adapt to the new scale and re-scale the frame. It is recommended to only scale the icon along the Y axis and Z axis. Scaling along the X axis is allowed but it requires manual repositioning of the child game objects so that they do not overlap with the button's background. The button scaling is applied in the editor. Due to performance reasons, the component is automatically removed in a build. This means that the scaling of the design time is applied and does not update at runtime.

Explanation of the settings

  • Icon Size: Sets the size of the button's icon. Scales the icon proportionally. Note that this overwrites the game object scale of the child object which displays the icon.
  • Flip Icon [X, Y]: The icon is a sprite and so it is possible to mirror the icon along the image's 2D X or Y axis. Note that this setting overwrites the "Flip [X, Y]" setting on the icon's sprite renderer.
  • Caption Size: Scales the caption game object proportionally. Note that this setting overwrites the scale of the child object which displays the caption text.
  • LED Size: [For Check Buttons] Sets the size of the LED which is used for the Check Button. Note that this setting overwrites the scale of the LED child object.
  • Content Size: [For Content Buttons] Sets the size of the content text. Note that this setting overwrites the scale of the child object which displays the content text.
  • Border Width: The width of the highlight frame around the button. This setting is not changed with the size of the button but has to be adapted. Note that this setting overwrites the scale of the frame child object and the size properties of the frame's sprite renderer.
  • Scale Components With Button: If this setting is enabled, the components of the button will be scaled with its size. However, the components will only be scaled uniformly so that no stretching occurs. If disabled, the components will always have the same size regardless of the buttons size.

Button Configuration Component

The button configuration component can be used to adapt the button's properties such as its type or caption.

Explanation of the settings:

  • Type: Specifies the type of the button as BUTTON, CHECK_BUTTON or CONTENT_BUTTON. According to its value, the appearance of the button is automatically altered, i.e. the LED is enabled if and only if it set to check button and the content text label is enabled if and only if the button is specified as a content button. Additionally, the button's logic component is exchanged between the three classes FocusableButton, FocusableCheckButton and FocusableContentButton. More information on the different types of buttons are described here.
  • Icon: This setting expects a sprite image which is applied as the icon which is displayed on the button. Note that this setting overwrites the sprite property on the sprite renderer of the icon child object.
  • Caption: This setting can be used to specify the caption of the button at design time. It can be changed at run time by accessing the button's Text property. Note that this setting overwrites the text property of the caption child object's text mesh component at design time.
  • Show [Icon, Caption]: Toggles the visibility of the [icon, caption].

Relative Alignment Component

The Relative Alignment component can be added to child objects of the button. If the script is attached to an object, it can be aligned relative to special points or other objects. There is also an option to consider the parent's scale when assigning the distance.

Explanation of the settings:

  • Alignment Mode: The alignment mode offers different points. Options are:
    • None: Has the same effect as disabling the script. In this mode the object can be moved using the editor's widgets and the position can be changed manually.
    • Transform: Aligns the object relative to another transform in the scene which is specified in the Align To property.
    • Points on the parent: Center, Left, Right, Top, Bottom, Top Left, Top Right, Bottom Left, Bottom Right. These settings align the object relative to the described point on the button.
  • Align To: The "Align To"-setting expects a transform. This setting is only used if the Alignment Mode is set to Transform and can only be edited in this mode.
  • Constant Offset: The offset to the selected reference point.
  • Scale Proportional To Parent: Considers the parent scale. If disabled, the Constant Offset will be interpreted in global units. Otherwise the offset is multiplied with the scale of the parent, if enabled.
  • Scale Effect: This setting is only relevant if Scale Proportional To Parent is enabled. This vector only accepts zeros and ones as entries. The offset is only multiplied along an axis if the entry is set to 1. Thus, this setting allows to consider the parent's scaling along some axes while using the global offset along another axis.

The script overwrites the positioning of the component. This means that the object cannot be moved using the editor's widgets and the position cannot be set manually. To manually place the object somewhere, switch the Alignment Mode to None. Only in this mode, the editor's widgets have an effect again.

It is possible to quickly switch between different alignment modes and alignment transforms: If one of the two settings is changed, the offset is automatically recomputed so that the object always stays at the same position. This way, the button's design can manually be created beforehand and after this, the alignment script can be added without changing the original placements. Moreover, the script memorizes which transform was chosen for alignment in the Alignment Mode "Transform until the Unity editor is closed. If the Alignment Mode is changed and later re-set, the transform which had been entered in Align To is restored.

Further Information

The button types and the structure of the button itself is described here.

Clone this wiki locally