feat: Tutorial Image (wip)

Author: thoth333

public/assets/tutorial1.png

@@ -13,6 +13,9 @@ import {
   switchBaseTexture,
   switchPressedTexture,
   switchTexture,
+  tutorialImg1,
+  tutorialImg2,
+  tutorialImg3,
 } from "./resources.ts";
 import type { StageDefinition } from "./stages.ts";
 
@@ -793,6 +796,27 @@ function updateSprite(
   sprite.y = y * blockSize + marginY;
 }
 
+export function createTutorialSprite(
+  cx: { _stage_container: Container },
+  order: number,
+) {
+  let sprite = new Sprite(tutorialImg1);
+  switch (order) {
+    case 2:
+      sprite = new Sprite(tutorialImg2);
+      break;
+    case 3:
+      sprite = new Sprite(tutorialImg3);
+      break;
+  }
+  sprite.width = 200;
+  sprite.height = 200;
+  sprite.x = 500;
+  sprite.y = 100;
+  cx._stage_container.addChild(sprite);
+}
+//ToDo: 現在の仕様では、Escメニュー表示状態でも動き続ける。
+
 export function printCells(cells: GridCell[][], context?: string) {
   console.log(
     `${context ? context : "Grid"}:

public/assets/tutorial2.png

@@ -1,7 +1,11 @@
 import { Application, Container, type Ticker } from "pixi.js";
 import { derived, get, writable } from "svelte/store";
 import { Facing } from "./constants.ts";
-import { Grid, createCellsFromStageDefinition } from "./grid.ts";
+import {
+  Grid,
+  createCellsFromStageDefinition,
+  createTutorialSprite,
+} from "./grid.ts";
 import * as Player from "./player.ts";
 import type { Context, GameState, UIInfo } from "./public-types.ts";
 import { bunnyTexture } from "./resources.ts";
@@ -138,6 +142,19 @@ export async function setup(
     }),
   );
 
+  // Stage 1,2のチュートリアル表示実装機構
+  // Frm stands for Frames
+  let tutorialFrm = 0;
+  app.ticker.add((ticker) => {
+    tutorialFrm += ticker.deltaTime;
+    // 1秒ごとにチュートリアルの画像が変わる
+    createTutorialSprite(cx, Math.floor(tutorialFrm / 60 + 1));
+    if (tutorialFrm >= 180) {
+      tutorialFrm = 0;
+      //Todo: Stage 1,2のみにする
+    }
+  });
+
   cx.dynamic.player = Player.init(cx, bunnyTexture);
   app.ticker.add(unlessPaused((ticker) => Player.tick(cx, ticker)));
 

public/assets/tutorial3.png

@@ -12,3 +12,6 @@ export const highlightTexture = await Assets.load("/assets/highlight.svg");
 export const highlightHoldTexture = await Assets.load(
   "/assets/highlight-hold.webp",
 );
+export const tutorialImg1 = await Assets.load("/assets/tutorial1.png");
+export const tutorialImg2 = await Assets.load("/assets/tutorial2.png");
+export const tutorialImg3 = await Assets.load("/assets/tutorial3.png");