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