Schluffe/nage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FCK

Browse Source
This commit is contained in:
Schluffe
2026-02-19 20:59:10 +01:00
parent 8ea950db5a
commit c95621072c
14 changed files with 264 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
engine/Animation.ts
-47
View File
@@ -1,47 +0,0 @@
import { drawSprite, type Sprite } from "./Sprite.ts";
export const spriteMap = new Map<string, Sprite>();
export type Animation = {
spriteSrc: string;
xIndex: number;
yIndex: number;
frameTime: number;
frameDelta: number;
};
export function createAnimation(
sprite: Sprite,
frameTime: number,
yIndex: number,
): Animation {
const spriteSrc = sprite.image.src;
spriteMap.set(spriteSrc, sprite);
return {
spriteSrc,
xIndex: 0,
yIndex,
frameTime,
frameDelta: 0,
};
}
export function playAnimation(
ctx: CanvasRenderingContext2D,
animation: Animation,
x: number,
y: number,
delta: number,
): void {
const sprite = spriteMap.get(animation.spriteSrc)!;
if ((animation.frameDelta += delta) > animation.frameTime) {
animation.frameDelta = 0;
if ((animation.xIndex += 1) >= sprite.xFrames) {
animation.xIndex = 0;
}
}
drawSprite(ctx, sprite, animation.xIndex, animation.yIndex, x, y);
}
engine/Collision.ts
+1 -9
View File
@@ -1,13 +1,5 @@
import type { Vector } from "#/engine/Vector.ts"; import type { Vector } from "#/engine/Vector.ts";
export type Body<T extends { position: Vector }> = { export function moveAndCollide<T>(body: T, velocity: Vector): void {
shape: T;
offset: Vector;
};
export function moveAndCollide<T extends { position: Vector }>(
body: Body<T>,
velocity: Vector,
): void {
return; return;
} }
engine/Entity.ts
+10 -35
View File
@@ -1,45 +1,20 @@
import type { Animation } from "./Animation.ts"; export type Entity<T extends object> = {
import { createVector, type Vector } from "./Vector.ts";
export type Indirect = never;
export type Entity<T> = {
name: string; name: string;
position: Vector; state: T;
animation: Animation; };
} & T;
export type Animate<T> = ( export type Process<T extends object> = (instance: T, delta: number) => void;
entity: Entity<T>,
ctx: CanvasRenderingContext2D,
delta: number,
) => void;
export type Process<T> = (entity: Entity<T>, delta: number) => void; export const entityMap = new Map();
export const entityProcessMap = new Map();
export const entityMap = new Map<string, Entity<unknown>>(); export function defineEntity<T extends object>(
export const entityAnimateMap = new Map<string, Animate<Indirect>>();
export const entityProcessMap = new Map<string, Process<Indirect>>();
export function defineEntity<T extends { animation: Animation }>(
name: string, name: string,
state: T, state: T,
): { ): (fn: Process<T>) => void {
animate: (fn: Animate<T>) => void; entityMap.set(name, state);
process: (fn: Process<T>) => void;
} {
entityMap.set(name, {
name,
position: createVector(),
...state,
});
return { return (fn) => {
animate(fn) {
entityAnimateMap.set(name, fn);
},
process(fn) {
entityProcessMap.set(name, fn); entityProcessMap.set(name, fn);
},
}; };
} }
engine/Scene.ts
+42 -40
View File
@@ -1,28 +1,29 @@
import { import {
type Animate as AnimateEntity,
type Entity, type Entity,
entityAnimateMap,
entityMap, entityMap,
entityProcessMap, entityProcessMap,
type Indirect,
type Process as ProcessEntity, type Process as ProcessEntity,
} from "./Entity.ts"; } from "#/engine/Entity.ts";
import { type Graph, getNeighbours } from "./Graph.ts"; import { type Graph, getNeighbours } from "#/engine/Graph.ts";
import { useWithAsyncCache } from "./lib/cache.ts"; import { useWithAsyncCache } from "#/engine/lib/cache.ts";
export type EntityData = {
name: string;
init: object;
};
export type SceneData = { export type SceneData = {
name: string; name: string;
width: number; width: number;
height: number; height: number;
entities: Array<Entity<unknown>>; entities: Array<EntityData>;
}; };
export type EntityInstanceMap = Map< export type EntityInstanceMap = Map<
string, string,
{ {
animate: AnimateEntity<Indirect>; process: ProcessEntity<object>;
process: ProcessEntity<Indirect>; instances: Array<object>;
instances: Array<Entity<unknown>>;
} }
>; >;
@@ -41,42 +42,43 @@ export type SceneChangeHandler = (to: SceneData, from: SceneData) => void;
export const sceneProcessMap = new Map<string, Process>(); export const sceneProcessMap = new Map<string, Process>();
export const scenePreProcessMap = new Map<string, PreProcess>(); export const scenePreProcessMap = new Map<string, PreProcess>();
export const scenePostProcessMap = new Map<string, PostProcess>(); export const scenePostProcessMap = new Map<string, PostProcess>();
export const sceneDataMap = new Map<string, SceneData>();
export const sceneEntiyMap = new Map<string, EntityInstanceMap>();
export const sceneChangedHandlers = new Set<SceneChangeHandler>(); export const sceneChangedHandlers = new Set<SceneChangeHandler>();
export const sceneDataMap = new Map<string, SceneData>();
export const sceneEntiyInstanceMap = new Map<string, EntityInstanceMap>();
export const sceneGraph: Graph<string> = new Map(); export const sceneGraph: Graph<string> = new Map();
const sceneInstancesMap = new Map<string, Array<Entity<unknown>>>(); const sceneInstancesMap = new Map<string, Array<object>>();
export const [loadScene, sceneCache] = useWithAsyncCache( export const [loadScene, sceneCache] = useWithAsyncCache(
async (name: string) => { async (name: string) => {
await import(`#/game/scenes/${name}/scene.ts`); await import(`#/game/scenes/${name}/scene.ts`);
const data = sceneDataMap.get(name)!; const data = sceneDataMap.get(name)!;
const entityInstanceMap = sceneEntiyMap.get(name)!; const entityInstanceMap = sceneEntiyInstanceMap.get(name)!;
entityInstanceMap.clear(); entityInstanceMap.clear();
await Promise.all( await Promise.all(
data.entities.map(async (entity: Entity<unknown>) => { data.entities.map(async (entityData: EntityData) => {
await import(`#/game/entities/${entity.name}/entity.ts`); await import(`#/game/entities/${entityData.name}/entity.ts`);
if (!entityInstanceMap.has(entity.name)) { if (!entityInstanceMap.has(entityData.name)) {
entityInstanceMap.set(entity.name, { entityInstanceMap.set(entityData.name, {
animate: entityAnimateMap.get(entity.name) ?? (() => {}), process: entityProcessMap.get(entityData.name) ?? (() => {}),
process: entityProcessMap.get(entity.name) ?? (() => {}),
instances: [], instances: [],
}); });
} }
try { try {
entityInstanceMap.get(entity.name)!.instances.push( entityInstanceMap.get(entityData.name)!.instances.push(
structuredClone({ structuredClone({
...entityMap.get(entity.name)!, ...entityMap.get(entityData.name)!,
...entity, ...entityData,
}), }),
); );
} catch (error) { } catch (error) {
console.error(entity.name, error); console.error(entityData.name, error);
} }
}), }),
); );
@@ -94,21 +96,21 @@ export const currentScene: Scene = {
entityInstanceMap: new Map(), entityInstanceMap: new Map(),
}; };
function animateEntities(ctx: CanvasRenderingContext2D, delta: number): void { // function animateEntities(ctx: CanvasRenderingContext2D, delta: number): void {
const instances = sceneInstancesMap.get(currentScene.data.name)!; // const instances = sceneInstancesMap.get(currentScene.data.name)!;
instances.sort((a, b) => a.position.y - b.position.y); // instances.sort((a, b) => a.position.y - b.position.y);
for (const instance of instances) { // for (const instance of instances) {
currentScene.entityInstanceMap // currentScene.entityInstanceMap
.get(instance.name)! // .get(instance.name)!
.animate(instance as Entity<Indirect>, ctx, delta); // .animate(instance as Entity<Indirect>, ctx, delta);
} // }
} // }
function processEntities(delta: number): void { function processEntities(delta: number): void {
for (const entity of currentScene.entityInstanceMap.values()) { for (const entity of currentScene.entityInstanceMap.values()) {
for (const instance of entity.instances) { for (const instance of entity.instances) {
entity.process(instance as Entity<Indirect>, delta); entity.process(instance, delta);
} }
} }
} }
@@ -130,7 +132,7 @@ export function defineScene(data: SceneData): {
postProcess: (fn: PostProcess) => void; postProcess: (fn: PostProcess) => void;
} { } {
sceneDataMap.set(data.name, data); sceneDataMap.set(data.name, data);
sceneEntiyMap.set(data.name, new Map()); sceneEntiyInstanceMap.set(data.name, new Map());
return { return {
linkScenes(ids) { linkScenes(ids) {
@@ -146,7 +148,7 @@ export function defineScene(data: SceneData): {
sceneProcessMap.set(data.name, (ctx, delta) => { sceneProcessMap.set(data.name, (ctx, delta) => {
processEntities(delta); processEntities(delta);
fn(ctx, delta); fn(ctx, delta);
animateEntities(ctx, delta); // animateEntities(ctx, delta);
}); });
}, },
preProcess(fn): void { preProcess(fn): void {
@@ -168,7 +170,7 @@ export async function setScene(name: string): Promise<void> {
const data = sceneDataMap.get(name)!; const data = sceneDataMap.get(name)!;
const process = sceneProcessMap.get(name)!; const process = sceneProcessMap.get(name)!;
const entityInstanceMap = sceneEntiyMap.get(name)!; const entityInstanceMap = sceneEntiyInstanceMap.get(name)!;
sceneInstancesMap.set( sceneInstancesMap.set(
data.name, data.name,
entityInstanceMap.values().reduce( entityInstanceMap.values().reduce(
@@ -178,18 +180,18 @@ export async function setScene(name: string): Promise<void> {
} }
return acc; return acc;
}, },
[] as Array<Entity<unknown>>, [] as Array<object>,
), ),
); );
const preProcess = scenePreProcessMap.get(name); const preProcess = scenePreProcessMap.get(name);
if (preProcess) { if (preProcess) {
preProcess(sceneEntiyMap.get(name)!); preProcess(sceneEntiyInstanceMap.get(name)!);
} }
const postProcess = scenePostProcessMap.get(currentScene.data.name); const postProcess = scenePostProcessMap.get(currentScene.data.name);
if (postProcess) { if (postProcess) {
postProcess(sceneEntiyMap.get(name)!); postProcess(sceneEntiyInstanceMap.get(name)!);
} }
currentScene.data = data; currentScene.data = data;
engine/Sprite.ts
-54
View File
@@ -1,54 +0,0 @@
import { loadImage } from "./lib/loadImage.ts";
export type Sprite = {
image: HTMLImageElement;
xFrames: number;
yFrames: number;
frameWidth: number;
frameHeight: number;
};
export function createSprite(
image: HTMLImageElement,
xFrames: number,
yFrames: number,
): Sprite {
return {
image,
xFrames,
yFrames,
frameWidth: image.width / xFrames,
frameHeight: image.height / yFrames,
};
}
export async function fromSrc(
src: string,
xFrames: number,
yFrames: number,
): Promise<Sprite> {
return createSprite(await loadImage(src), xFrames, yFrames);
}
export function drawSprite(
ctx: CanvasRenderingContext2D,
sprite: Sprite,
xIndex: number,
yIndex: number,
x: number,
y: number,
width?: number,
height?: number,
): void {
ctx.drawImage(
sprite.image,
xIndex * sprite.frameWidth,
yIndex * sprite.frameHeight,
sprite.frameWidth,
sprite.frameHeight,
x,
y,
width || sprite.frameWidth,
height || sprite.frameHeight,
);
}
engine/dev/main.tsx
+42 -44
View File
@@ -7,18 +7,15 @@ import {
Show, Show,
} from "solid-js"; } from "solid-js";
import { render } from "solid-js/web"; import { render } from "solid-js/web";
import { spriteMap } from "#/engine/Animation.ts";
import type { Entity } from "#/engine/Entity.ts"; import type { Entity } from "#/engine/Entity.ts";
import { import {
currentScene, currentScene,
type SceneData, type SceneData,
sceneChangedHandlers, sceneChangedHandlers,
sceneGraph, sceneGraph,
sceneProcessMap,
setScene, setScene,
} from "#/engine/Scene.ts"; } from "#/engine/Scene.ts";
import { setScale, viewport } from "#/engine/Viewport.ts"; import { setScale, viewport } from "#/engine/Viewport.ts";
import { strokeRect } from "../Rect.ts";
import { InputField } from "./controls/InputField.tsx"; import { InputField } from "./controls/InputField.tsx";
import { RangeSlider } from "./controls/RangeSlider.tsx"; import { RangeSlider } from "./controls/RangeSlider.tsx";
import { GraphBrowser } from "./GraphBrowser.tsx"; import { GraphBrowser } from "./GraphBrowser.tsx";
@@ -76,7 +73,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
const [entities, setEntities] = createSignal( const [entities, setEntities] = createSignal(
mapSceneEntities(currentScene.data), mapSceneEntities(currentScene.data),
); );
const [activeEntity, setActiveEntity] = createSignal<null | Entity<unknown>>( const [activeEntity, setActiveEntity] = createSignal<null | Entity<object>>(
null, null,
); );
@@ -96,47 +93,48 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
}); });
const selectEntity = (items: ItemsRef): void => { const selectEntity = (items: ItemsRef): void => {
const activeRef = items.find((ref) => ref.item.isActive)!; console.log(items);
const instances = currentScene.entityInstanceMap.get( // const activeRef = items.find((ref) => ref.item.isActive)!;
activeRef.item.label, // const instances = currentScene.entityInstanceMap.get(
)!.instances; // activeRef.item.label,
// )!.instances;
const entityRefs = items.filter( // const entityRefs = items.filter(
(ref) => ref.item.label === activeRef.item.label, // (ref) => ref.item.label === activeRef.item.label,
); // );
const instance = // const instance =
instances[entityRefs.findIndex((ref) => ref.item.isActive)]; // instances[entityRefs.findIndex((ref) => ref.item.isActive)];
setActiveEntity(instance); // setActiveEntity(instance);
const sprite = spriteMap.get(instance.animation.spriteSrc)!; // const sprite = spritesSheetsMap.get(instance.animation.spriteSrc)!;
const processProxy = sceneProcessMap.get(currentScene.data.name)!; // const processProxy = sceneProcessMap.get(currentScene.data.name)!;
const ctx = viewport.ctx; // const ctx = viewport.ctx;
currentScene.process = (...args) => { // currentScene.process = (...args) => {
processProxy(...args); // processProxy(...args);
ctx.save(); // ctx.save();
ctx.globalAlpha = 0.75; // ctx.globalAlpha = 0.75;
ctx.lineWidth = 1; // ctx.lineWidth = 1;
ctx.strokeStyle = "#6572f5"; // ctx.strokeStyle = "#6572f5";
viewport.ctx.strokeRect( // viewport.ctx.strokeRect(
instance.position.x - 0.5, // instance.position.x - 0.5,
instance.position.y - 0.5, // instance.position.y - 0.5,
sprite.image.width / sprite.xFrames + 1, // sprite.sheet.width / sprite.xFrames + 1,
sprite.image.height / sprite.yFrames + 1, // sprite.sheet.height / sprite.yFrames + 1,
); // );
ctx.fillStyle = "#ee459e"; // ctx.fillStyle = "#ee459e";
viewport.ctx.fillRect( // viewport.ctx.fillRect(
instance.position.x - 1, // instance.position.x - 1,
instance.position.y - 1, // instance.position.y - 1,
2, // 2,
2, // 2,
); // );
ctx.beginPath(); // ctx.beginPath();
ctx.fill(); // ctx.fill();
ctx.restore(); // ctx.restore();
}; // };
}; };
onMount(() => { onMount(() => {
@@ -205,19 +203,19 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
<InputField <InputField
type="number" type="number"
name="x" name="x"
value={String(activeEntity()!.position.x)} value={"FIXME"}
icon={LetterXIcon()} icon={LetterXIcon()}
onChange={(value) => { onChange={(value) => {
activeEntity()!.position.x = parseInt(value); // activeEntity()!.position.x = parseInt(value);
}} }}
></InputField> ></InputField>
<InputField <InputField
type="number" type="number"
name="y" name="y"
value={String(activeEntity()!.position.y)} value={"FIXME"}
icon={LetterYIcon()} icon={LetterYIcon()}
onChange={(value) => { onChange={(value) => {
activeEntity()!.position.y = parseInt(value); // activeEntity()!.position.y = parseInt(value);
}} }}
></InputField> ></InputField>
</div> </div>
engine/sprites.ts
+83
View File
@@ -0,0 +1,83 @@
export type SpritesSheet = {
image: HTMLImageElement;
xFrames: number;
yFrames: number;
frameWidth: number;
frameHeight: number;
};
export type SpriteAnimation = {
sheet: SpritesSheet;
xIndex: number;
yIndex: number;
frameTime: number;
frameDelta: number;
};
export function createSpritesSheet(
image: HTMLImageElement,
xFrames: number,
yFrames: number,
): SpritesSheet {
return {
image,
xFrames,
yFrames,
frameWidth: image.width / xFrames,
frameHeight: image.height / yFrames,
};
}
export function createSpriteAnimation(
sheet: SpritesSheet,
frameTime: number,
yIndex: number,
): SpriteAnimation {
return {
sheet,
xIndex: 0,
yIndex,
frameTime,
frameDelta: 0,
};
}
export function drawSprite(
ctx: CanvasRenderingContext2D,
sheet: SpritesSheet,
xIndex: number,
yIndex: number,
x: number,
y: number,
width?: number,
height?: number,
): void {
ctx.drawImage(
sheet.image,
xIndex * sheet.frameWidth,
yIndex * sheet.frameHeight,
sheet.frameWidth,
sheet.frameHeight,
x,
y,
width || sheet.frameWidth,
height || sheet.frameHeight,
);
}
export function playAnimation(
ctx: CanvasRenderingContext2D,
animation: SpriteAnimation,
x: number,
y: number,
delta: number,
): void {
if ((animation.frameDelta += delta) > animation.frameTime) {
animation.frameDelta = 0;
if ((animation.xIndex += 1) >= animation.sheet.xFrames) {
animation.xIndex = 0;
}
}
drawSprite(ctx, animation.sheet, animation.xIndex, animation.yIndex, x, y);
}
game/entities/hero/entity.ts
+24 -23
View File
@@ -1,34 +1,35 @@
import { createAnimation, playAnimation } from "#/engine/Animation.ts"; import { type Circle, createCircle } from "#/engine/Circle.ts";
import { createCircle } from "#/engine/Circle";
import { moveAndCollide } from "#/engine/Collision.ts"; import { moveAndCollide } from "#/engine/Collision.ts";
import { defineEntity } from "#/engine/Entity.ts"; import { defineEntity } from "#/engine/Entity.ts";
import { keyboardInput } from "#/engine/Keyboard.ts"; import { keyboardInput } from "#/engine/Keyboard.ts";
import { loadImage } from "#/engine/lib/loadImage";
import { pointer } from "#/engine/Pointer.ts"; import { pointer } from "#/engine/Pointer.ts";
import { fromSrc, type Sprite } from "#/engine/Sprite.ts"; import {
import { createVector } from "#/engine/Vector.ts"; createSpriteAnimation,
createSpritesSheet,
type SpriteAnimation,
} from "#/engine/sprites.ts";
import { createVector, type Vector } from "#/engine/Vector.ts";
import charIdle from "#/game/assets/char-idle.png"; import charIdle from "#/game/assets/char-idle.png";
const idle: Sprite = await fromSrc(charIdle, 2, 4); export type Hero = {
position: Vector;
velocity: Vector;
body: Circle;
animation: SpriteAnimation;
};
const speed = 0.05; const speed = 0.05;
const idleSheet = createSpritesSheet(await loadImage(charIdle), 2, 4);
const { animate, process } = defineEntity("hero", { const state: Hero = {
animation: createAnimation(idle, 500, 2), position: createVector(),
velocity: createVector(), velocity: createVector(),
body: { body: createCircle(createVector(), 4),
shape: createCircle(createVector(), 4), animation: createSpriteAnimation(idleSheet, 500, 2),
offset: createVector(8, 10), };
},
});
animate((entity, ctx, delta) => { const process = defineEntity("hero", state);
playAnimation(
ctx,
entity.animation,
entity.position.x,
entity.position.y,
delta,
);
});
process((entity, delta) => { process((entity, delta) => {
if (pointer.isDown) { if (pointer.isDown) {
@@ -49,6 +50,6 @@ process((entity, delta) => {
moveAndCollide(entity.body, entity.velocity); moveAndCollide(entity.body, entity.velocity);
entity.body.shape.position.x = entity.body.offset.x + entity.position.x; // entity.body.position.x = entity.body.offset.x + entity.position.x;
entity.body.shape.position.y = entity.body.offset.y + entity.position.y; // entity.body.position.y = entity.body.offset.y + entity.position.y;
}); });
game/entities/portal/entity.ts
+5 -15
View File
@@ -1,20 +1,10 @@
import { createAnimation, playAnimation } from "#/engine/Animation.ts";
import { defineEntity } from "#/engine/Entity.ts"; import { defineEntity } from "#/engine/Entity.ts";
import { fromSrc, type Sprite } from "#/engine/Sprite.ts"; import { loadImage } from "#/engine/lib/loadImage.ts";
import { createSpriteAnimation, createSpritesSheet } from "#/engine/sprites.ts";
import portal from "#/game/assets/portal.png"; import portal from "#/game/assets/portal.png";
const sprite: Sprite = await fromSrc(portal, 3, 1); const portalSheet = createSpritesSheet(await loadImage(portal), 3, 1);
const { animate } = defineEntity("portal", { defineEntity("portal", {
animation: createAnimation(sprite, 400, 0), animation: createSpriteAnimation(portalSheet, 400, 0),
});
animate((entity, ctx, delta) => {
playAnimation(
ctx,
entity.animation,
entity.position.x,
entity.position.y,
delta,
);
}); });
game/entities/testEntity/entity.ts
+17 -25
View File
@@ -1,49 +1,41 @@
import {
type Animation,
createAnimation,
playAnimation,
} from "#/engine/Animation.ts";
import { defineEntity } from "#/engine/Entity.ts"; import { defineEntity } from "#/engine/Entity.ts";
import { loadImage } from "#/engine/lib/loadImage.ts"; import { loadImage } from "#/engine/lib/loadImage.ts";
import { createSprite } from "#/engine/Sprite.ts"; import {
createSpriteAnimation,
createSpritesSheet,
type SpriteAnimation,
} from "#/engine/sprites.ts";
import { createVector, type Vector } from "#/engine/Vector.ts";
import { viewport } from "#/engine/Viewport.ts"; import { viewport } from "#/engine/Viewport.ts";
import charIdle from "#/game/assets/char-idle.png"; import charIdle from "#/game/assets/char-idle.png";
import charWalk from "#/game/assets/char-walk.png"; import charWalk from "#/game/assets/char-walk.png";
const sprites = { const sprites = {
idle: createSprite(await loadImage(charIdle), 2, 4), idle: createSpritesSheet(await loadImage(charIdle), 2, 4),
walk: createSprite(await loadImage(charWalk), 4, 4), walk: createSpritesSheet(await loadImage(charWalk), 4, 4),
}; };
const animations = { const animations = {
idle: createAnimation(sprites.idle, 500, 2), idle: createSpriteAnimation(sprites.idle, 500, 2),
walk: createAnimation(sprites.walk, 250, 2), walk: createSpriteAnimation(sprites.walk, 250, 2),
}; };
const { animate, process } = defineEntity<{ const process = defineEntity<{
animation: Animation; position: Vector;
animation: SpriteAnimation;
animations: { animations: {
idle: Animation; idle: SpriteAnimation;
walk: Animation; walk: SpriteAnimation;
}; };
stuff: number; stuff: number;
}>("testEntity", { }>("testEntity", {
position: createVector(),
animations, animations,
animation: animations.idle, animation: animations.idle,
stuff: 1, stuff: 1,
}); });
animate((entity, ctx, delta) => { process((entity, _delta) => {
playAnimation(
ctx,
entity.animation,
entity.position.x,
entity.position.y,
delta,
);
});
process((entity, delta) => {
entity.position.x += entity.stuff * 0.5; entity.position.x += entity.stuff * 0.5;
if (entity.position.x > viewport.canvas.width - 16) { if (entity.position.x > viewport.canvas.width - 16) {
entity.stuff = -1; entity.stuff = -1;
game/scenes/barScene/data.json
+2
View File
@@ -5,10 +5,12 @@
"entities": [ "entities": [
{ {
"name": "hero", "name": "hero",
"init": {
"position": { "position": {
"x": 0, "x": 0,
"y": 0 "y": 0
} }
} }
}
] ]
} }
game/scenes/fooScene/data.json
+4
View File
@@ -5,17 +5,21 @@
"entities": [ "entities": [
{ {
"name": "hero", "name": "hero",
"init": {
"position": { "position": {
"x": 0, "x": 0,
"y": 0 "y": 0
} }
}
}, },
{ {
"name": "testEntity", "name": "testEntity",
"init": {
"position": { "position": {
"x": 24, "x": 24,
"y": 16 "y": 16
} }
} }
}
] ]
} }
game/scenes/testScene/data.json
+8 -2
View File
@@ -1,28 +1,34 @@
{ {
"name": "testScene", "name": "testScene",
"width": 80, "width": 240,
"height": 48, "height": 160,
"entities": [ "entities": [
{ {
"name": "hero", "name": "hero",
"init": {
"position": { "position": {
"x": 0, "x": 0,
"y": 0 "y": 0
} }
}
}, },
{ {
"name": "portal", "name": "portal",
"init": {
"position": { "position": {
"x": 16, "x": 16,
"y": 16 "y": 16
} }
}
}, },
{ {
"name": "testEntity", "name": "testEntity",
"init": {
"position": { "position": {
"x": 32, "x": 32,
"y": 32 "y": 32
} }
} }
}
] ]
} }
game/scenes/testScene/scene.ts
+7 -6
View File
@@ -1,6 +1,7 @@
import { strokeCircle } from "#/engine/Circle"; import { strokeCircle } from "#/engine/Circle.ts";
import { pointer } from "#/engine/Pointer.ts"; import { pointer } from "#/engine/Pointer.ts";
import { defineScene } from "#/engine/Scene.ts"; import { defineScene } from "#/engine/Scene.ts";
import type { Hero } from "#/game/entities/hero/entity.ts";
import data from "./data.json"; import data from "./data.json";
const { process, preProcess, linkScenes } = defineScene(data); const { process, preProcess, linkScenes } = defineScene(data);
@@ -8,14 +9,14 @@ const { process, preProcess, linkScenes } = defineScene(data);
linkScenes(["fooScene"] as const); linkScenes(["fooScene"] as const);
preProcess((entityInstanceMap) => { preProcess((entityInstanceMap) => {
const entity = entityInstanceMap.get(data.entities[0].name); const entry = entityInstanceMap.get("hero")!;
const instance = entity!.instances[0]; const instance = entry.instances[0] as Hero;
instance.position.x = data.width - 16; instance.position.x = data.width - instance.animation.sheet.frameHeight;
instance.position.y = data.height - 16; instance.position.y = data.height - instance.animation.sheet.frameWidth;
}); });
process((ctx, delta) => { process((ctx, _delta) => {
if (!pointer.isDown) { if (!pointer.isDown) {
strokeCircle(ctx, { strokeCircle(ctx, {
position: pointer.position, position: pointer.position,