IGE includes is a set of tools for developing user interfaces for games and applications.
The Canvas is a game object with a Canvas
component on it. All UI elements must be children of a Canvas. Creating a new UI element, such as an UIImage
using the menu Create > GUI > UIImage
, automatically creates a Canvas, if there isn't already a Canvas in the scene.
Tip
To work with GUI, switch the Scene Camera to 2D mode. The Canvas will be displayed as a rectangle in the view, it help to easier posioning the UI elements on the scene.
The Canvas component can be setting up using Inspector.
Property | Function |
---|---|
|
|
|
|
|
|
The RectTransform
is a new transform component that is used for all UI elements. It has position, rotation, and scale just like regular Transforms, but it also has a width and height, used to specify the dimensions of the rectangle.
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Tip
Use Z position to adjust the drawing order of elements, and may also help to resolve Z-fighting issues.
Rotations, size, and scale modifications occur around the pivot so the position of the pivot affects the outcome of a rotation, resizing, or scaling.
A child RectTransform
can be anchored to the parent RectTransform
in various ways:
Tip
The blue arrow indicates that the child will stretch together with parent size, in horizontal, vertical or both accordingly.
With the introduction of the UI system, new Components have been added that will help you create GUI specific functionality.
The UIImage
component is used to display an image on screen.
The Inspector
window allows to change the image settings:
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
An UIMask
is not a visible UI control but rather a way to modify the appearance of a control's child elements. The mask restricts the child elements to the shape of the parent. So, if the child is larger than the parent then only the part of the child that fits within the parent will be visible.
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
The UIText
component has a Text area for entering the text that will be displayed.
It is possible to set the font, font style and font size, and alignment of the text using Inspector.
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The UIText
support drawing text using true-type font (.ttf, .otf) and bitmap font (.pybm) formats.
Bitmap Font Creator
can be used to create bitmap font, which can be found at Menu -> Tool -> Bitmap Font Creator
.
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
To create new bitmap font, flows steps below:
- Accquire bitmap texture file which contains all the characters, copy it to
fonts
folder. - Open
Bitmap Font Creator
, select the image file. - Input all the characters that is supported in
Characters Set
textbox. - Generate glyphs by pressing
Generate Glyphs
button. - For each glyphs, input the position, size, offset and advance value.
- Save the font by pressing
Save FontBitmap
button. - Test the font by create
UIText
component, then drag and drop the newly created font in theInspector
window.
Note
Bitmap font only displayed as RGB texture if background use alpha channel. Otherwise, it will render as grayscale color to resolve alpha issue.
Tip
Saved Bitmap fonts can be modified with new characters set. Just need to add more character in the Characters Set
textbox, then press Generate Glyphs
, it will create new glyphs without affects existing glyphs.
Tip
Better to use an image editor (such as Paint.NET(R), MS Paint(R), Adobe(R) Photoshop(R)) to mesure the character attributes to put in the glyphs parameters.
UITextField
is used to display an editable text box to the user.
The usage of this component is similar to UIText
, except it allows text to be input by user.
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
To handle the input ended event, add this code to Script
:
from igeScene import Script
class TxtUserName(Script):
def __init__(self, owner):
super().__init__(owner)
# Read the value from UITextField
self.username = owner.getComponent("UITextField").text
print(f"Welcome {self.username}!")
# Invoked at input ended
def onValueChanged(self, val):
self.username = val
print(f"Welcome back {self.username}!")
The UIButton
component implement a button in GUI, which responds to a click from the user and is used to initiate or confirm an action.
The Inspector properties are as below:
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The action can be controlled using Script
, which onClick
callback like below:
from igeScene import Script
class BtnNoAds(Script):
def __init__(self, owner):
super().__init__(owner)
def onClick(self):
print("NoAds Button Clicked, process purchasing...")
The UISlider
allows user to select a numeric value from a range by dragging the mouse.
The Inspector properties are as below:
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
To handle value changed event, add this code to Script
:
from igeScene import Script
class VolumeSlider(Script):
def __init__(self, owner):
super().__init__(owner)
def onValueChanged(self, val):
self.volume = val
An UIScrollView
can be used to scroll the content that takes up a lot of space and needs to be displayed in a small area. It is usually combined with an UIMask
in order to create a scroll view, and with one or two UIScrollBar
that can be dragged to scroll horizontally or vertically.
The Inspector properties are as below:
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
To support UIScrollView implement, the UIScrollBar
is introduced to allow the user to scroll the view using drag handler.
Property | Function |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
To handle value changed event, add this code to Script
:
from igeScene import Script
class HScrollBar(Script):
def __init__(self, owner):
super().__init__(owner)
def onValueChanged(self, val):
self.position = val