A GameDevLand SDK component

Draw a panel in a node from layout JSON.

Let’s install the adapter with a compatible SDK version:

npm install @gamedevland/cyber-ui @gamedevland/cyber-ui-sdk @gamedevland/engine@0.0.11 pixi.js

The component draws in this.node.view. Validated settings hold the dimensions; the parent layout sets the position. A complete typed CyberPanel is included in the package examples.

We register the class in GlobalDiDefinition.registerComponents():

group.add('CyberPanel', CyberPanel);

Then attach it to a Graphics node:

{
  "type": "Graphics",
  "components": {
    "panel": {
      "type": "CyberPanel",
      "data": { "width": 320, "height": 180, "cut": 12 }
    }
  }
}

The Graphics element factory must also be registered in the project. Text uses separate nodes, input goes through node.input, and player intent goes through events and the FSM.

For animation, we extend ToolkitComponent and register an effect with ownEffect() in onReady(). The base onUpdate() passes seconds, enable/disable controls pausing, and detach disposes of effects. Overrides must call the base hooks; onDetach() must return super.onDetach(). We pass the player’s current preference to setUiReducedMotion().

The component needs no new Application or ticker. uiViewport separates logical size, CSS size, and scale; the application sets each node’s dimensions.

A GameDevLand SDK component

Sources ↗