589 lines
17 KiB
TypeScript
589 lines
17 KiB
TypeScript
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;
|
|
}
|