UI / StaleButton
StaleButton Class
Text button
Usage example: create a script named "NewScript", place it in the object sub level of the object manager, open the script, enter the following code to save it, run the game, and a button will be displayed on the screen.
@Component
export default class NewScript extends Script {
protected onStart(): void {
if(SystemUtil.isClient()){
if(SystemUtil.isClient()){
let mainui = UIService.create(UI_Main);
UIService.showUI(mainui);
UIService.canvas.addChild(mainui.button);
}
}
}
}
class UI_Main extends UIScript {
button: StaleButton = undefined;
public onAwake() {
let size = WindowUtil.getViewportSize();
this.button = StaleButton.newObject();
this.button.transform = new UITransform(size.x/2,size.y/2,size.x / 14, size.y / 20);
this.button.size = new Vector2(size.x / 14, size.y / 20);
this.button.text = "StaleButton";
this.button.fontSize = 18;
this.button.transitionEnable = true;
InputUtil.bindButton(Keys.X, this.button);
this.button.setPressedImageColorDecimal(200, 200, 200, 255);
this.button.onClicked.add(() => {
// When the button is pressed, execute the following logic
console.log("The \"StaleButton\" button was pressed ~");
});
}
}
@Component
export default class NewScript extends Script {
protected onStart(): void {
if(SystemUtil.isClient()){
if(SystemUtil.isClient()){
let mainui = UIService.create(UI_Main);
UIService.showUI(mainui);
UIService.canvas.addChild(mainui.button);
}
}
}
}
class UI_Main extends UIScript {
button: StaleButton = undefined;
public onAwake() {
let size = WindowUtil.getViewportSize();
this.button = StaleButton.newObject();
this.button.transform = new UITransform(size.x/2,size.y/2,size.x / 14, size.y / 20);
this.button.size = new Vector2(size.x / 14, size.y / 20);
this.button.text = "StaleButton";
this.button.fontSize = 18;
this.button.transitionEnable = true;
InputUtil.bindButton(Keys.X, this.button);
this.button.setPressedImageColorDecimal(200, 200, 200, 255);
this.button.onClicked.add(() => {
// When the button is pressed, execute the following logic
console.log("The \"StaleButton\" button was pressed ~");
});
}
}
Hierarchy
↳
StaleButton
Table of contents
Properties
click
Properties
onCustomPropertyChange: Readonly <MulticastDelegate <(path : string , value : unknown , oldValue : unknown ) => void >> other |
---|
Monitor custom attribute synchronization events |
Accessors
clickMethod(inClickMethod : ButtonClickMethod ): void other |
---|
Set click mode |
contentColor(): LinearColor other |
Set font content color |
disableImageColor(): Readonly <LinearColor > other |
Get disable image Color |
disableImageDrawType(): Readonly <SlateBrushDrawType > other |
Get disable image Drawing Type |
disableImageGuid(): string other |
Get disabled image ID |
disableImageInfo(): ImageInfo other |
Get ImageInfo of button Disable image |
disableImageMargin(): Readonly <Margin > other |
Get disable image Margins |
disableImageSize(): Readonly <Vector2 > other |
Get disable image Size |
focusable(): boolean other |
Get whether to obtain input focus |
fontColor(): LinearColor other |
Get font color |
fontLetterSpace(): number other |
Get font spacing |
fontSize(): number other |
Get font size |
glyph(): UIFontGlyph other |
Get font and glyph shapes |
normalImageColor(): Readonly <LinearColor > other |
Get normal image colors |
normalImageDrawType(): Readonly <SlateBrushDrawType > other |
Obtain ordinary image drawing types |
normalImageGuid(): string other |
Obtain a regular image ID |
normalImageInfo(): ImageInfo other |
Retrieve the ImageInfo of the button's normal image |
normalImageMargin(): Readonly <Margin > other |
Get normal image margins |
normalImageSize(): Readonly <Vector2 > other |
Get image size |
onClicked(): MulticastDelegate <() => void > other |
Click Event |
onHovered(): MulticastDelegate <() => void > other |
Suspension event |
onPressed(): MulticastDelegate <() => void > other |
Press Event |
onReleased(): MulticastDelegate <() => void > other |
Release event |
onUnhovered(): MulticastDelegate <() => void > other |
Unsettled event |
outlineColor(): LinearColor other |
Get font outline color |
outlineSize(): number other |
Get font outline width |
pressMethod(inPressMethod : ButtonPressMethod ): void other |
Set press mode |
pressedImagColor(): Readonly <LinearColor > other |
Get the color of pressed image |
pressedImageDrawType(): Readonly <SlateBrushDrawType > other |
Obtain the type of pressed image drawing |
pressedImageGuid(): string other |
Get press image ID |
pressedImageInfo(): ImageInfo other |
Get the ImageInfo of the button Pressed image |
pressedImageMargin(): Readonly <Margin > other |
Get press image margins |
pressedImageSize(): Readonly <Vector2 > other |
Get the size of pressing image |
shadowColor(): LinearColor other |
Get font shadow color |
shadowOffset(): Vector2 other |
Get font shadow offset |
strikethroughEnable(): boolean other |
Get whether to enable font strikethrough |
text(): string <Badge type="tip" text="other" /> |
Get button text |
textAlign(): TextJustify other |
Get font align |
textVerticalAlign(): TextVerticalJustify other |
Get the vertical alignment of the font |
touchMethod(inTouchMethod : ButtonTouchMethod ): void other |
Set Touch mode |
transitionEnable(): boolean other |
Get whether the button enable the excessive mode, and whether press has effect |
underlineEnable(): boolean other |
Return whether to enable font underline |
click
Accessors
alignPosition(): Readonly <Vector2 > other |
---|
Get the align position of the widget. When the align method is right align, bottom align, and center align, the value of alignPosition is different from that of position; |
autoSizeHorizontalEnable(): boolean other |
Get whether to automatically set the size horizontally |
autoSizeVerticalEnable(): boolean other |
Get whether to set the size automatically vertical |
cachedGeometry(): Geometry other |
Get the previous Get TickSpaceGeometry |
constraints(): Readonly <UIConstraintAnchors > other |
Get the layout of the control |
desiredSize(): Vector2 other |
Obtain expected size |
enable(): boolean other |
Is it available |
guid(): string other |
Get the widget GUID |
isHovered(): boolean other |
Is it hovered |
mouseCursor(): MouseCursor other |
Get the cursor type on the widget |
name(): string other |
Get Name |
paintSpaceGeometry(): Geometry other |
Get the last geometric information used to render the Widget |
parent(): Widget other |
Get parent node |
pivot(): Vector2 other |
Get the position of the widget anchor. This property determine the relative position of the widget graph and the anchor; At (0,0), the anchor point is located in the upper left corner of the control; (0.5,0.5), the anchor is at the center of the widget |
position(): Readonly <Vector2 > other |
Get the position of the control |
renderOpacity(): number other |
Obtain rendering transparency |
renderScale(): Vector2 other |
Get rendering scaling |
renderShear(): Vector2 other |
Obtain rendering misalignment deformation |
renderTransformAngle(): number other |
Obtain the rendering angle |
renderTransformPivot(): Vector2 other |
Get Render anchor |
size(): Vector2 other |
Get size |
tickSpaceGeometry(): Geometry other |
Retrieve the last geometric information used to drive Widget Tick |
transform(): Readonly <UITransform > other |
Obtain the size and position of the control |
visibility(): SlateVisibility other |
Get visibility |
visible(): boolean other |
Is it visible |
zOrder(): number other |
Get Zorder |
Methods
addKey(key : Keys ): void other |
---|
The same button can only control one UI control at a time, and the latest bound UI control will overwrite the previous binding; The binding added in the script cannot override the UI controls bound to the same key in the editor's key binding menu. However, when two UI controls are bound to the same key separately through code and menu, the priority of using code binding is higher |
getKeys(): Keys [] other |
Get all the keyboard keys bound to the current UI widget, including the editor key binding menu and the code bound keys |
isPressed(): boolean other |
Whether press |
removeKey(key : Keys ): void other |
This operation only unbinds dynamically bound keys and cannot unbind keys bound in the editor's key binding menu |
setButtonDisableByFile(absPath : string , bRefreshCache? : boolean ): void other |
Set unavailable image |
setButtonNormalByFile(absPath : string , bRefreshCache? : boolean ): void other |
Set normal image |
setButtonPressedByFile(absPath : string , bRefreshCache? : boolean ): void other |
Set press image |
setDisableImageColorByHex(inHexString : string ): void other |
Set unavailable color to specify Hex's color text, set color # 05050505 |
setDisableImageColorDecimal(R : number , G : number , B : number , A : number ): void other |
Set unavailable colors |
setFontColorByHex(inHexString : string ): void other |
Set font color, specify the color of Hex text Set Color # 05050505 |
setFontColorDecimal(R : number , G : number , B : number , A : number ): void other |
Set font color |
setNormalImageColorByHex(inHexString : string ): void other |
Set normal color, specify Hex's color text, set color # 05050505 |
setNormalImageColorDecimal(R : number , G : number , B : number , A : number ): void other |
Set normal color |
setPressedImageColorByHex(inHexString : string ): void other |
Set press Color to specify the color of Hex text Set Color # 05050505 |
setPressedImageColorDecimal(R : number , G : number , B : number , A : number ): void other |
Set press color |
newObject(parent? : Canvas , inName? : string ): StaleButton other |
Create StaleButton control |
click
Methods
addChild(child : Widget ): void other |
---|
Add child nodes |
clone(position : Vector2 , Parent? : any ): Widget other |
Clone the UI widget and its child nodes to the specified parent widget position (default to its parent node) |
destroyObject(): void other |
Remove and destroy immediately. Cannot be used again |
equal(that : Widget ): boolean other |
Determine if it is the same object |
findChildByPath(inPath : string ): Widget other |
Find nodes by relative path |
getChildAt(index : number ): Widget other |
What is the position node to obtain |
getChildByName<T : extends Widget <T >>(name : string ): T : extends Widget <T > other |
Search for nodes by name |
getChildrenCount(): number other |
Obtain the number of child nodes |
getCustomProperties(): string [] other |
Get all customize property |
getCustomProperty<T : extends CustomPropertyType >(propertyName : string ): T : extends CustomPropertyType other |
Get customize property |
getCustomPropertyChangeDelegate(property ): Readonly <MulticastDelegate <(path : string , value : unknown , oldValue : unknown ) => void >> other |
Event proxy triggered when a given object property is modified |
invalidateLayoutAndVolatility(): void other |
Immediately trigger re rendering and layout calculation |
removeAllChildren(): void other |
Clearing all child nodes will destroy the UI and render it unusable |
removeChild(child : Widget ): void other |
Removing a node will destroy the UI and make it unusable |
removeChildAt(index : number ): void other |
Removing the third node will destroy the UI and render it unusable |
removeObject(): void other |
Immediately remove and add to the root node for reuse |
serialize(): string other |
Serialize UI widget |
setCustomProperty(propertyName : string , value : undefined CustomPropertyType ): void other |
Set custom attributes |
deserialize(Data : string , Parent? : Widget ): Widget other |
Deserialize UI |
Properties
Accessors
clickMethod
• | ||
---|---|---|
Set click mode Parameters
Click on mode selection |
contentColor
• | • | ||||
---|---|---|---|---|---|
Set font content color Returns
| Set font content color Parameters
|
disableImageColor
• | • | ||||
---|---|---|---|---|---|
Get disable image Color Returns
| Set disable image Color Parameters
|
disableImageDrawType
• | • | ||||
---|---|---|---|---|---|
Get disable image Drawing Type Returns
| Set to disable image drawing types Parameters
|
disableImageGuid
• | • | ||||
---|---|---|---|---|---|
Get disabled image ID Returns
| Set unavailable image ID Parameters
|
disableImageInfo
• | ||
---|---|---|
Get ImageInfo of button Disable image Returns
|
disableImageMargin
• | • | ||||
---|---|---|---|---|---|
Get disable image Margins Returns
| Set disable image Margins Parameters
|
disableImageSize
• | • | ||||
---|---|---|---|---|---|
Get disable image Size Returns
| Set disable image size Parameters
|
focusable
• | • | ||||
---|---|---|---|---|---|
Get whether to obtain input focus Returns
| Set whether to obtain input focus Parameters
|
fontColor
• | • | ||||
---|---|---|---|---|---|
Get font color Returns
| Set font color Parameters
|
fontLetterSpace
• | • | ||||
---|---|---|---|---|---|
Get font spacing Returns
| Set font spacing Parameters
|
fontSize
• | • | ||||
---|---|---|---|---|---|
Get font size Returns
| Set font size Parameters
|
glyph
• | • | ||||
---|---|---|---|---|---|
Get font and glyph shapes Returns
| Set font and glyph shape Parameters
|
normalImageColor
• | • | ||||
---|---|---|---|---|---|
Get normal image colors Returns
| Set regular image colors Parameters
|
normalImageDrawType
• | • | ||||
---|---|---|---|---|---|
Obtain ordinary image drawing types Returns
| Set normal image drawing type Parameters
|
normalImageGuid
• | • | ||||
---|---|---|---|---|---|
Obtain a regular image ID Returns
| Set normal image ID Parameters
|
normalImageInfo
• | ||
---|---|---|
Retrieve the ImageInfo of the button's normal image Returns
|
normalImageMargin
• | • | ||||
---|---|---|---|---|---|
Get normal image margins Returns
| Set normal image margins Parameters
|
normalImageSize
• | • | ||||
---|---|---|---|---|---|
Get image size Returns
| Set image size Parameters
|
onClicked
• | ||
---|---|---|
Click Event Returns
|
onHovered
• | ||
---|---|---|
Suspension event Returns
|
onPressed
• | ||
---|---|---|
Press Event Returns
|
onReleased
• | ||
---|---|---|
Release event Returns
|
onUnhovered
• | ||
---|---|---|
Unsettled event Returns
|
outlineColor
• | • | ||||
---|---|---|---|---|---|
Get font outline color Returns
| Set font outline color Parameters
|
outlineSize
• | • | ||||
---|---|---|---|---|---|
Get font outline width Returns
| Set font outline width Parameters
|
pressMethod
• | ||
---|---|---|
Set press mode Parameters
|
pressedImagColor
• | • | ||||
---|---|---|---|---|---|
Get the color of pressed image Returns
| Set the color of the pressed image Parameters
|
pressedImageDrawType
• | • | ||||
---|---|---|---|---|---|
Obtain the type of pressed image drawing Returns
| Set press image drawing type Parameters
|
pressedImageGuid
• | • | ||||
---|---|---|---|---|---|
Get press image ID Returns
| Set press image ID Parameters
|
pressedImageInfo
• | ||
---|---|---|
Get the ImageInfo of the button Pressed image Returns
|
pressedImageMargin
• | • | ||||
---|---|---|---|---|---|
Get press image margins Returns
| Set press image margin Parameters
|
pressedImageSize
• | • | ||||
---|---|---|---|---|---|
Get the size of pressing image Returns
| Set the size of pressing image Parameters
|
shadowColor
• | • | ||||
---|---|---|---|---|---|
Get font shadow color Returns
| Set font shadow color Parameters
|
shadowOffset
• | • | ||||
---|---|---|---|---|---|
Get font shadow offset Returns
| Set font shadow offset Parameters
|
strikethroughEnable
• | • | ||||
---|---|---|---|---|---|
Get whether to enable font strikethrough Returns
| Set whether to enable font strikethrough Parameters
|
text
• | • | ||||
---|---|---|---|---|---|
Get button text Returns
| Set button text Parameters
new text |
textAlign
• | • | ||||
---|---|---|---|---|---|
Get font align Returns
| Set font align Parameters
|
textVerticalAlign
• | • | ||||
---|---|---|---|---|---|
Get the vertical alignment of the font Returns
| Set font vertical alignment method Parameters
|
touchMethod
• | ||
---|---|---|
Set Touch mode Parameters
|
transitionEnable
• | • | ||||
---|---|---|---|---|---|
Get whether the button enable the excessive mode, and whether press has effect Returns
| Should different pressing schemes be applied Parameters
|
underlineEnable
• | • | ||||
---|---|---|---|---|---|
Return whether to enable font underline Returns
| Set whether to enable font underline Parameters
|
Methods
addKey
• addKey(key
): void
other
The same button can only control one UI control at a time, and the latest bound UI control will overwrite the previous binding; The binding added in the script cannot override the UI controls bound to the same key in the editor's key binding menu. However, when two UI controls are bound to the same key separately through code and menu, the priority of using code binding is higher
Parameters
key Keys | Usage: button |
---|
getKeys
• getKeys(): Keys
[] other
Get all the keyboard keys bound to the current UI widget, including the editor key binding menu and the code bound keys
Returns
Keys [] | Returns the key bound to the current widget, which may be empty |
---|
isPressed
• isPressed(): boolean
other
Whether press
Returns
boolean | Is the return button pressed |
---|
removeKey
• removeKey(key
): void
other
This operation only unbinds dynamically bound keys and cannot unbind keys bound in the editor's key binding menu
Parameters
key Keys | Usage: button |
---|
setButtonDisableByFile
• setButtonDisableByFile(absPath
, bRefreshCache?
): void
other
Set unavailable image
Parameters
absPath string | Usage: Image file path range: Path length |
---|---|
bRefreshCache? boolean | Usage: If set to true, the cache will be recreated and refreshed. If set to false, the cache will be used. default: true |
Precautions
It is recommended to set bRefreshCache=false to improve performance
setButtonNormalByFile
• setButtonNormalByFile(absPath
, bRefreshCache?
): void
other
Set normal image
Parameters
absPath string | Image file path range: path length |
---|---|
bRefreshCache? boolean | Usage: If it is true, the cache will be re created and refreshed; if it is false, the cache will be used< br> default: true |
Precautions
It is recommended to set bRefreshCache=false to improve performance
setButtonPressedByFile
• setButtonPressedByFile(absPath
, bRefreshCache?
): void
other
Set press image
Parameters
absPath string | Usage: image file path range: path length |
---|---|
bRefreshCache? boolean | Usage: If set to true, the cache will be recreated and refreshed. If set to false, the cache will be used. default: true |
Precautions
It is recommended to set bRefreshCache=false to improve performance
setDisableImageColorByHex
• setDisableImageColorByHex(inHexString
): void
other
Set unavailable color to specify Hex's color text, set color # 05050505
Parameters
inHexString string | Usage: Color string range: A string type that conforms to the characteristics of Hex |
---|
setDisableImageColorDecimal
• setDisableImageColorDecimal(R
, G
, B
, A
): void
other
Set unavailable colors
Parameters
R number | Usage: Color R value< Range: [0, 255] type: integer |
---|---|
G number | Usage: Color G value< Range: [0, 255] type: integer |
B number | Usage: Color B value< Range: [0, 255] type: integer |
A number | Usage: Color transparency< Range: [0, 255] type: integer |
setFontColorByHex
• setFontColorByHex(inHexString
): void
other
Set font color, specify the color of Hex text Set Color # 05050505
Parameters
inHexString string | Usage: Hex color string range: string type conforming to Hex characteristics |
---|
setFontColorDecimal
• setFontColorDecimal(R
, G
, B
, A
): void
other
Set font color
Parameters
R number | Usage: Font R value< Range: [0, 255] type: integer |
---|---|
G number | Usage: Font G value< Range: [0, 255] type: integer |
B number | Usage: Font B value< Range: [0, 255] type: integer |
A number | Usage: Font transparency< Range: [0, 255] type: integer |
setNormalImageColorByHex
• setNormalImageColorByHex(inHexString
): void
other
Set normal color, specify Hex's color text, set color # 05050505
Parameters
inHexString string | Usage: Color string range: A string type that conforms to the characteristics of Hex |
---|
setNormalImageColorDecimal
• setNormalImageColorDecimal(R
, G
, B
, A
): void
other
Set normal color
Parameters
R number | Usage: Color R value< Range: [0, 255] type: integer |
---|---|
G number | Usage: Color G value< Range: [0, 255] type: integer |
B number | Usage: Color B value< Range: [0, 255] type: integer |
A number | Usage: Color transparency< Range: [0, 255] type: integer |
setPressedImageColorByHex
• setPressedImageColorByHex(inHexString
): void
other
Set press Color to specify the color of Hex text Set Color # 05050505
Parameters
inHexString string | Usage: Color string range: A string type that conforms to the characteristics of Hex |
---|
setPressedImageColorDecimal
• setPressedImageColorDecimal(R
, G
, B
, A
): void
other
Set press color
Parameters
R number | Usage: Color R value< Range: [0, 255] type: integer |
---|---|
G number | Usage: Color G value< Range: [0, 255] type: integer |
B number | Usage: Color B value< Range: [0, 255] type: integer |
A number | Usage: Color transparency< Range: [0, 255] type: integer |
newObject
• Static
newObject(parent?
, inName?
): StaleButton
other
Create StaleButton control
Parameters
parent? Canvas | Usage: create the parent Canvas object of the widget default: null |
---|---|
inName? string | Usage: name of the create widget default: null range: set a reasonable name |
Returns
StaleButton | Return the created object |
---|
When the parent and inName are the same as an existing object, the old object will be destroyed