highlight周りのtick関数を名前変更&移動

Author: na-trium-144

src/main.ts

@@ -1,4 +1,4 @@
-import { Application, Container, type Ticker } from "pixi.js";
+import { Application, Container, Sprite, type Ticker } from "pixi.js";
 import { derived, get, writable } from "svelte/store";
 import { Facing } from "./constants.ts";
 import { Grid, createCellsFromStageDefinition } from "./grid.ts";
@@ -32,19 +32,6 @@ export async function setup(
     }
   };
 
-  function tick() {
-    // highlight is re-rendered every tick
-    const highlight = Player.createHighlight(cx);
-    if (highlight) {
-      stage.addChild(highlight);
-    }
-    return () => {
-      if (highlight) {
-        stage.removeChild(highlight);
-      }
-    };
-  }
-
   // Create a new application
   const app = new Application();
   const stage = new Container();
@@ -104,11 +91,14 @@ export async function setup(
   const uiContext = derived([state, history], ([$state, $history]) => {
     return useUI($state, $history);
   });
+  const highlight = new Sprite();
+  stage.addChild(highlight);
   const cx: Context = {
     _stage_container: stage,
     grid,
     dynamic: {
       focus: null,
+      highlight,
       player: {
         // HACK: these values are immediately overwritten inside Player.init().
         sprite: null,
@@ -141,13 +131,7 @@ export async function setup(
   cx.dynamic.player = Player.init(cx, bunnyTexture);
   app.ticker.add(unlessPaused((ticker) => Player.tick(cx, ticker)));
 
-  let cleanup: undefined | (() => void) = undefined;
-  app.ticker.add(
-    unlessPaused(() => {
-      if (cleanup) cleanup();
-      cleanup = tick();
-    }),
-  );
+  app.ticker.add(unlessPaused(() => Player.highlightTick(cx)));
 
   // Append the application canvas to the document body
   el.appendChild(app.canvas);

src/player.ts

@@ -70,20 +70,24 @@ export function getCoords(cx: Context) {
   const y = Math.round((coords.y - marginY) / blockSize) - 1; // it was not working well so take my patch
   return { x, y };
 }
-export function createHighlight(cx: Context) {
+export function highlightTick(cx: Context) {
   const state = get(cx.state);
   const player = cx.dynamic.player;
+  const highlight = cx.dynamic.highlight;
   const { blockSize, marginY } = get(cx.config);
-  if (!player.holdingKeys[Inputs.Ctrl] || !player.onGround) return;
-  const texture =
+  if (!player.holdingKeys[Inputs.Ctrl] || !player.onGround) {
+    // no highlight
+    highlight.scale = 0;
+    return;
+  }
+  highlight.texture =
     state.inventory === null ? highlightTexture : highlightHoldTexture;
-  const highlight: Sprite = new Sprite(texture);
+  highlight.scale = 1;
   highlight.width = blockSize;
   highlight.height = blockSize;
   const highlightCoords = Ability.focusCoord(getCoords(cx), player.facing);
   highlight.x = highlightCoords.x * blockSize;
   highlight.y = highlightCoords.y * blockSize + marginY;
-  return highlight;
 }
 
 export function handleInput(

src/public-types.ts

@@ -63,6 +63,7 @@ export type Context = {
   // no need to serialize.
   dynamic: {
     focus: Coords | null; // current focus coordinates
+    highlight: Sprite;
     player: {
       holdingKeys: { [key in Inputs]?: boolean };
       coords: () => { x: number; y: number };