Benutzerdefinierte Komponenten: Record- & Array-Eigenschaften

Eines der am häufigsten angeforderten Features ist endlich da: Record- und Array-Eigenschaftstypen für benutzerdefinierte TypeScript- und JavaScript-Komponenten.

Wir können es kaum erwarten, die großartigen Erfahrungen zu sehen, die mit ihnen gemacht werden!

Record

Eigenschaften können jetzt in einer JavaScript-Klasse mit der record-Eigenschaft gruppiert werden:

import {Component, Property} from '@wonderlandengine/api';

class PlayerSettings {
    static Properties = {
        speed: Property.float(10.0),
        name: Property.string('Hero')
    };
}

export class PlayerManager extends Component {
    static TypeName = 'player-manager';

    static Properties = {
        settings: Property.record(PlayerSettings)
    };

    start() {
        console.log(this.settings); // Gibt Player(10.0, 'Hero') aus
        console.log(this.settings instanceof PlayerSettings); // true
    }
}

PlayerManager-Komponente im Wonderland Editor

Beachte den Stil, der zur Definition der PlayerSettings-Klasse verwendet wird. Eigenschaften werden sowohl für Records als auch für Komponenten auf die gleiche Weise deklariert.

Array

Es ist jetzt auch möglich, Listen von Eigenschaften mit der array-Eigenschaft zu erstellen:

import {Component, Property} from '@wonderlandengine/api';

export class Downloader extends Component {
    static TypeName = 'downloader';

    static Properties = {
        urls: Property.array(Property.string())
    };

    start() {
        for(const url of this.urls) {
            // Lade die Datei herunter, auf die `url` verweist.
        }
    }
}

Property.string() repräsentiert den Typ der Array-Elemente. Arrays können jeweils nur Elemente eines Typs enthalten.

In Kombination mit der record-Eigenschaft sind jetzt komplexe Typen erreichbar:

import {Component, Property} from '@wonderlandengine/api';

class Zombie {
    static Properties = {
        name: Property.string(),
        maxHealth: Property.float(100.0),
        mesh: Property.mesh(),
    };
}

export class ZombieSpawner extends Component {
    static TypeName = 'zombie-spawner';

    static Properties = {
        enemies: Property.array(Property.record(Zombie))
    };

    start() {
        for(const zombie of this.enemies) {
            const name = zombie.name;
            const health = zombie.maxHealth;
            // Erzeuge diesen fiesen Zombie!
        }
    }
}

ZombieSpawner-Komponente im Wonderland Editor

Die API unterstützt auch verschachtelte Array-Eigenschaften (Arrays von Arrays):

import {Component, Property} from '@wonderlandengine/api';

export class LevelGenerator extends Component {
    static TypeName = 'level-generator';

    static Properties = {
        mapPiecesPerLevel: Property.array(Property.array(Property.string())),
    };

    start() {
        // Gibt etwas wie das folgende aus:
        // [
        //    ['level_1_forest.map', 'level_1_mountains.map'],
        //    ['level_2_beach.map', 'level_2_ocean.map', 'level_2_desert.map'],
        //    ['level_3_underwater.map'],
        // ]
        console.log(this.mapPiecesPerLevel);
    }
}

TypeScript

Für TypeScript-Nutzer machen die neuen record- und array-Eigenschaftsdekorationen die Deklaration komplexer Komponenteneigenschaften hochkompakt und intuitiv:

import {Component, property, Property}from '@wonderlandengine/api';

class Zombie {
    @property.string()
    name!: string;

    @property.float(100)
    maxHealth!: number;

    @property.float(10)
    damage!: number;
}

export class ZombieManager extends Component {
    static TypeName = 'zombie-manager';

    @property.array(Property.record(Zombie))
    zombies!: Zombie[];
}

Last Update: May 12, 2025