diff --git a/engine/Pointer.ts b/engine/Pointer.ts index 743df2a..f265657 100644 --- a/engine/Pointer.ts +++ b/engine/Pointer.ts @@ -63,13 +63,14 @@ function adjustPointerPosition( export function listenPointer(): () => void { const canvas = viewport.ctx.canvas; + const options = { passive: true }; - canvas.addEventListener("mousedown", onMouseDown); - canvas.addEventListener("touchstart", onTouchStart); - canvas.addEventListener("mousemove", onMouseMove); - canvas.addEventListener("touchmove", onTouchMove); - canvas.addEventListener("mouseup", onMouseUp); - canvas.addEventListener("touchend", onTouchEnd); + canvas.addEventListener("mousedown", onMouseDown, options); + canvas.addEventListener("touchstart", onTouchStart, options); + canvas.addEventListener("mousemove", onMouseMove, options); + canvas.addEventListener("touchmove", onTouchMove, options); + canvas.addEventListener("mouseup", onMouseUp, options); + canvas.addEventListener("touchend", onTouchEnd, options); canvas.addEventListener("contextmenu", onContextMenu); return () => { diff --git a/engine/Scene.ts b/engine/Scene.ts index 83ad7b1..0820e72 100644 --- a/engine/Scene.ts +++ b/engine/Scene.ts @@ -18,7 +18,7 @@ export type SceneData = { entities: Array; }; -export type EntityInstanceMap = Map< +export type EntityMap = Map< string, { process: ProcessEntity; @@ -28,13 +28,13 @@ export type EntityInstanceMap = Map< export type Scene = { data: SceneData; - entityInstanceMap: EntityInstanceMap; + entityMap: EntityMap; process: Process; }; export type Process = (ctx: CanvasRenderingContext2D, delta: number) => void; -export type PreProcess = (entityInstanceMap: EntityInstanceMap) => void; -export type PostProcess = (entityInstanceMap: EntityInstanceMap) => void; +export type PreProcess = (entityMap: EntityMap) => void; +export type PostProcess = (entityMap: EntityMap) => void; export type SceneChangeHandler = (to: SceneData, from: SceneData) => void; @@ -45,7 +45,7 @@ export const scenePostProcessMap = new Map(); export const sceneChangedHandlers = new Set(); export const sceneDataMap = new Map(); -export const sceneEntiyInstanceMap = new Map(); +export const sceneEntiyMap = new Map(); export const sceneGraph: Graph = new Map(); const sceneInstancesMap = new Map>(); @@ -55,7 +55,7 @@ export const [loadScene, sceneCache] = useWithAsyncCache( await import(`#/game/scenes/${name}/scene.ts`); const data = sceneDataMap.get(name)!; - const entityInstanceMap = sceneEntiyInstanceMap.get(name)!; + const entityInstanceMap = sceneEntiyMap.get(name)!; entityInstanceMap.clear(); await Promise.all( @@ -92,24 +92,13 @@ export const currentScene: Scene = { entities: [], }, process: () => {}, - entityInstanceMap: new Map(), + entityMap: new Map(), }; -// function animateEntities(ctx: CanvasRenderingContext2D, delta: number): void { -// const instances = sceneInstancesMap.get(currentScene.data.name)!; -// instances.sort((a, b) => a.position.y - b.position.y); - -// for (const instance of instances) { -// currentScene.entityInstanceMap -// .get(instance.name)! -// .animate(instance as Entity, ctx, delta); -// } -// } - function processEntities(delta: number): void { - for (const entity of currentScene.entityInstanceMap.values()) { - for (const instance of entity.instances) { - entity.process(instance, delta); + for (const entry of currentScene.entityMap.values()) { + for (const instance of entry.instances) { + entry.process(instance, delta); } } } @@ -131,7 +120,7 @@ export function defineScene(data: SceneData): { postProcess: (fn: PostProcess) => void; } { sceneDataMap.set(data.name, data); - sceneEntiyInstanceMap.set(data.name, new Map()); + sceneEntiyMap.set(data.name, new Map()); return { linkScenes(ids) { @@ -145,15 +134,14 @@ export function defineScene(data: SceneData): { }, process(fn) { sceneProcessMap.set(data.name, (ctx, delta) => { - processEntities(delta); fn(ctx, delta); - // animateEntities(ctx, delta); + processEntities(delta); }); }, - preProcess(fn): void { + preProcess(fn) { scenePreProcessMap.set(data.name, fn); }, - postProcess(fn): void { + postProcess(fn) { scenePostProcessMap.set(data.name, fn); }, }; @@ -169,7 +157,7 @@ export async function setScene(name: string): Promise { const data = sceneDataMap.get(name)!; const process = sceneProcessMap.get(name)!; - const entityInstanceMap = sceneEntiyInstanceMap.get(name)!; + const entityInstanceMap = sceneEntiyMap.get(name)!; sceneInstancesMap.set( data.name, entityInstanceMap.values().reduce( @@ -185,12 +173,12 @@ export async function setScene(name: string): Promise { const preProcess = scenePreProcessMap.get(name); if (preProcess) { - preProcess(sceneEntiyInstanceMap.get(name)!); + preProcess(sceneEntiyMap.get(name)!); } const postProcess = scenePostProcessMap.get(currentScene.data.name); if (postProcess) { - postProcess(sceneEntiyInstanceMap.get(name)!); + postProcess(sceneEntiyMap.get(name)!); } currentScene.data = data; @@ -198,7 +186,7 @@ export async function setScene(name: string): Promise { currentScene.process = process; - currentScene.entityInstanceMap = entityInstanceMap; + currentScene.entityMap = entityInstanceMap; for (const handler of sceneChangedHandlers.values()) { handler(data, currentScene.data); diff --git a/game/scenes/testScene/scene.ts b/game/scenes/testScene/scene.ts index 56d529d..fab35f3 100644 --- a/game/scenes/testScene/scene.ts +++ b/game/scenes/testScene/scene.ts @@ -1,7 +1,8 @@ -import { strokeCircle } from "#/engine/Circle.ts"; +import { createCircle, strokeCircle } from "#/engine/Circle.ts"; import { pointer } from "#/engine/Pointer.ts"; import { defineScene } from "#/engine/Scene.ts"; import { spriteSheetMap } from "#/engine/Sprite.ts"; +import { createVector } from "#/engine/Vector"; import type { Hero } from "#/game/entities/hero/entity.ts"; import data from "./data.json"; @@ -18,11 +19,11 @@ preProcess((entityInstanceMap) => { instance.position.y = data.height - sheet.frameWidth; }); +const cirle = createCircle(createVector(), 4); process((ctx, _delta) => { if (!pointer.isDown) { - strokeCircle(ctx, { - position: pointer.position, - radius: 4, - }); + cirle.position.x = pointer.position.x; + cirle.position.y = pointer.position.y; + strokeCircle(ctx, cirle); } });