diff --git a/engine/system/animateSprites.ts b/engine/system/animateSprites.ts new file mode 100644 index 0000000..49034cc --- /dev/null +++ b/engine/system/animateSprites.ts @@ -0,0 +1,13 @@ +import $ from "#/engine/Scene.ts"; +import { + animateSprite, + type Sprite, + type SpritePlayback, +} from "#/engine/Sprite.ts"; + +export function animateSprites(delta: number) { + for (const [id, playback] of $("playback").entries()) { + const sprite = $("sprite").get(id)!; + animateSprite(sprite.value, playback.value, delta); + } +} diff --git a/engine/system/drawSprites.ts b/engine/system/drawSprites.ts new file mode 100644 index 0000000..af46e87 --- /dev/null +++ b/engine/system/drawSprites.ts @@ -0,0 +1,39 @@ +import type { Box } from "#/engine/Box.ts"; +import { sceneChangeSet, sceneComponentsMap } from "#/engine/Scene.ts"; +import { drawSprite, type Sprite, spriteSheetMap } from "#/engine/Sprite.ts"; +import type { Vector } from "#/engine/Vector.ts"; + +const drawables: Array<{ position: Box; sprite: Box }> = []; +sceneChangeSet.add((sceneData) => { + drawables.length = 0; + + const sprites = [ + ...sceneComponentsMap.get(sceneData.name)!.get("sprite")!.values(), + ] as Array>; + + sceneComponentsMap + .get(sceneData.name)! + .get("position")! + .values() + .forEach((box, index) => { + drawables.push({ + position: box as Box, + sprite: sprites[index], + }); + }); +}); + +export function drawSprites(ctx: CanvasRenderingContext2D) { + for (const drawable of drawables.sort( + (a, b) => a.position.value.y - b.position.value.y, + )) { + drawSprite( + ctx, + spriteSheetMap.get(drawable.sprite.value.src)!, + drawable.sprite.value.xStart, + drawable.sprite.value.yStart, + drawable.position.value.x, + drawable.position.value.y, + ); + } +} diff --git a/main.ts b/main.ts index 30061a2..964e0b9 100644 --- a/main.ts +++ b/main.ts @@ -1,20 +1,8 @@ -import type { Box } from "#/engine/Box.ts"; import { listenKeyboard } from "#/engine/Keyboard.ts"; import { listenPointer } from "#/engine/Pointer.ts"; -import $, { - currentScene, - sceneChangeSet, - sceneComponentsMap, - setScene, -} from "#/engine/Scene.ts"; -import { - animateSprite, - drawSprite, - type Sprite, - type SpritePlayback, - spriteSheetMap, -} from "#/engine/Sprite.ts"; -import type { Vector } from "#/engine/Vector.ts"; +import { currentScene, setScene } from "#/engine/Scene.ts"; +import { animateSprites } from "#/engine/system/animateSprites.ts"; +import { drawSprites } from "#/engine/system/drawSprites.ts"; import { initViewport, resetCtx, @@ -22,48 +10,6 @@ import { viewport, } from "#/engine/Viewport.ts"; -function animateSpriteSystem() { - for (const [id, playback] of $("playback").entries()) { - const sprite = $("sprite").get(id)!; - animateSprite(sprite.value, playback.value, delta); - } -} - -const drawables: Array<{ position: Box; sprite: Box }> = []; -sceneChangeSet.add((sceneData) => { - drawables.length = 0; - - const sprites = [ - ...sceneComponentsMap.get(sceneData.name)!.get("sprite")!.values(), - ] as Array>; - - sceneComponentsMap - .get(sceneData.name)! - .get("position")! - .values() - .forEach((box, index) => { - drawables.push({ - position: box as Box, - sprite: sprites[index], - }); - }); -}); - -function drawSpriteSystem() { - for (const drawable of drawables.sort( - (a, b) => a.position.value.y - b.position.value.y, - )) { - drawSprite( - viewport.ctx, - spriteSheetMap.get(drawable.sprite.value.src)!, - drawable.sprite.value.xStart, - drawable.sprite.value.yStart, - drawable.position.value.x, - drawable.position.value.y, - ); - } -} - let then = self.performance.now(); let delta = 0; function animate(timestamp: number): void { @@ -73,8 +19,8 @@ function animate(timestamp: number): void { resetCtx(); currentScene.process(viewport.ctx, delta); - animateSpriteSystem(); - drawSpriteSystem(); + animateSprites(delta); + drawSprites(viewport.ctx); requestAnimationFrame(animate); }