BaseTypedAction07 / 15

A custom fade-out action

Change an element’s opacity over a set time.

Create FadeAction. configDecoder validates the duration from JSON, and inputDecoder validates the opacity passed to runAction.

import { BaseTypedAction } from '@gamedevland/engine/layouts';
import { SchemaDecoder } from '@gamedevland/engine/validation';

export class FadeAction extends BaseTypedAction<
  { duration: number },
  { alpha: number }
> {
  protected override readonly configDecoder = SchemaDecoder.object({
    duration: SchemaDecoder.number({ min: 0 }),
  });
  protected override readonly inputDecoder = SchemaDecoder.object({
    alpha: SchemaDecoder.number({ min: 0, max: 1 }),
  });

  protected override async execute(input: { alpha: number }): Promise<void> {
    await this.ownTween(
      this.node.tweens.alphaTo(input.alpha, this.config.duration),
    );
  }
}

Register the class as FadeAction. In actions.fade, set type: 'FadeAction' and data: { duration: 0.2 }. Calling runAction('fade', { alpha: 0 }) fades out the node in 0.2 seconds.

Configurationduration: 0.2
Run the actionalpha: 0
ResultThe node fades out