Add shared-scene 2D authoring, sprite animation and Rapier2D physics
CI / validate (push) Canceled after 0s
CI / validate (push) Canceled after 0s
This commit is contained in:
emil28092005
@@ -0,0 +1,588 @@
|
||||
import React, { useState } from "react";
|
||||
import type { Asset, Entity, Project } from "../engine/schema.ts";
|
||||
export function Field2D({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
min,
|
||||
step = 0.1,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
min?: number;
|
||||
step?: number;
|
||||
}) {
|
||||
return (
|
||||
<label className="property">
|
||||
<span>{label}</span>
|
||||
<input
|
||||
key={value}
|
||||
aria-label={label}
|
||||
type="number"
|
||||
defaultValue={value}
|
||||
min={min}
|
||||
step={step}
|
||||
onBlur={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
if (Number.isFinite(v) && v !== value) onChange(v);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") e.currentTarget.blur();
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
export function FrameThumb({
|
||||
asset,
|
||||
index,
|
||||
size = 40,
|
||||
}: {
|
||||
asset?: Asset;
|
||||
index: number;
|
||||
size?: number;
|
||||
}) {
|
||||
const f = asset?.image?.frames[index],
|
||||
im = asset?.image;
|
||||
if (!im || !f) return <span>{index}</span>;
|
||||
const scale = size / Math.max(f.width, f.height);
|
||||
return (
|
||||
<span
|
||||
className="frame-thumb"
|
||||
style={{
|
||||
width: f.width * scale,
|
||||
height: f.height * scale,
|
||||
backgroundImage: `url("${asset!.uri}")`,
|
||||
backgroundSize: `${im.width * scale}px ${im.height * scale}px`,
|
||||
backgroundPosition: `${-f.x * scale}px ${-f.y * scale}px`,
|
||||
imageRendering: im.filter === "nearest" ? "pixelated" : "auto",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export function Inspector2D({
|
||||
type,
|
||||
c,
|
||||
node,
|
||||
project,
|
||||
change,
|
||||
editImage,
|
||||
preview,
|
||||
brush,
|
||||
}: {
|
||||
type: string;
|
||||
c: any;
|
||||
node: Entity;
|
||||
project: Project;
|
||||
change: (v: any) => void;
|
||||
editImage: (id: string) => void;
|
||||
preview: (name: string) => void;
|
||||
brush: (frame: number | null, fill?: boolean) => void;
|
||||
}) {
|
||||
const [paintMode, setPaintMode] = useState("brush");
|
||||
const set = (key: string, value: any) => change({ ...c, [key]: value });
|
||||
const num = (
|
||||
key: string,
|
||||
label: string,
|
||||
fallback = 0,
|
||||
min?: number,
|
||||
step = 0.1,
|
||||
) => (
|
||||
<Field2D
|
||||
key={key}
|
||||
label={label}
|
||||
value={c[key] ?? fallback}
|
||||
onChange={(v) => set(key, v)}
|
||||
min={min}
|
||||
step={step}
|
||||
/>
|
||||
);
|
||||
const bool = (key: string, label: string, fallback = false) => (
|
||||
<label className="property" key={key}>
|
||||
<span>{label}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={c[key] ?? fallback}
|
||||
onChange={(e) => set(key, e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
const select = (
|
||||
key: string,
|
||||
label: string,
|
||||
options: [string, string][],
|
||||
fallback = "",
|
||||
) => (
|
||||
<label className="property">
|
||||
<span>{label}</span>
|
||||
<select
|
||||
aria-label={label}
|
||||
value={c[key] ?? fallback}
|
||||
onChange={(e) => set(key, e.target.value)}
|
||||
>
|
||||
{options.map(([v, l]) => (
|
||||
<option key={v} value={v}>
|
||||
{l}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
);
|
||||
const pair = (
|
||||
key: string,
|
||||
label: string,
|
||||
fallback = [0, 0],
|
||||
min?: number,
|
||||
) => (
|
||||
<div className="pair2d" key={key}>
|
||||
{[0, 1].map((i) => (
|
||||
<Field2D
|
||||
key={i}
|
||||
label={label + " " + ["X", "Y"][i]}
|
||||
value={(c[key] || fallback)[i]}
|
||||
min={min}
|
||||
onChange={(v) => {
|
||||
const a = [...(c[key] || fallback)];
|
||||
a[i] = v;
|
||||
set(key, a);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
const asset = project.assets.find((a) => a.id === c.assetId),
|
||||
frames = asset?.image?.frames || [];
|
||||
const imageSelect = (
|
||||
<>
|
||||
<label className="property">
|
||||
<span>Изображение</span>
|
||||
<select
|
||||
aria-label="Изображение спрайта"
|
||||
value={c.assetId || ""}
|
||||
onChange={(e) =>
|
||||
change({
|
||||
...c,
|
||||
assetId: e.target.value,
|
||||
...(type === "sprite" ? { frame: 0 } : { cells: [] }),
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="">Белый квадрат</option>
|
||||
{project.assets
|
||||
.filter((a) => a.kind === "image")
|
||||
.map((a) => (
|
||||
<option key={a.id} value={a.id}>
|
||||
{a.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{asset && (
|
||||
<button onClick={() => editImage(asset.id)}>Нарезка и pivot…</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
const sorting = (
|
||||
<>
|
||||
{num("layer", "Слой", 0, undefined, 1)}
|
||||
{num("order", "Порядок в слое", 0, undefined, 1)}
|
||||
{bool("sortY", "Сортировать по Y")}
|
||||
<label className="property">
|
||||
<span>Цвет</span>
|
||||
<input
|
||||
type="color"
|
||||
value={c.color || "#ffffff"}
|
||||
onChange={(e) => set("color", e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{num("alpha", "Непрозрачность", 1, 0)}
|
||||
{bool("lit", "Освещение 3D")}
|
||||
</>
|
||||
);
|
||||
if (type === "sprite")
|
||||
return (
|
||||
<>
|
||||
{imageSelect}
|
||||
<label className="property">
|
||||
<span>Кадр</span>
|
||||
<select
|
||||
aria-label="Кадр спрайта"
|
||||
value={c.frame || 0}
|
||||
onChange={(e) => set("frame", +e.target.value)}
|
||||
>
|
||||
{(frames.length ? frames : [{ name: "Квадрат" }]).map((f, i) => (
|
||||
<option key={i} value={i}>
|
||||
{i}: {f.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{pair(
|
||||
"size",
|
||||
"Размер",
|
||||
frames[c.frame || 0]
|
||||
? [
|
||||
frames[c.frame || 0].width / asset!.image!.pixelsPerUnit,
|
||||
frames[c.frame || 0].height / asset!.image!.pixelsPerUnit,
|
||||
]
|
||||
: [1, 1],
|
||||
0.001,
|
||||
)}
|
||||
{c.size && (
|
||||
<button
|
||||
onClick={() => {
|
||||
const { size, ...rest } = c;
|
||||
change(rest);
|
||||
}}
|
||||
>
|
||||
Размер из PPU
|
||||
</button>
|
||||
)}
|
||||
{bool("flipX", "Отразить X")}
|
||||
{bool("flipY", "Отразить Y")}
|
||||
{sorting}
|
||||
</>
|
||||
);
|
||||
if (type === "tilemap")
|
||||
return (
|
||||
<>
|
||||
{imageSelect}
|
||||
{pair("tileSize", "Тайл", [1, 1], 0.001)}
|
||||
{num("width", "Столбцы", 32, 1, 1)}
|
||||
{num("height", "Строки", 18, 1, 1)}
|
||||
{bool("collisions", "Коллизии тайлов")}
|
||||
{sorting}
|
||||
<p className="small-note">
|
||||
Рисование в виде 2D. Один мазок — один шаг Undo. Начало карты: нижний
|
||||
левый угол.
|
||||
</p>
|
||||
<div className="tile-tools">
|
||||
{[
|
||||
["brush", "Кисть"],
|
||||
["fill", "Заливка"],
|
||||
["erase", "Ластик"],
|
||||
].map(([v, l]) => (
|
||||
<button
|
||||
key={v}
|
||||
className={paintMode === v ? "active" : ""}
|
||||
onClick={() => {
|
||||
setPaintMode(v);
|
||||
brush(v === "erase" ? null : 0, v === "fill");
|
||||
}}
|
||||
>
|
||||
{l}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="tile-palette">
|
||||
{(frames.length ? frames : [{ name: "Квадрат" }]).map((f, i) => (
|
||||
<button
|
||||
key={i}
|
||||
title={`${i}: ${f.name}`}
|
||||
onClick={() =>
|
||||
brush(paintMode === "erase" ? null : i, paintMode === "fill")
|
||||
}
|
||||
>
|
||||
<FrameThumb asset={asset} index={i} />
|
||||
<small>{i}</small>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button onClick={() => set("cells", [])}>Очистить карту</button>
|
||||
<p className="small-note">
|
||||
{c.cells.length} тайлов. Выберите инструмент Q/W/E/R, чтобы закончить
|
||||
рисование.
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
if (type === "spriteAnimator") {
|
||||
const clips = c.clips || [];
|
||||
return (
|
||||
<>
|
||||
{select("autoplay", "Автозапуск", [
|
||||
["", "Нет"],
|
||||
...clips.map((cl: any) => [cl.name, cl.name] as [string, string]),
|
||||
])}
|
||||
{bool("autoStates", "Авто: idle / run / jump")}
|
||||
<p className="small-note">
|
||||
Автоматические состояния используют скорость и grounded из
|
||||
Character2D.
|
||||
</p>
|
||||
{clips.map((cl: any, i: number) => {
|
||||
const update = (v: any) =>
|
||||
set(
|
||||
"clips",
|
||||
clips.map((old: any, j: number) =>
|
||||
j === i ? { ...old, ...v } : old,
|
||||
),
|
||||
);
|
||||
return (
|
||||
<div className="clip2d" key={i}>
|
||||
<label className="property">
|
||||
<span>Название</span>
|
||||
<input
|
||||
defaultValue={cl.name}
|
||||
key={cl.name}
|
||||
onBlur={(e) => {
|
||||
const name = e.target.value;
|
||||
change({
|
||||
...c,
|
||||
autoplay: c.autoplay === cl.name ? name : c.autoplay,
|
||||
clips: clips.map((old: any, j: number) =>
|
||||
j === i ? { ...old, name } : old,
|
||||
),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label className="property">
|
||||
<span>Кадры через запятую</span>
|
||||
<input
|
||||
aria-label={"Кадры " + cl.name}
|
||||
key={cl.frames.join(",")}
|
||||
defaultValue={cl.frames.join(",")}
|
||||
onBlur={(e) =>
|
||||
update({
|
||||
frames: e.target.value
|
||||
.split(",")
|
||||
.map((s) => Number(s.trim())),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<Field2D
|
||||
label={"FPS " + cl.name}
|
||||
value={cl.fps}
|
||||
min={0.1}
|
||||
onChange={(fps) => update({ fps })}
|
||||
/>
|
||||
<label className="property">
|
||||
Цикл
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={cl.loop !== false}
|
||||
onChange={(e) => update({ loop: e.target.checked })}
|
||||
/>
|
||||
</label>
|
||||
<button onClick={() => preview(cl.name)}>▶ Просмотр</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
change({
|
||||
...c,
|
||||
autoplay: c.autoplay === cl.name ? "" : c.autoplay,
|
||||
clips: clips.filter((_: any, j: number) => j !== i),
|
||||
})
|
||||
}
|
||||
>
|
||||
Удалить клип
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
onClick={() => {
|
||||
let name = "clip";
|
||||
for (let i = 1; clips.some((cl: any) => cl.name === name); i++)
|
||||
name = "clip" + i;
|
||||
set("clips", [...clips, { name, frames: [0], fps: 8, loop: true }]);
|
||||
}}
|
||||
>
|
||||
Добавить клип
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (type === "rigidbody2d")
|
||||
return (
|
||||
<>
|
||||
{select(
|
||||
"type",
|
||||
"Тип тела",
|
||||
[
|
||||
["fixed", "Неподвижное"],
|
||||
["dynamic", "Динамическое"],
|
||||
["kinematic", "Кинематическое"],
|
||||
],
|
||||
"dynamic",
|
||||
)}
|
||||
{num("mass", "Масса", 1, 0)}
|
||||
{num("friction", "Трение", 0.5, 0)}
|
||||
{num("restitution", "Упругость", 0, 0)}
|
||||
{num("gravityScale", "Множитель гравитации", 1)}
|
||||
{num("linearDamping", "Сопротивление", 0, 0)}
|
||||
{num("angularDamping", "Угловое сопротивление", 0, 0)}
|
||||
{bool("lockRotation", "Фиксировать вращение", true)}
|
||||
{bool("ccd", "Непрерывные коллизии", true)}
|
||||
</>
|
||||
);
|
||||
if (type === "collider2d")
|
||||
return (
|
||||
<>
|
||||
<label className="property">
|
||||
<span>Форма</span>
|
||||
<select
|
||||
value={c.shape}
|
||||
aria-label="Форма Collider2D"
|
||||
onChange={(e) =>
|
||||
change({
|
||||
...c,
|
||||
shape: e.target.value,
|
||||
...(e.target.value === "polygon" && !c.points
|
||||
? {
|
||||
points: [
|
||||
[-0.5, -0.5],
|
||||
[0.5, -0.5],
|
||||
[0.5, 0.5],
|
||||
[-0.5, 0.5],
|
||||
],
|
||||
}
|
||||
: {}),
|
||||
})
|
||||
}
|
||||
>
|
||||
{[
|
||||
["box", "Прямоугольник"],
|
||||
["circle", "Круг"],
|
||||
["capsule", "Капсула"],
|
||||
["polygon", "Выпуклый полигон"],
|
||||
].map(([v, l]) => (
|
||||
<option key={v} value={v}>
|
||||
{l}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{c.shape === "box" && pair("size", "Размер", [1, 1], 0.001)}
|
||||
{["circle", "capsule"].includes(c.shape) &&
|
||||
num("radius", "Радиус", 0.5, 0.001)}
|
||||
{c.shape === "capsule" && num("height", "Высота", 1.8, 0.001)}
|
||||
{c.shape === "polygon" && (
|
||||
<>
|
||||
<p className="small-note">Вершины выпуклого контура по порядку.</p>
|
||||
{c.points.map((p: number[], i: number) => (
|
||||
<div key={i}>
|
||||
{[0, 1].map((j) => (
|
||||
<Field2D
|
||||
key={j}
|
||||
label={`Точка ${i} ${j ? "Y" : "X"}`}
|
||||
value={p[j]}
|
||||
onChange={(v) =>
|
||||
set(
|
||||
"points",
|
||||
c.points.map((old: number[], k: number) =>
|
||||
k === i ? old.map((x, l) => (l === j ? v : x)) : old,
|
||||
),
|
||||
)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
{c.points.length > 3 && (
|
||||
<button
|
||||
onClick={() =>
|
||||
set(
|
||||
"points",
|
||||
c.points.filter((_: any, k: number) => k !== i),
|
||||
)
|
||||
}
|
||||
>
|
||||
Удалить точку {i}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={() => {
|
||||
const a = c.points.at(-1),
|
||||
b = c.points[0];
|
||||
set("points", [
|
||||
...c.points,
|
||||
[(a[0] + b[0]) / 2, (a[1] + b[1]) / 2],
|
||||
]);
|
||||
}}
|
||||
>
|
||||
Добавить точку
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{pair("offset", "Смещение")}
|
||||
{bool("sensor", "Триггер")}
|
||||
{bool("oneWay", "Односторонняя платформа")}
|
||||
{num("membership", "Группа (битовая маска)", 1, 0, 1)}
|
||||
{num("mask", "Взаимодействует с", 65535, 0, 1)}
|
||||
</>
|
||||
);
|
||||
if (type === "character2d")
|
||||
return (
|
||||
<>
|
||||
{select(
|
||||
"mode",
|
||||
"Игра",
|
||||
[
|
||||
["platformer", "Платформер"],
|
||||
["topDown", "Вид сверху"],
|
||||
],
|
||||
"platformer",
|
||||
)}
|
||||
{bool("controls", "WASD / стрелки / касание", true)}
|
||||
{num("speed", "Скорость", 5, 0)}
|
||||
{c.mode !== "topDown" && (
|
||||
<>
|
||||
{num("jumpSpeed", "Скорость прыжка", 8, 0)}
|
||||
{num("gravity", "Гравитация персонажа", 20, 0)}
|
||||
{num("autostep", "Высота ступени", 0.2, 0)}
|
||||
</>
|
||||
)}
|
||||
<p className="small-note">
|
||||
Прыжок: пробел. При собственном скрипте отключите встроенное
|
||||
управление.
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
if (type === "joint2d")
|
||||
return (
|
||||
<>
|
||||
{select(
|
||||
"type",
|
||||
"Соединение",
|
||||
[
|
||||
["revolute", "Шарнир"],
|
||||
["fixed", "Жёсткое"],
|
||||
["rope", "Верёвка"],
|
||||
["spring", "Пружина"],
|
||||
],
|
||||
"revolute",
|
||||
)}
|
||||
{select(
|
||||
"targetId",
|
||||
"Второе тело",
|
||||
project.scenes
|
||||
.find((s) => s.id === project.activeSceneId)!
|
||||
.entities.filter(
|
||||
(n) => n.id !== node.id && n.components.rigidbody2d,
|
||||
)
|
||||
.map((n) => [n.id, n.name]),
|
||||
)}
|
||||
{pair("anchor", "Крепление")}
|
||||
{pair("targetAnchor", "Крепление цели")}
|
||||
{["rope", "spring"].includes(c.type) &&
|
||||
num("length", "Длина", 1, 0.001)}
|
||||
{c.type === "spring" && (
|
||||
<>
|
||||
{num("stiffness", "Жёсткость", 50, 0)}
|
||||
{num("damping", "Затухание", 5, 0)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
if (type === "camera2d")
|
||||
return (
|
||||
<>
|
||||
{num("orthoWidth", "Ширина кадра", 20, 0.1)}
|
||||
{bool("pixelPerfect", "Pixel Perfect")}
|
||||
{num("pixelsPerUnit", "Пикселей на единицу", 100, 0.1)}
|
||||
{pair("offset", "Смещение", [0, 0])}
|
||||
</>
|
||||
);
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user