Skip to content

feat: add Smalruby original sprites (Shimaraby & Shimacat) to sprite library #337

Description

@takaokouji

Goal

スモウルビーオリジナルのスプライト2体(Shimaraby, Shimacat)をスプライトライブラリに追加する。アセットは Scratch CDN に依存せず、ローカルバンドルで配信する。

スプライト仕様

Sprite Name Costumes Sound Tags
シマラビ Shimaraby Shimaraby1.png, Shimaraby2.png Chirp animals
シマネコ Shimacat Shimacat1.png, Shimacat2.png Meow animals
  • コスチューム画像は bitmapResolution=2 で ~190x200px にリサイズ(表示上 ~95x100px、Cat スプライト相当)
  • キャラクターの中心が画像の中心になるように余白を調整
  • rotationCenter は画像の中心

Affected Files

  • static/smalruby-assets/*.png — リサイズ済みコスチューム画像(新規、4ファイル)
  • packages/scratch-gui/src/lib/legacy-storage.ts — WebStore 追加(ローカルアセット配信)
  • packages/scratch-gui/src/lib/libraries/sprites.json — スプライトエントリ追加
  • packages/scratch-gui/src/components/library/library.jsxgetItemIcons のローカルアセット対応(rawURL 利用)

Implementation Steps

Phase 1: 画像準備 & 静的アセット配置

  • 元画像(Shimaraby1.png, Shimaraby2.png, Shimacat1.png, Shimacat2.png)をリサイズ(~190x200px)、キャラクター中心を画像中心に調整
  • static/smalruby-assets/ に配置
  • md5 ハッシュを計算
  • feat: add Shimaraby and Shimacat costume assets

Phase 2: ローカルアセット配信インフラ

  • legacy-storage.tsaddOfficialScratchWebStores に WebStore 追加(static/smalruby-assets/
  • Smalruby マーカーコメントで囲む
  • lint 確認
  • feat: add WebStore for local smalruby sprite assets

Phase 3: スプライトライブラリエントリ追加

  • sprites.json に Shimaraby / Shimacat エントリ追加
  • 各コスチュームに rawURL フィールド追加(ローカルサムネイル用)
  • サウンドは既存アセット(Chirp: 3b8236bbb288019d93ae38362e865972.wav, Meow: 83c36d806dc92327b9e7049a565c6bff.wav)を参照
  • lint + テスト確認
  • feat: add Shimaraby and Shimacat to sprite library

Phase Final: Integration Tests & Browser Verification

  • ブラウザでのスプライト追加動作の回帰テスト
  • test: add integration tests for custom sprite loading

Definition of Done

  • ユニットテスト pass
  • Integration テスト pass
  • lint pass
  • CI green
  • ブラウザ確認(Playwright MCP):
    • スプライトライブラリを開き、Shimaraby と Shimacat がサムネイル付きで表示される
    • Shimaraby を選択してステージに追加できる(コスチュームが正しく表示される)
    • Shimacat を選択してステージに追加できる(コスチュームが正しく表示される)
    • コスチュームタブで2つのコスチュームが切り替えられる
    • 音声が正しく紐づいている(Chirp / Meow)

Test Plan

Type Timing Target
Unit tests (TDD) Before implementation (RED → GREEN) sprites.json のエントリ存在確認
Integration tests After implementation スプライト追加・コスチューム表示
Browser verification After CI green Playwright MCP で DoD 確認

Risks & Open Questions

  1. rawURL の相対パス解決: rawURLstatic/smalruby-assets/... と書いた場合、webpack-dev-server と本番環境の両方で正しく解決されるか確認が必要。static/ ディレクトリは webpack の CopyPlugin でコピーされるはずだが、実装時に検証する。
  2. scratch-storage の WebStore フォールバック順序: CDN 404 後にローカルストアが試行されるまでの遅延。ライブラリ表示は rawURL で直接読むので影響なし、スプライト追加時のみの問題。許容範囲と判断。

設計メモ

ローカルアセット配信の仕組み

サムネイル表示: library.jsxgetItemIcons はコスチュームに rawURL フィールドがあればそれを直接使用(既存の仕組み)。

スプライト追加時: legacy-storage.ts に追加する WebStore が static/smalruby-assets/{assetId}.{dataFormat} からアセットを提供。scratch-storage は登録順にストアを試行するため、Scratch CDN にないアセットはローカルストアにフォールバックする。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions