自定义组件的记录和数组属性

自定义组件的记录和数组属性

David Peicho

最受期待的功能之一终于上线了：用于自定义TypeScript和JavaScript组件的记录和数组属性类型。

我们迫不及待地想看看利用它们能创造出多么惊人的体验！

记录 

现在可以使用record属性将属性分组到一个JavaScript类中：

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); // 输出 Player(10.0, 'Hero')
        console.log(this.settings instanceof PlayerSettings); // true
    }
}
Wonderland编辑器中的PlayerManager组件

请注意定义PlayerSettings类的风格。属性的声明方式对于记录和组件是相同的。

数组 

现在也可以使用array属性创建属性列表：

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) {
            // 下载指向该`url`的文件。
        }
    }
}

Property.string() 表示数组元素的类型。数组一次只能包含单一类型的元素。

结合record属性后，现在可以实现复杂类型：

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;
            // 生成这只可怕的僵尸！
        }
    }
}
Wonderland编辑器中的ZombieSpawner组件

该API还支持嵌套数组属性（数组的数组）：

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() {
        // 输出类似：
        // [
        //    ['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 

对于TypeScript用户，全新的record和array属性装饰器使得声明复杂的组件属性更加紧凑和直观：

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

保持更新。