自定义实体
本功能较为复杂，故以逐步教程的形式进行讲解。
构造碰撞箱
可以使用序列化后的对象构造出碰撞箱对象。
const = {
: "CollisionBox",
: [
{
: "Rectangle",
: { : "Vector", : 0, : 0 },
: { : "Vector", : 100, : 100 },
},
],
};可以简单封装一下。
function (: number, : number) {
return { : "Vector", , };
}
function (: number, : number, : number, : number) {
return { : "Rectangle", : (, ), : (, ) };
}
function (: any[]) {
return { : "CollisionBox", };
}
const = ([(0, 0, 100, 100)]);编写渲染函数
渲染函数输入实体的数据，输出 ImageBitmap 对象，可使用 OffscreenCanvas 进行绘制。
async function (: {
: string;
: string;
: string;
}): <ImageBitmap> {
const = new (100, 100);
const = .("2d")!;
. = "white";
.(0, 0, 100, 100);
. = .;
. = 5;
.();
.(50, 50, 40, 0, . * 2);
.();
. = "black";
. = `20px ${.}`;
. = "center";
. = "middle";
.(., 50, 50);
return ();
}注册实体
await .(
// id，扩展之间相互独立
"circle",
// 默认数据
{ : "", : "#fff", : "system-ui" },
// 碰撞箱
([(0, 0, 100, 100)]),
// 渲染函数
.(),
);响应点击事件
await .(
"circle",
.(async () => {
// 先获取到 Entity 对象，或者在创建实体时把 Entity 对象存起来（见下文）
const = await .();
if (!) return;
const = await .;
const : any[] = await (.([
await .,
]) as any);
if (! || . === 0) return;
const = [0];
if (!) return;
// 必须使用 `setCustomData` 修改实体数据！否则不会触发重新渲染
await
.setCustomData
// ...
();
}),
);创建实体
const = await .(
"circle",
{
: "Hello",
: "#fff",
: "system-ui",
},
{
: 100,
: 100,
},
);