ui.ThreePartImage Class
A three-part image displays an image on screen using three
sub-images: start, middle and end. The start and end will be rendered
with fixed size while the middle-part will be stretched in a way like this:
|Start-Part Fixed|<-----------Middle-Part Stretched----------->|End-Part Fixed
It can be horizontal or vertical.
Item Index
Properties
- action
- actions
- alignmentX
- alignmentY
- anchor
- animations
- bindings
- blendMode
- color
- components
- customFields
- draggable
- enabled
- firstPartSize
- fixedSize
- frame
- group
- id
- image
- images
- inheritProperties
- lastPartSize
- margin
- middlePartSize
- opacity
- order
- padding
- selectable
- style
- styles
- type
- updateBehavior
- visible
- zIndex
Properties
action
ActionDescriptor
Defines an action executed by the control. The exact moment when the action is executed depends on the control and it components but in regular the action is fired if the component is clicked.
actions
ActionDescriptor[]
Allows to define multiple actions executed by the control. The actions are executed in their definition order. See ui.Control.action property for more information.
alignmentX
String
The control's alignment on x-axis. Needs to be supported by the layout. The following alignments are available:
- left
- center
- right
Default: "left"
alignmentY
String
The control's alignment on y-axis. Needs to be supported by the layout. The following alignments are available:
- top
- center
- bottom
Default: "left"
anchor
Number
Defines the anchor-point of the control which is used for rotation and zooming. For Example: If the anchor-point is set to [0.5, 0.5] and a rotation is executed it will rotate around its own center. Otherwise with [0, 0] it rotates around its top-left corner. The anchor-point has no effect on the position (x/y of dstRect).
Default: [0, 0]
animations
AnimationDescriptor[]
Defines animations for the control. Each animations need to be bound to a different event.
blendMode
String
The blend-mode used for blending. The following blend modes are supported:
- add - Additive Blending
- sub - Subtractive Blending
- normal - Normal Blending
color
Number
The control's color.
customFields
Object
An object to define custom data. That custom data has not effect by default but can be used with bindings or custom components.
Default: null
draggable
DraggableDescriptor
Makes the object draggable vertically or horizontally. Useful to implement sliders, scroll-bars, etc. See descriptor for more information.
enabled
Boolean
Indicates if the control is enabled. A disable control is rendered different and doesn't respond to user-input. The exact behavior depends on the control's components.
Default: true
firstPartSize
Number
Size of the first/start part in pixels.
Default: 16
fixedSize
Boolean
If true, the control's size will not resize to fit an associated image like for ui.Image control.
Default: false
frame
Number
Defines the position and size of the control. It is also possible use percentage values and small formulas. For example:
[0, 0, "100%", "100% - 50"]
[0, 0, "100%", "Math.max(100% - 50, 10)"]
group
String
Assigns the control to a group. The effect of depends on the components.
id
String
The unique identifer of the component. The control can be accessed using $
image
String
The name of the graphic resource used to construct the three-part image from. The default folder is Graphics/Pictures.
images
String
Names of additional graphic resources used by other added components like gs.Component_HotspotBehavior uses the images to display different states of the three-part image like selected, unselected, etc.
inheritProperties
Boolean
Indiciates if the control inherits opacity, zoom, angle, color, tone and anchor-point from its parent layout.
Default: false
lastPartSize
Number
Size of the last/end part in pixels.
Default: 16
margin
Number
Defines a space around the control. The parent-layout must support margins. Otherwise that property has no effect. The format is [top, left, bottom, right].
middlePartSize
Number
Size in pixels of the middle part which is stretched.
Default: 1
opacity
Number
The control's opacity. Goes from 0=Transparent to 255=Opaque.
Default: 255
order
Number
The order-index to control the update-order of controls. The higher the value, the earlier the control is updated in the list of controls.
padding
Number
Defines a space around the control's visual content. It allows to shift the visual content without affecting the control's position and size. The format is [top, left, bottom, right]
selectable
Boolean
Indicates if the control is selectable. Selectable control's may have a different appearance on selected/unselected state but the exact behavior depends on the components. For example: The gs.Component_HotspotBehavior component allows different control's images for selected/unselected state and set the game object's selected-property to the current selection-state.
Default: false
style
String
The control's style name. A style allows to define control-properties on a central place and then re-use it for multiple controls to reduce redundant data. A styles needs to be added to the ui.UIManager.styles object which stores key-values pairs with the style-name as key and the style-data as value. For example:
ui.UIManager.styles.myCustomStyle = { "font": { "name": "Tahoma", "size": 40, "color": [255, 255, 255, 255] } }
To use that style, the style-property must be used:
{ "type": "ui.Text", "style": "myCustomStyle", "frame": [0, 0], "text": "White Text", "sizeToFit": true }
styles
String
Allows to add multiple styles to a control. See ui.Control.style for more information.
type
String
The type-name of the control. Can be a name of a template or an internal type name. Internal types are:
- ui.Text
- ui.Image
- ui.ImageButton
- ui.ImageMap
- ui.Video
- ui.FreeLayout
- ui.StackLayout
- ui.SpreadLayout
- ui.GridLayout
updateBehavior
String
The updateBehavior controls in which cases the control is updated.
- normal - Updates the control only if necessary. However, in some cases that is not enough.
- continuous - Updates the control every frame.
Updating a control doesn't mean that only one control is updated. A single update of a control can trigger updates on other controls as well if there are dependencies and also the parent-layout is updated.
Default: "normal"
visible
Boolean
Indicates if the control is visible. An invisible control will not be rendered but still takes up space in layouts.
Default: true
zIndex
Number
The z-index controls the overlapping of controls. A control with a higher z-index is drawn above a control with a lower z-index.