Class LUIClickIcon

A clickable icon that fires IconClicked_${name} messages.

export class MyGUI extends Component {
    @link("GraphicsEngine:typesprite")
    private graphics:GraphicsEngine;

    @res("sheet", "path/to/main.sheet.json")
    private sheet:SpriteSheet;

    onInit() {
      const icon = new LUIIconButton(
          this.sheet,
          "heart"
      ).setName("ExitSpace");
      //         ^^^^^^^^^
      this.graphics.gui.addChild(icon);
    }

    onMessage_IconClicked_ExitSpace() {
        //                ^^^^^^^^^
        console.log("click-element was clicked! :-)");
    }
}

Compared to LUIIconButton this has no background and the clicking

⚠️ experimental

Hierarchy

LUIElement
- LUIClickIcon

Index

Constructors

constructor

new LUIClickIcon(sheet: SpriteSheet, iconAnimation: string, iconClickedAnimation?: string): LUIClickIcon
Parameters
- sheet: SpriteSheet
- iconAnimation: string
- iconClickedAnimation: string = iconAnimation
Returns LUIClickIcon
Overrides LUIElement.constructor
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/elements/LUIClickIcon.ts:51

Properties

`Private` _isDown

_isDown: boolean = false

`Private` iconAnimation

iconAnimation: string

`Private` iconClickedAnimation

iconClickedAnimation: string = iconAnimation

`Private` iconImage

iconImage: LUIStyleSpriteFrame

messageData

messageData: any

`Private` sheet

sheet: SpriteSheet

Methods

addChild

addChild(e: LUIElement): void
Parameters
- e: LUIElement
Returns void
Inherited from LUIElement.addChild
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:222

addStyleElement

addStyleElement(elem: LUIStyleElement): LUIElement
Comfort method to append a style element. If no style object is set a new one is created.

Be careful, this can cause issues with shared styles
Parameters
- elem: LUIStyleElement
Returns LUIElement
Inherited from LUIElement.addStyleElement
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:117

collectElementsAt

collectElementsAt(x: number, y: number, collectedElements: LUIElement[]): void
Pushes this element and all their children into the "collectedElements" container if they spatially collide with x,y.

The top-most element will have the index [0].

It is possible (thanks to offsets, etc) that a child is in here while the parent is not.
Parameters
- x: number
- y: number
- collectedElements: LUIElement[]
Returns void
Inherited from LUIElement.collectElementsAt
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:535

debugDraw

debugDraw(gfx: CanvasRenderingContext2D, depth: number, mousePos: LUIPos, withLabel: boolean): void
Parameters
- gfx: CanvasRenderingContext2D
- depth: number
- mousePos: LUIPos
- withLabel: boolean
Returns void
Inherited from LUIElement.debugDraw
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:483

doLayout

doLayout(): void
Returns void
Inherited from LUIElement.doLayout
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:264

drawToCanvas

drawToCanvas(gfx: FatRenderer, depth: number): void
Parameters
- gfx: FatRenderer
- depth: number
Returns void
Inherited from LUIElement.drawToCanvas
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:374

dropAllChildren

dropAllChildren(): void
Returns void
Inherited from LUIElement.dropAllChildren
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:243

dropChild

dropChild(e: LUIElement): void
Parameters
- e: LUIElement
Returns void
Inherited from LUIElement.dropChild
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:250

getAlpha

getAlpha(): number
Returns number
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/elements/LUIClickIcon.ts:74

getBottom

getBottom(): number
Returns number
Inherited from LUIElement.getBottom
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:317

getBottomNoPadding

getBottomNoPadding(): number
Returns number
Inherited from LUIElement.getBottomNoPadding
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:350

getChildAt

getChildAt(i: number): LUIElement
Parameters
- i: number
Returns LUIElement
Inherited from LUIElement.getChildAt
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:183

getChildIndex

getChildIndex(child: LUIElement): number
Parameters
- child: LUIElement
Returns number
Inherited from LUIElement.getChildIndex
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:607

getChildIndexByName

getChildIndexByName(name: string): number
search for a children's index in this parent. -1 if not present
Parameters
- name: string
Returns number
Inherited from LUIElement.getChildIndexByName
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:213

getClippingMode

getClippingMode(): LUIClipBehavior
Returns LUIClipBehavior
Inherited from LUIElement.getClippingMode
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:136

getContainerLayout

getContainerLayout(): LUIContainerLayouter
Returns LUIContainerLayouter
Inherited from LUIElement.getContainerLayout
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:144

getElementConsumeBehavior

getElementConsumeBehavior(): LUIElementConsume
Returns LUIElementConsume
Inherited from LUIElement.getElementConsumeBehavior
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:148

getHeight

getHeight(): number
Returns number
Inherited from LUIElement.getHeight
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:326

getHeightNoPadding

getHeightNoPadding(): number
Returns number
Inherited from LUIElement.getHeightNoPadding
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:359

getLayoutProperty

getLayoutProperty(name: string): any
Parameters
- name: string
Returns any
Inherited from LUIElement.getLayoutProperty
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:140

getLeft

getLeft(): number
Returns number
Inherited from LUIElement.getLeft
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:303

getLeftNoPadding

getLeftNoPadding(): number
Returns number
Inherited from LUIElement.getLeftNoPadding
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:336

getManager

getManager(): LUIManager
Returns LUIManager
Inherited from LUIElement.getManager
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:282

getMessageData

getMessageData(): any
Returns any
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/elements/LUIClickIcon.ts:78

getMouseState

getMouseState(): LUIMouseState
Returns LUIMouseState
Inherited from LUIElement.getMouseState
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:156

getName

getName(): string
Returns string
Inherited from LUIElement.getName
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:179

getNumChildren

getNumChildren(): number
Returns number
Inherited from LUIElement.getNumChildren
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:187

getOffset

getOffset(): LUIPos
Returns LUIPos
Inherited from LUIElement.getOffset
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:296

getPadding

getPadding(): LUIBorder
Returns LUIBorder
Inherited from LUIElement.getPadding
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:299

getParent

getParent(): LUIElement
Returns LUIElement
Inherited from LUIElement.getParent
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:289

getParentList

getParentList(targetList: LUIElement[]): void
Fills this LUIElement and all it's parent up to the root into the provided array.
Parameters
- targetList: LUIElement[]
Returns void
Inherited from LUIElement.getParentList
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:477

getPosition

getPosition(): LUIRect
Returns LUIRect
Inherited from LUIElement.getPosition
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:293

getRight

getRight(): number
Returns number
Inherited from LUIElement.getRight
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:312

getRightNoPadding

getRightNoPadding(): number
Returns number
Inherited from LUIElement.getRightNoPadding
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:345

getStyle

getStyle(): LUIStyle
Returns LUIStyle
Inherited from LUIElement.getStyle
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:107

getTop

getTop(): number
Returns number
Inherited from LUIElement.getTop
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:307

getTopNoPadding

getTopNoPadding(): number
Returns number
Inherited from LUIElement.getTopNoPadding
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:340

getTransform

getTransform(): AffineMatrix
Returns AffineMatrix
Inherited from LUIElement.getTransform
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:596

getWidth

getWidth(): number
Returns number
Inherited from LUIElement.getWidth
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:322

getWidthNoPadding

getWidthNoPadding(): number
Returns number
Inherited from LUIElement.getWidthNoPadding
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:355

isActiveElement

isActiveElement(): boolean
Returns boolean
Inherited from LUIElement.isActiveElement
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:571

isDownElement

isDownElement(): boolean
Returns boolean
Inherited from LUIElement.isDownElement
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:575

isOnElement

isOnElement(x: number, y: number): boolean
Parameters
- x: number
- y: number
Returns boolean
Inherited from LUIElement.isOnElement
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:552

isReverse

isReverse(): boolean
true => the resulting space is negative or zero

Returns boolean
Inherited from LUIElement.isReverse
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:331

isReverseNoPadding

isReverseNoPadding(): boolean
Returns boolean
Inherited from LUIElement.isReverseNoPadding
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:363

isVisible

isVisible(): boolean
Returns boolean
Inherited from LUIElement.isVisible
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:164

makeDirty

makeDirty(): void
Returns void
Inherited from LUIElement.makeDirty
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:367

onAttach

onAttach(newParent: LUIElement): void
Parameters
- newParent: LUIElement
Returns void
Inherited from LUIElement.onAttach
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:279

onDetach

onDetach(oldParent: LUIElement): void
Parameters
- oldParent: LUIElement
Returns void
Inherited from LUIElement.onDetach
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:276

onMouseDown

onMouseDown(x: number, y: number): void
Parameters
- x: number
- y: number
Returns void
Overrides LUIElement.onMouseDown
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/elements/LUIClickIcon.ts:87

onMouseMove

onMouseMove(x: number, y: number, isOnElement: boolean): void
Parameters
- x: number
- y: number
- isOnElement: boolean
Returns void
Overrides LUIElement.onMouseMove
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/elements/LUIClickIcon.ts:93

onMouseUp

onMouseUp(x: number, y: number): void
Parameters
- x: number
- y: number
Returns void
Overrides LUIElement.onMouseUp
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/elements/LUIClickIcon.ts:100

`Protected` selfDebugDraw

selfDebugDraw(gfx: CanvasRenderingContext2D, depth: number, mousePos: any, withLabel: any): void
Parameters
- gfx: CanvasRenderingContext2D
- depth: number
- mousePos: any
- withLabel: any
Returns void
Inherited from LUIElement.selfDebugDraw
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:494

setAlpha

setAlpha(a: number): LUIClickIcon
Parameters
- a: number
Returns LUIClickIcon
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/elements/LUIClickIcon.ts:69

setAnimation

setAnimation(iconAnimation: string, iconClickedAnimation?: string): LUIClickIcon
Parameters
- iconAnimation: string
- iconClickedAnimation: string = iconAnimation
Returns LUIClickIcon
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/elements/LUIClickIcon.ts:61

setChild

setChild(index: number, e: LUIElement): LUIElement
Parameters
- index: number
- e: LUIElement
Returns LUIElement
Inherited from LUIElement.setChild
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:191

setChildIndex

setChildIndex(child: LUIElement, newIndex: number): void
Parameters
- child: LUIElement
- newIndex: number
Returns void
Inherited from LUIElement.setChildIndex
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:619

setClippingMode

setClippingMode(v: LUIClipBehavior): LUIElement
If set to a not-None value this will ensure that all content and children cannot render outside of the border of this element.

LUIClipBehavior.None // No clipping. Pixels are visible in all cases. LUIClipBehavior.ElementBox // Only pixels within the box of the element will be visible LUIClipBehavior.IgnorePaddingBox // Only pixels within the box + padding of the element will be visible
Parameters
- v: LUIClipBehavior
Returns LUIElement
Inherited from LUIElement.setClippingMode
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:131

setContainerLayout

setContainerLayout(layouter: LUIContainerLayouter): void
Parameters
- layouter: LUIContainerLayouter
Returns void
Inherited from LUIElement.setContainerLayout
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:78

setElementConsumeBehavior

setElementConsumeBehavior(v: LUIElementConsume): void
Parameters
- v: LUIElementConsume
Returns void
Inherited from LUIElement.setElementConsumeBehavior
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:152

setLayoutProperty

setLayoutProperty(name: string, val: any): LUIElement
Parameters
- name: string
- val: any
Returns LUIElement
Inherited from LUIElement.setLayoutProperty
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:83

setMessageData

setMessageData(value: any): LUIClickIcon
Parameters
- value: any
Returns LUIClickIcon
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/elements/LUIClickIcon.ts:82

setMouseState

setMouseState(v: LUIMouseState): void
Parameters
- v: LUIMouseState
Returns void
Inherited from LUIElement.setMouseState
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:160

setName

setName(v: string): LUIElement
Parameters
- v: string
Returns LUIElement
Inherited from LUIElement.setName
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:174

setStyle

setStyle(style: LUIStyle): LUIElement
Parameters
- style: LUIStyle
Returns LUIElement
Inherited from LUIElement.setStyle
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:100

setTransformEnable

setTransformEnable(enable?: boolean, onPaddingSpace?: boolean): LUIElement
Use getTransform() to manipulate the animation matrix.

Transform is NOT considered during input. It's animation only
Parameters
- enable: boolean = true
- onPaddingSpace: boolean = false
Returns LUIElement
Inherited from LUIElement.setTransformEnable
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:584

setVisible

setVisible(v: boolean): void
Parameters
- v: boolean
Returns void
Inherited from LUIElement.setVisible
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:168

unsetLayoutProperty

unsetLayoutProperty(name: string): LUIElement
Parameters
- name: string
Returns LUIElement
Inherited from LUIElement.unsetLayoutProperty
- Defined in docs/dev/projekte/2023/typespritejs/repos/typesprite-engine/src/engine/lui/LUIElement.ts:91

Class LUIClickIcon

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

sheet: SpriteSheet

iconAnimation: string

iconClickedAnimation: string = iconAnimation

Returns LUIClickIcon

Properties

Private _isDown

Private iconAnimation

Private iconClickedAnimation

Private iconImage

messageData

Private sheet

Methods

addChild

Parameters

e: LUIElement

Returns void

addStyleElement

Parameters

elem: LUIStyleElement

Returns LUIElement

collectElementsAt

Parameters

x: number

y: number

collectedElements: LUIElement[]

Returns void

debugDraw

Parameters

gfx: CanvasRenderingContext2D

depth: number

mousePos: LUIPos

withLabel: boolean

Returns void

doLayout

Returns void

drawToCanvas

Parameters

gfx: FatRenderer

depth: number

Returns void

dropAllChildren

Returns void

dropChild

Parameters

e: LUIElement

Returns void

getAlpha

Returns number

getBottom

Returns number

getBottomNoPadding

Returns number

getChildAt

Parameters

i: number

Returns LUIElement

getChildIndex

Parameters

child: LUIElement

Returns number

getChildIndexByName

Parameters

name: string

Returns number

getClippingMode

Returns LUIClipBehavior

getContainerLayout

Returns LUIContainerLayouter

getElementConsumeBehavior

Returns LUIElementConsume

getHeight

`Private` _isDown

`Private` iconAnimation

`Private` iconClickedAnimation

`Private` iconImage

`Private` sheet