ピクセルアート・アセット仕様 / Pixel Art Asset Specification

本ドキュメントでは、フロントエンド（PixiJS v8）で使用するすべてのピクセルアートアセットの仕様を定義する。スプライト、タイルマップ、アニメーション、エフェクト、表示スケーリングを含む。

This document defines all pixel art asset specifications used by the frontend (PixiJS v8) renderer, including sprites, tilemaps, animations, effects, and display scaling.

1. ビューポート方式 / Viewport Style

決定: トップダウン（見下ろし型）/ Decision: Top-Down View

MVP ではトップダウン（見下ろし型）を採用する。

For MVP, the top-down (overhead) view is adopted.

比較項目 / Criteria	Top-Down	Isometric
実装コスト / Implementation cost	低い / Low	高い / High
タイル配置ロジック / Tile placement logic	単純な2Dグリッド / Simple 2D grid	菱形変換が必要 / Diamond transform required
A* パスファインディング / A* pathfinding	標準的 / Standard	斜め座標変換が必要 / Diagonal coord transform needed
アセット制作コスト / Asset creation cost	低い / Low	高い（各角度の描画）/ High (multi-angle drawing)
家具配置の直感性 / Furniture placement intuition	良い / Good	非常に良い / Very good
奥行き表現 / Depth perception	弱い / Weak	良い / Good
MVP 推奨 / MVP recommendation	採用 / Adopted	Phase 2 以降で検討 / Consider in Phase 2+

Why Top-Down for MVP?

32x32 タイルの見下ろし型は、レトロゲーム風ピクセルアートとの相性が最も良く、A* パスファインディングや家具配置ロジックを最小コストで実装できる。アイソメトリックへの移行は Phase 2 以降のオプションとして残す。

32x32 top-down tiles have the best compatibility with retro-style pixel art, and minimize A* pathfinding and furniture placement logic implementation cost. Migration to isometric is left as a Phase 2+ option.

画面解像度 / Screen Resolution

項目 / Item	値 / Value	備考 / Notes
キャンバスサイズ / Canvas size	1280 x 720 px	OBS Browser Source 標準 / OBS standard
ゲームビュー領域 / Game view area	1024 x 640 px	UI オーバーレイ部分を除く / Excluding UI overlay
UI オーバーレイ領域 / UI overlay area	1280 x 80 px (上部) + 256 x 640 px (右部)	ステータスバー + サイドパネル / Status bar + side panel
ピクセルパーフェクト / Pixel-perfect	有効 / Enabled	`PIXI.BaseTexture.defaultOptions.scaleMode = 'nearest'`

2. タイルマップ仕様 / Tilemap Specification

2.1 タイル基本設定 / Tile Base Configuration

項目 / Item	値 / Value	備考 / Notes
タイルサイズ（原寸）/ Tile size (native)	32 x 32 px	アセット制作時のサイズ / Asset creation size
表示スケール / Display scale	2x	32px → 64px on screen
表示タイルサイズ / Display tile size	64 x 64 px	画面上での1タイルのサイズ / On-screen tile size

2.2 レイヤー構成 / Layer Composition

タイルマップは以下のレイヤーで構成する。PixiJS の Container として z-index 順に重ねる。

The tilemap is composed of the following layers, stacked as PixiJS Container objects in z-index order.

z-index	レイヤー名 / Layer Name	内容 / Contents	備考 / Notes
0	`floor`	床タイル / Floor tiles	フローリング、畳、キッチンタイル / Flooring, tatami, kitchen tile
1	`walls`	壁・ドア / Walls & doors	部屋の境界 / Room boundaries
2	`furniture-base`	家具（下層）/ Furniture (lower)	ラグ、布団（キャラより下に描画）/ Rug, futon (drawn below characters)
3	`characters`	キャラクタースプライト / Character sprites	John, Sara, Eve
4	`furniture-top`	家具（上層）/ Furniture (upper)	テーブル上の物、棚の上段 / Table-top items, upper shelves
5	`effects`	投げ銭エフェクト / Tip effects	パーティクル、バナー / Particles, banners
6	`ui`	UI 要素 / UI elements	吹き出し、ステータスバー / Speech bubbles, status bar

2.3 1K ルームタイルレイアウト / 1K Room Tile Layout

1K（ワンルーム + キッチン）の初期レイアウト。

Initial layout for the 1K apartment (one room + kitchen).

ルームサイズ / Room Size

項目 / Item	タイル数 / Tiles	ピクセル数（原寸）/ Pixels (native)	ピクセル数（表示）/ Pixels (display 2x)
幅 / Width	16 tiles	512 px	1024 px
高さ / Height	10 tiles	320 px	640 px
合計 / Total	160 tiles	—	ゲームビュー領域に収まる / Fits game view area

タイルマップ（16x10 グリッド）/ Tile Map (16x10 Grid)

Row  0: [WL][WL][WL][WL][WL][WW][WW][WW][WL][WL][WL][WL][WL][WL][WL][WL]
Row  1: [WL][FF][FF][FF][FF][  ][  ][  ][FF][FF][FF][FF][FF][FF][FF][WL]
Row  2: [WL][FF][FF][FF][FF][  ][  ][  ][FF][FF][FF][FF][FF][FF][FF][WL]
Row  3: [WL][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][WL]
Row  4: [WL][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][WL]
Row  5: [WL][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][WL]
Row  6: [WL][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][WL]
Row  7: [WL][KT][KT][KT][KT][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][WL]
Row  8: [WL][KT][KT][KT][KT][FF][FF][FF][FF][FF][FF][FF][FF][FF][FF][WL]
Row  9: [WL][WL][WL][WL][WL][WL][DR][DR][WL][WL][WL][WL][WL][WL][WL][WL]

記号 / Symbol	意味 / Meaning	タイルID / Tile ID
`WL`	壁 / Wall	`wall_default`
`WW`	窓付き壁 / Wall with window	`wall_window`
`FF`	フローリング床 / Flooring floor	`floor_wood`
`KT`	キッチンタイル床 / Kitchen tile floor	`floor_kitchen`
`DR`	ドア / Door	`door_entrance`
	窓際の床（日光あり）/ Window-side floor (sunlit)	`floor_wood_sunlit`

初期家具配置 / Initial Furniture Placement

MVP 開始時に配置される最低限の家具。投げ銭なしでも生活が成り立つ最小セット。

Minimum furniture placed at MVP start. The smallest set that allows life to function without tips.

Row  0: [WL][WL][WL][WL][WL][WW][WW][WW][WL][WL][WL][WL][WL][WL][WL][WL]
Row  1: [WL][  ][  ][  ][  ][ S][ S][  ][  ][  ][  ][  ][  ][  ][FN][WL]
Row  2: [WL][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][TB][  ][  ][FN][WL]
Row  3: [WL][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][WL]
Row  4: [WL][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][DB][DB][WL]
Row  5: [WL][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][WL]
Row  6: [WL][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][WL]
Row  7: [WL][SK][RF][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][WL]
Row  8: [WL][SK][RF][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][  ][WL]
Row  9: [WL][WL][WL][WL][WL][WL][DR][DR][WL][WL][WL][WL][WL][WL][WL][WL]

記号 / Symbol	家具 / Furniture	サイズ / Size (tiles)	タイルID / Tile ID
`FN`	布団（2人用）/ Futon (for two)	1x2	`furn_futon`
`TB`	ちゃぶ台 / Low table	1x1	`furn_low_table`
`DB`	犬用ベッド / Dog bed	2x1	`furn_dog_bed`
`SK`	シンク / Kitchen sink	1x2	`furn_sink`
`RF`	冷蔵庫（小型）/ Small fridge	1x2	`furn_fridge`
`S`	物干し竿（窓際）/ Drying pole (by window)	2x1	`furn_drying_pole`

2.4 2DK ルームレイアウト（Phase 2）/ 2DK Room Layout (Phase 2)

Phase 2 以降

2DK への引っ越し（2,000 LC）でアンロックされる拡張マップ。詳細レイアウトは Phase 2 設計時に定義する。概要のみ記載。

2DK expansion map unlocked by the moving event (2,000 LC). Detailed layout will be defined during Phase 2 design. Overview only.

項目 / Item	値 / Value
全体サイズ / Total size	24 x 14 tiles
部屋1（リビング）/ Room 1 (Living)	12 x 10 tiles
部屋2（寝室）/ Room 2 (Bedroom)	8 x 8 tiles
キッチン / Kitchen	6 x 4 tiles
廊下 / Hallway	2 x 10 tiles

3. スプライトシート仕様 / Spritesheet Specification

3.1 キャラクタースプライト共通仕様 / Character Sprite Common Spec

項目 / Item	値 / Value	備考 / Notes
フレームサイズ（原寸）/ Frame size (native)	32 x 32 px	1タイルと同サイズ / Same as 1 tile
表示サイズ / Display size	64 x 64 px	2x スケール / 2x scale
方向数 / Directions	4（下・左・右・上）/ 4 (down, left, right, up)	MVP 仕様。8方向は Phase 2 で検討 / MVP spec. 8-dir in Phase 2
カラーパレット / Color palette	最大16色/キャラ / Max 16 colors per character	レトロ風制約 / Retro-style constraint
背景 / Background	透過 (alpha = 0)	PNG 形式 / PNG format
ファイル形式 / File format	PNG (spritesheet) + JSON (atlas)	TexturePacker / ShoeBox 出力 / Output

3.2 方向規則 / Direction Convention

4方向スプライトの行割り当て。スプライトシート内で各方向は行（row）で分類する。

Row assignment for 4-directional sprites. Each direction occupies a row in the spritesheet.

Row	方向 / Direction	向き / Facing	使用場面 / Usage
0	下 / Down	画面手前向き / Toward camera	デフォルト表示 / Default display
1	左 / Left	画面左向き / Facing left	左方向移動時 / Moving left
2	右 / Right	画面右向き / Facing right	右方向移動時 / Moving right
3	上 / Up	画面奥向き / Away from camera	上方向移動時 / Moving up

左右ミラーリング / Left-Right Mirroring

アセット制作を省力化するため、左方向スプライトを水平反転して右方向として使用可能。ただし非対称デザイン（例: Sara の髪型）がある場合は個別に描く。

To reduce asset creation effort, left-facing sprites can be horizontally flipped to serve as right-facing. However, asymmetric designs (e.g., Sara's hairstyle) should be drawn individually.

3.3 John スプライトシート / John Spritesheet

26歳のフリーランスWebエンジニア。カジュアルな服装（Tシャツ + ジーンズ）。茶髪の短髪。

26-year-old freelance web engineer. Casual outfit (T-shirt + jeans). Short brown hair.

ファイル / File	`characters/john_spritesheet.png`
シートサイズ / Sheet size	256 x 256 px (8 cols x 8 rows)
フレームサイズ / Frame size	32 x 32 px

フレーム配置 / Frame Layout

Row	方向 / Dir	Col 0	Col 1	Col 2	Col 3	Col 4	Col 5	Col 6	Col 7
0	Down	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
1	Left	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
2	Right	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
3	Up	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
4	—	sit_0	sit_1	eat_0	eat_1	eat_2	eat_3	—	—
5	—	sleep_0	sleep_1	sleep_2	sleep_3	—	—	—	—
6	—	react_surprise	react_happy	react_sad	react_angry	react_embarrass	—	—	—
7	—	tip_react_0	tip_react_1	tip_react_2	tip_react_3	—	—	—	—

3.4 Sara スプライトシート / Sara Spritesheet

25歳のカフェスタッフ（パートタイム）。明るい雰囲気の服装（ブラウス + スカート）。ロングヘア。

25-year-old cafe staff (part-time). Bright outfit (blouse + skirt). Long hair.

ファイル / File	`characters/sara_spritesheet.png`
シートサイズ / Sheet size	256 x 256 px (8 cols x 8 rows)
フレームサイズ / Frame size	32 x 32 px

フレーム配置 / Frame Layout

Row	方向 / Dir	Col 0	Col 1	Col 2	Col 3	Col 4	Col 5	Col 6	Col 7
0	Down	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
1	Left	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
2	Right	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
3	Up	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
4	—	sit_0	sit_1	eat_0	eat_1	eat_2	eat_3	cook_0	cook_1
5	—	sleep_0	sleep_1	sleep_2	sleep_3	—	—	—	—
6	—	react_surprise	react_happy	react_sad	react_angry	react_embarrass	react_love	—	—
7	—	tip_react_0	tip_react_1	tip_react_2	tip_react_3	—	—	—	—

3.5 Eve スプライトシート / Eve Spritesheet

2歳メスの赤柴犬。四足歩行のため人間キャラとは異なるフレーム構成。

2-year-old female red Shiba Inu. Different frame structure from human characters due to quadruped movement.

ファイル / File	`characters/eve_spritesheet.png`
シートサイズ / Sheet size	256 x 256 px (8 cols x 8 rows)
フレームサイズ / Frame size	32 x 32 px

フレーム配置 / Frame Layout

Row	方向 / Dir	Col 0	Col 1	Col 2	Col 3	Col 4	Col 5	Col 6	Col 7
0	Down	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
1	Left	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
2	Right	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
3	Up	walk_0	walk_1	walk_2	walk_3	stand	—	—	—
4	—	sit_0	sit_1	eat_0	eat_1	eat_2	eat_3	—	—
5	—	sleep_0	sleep_1	sleep_2	sleep_3	—	—	—	—
6	—	tail_wag_0	tail_wag_1	tail_wag_2	tail_wag_3	bark_0	bark_1	head_tilt	sniff
7	—	belly_up	paw_shake	jump_0	jump_1	whine	—	—	—

4. MVP アニメーション仕様 / MVP Animation Specification

4.1 アニメーション共通設定 / Animation Common Settings

項目 / Item	値 / Value	備考 / Notes
フレームレート / Frame rate	8 FPS (アニメーション) / 60 FPS (描画)	スプライトアニメは 8FPS、PixiJS 描画ループは 60FPS / Sprite animation at 8FPS, PixiJS render loop at 60FPS
ループ方式 / Loop method	ping-pong または loop / ping-pong or loop	アニメーションごとに指定 / Specified per animation
移動速度 / Movement speed	2 tiles/sec (64 px/sec on screen)	A* パスに沿って移動 / Move along A* path

4.2 5つの MVP アニメーション / 5 MVP Animations

4.2.1 Walk（歩行 / 歩く）

キャラクターが A* パスに沿ってタイル間を移動する際のアニメーション。

Animation for characters moving between tiles along an A* path.

項目 / Item	値 / Value
フレーム数 / Frame count	4
方向別フレーム / Per-direction frames	4方向 x 4フレーム = 16フレーム / 4 dirs x 4 frames = 16 frames
ループ方式 / Loop type	loop
フレーム速度 / Frame speed	8 FPS
移動速度 / Move speed	2 tiles/sec

フレーム遷移 / Frame transition:
  walk_0 (右足前) → walk_1 (中間) → walk_2 (左足前) → walk_3 (中間) → loop
  walk_0 (right foot forward) → walk_1 (mid) → walk_2 (left foot forward) → walk_3 (mid) → loop

Eve の歩行 / Eve's Walk: 四足歩行のため、前足と後足が交互に動くパターン。

Quadruped pattern with alternating front and back legs.

  walk_0 (左前足+右後足) → walk_1 (中間) → walk_2 (右前足+左後足) → walk_3 (中間) → loop
  walk_0 (left-front + right-back) → walk_1 (mid) → walk_2 (right-front + left-back) → walk_3 (mid) → loop

4.2.2 Stand（立ち / 待機）

アイドル状態のキャラクター。微細な呼吸アニメーションで「生きている感」を出す。

Idle character. Subtle breathing animation for a "living" feel.

項目 / Item	値 / Value
フレーム数 / Frame count	1 (静止) + 呼吸エフェクト / 1 (static) + breathing effect
方向別フレーム / Per-direction frames	4方向 x 1フレーム = 4フレーム / 4 dirs x 1 frame = 4 frames
ループ方式 / Loop type	N/A（単一フレーム + Y 座標の微動）/ N/A (single frame + subtle Y offset)
呼吸アニメーション / Breathing animation	Y 座標を ±1px で 2秒周期で上下 / Y offset ±1px with 2-second cycle

typescript

// 呼吸エフェクト実装例 / Breathing effect implementation example
const breathOffset = Math.sin(elapsed * Math.PI) * 1  // ±1px
sprite.y = baseY + breathOffset

Eve の待機 / Eve's Stand: お座りポーズ。尻尾が定期的に揺れる（tail_wag フレームを低頻度で挿入）。

Sitting pose. Tail wags periodically (insert tail_wag frames at low frequency).

4.2.3 Sit（座り）

ちゃぶ台の横に座る、ソファに座る等のアニメーション。

Animation for sitting at the low table, on the sofa, etc.

項目 / Item	値 / Value
フレーム数 / Frame count	2（座り始め + 座り状態）/ 2 (sitting-down + seated)
方向 / Direction	下向き固定（テーブルに向かって座る）/ Fixed downward (facing table)
ループ方式 / Loop type	遷移後に静止 / Static after transition
遷移時間 / Transition time	0.25 sec (2 frames at 8 FPS)

フレーム遷移 / Frame transition:
  sit_0 (腰を下ろす途中) → sit_1 (着座完了) → hold
  sit_0 (lowering) → sit_1 (seated) → hold

Eve の座り / Eve's Sit: 「お座り」ポーズ。前足を揃えて座る。

"Sit" command pose. Front paws together.

4.2.4 Sleep（睡眠）

布団で寝るアニメーション。Zzz エフェクトと組み合わせる。

Animation for sleeping in futon. Combined with Zzz particle effect.

項目 / Item	値 / Value
フレーム数 / Frame count	4（呼吸サイクル）/ 4 (breathing cycle)
方向 / Direction	横向き固定 / Fixed sideways
ループ方式 / Loop type	ping-pong
フレーム速度 / Frame speed	4 FPS（ゆっくり）/ 4 FPS (slow)
追加エフェクト / Additional effect	Zzz パーティクル（後述）/ Zzz particle (see below)

フレーム遷移 / Frame transition:
  sleep_0 (息を吐く) → sleep_1 → sleep_2 (息を吸う) → sleep_3 → ping-pong
  sleep_0 (exhale) → sleep_1 → sleep_2 (inhale) → sleep_3 → ping-pong

Eve の睡眠 / Eve's Sleep: 丸まって寝るポーズ。時折耳がピクッと動く（ランダムトリガー）。

Curled-up sleeping pose. Occasional ear twitch (random trigger).

4.2.5 Eat（食事）

テーブルで食事をするアニメーション。

Animation for eating at the table.

項目 / Item	値 / Value
フレーム数 / Frame count	4（箸で食べるサイクル）/ 4 (eating with chopsticks cycle)
方向 / Direction	下向き固定（テーブルに向かって）/ Fixed downward (facing table)
ループ方式 / Loop type	loop
フレーム速度 / Frame speed	6 FPS
持続時間 / Duration	アクション終了まで / Until action ends

フレーム遷移 / Frame transition:
  eat_0 (箸を持つ) → eat_1 (食べ物を掴む) → eat_2 (口へ運ぶ) → eat_3 (咀嚼) → loop
  eat_0 (hold chopsticks) → eat_1 (pick up food) → eat_2 (bring to mouth) → eat_3 (chew) → loop

Eve の食事 / Eve's Eat: 犬用フードボウルから食べるポーズ。頭を下げてガツガツ食べる。

Eating from dog food bowl. Head down, eating eagerly.

  eat_0 (ボウルに近づく) → eat_1 (頭を下げる) → eat_2 (食べる) → eat_3 (顔を上げる) → loop
  eat_0 (approach bowl) → eat_1 (lower head) → eat_2 (eating) → eat_3 (raise head) → loop

4.3 アニメーション状態遷移 / Animation State Machine

                    ┌──────────┐
                    │  Stand   │◄───────────────────────────┐
                    └────┬─────┘                            │
                         │                                  │
              ┌──────────┼──────────┬──────────┐           │
              ▼          ▼          ▼          ▼           │
         ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐     │
         │  Walk  │ │  Sit   │ │ Sleep  │ │  Eat   │     │
         └────┬───┘ └────┬───┘ └────┬───┘ └────┬───┘     │
              │          │          │          │           │
              └──────────┴──────────┴──────────┴───────────┘
                                    │
                         ┌──────────┴──────────┐
                         ▼                      ▼
                   ┌──────────┐          ┌──────────┐
                   │ TipReact │          │ Reaction │
                   │(interrupt)│         │(emotion) │
                   └──────────┘          └──────────┘

遷移 / Transition	条件 / Condition	遷移時間 / Duration
Stand → Walk	AI が移動先を決定 / AI decides destination	即座 / Immediate
Walk → Stand	目的地に到着 / Arrived at destination	即座 / Immediate
Stand → Sit	AI が「座る」を選択 / AI chooses "sit"	0.25 sec
Stand → Sleep	AI が「寝る」を選択 / AI chooses "sleep"	0.5 sec
Stand → Eat	AI が「食べる」を選択 / AI chooses "eat"	0.25 sec
Any → TipReact	投げ銭受信（割り込み）/ Tip received (interrupt)	即座 / Immediate
TipReact → 前の状態 / Previous state	リアクション完了 / Reaction complete	0.5 sec

5. Tier 1 アイテムスプライト一覧 / Tier 1 Item Sprites List

5.1 アイテムスプライト共通仕様 / Item Sprite Common Spec

項目 / Item	値 / Value	備考 / Notes
フレームサイズ（原寸）/ Frame size (native)	16 x 16 px	タイルの半分 / Half tile size
表示サイズ / Display size	32 x 32 px	2x スケール / 2x scale
ファイル形式 / File format	PNG (spritesheet)	1シートにまとめる / Combined in one sheet
スプライトシート / Spritesheet	`items/tier1_items.png`	—

5.2 Tier 1 アイテム一覧（100〜400 LC）/ Tier 1 Item List (100-400 LC)

#	アイテム / Item	LC	スプライトID / Sprite ID	サイズ (tiles)	配置タイプ / Placement Type	カテゴリ / Category
1	カップ麺 / Cup noodles	100	`item_cup_noodles`	16x16	テーブル上 / On table	Food
2	缶コーヒー / Canned coffee	100	`item_canned_coffee`	16x16	テーブル上 / On table	Drink
3	ティッシュ / Tissues	100	`item_tissues`	16x16	テーブル上 / On table	Daily
4	卵パック / Egg pack	150	`item_egg_pack`	16x16	冷蔵庫内（非表示）/ In fridge (hidden)	Food
5	犬用おやつ / Dog treats	200	`item_dog_treats`	16x16	犬ベッド横 / Near dog bed	Pet
6	コンビニスイーツ / Convenience store sweets	200	`item_sweets`	16x16	テーブル上 / On table	Food
7	エナジードリンク / Energy drink	200	`item_energy_drink`	16x16	テーブル上 / On table	Drink
8	お米5kg / Rice 5kg	300	`item_rice_bag`	16x16	キッチン棚 / Kitchen shelf	Food
9	花一輪 / Single flower	300	`item_flower`	16x16	テーブル上（花瓶）/ On table (vase)	Interior
10	犬用ボール / Dog ball	300	`item_dog_ball`	16x16	床（転がる）/ Floor (rolling)	Pet
11	調味料セット / Seasoning set	400	`item_seasoning`	16x16	キッチン棚 / Kitchen shelf	Food
12	クッション / Cushion	400	`item_cushion`	16x16	床 / Floor	Interior

5.3 Tier 2 家具スプライト（500 LC 〜、参考）/ Tier 2 Furniture Sprites (500 LC+, Reference)

Tier 2 以降の家具は 32x32 以上のスプライトサイズを使用する。

Tier 2+ furniture uses sprite sizes of 32x32 or larger.

アイテム / Item	LC	スプライトID / Sprite ID	サイズ (tiles)	ファイル / File
こたつ / Kotatsu	500	`furn_kotatsu`	2x2	`items/furniture_tier2.png`
ボードゲーム / Board game	500	`item_board_game`	1x1	`items/tier2_items.png`
犬用おもちゃセット / Dog toy set	500	`item_dog_toys`	1x1	`items/tier2_items.png`
炊飯器 / Rice cooker upgrade	600	`item_rice_cooker`	1x1	`items/tier2_items.png`
本棚 / Bookshelf	700	`furn_bookshelf`	1x2	`items/furniture_tier2.png`

6. 投げ銭エフェクトアセット / Tip Effect Visual Assets

6.1 エフェクト概要 / Effect Overview

投げ銭受信時に画面上に表示されるビジュアルエフェクト。Tier ごとに演出が異なる。

Visual effects displayed on screen when tips are received. Effects differ by tier.

6.2 Small Tip エフェクト（100〜499 LC）

要素 / Element	仕様 / Spec	ファイル / File
バナーテキスト背景 / Banner text BG	640 x 48 px、半透明グラデーション / Semi-transparent gradient	`effects/banner_small.png`
アイテムドロップ / Item drop	アイテムスプライト + 落下アニメーション（コードで制御）/ Item sprite + drop animation (code-controlled)	各アイテムスプライト / Each item sprite
キラキラパーティクル / Sparkle particle	8 x 8 px、4フレームアニメーション / 4-frame animation	`effects/sparkle_small.png`
パーティクル数 / Particle count	5〜8個 / 5-8 particles	—
持続時間 / Duration	2 sec	—

演出フロー / Effect flow:
  0.0s: バナーがスライドイン（上部から）/ Banner slides in from top
  0.3s: アイテムスプライトが落下 / Item sprite drops
  0.5s: 着地時にキラキラパーティクル / Sparkle particles on landing
  1.5s: バナーがフェードアウト / Banner fades out
  2.0s: 完了 / Complete

6.3 Medium Tip エフェクト（500〜4,999 LC）

要素 / Element	仕様 / Spec	ファイル / File
バナーテキスト背景 / Banner text BG	800 x 64 px、光沢グラデーション / Glossy gradient	`effects/banner_medium.png`
配達演出 / Delivery effect	配達員スプライト 32x32、4フレーム歩行 / Delivery person sprite 32x32, 4-frame walk	`effects/delivery_person.png`
段ボール箱 / Cardboard box	16 x 16 px、開封アニメーション2フレーム / 2-frame unboxing	`effects/cardboard_box.png`
キラキラパーティクル / Sparkle particle	8 x 8 px、4フレーム（金色）/ 4-frame (gold)	`effects/sparkle_medium.png`
パーティクル数 / Particle count	12〜16個 / 12-16 particles	—
持続時間 / Duration	4 sec	—

演出フロー / Effect flow:
  0.0s: バナーがスライドイン（金色枠）/ Banner slides in (gold border)
  0.5s: ドアをノックする SE / Door knock SE
  1.0s: 配達員がドアから入場 / Delivery person enters from door
  1.5s: 段ボール箱を渡す / Hands over cardboard box
  2.0s: 箱を開ける → アイテム出現 + 金キラパーティクル / Open box → item appears + gold sparkles
  3.0s: 配達員退場 / Delivery person exits
  4.0s: 完了 / Complete

6.4 Large Tip エフェクト（5,000+ LC）

要素 / Element	仕様 / Spec	ファイル / File
フルスクリーンフラッシュ / Fullscreen flash	1280 x 720 px、白→透明フェード / White → transparent fade	コードで生成 / Generated by code
特殊バナー / Special banner	1024 x 96 px、アニメーション枠（8フレーム）/ Animated border (8 frames)	`effects/banner_large.png`
レインボーパーティクル / Rainbow particle	8 x 8 px、6色各4フレーム / 6 colors x 4 frames	`effects/sparkle_large.png`
スター / Star burst	16 x 16 px、回転アニメーション4フレーム / 4-frame rotation	`effects/star_burst.png`
パーティクル数 / Particle count	30〜50個 / 30-50 particles	—
持続時間 / Duration	6 sec	—

6.5 Zzz パーティクル（睡眠用）/ Zzz Particle (for sleep)

要素 / Element	仕様 / Spec	ファイル / File
"Z" 文字スプライト / "Z" character sprite	8 x 8 px	`effects/zzz.png`
浮遊アニメーション / Float animation	Y -16px を 2秒かけて上昇 + フェードアウト / Rise Y -16px over 2 sec + fade out	コードで制御 / Code-controlled
発生間隔 / Spawn interval	1.5 sec ごと / Every 1.5 sec	—
同時表示数 / Max concurrent	3個 / 3 particles	—

6.6 吹き出し / Speech Bubbles

要素 / Element	仕様 / Spec	ファイル / File
吹き出し背景 / Bubble BG	9-slice、角丸 8px / 9-slice, 8px rounded corners	`ui/speech_bubble.png`
最小サイズ / Min size	64 x 32 px	—
最大サイズ / Max size	256 x 96 px	—
しっぽ位置 / Tail position	下中央（キャラの頭上に表示）/ Bottom center (shown above character head)	—
フォント / Font	PixelMplus（日本語対応ピクセルフォント）/ PixelMplus (JP-compatible pixel font)	外部フォント / External font
テキスト色 / Text color	`#333333`	—
背景色 / BG color	`#FFFFFF` (不透明度 90%) / 90% opacity	—

7. タイルセットアセット一覧 / Tileset Asset List

7.1 床タイル / Floor Tiles

タイルID / Tile ID	説明 / Description	ファイル / File
`floor_wood`	フローリング（茶色木目）/ Wood flooring (brown grain)	`tiles/floor.png`
`floor_wood_sunlit`	フローリング（日光あり、明るめ）/ Wood flooring (sunlit, brighter)	`tiles/floor.png`
`floor_kitchen`	キッチンタイル（白/グレー格子）/ Kitchen tile (white/gray checker)	`tiles/floor.png`
`floor_tatami`	畳（2DK 用）/ Tatami (for 2DK)	`tiles/floor.png`
`floor_carpet`	カーペット（クッション等の下）/ Carpet (under cushions etc.)	`tiles/floor.png`

7.2 壁タイル / Wall Tiles

タイルID / Tile ID	説明 / Description	ファイル / File
`wall_default`	標準壁（クリーム色）/ Standard wall (cream)	`tiles/walls.png`
`wall_window`	窓付き壁（カーテン付き）/ Wall with window (with curtain)	`tiles/walls.png`
`wall_kitchen`	キッチン壁（タイル柄）/ Kitchen wall (tile pattern)	`tiles/walls.png`
`door_entrance`	玄関ドア / Entrance door	`tiles/walls.png`
`door_room`	室内ドア（2DK 用）/ Interior door (for 2DK)	`tiles/walls.png`

7.3 初期家具タイル / Initial Furniture Tiles

タイルID / Tile ID	説明 / Description	サイズ / Size	ファイル / File
`furn_futon`	布団（2人用、敷き+掛け）/ Futon (for two, mattress + blanket)	1x2 tiles (32x64 px)	`tiles/furniture.png`
`furn_low_table`	ちゃぶ台（木製、丸型）/ Low table (wooden, round)	1x1 tile (32x32 px)	`tiles/furniture.png`
`furn_dog_bed`	犬用ベッド（丸型クッション）/ Dog bed (round cushion)	2x1 tiles (64x32 px)	`tiles/furniture.png`
`furn_sink`	シンク（ステンレス）/ Kitchen sink (stainless)	1x2 tiles (32x64 px)	`tiles/furniture.png`
`furn_fridge`	冷蔵庫（小型、白）/ Small fridge (white)	1x2 tiles (32x64 px)	`tiles/furniture.png`
`furn_drying_pole`	物干し竿 / Drying pole	2x1 tiles (64x32 px)	`tiles/furniture.png`

8. 家具配置ルール / Furniture Placement Rules

8.1 基本ルール / Basic Rules

投げ銭で新しい家具アイテムが追加される際の配置ロジック。

Placement logic when new furniture items are added via tips.

ルール # / Rule #	内容 / Description
R1	家具は壁際 or 他の家具に隣接して配置する / Furniture is placed against walls or adjacent to other furniture
R2	キャラクターの移動経路（幅1タイル以上）を確保する / Ensure character pathways (minimum 1 tile wide)
R3	ドアタイル（出入口）を塞がない / Never block door tiles (entrance/exit)
R4	キッチン家電はキッチンタイル上に配置する / Kitchen appliances are placed on kitchen tiles
R5	犬用アイテムは犬ベッド周辺に優先配置 / Pet items are preferentially placed near the dog bed
R6	配置不可の場合、アイテムは「届いたが配置場所なし」として保管扱いにする / If placement is impossible, item is stored as "delivered but no space"

8.2 配置優先順位 / Placement Priority

1. 壁際の空きスペース（時計回りに探索）
   Empty wall-adjacent spaces (clockwise search)
        ↓
2. 既存家具に隣接する空きスペース
   Empty spaces adjacent to existing furniture
        ↓
3. 部屋中央の空きスペース
   Empty spaces in room center
        ↓
4. 保管（配置スペースなし）
   Storage (no placement space available)

8.3 配置アルゴリズム / Placement Algorithm

typescript

interface PlacementResult {
  placed: boolean
  position: { x: number; y: number } | null
  rotation: 0 | 90 | 180 | 270
}

function findPlacement(
  item: FurnitureItem,
  room: TileMap
): PlacementResult {
  const candidates: TilePosition[] = []

  // Phase 1: 壁際スキャン / Wall-adjacent scan
  for (const pos of room.wallAdjacentTiles()) {
    if (canPlace(item, pos, room)) {
      candidates.push(pos)
    }
  }

  // Phase 2: 家具隣接スキャン / Furniture-adjacent scan
  if (candidates.length === 0) {
    for (const pos of room.furnitureAdjacentTiles()) {
      if (canPlace(item, pos, room)) {
        candidates.push(pos)
      }
    }
  }

  // Phase 3: 中央スキャン / Center scan
  if (candidates.length === 0) {
    for (const pos of room.centerTiles()) {
      if (canPlace(item, pos, room)) {
        candidates.push(pos)
      }
    }
  }

  if (candidates.length === 0) {
    return { placed: false, position: null, rotation: 0 }
  }

  // カテゴリ別の最適配置を選択 / Select optimal placement by category
  const best = selectBestPosition(item, candidates, room)
  return { placed: true, position: best.pos, rotation: best.rot }
}

function canPlace(
  item: FurnitureItem,
  pos: TilePosition,
  room: TileMap
): boolean {
  // 全タイルが空きかチェック / Check all tiles are empty
  for (const tile of item.occupiedTiles(pos)) {
    if (!room.isEmpty(tile)) return false
    if (room.isDoor(tile)) return false
  }

  // 配置後にパス確認 / Verify pathfinding after placement
  const tempRoom = room.clone()
  tempRoom.placeItem(item, pos)
  return tempRoom.isFullyNavigable()
}

9. スプライト表示スケール / Sprite Display Scale

9.1 スケーリングルール / Scaling Rules

すべてのアセットは原寸（native）で制作し、PixiJS のスケーリングで表示サイズに拡大する。

All assets are created at native size and scaled up to display size via PixiJS scaling.

アセット種別 / Asset Type	原寸 / Native	スケール / Scale	表示サイズ / Display Size
タイル / Tile	32 x 32 px	2x	64 x 64 px
キャラクタースプライト / Character sprite	32 x 32 px	2x	64 x 64 px
アイテムスプライト / Item sprite	16 x 16 px	2x	32 x 32 px
家具スプライト / Furniture sprite	32 x N px	2x	64 x N*2 px
エフェクトパーティクル / Effect particle	8 x 8 px	2x	16 x 16 px
UI 吹き出し / UI speech bubble	可変 / Variable	2x	可変 / Variable

9.2 PixiJS スケーリング設定 / PixiJS Scaling Configuration

typescript

// アプリケーション初期化 / Application initialization
const app = new PIXI.Application()
await app.init({
  width: 1280,
  height: 720,
  backgroundColor: 0x1a1a2e,
  antialias: false,  // ピクセルアートのためアンチエイリアス無効 / Disabled for pixel art
})

// テクスチャのデフォルトスケールモード / Default texture scale mode
PIXI.TextureStyle.defaultOptions.scaleMode = 'nearest'  // ニアレストネイバー / Nearest neighbor

// ゲームコンテナのスケール設定 / Game container scale
const gameContainer = new PIXI.Container()
gameContainer.scale.set(2)  // 全体を2xスケール / Scale everything 2x

9.3 画面上のタイル表示数 / Tiles Visible on Screen

項目 / Item	値 / Value
ゲームビュー幅 / Game view width	1024 px / 64 px = 16 tiles
ゲームビュー高さ / Game view height	640 px / 64 px = 10 tiles
合計表示タイル / Total visible tiles	160 tiles (= 1K ルーム全体がちょうど収まる / Exactly fits 1K room)

1K ルームは画面にぴったり収まる / 1K Room Fits Screen Exactly

16x10 タイルの 1K ルームは、2x スケールでゲームビュー領域（1024x640 px）にちょうど収まるように設計されている。スクロールは不要。2DK 拡張時にはカメラスクロールを導入する。

The 16x10 tile 1K room is designed to fit exactly within the game view area (1024x640 px) at 2x scale. No scrolling required. Camera scrolling will be introduced for 2DK expansion.

10. アセットファイル構成 / Asset File Structure

packages/frontend/src/assets/
├── characters/
│   ├── john_spritesheet.png      # 256x256 (8x8 frames of 32x32)
│   ├── john_spritesheet.json     # TexturePacker atlas
│   ├── sara_spritesheet.png      # 256x256
│   ├── sara_spritesheet.json
│   ├── eve_spritesheet.png       # 256x256
│   └── eve_spritesheet.json
├── tiles/
│   ├── floor.png                 # 床タイルセット (5 tiles: 160x32)
│   ├── walls.png                 # 壁タイルセット (5 tiles: 160x32)
│   └── furniture.png             # 初期家具タイルセット (6 items)
├── items/
│   ├── tier1_items.png           # Tier 1 アイテム (12 items: 192x16)
│   ├── tier1_items.json          # Atlas
│   ├── tier2_items.png           # Tier 2 小物
│   ├── tier2_items.json
│   ├── furniture_tier2.png       # Tier 2 家具
│   └── furniture_tier2.json
├── effects/
│   ├── banner_small.png          # Small tip バナー背景
│   ├── banner_medium.png         # Medium tip バナー背景
│   ├── banner_large.png          # Large tip 特殊バナー (8 frames)
│   ├── sparkle_small.png         # キラキラ (4 frames: 32x8)
│   ├── sparkle_medium.png        # 金キラキラ (4 frames: 32x8)
│   ├── sparkle_large.png         # レインボー (24 frames: 192x8)
│   ├── star_burst.png            # スターバースト (4 frames: 64x16)
│   ├── delivery_person.png       # 配達員 (4 frames: 128x32)
│   ├── cardboard_box.png         # 段ボール箱 (2 frames: 32x16)
│   └── zzz.png                   # 睡眠 Z パーティクル (8x8)
└── ui/
    ├── speech_bubble.png         # 9-slice 吹き出し
    ├── status_bar_bg.png         # ステータスバー背景
    ├── status_icons.png          # ステータスアイコン (hunger, mood, etc.)
    └── lifecoin_icon.png         # LifeCoin アイコン (16x16)

11. アセットパイプライン / Asset Pipeline

既製素材パック + Higgsfield AI のハイブリッドパイプライン / Pre-made Asset Pack + Higgsfield AI Hybrid Pipeline

ゲーム内素材は Modern Interiors / Exteriors（LimeZu） を主軸に使用し、不足素材（Eve 等）は Higgsfield AI で参照画像を生成してピクセルアートに変換する。プロモーション素材は Higgsfield AI で制作する。

In-game assets primarily use Modern Interiors / Exteriors (LimeZu). Missing assets (Eve, etc.) are created by generating reference images with Higgsfield AI and converting to pixel art. Promotional materials are produced with Higgsfield AI.

11.1 素材パック（メイン素材）/ Asset Packs (Primary Source)

パック / Pack	URL	価格 / Price	ライセンス / License	用途 / Usage
Modern Interiors	https://limezu.itch.io/moderninteriors	$1.50〜	商用OK（クレジット必要・再配布不可）/ Commercial OK (credit required, no redistribution)	部屋タイル、家具、John/Sara スプライト
Modern Exteriors	https://limezu.itch.io/modernexteriors	$2.50〜	同上 / Same	散歩シーン、街並み、公園
Kenney Tiny Town	https://kenney.nl/assets/tiny-town	無料 / Free	CC0（制限なし）/ CC0 (no restrictions)	追加環境タイル

11.1.1 Modern Interiors に含まれるもの / What Modern Interiors Includes

Modern Interiors ($1.50〜)
├── 部屋タイプ 30種+ / 30+ Room Types
│   ├── リビング / Living room
│   ├── 寝室 / Bedroom
│   ├── キッチン / Kitchen
│   ├── バスルーム / Bathroom
│   ├── 和室 / Japanese house
│   └── 他 25種+ / 25+ more
├── 家具 数千点 / Thousands of Furniture Items
│   └── スタイルバリエーション付き / With style variations
├── キャラクター生成システム / Character Generator System
│   ├── 100+ 衣装 / 100+ outfits
│   ├── 200 髪型 / 200 hairstyles
│   ├── 80 アクセサリ / 80 accessories
│   └── 9 肌色 / 9 skin colors
├── キャラアニメーション / Character Animations
│   ├── idle, run, gift, punch, pick up
│   ├── read, lift, throw, shoot
│   └── sit（椅子/ソファ対応）/ sit (chair/sofa)
├── アニメーション付き家具 100+ / 100+ Animated Furniture
│   └── ドア開閉、棚、家電等 / Doors, shelves, appliances, etc.
├── サイズ選択 / Size Options
│   ├── 16x16 px
│   ├── 32x32 px ← MVP で使用 / Used for MVP
│   └── 48x48 px
└── 形式 / Format: PNG (個別 + スプライトシート / Individual + Spritesheets)

11.1.2 Modern Interiors のキャラ → John / Sara へのカスタマイズ / Customizing Characters to John / Sara

Modern Interiors のキャラジェネレーターを使い、John / Sara の外見を作成する。

Use Modern Interiors' character generator to create John / Sara's appearances.

キャラ / Character	髪型 / Hair	髪色 / Hair Color	肌色 / Skin	衣装 / Outfit	備考 / Notes
John	短髪 / Short	茶 / Brown `#8b6542`	ライト / Light	Tシャツ + ジーンズ / T-shirt + jeans	カジュアルプログラマー風 / Casual programmer style
Sara	ロング / Long	黒 / Dark `#2c1810`	ライト / Light	ブラウス + スカート / Blouse + skirt	おしゃれカフェスタッフ風 / Stylish cafe staff style

11.2 Higgsfield AI（補完素材 + プロモーション）/ Higgsfield AI (Supplementary + Promotion)

Higgsfield AI（有料アカウント取得済み）は以下の用途で使用する。

Higgsfield AI (paid account available) is used for the following purposes.

11.2.1 Eve（柴犬）のカスタムスプライト / Custom Sprites for Eve (Shiba Inu)

Modern Interiors にはペットのスプライトが不足しているため、Eve は Higgsfield AI でリファレンスを生成し、ピクセルアートに手動変換する。

Modern Interiors lacks pet sprites, so Eve's sprites are generated via Higgsfield AI reference images and manually converted to pixel art.

Soul ID 設定 / Soul ID Configuration:

キャラクター / Character	Soul ID 用途 / Purpose	備考 / Notes
Eve（2歳、赤柴犬）	赤柴犬の特徴的な顔・体型リファレンス / Red Shiba Inu face/body reference	四足歩行ポーズを基本として登録 / Register quadruped pose as base

生成するリファレンス画像 / Reference Images to Generate:

#	ポーズ / Pose	用途 / Purpose
1	正面立ち（四足）/ Front standing (quadruped)	walk/stand スプライトの参考
2	横向き歩行 / Side walking	歩行アニメーションの参考
3	お座り / Sitting	sit スプライトの参考
4	丸まって寝る / Curled up sleeping	sleep スプライトの参考
5	尻尾を振る / Tail wagging	tail_wag アニメーションの参考
6	お腹見せ / Belly up	belly_up スプライトの参考

変換フロー / Conversion Flow:

Higgsfield AI → リファレンス画像 → Piskel/Aseprite で 32x32 ピクセルアート化
                                   → 16色パレット適用 → アニメーションフレーム作成

11.2.2 プロモーション素材の生成 / Promotional Asset Generation

Higgsfield AI の画像・動画生成機能でプロモーション素材を制作する。

素材 / Asset	サイズ / Size	用途 / Usage
YouTube サムネイル	1280 x 720 px	配信用 / For streams
TikTok カバー画像	1080 x 1920 px	TikTok 投稿用
SNS プロモーション画像	1200 x 630 px (OGP)	Twitter/X 共有用
配信開始・終了画面	1920 x 1080 px	OBS シーン用
キャラクター紹介動画	15〜30 sec × 3本	SNS プロモーション用
トレーラー	30〜60 sec	YouTube・SNS 告知用

11.3 マップ設計ツール / Map Design Tool

部屋のレイアウトは Tiled Map Editor でビジュアルに設計し、JSON 形式でエクスポートして PixiJS で直接読み込む。

Room layouts are visually designed in Tiled Map Editor and exported as JSON for direct loading in PixiJS.

ツール / Tool	URL	価格 / Price	用途 / Usage
Tiled Map Editor	https://www.mapeditor.org/	無料 / Free	タイルマップ設計 → JSON 出力 → PixiJS 読み込み
Piskel	https://www.piskelapp.com/	無料 / Free	Eve 等のカスタムスプライト編集
Aseprite	https://www.aseprite.org/	$20	本格的なピクセルアート編集（任意）

11.3.1 Tiled → PixiJS ワークフロー / Tiled → PixiJS Workflow

1. Modern Interiors の 32x32 タイルセットを Tiled に読み込む
   Load Modern Interiors 32x32 tilesets into Tiled
        ↓
2. レイヤー構成（床/壁/家具下層/キャラ層/家具上層）を作成
   Create layers (floor / walls / furniture-below / character / furniture-above)
        ↓
3. 1K 部屋をビジュアルにデザイン（ドラッグ&ドロップ）
   Visually design the 1K room (drag & drop)
        ↓
4. JSON 形式でエクスポート（Tiled JSON Map Format）
   Export as JSON (Tiled JSON Map Format)
        ↓
5. PixiJS の @pixi/tilemap で読み込み・レンダリング
   Load & render with PixiJS @pixi/tilemap

11.4 カスタムスプライト用カラーパレット / Color Palette for Custom Sprites

Eve 等の自作スプライトに使用するパレット。Modern Interiors の雰囲気と統一する。

Palette for custom sprites like Eve. Harmonized with Modern Interiors' aesthetic.

用途 / Usage	カラーコード / Color Codes
Eve 毛色 / Eve fur	`#d4843c`, `#b06828`, `#f0d0a0` (cream belly)
Eve 鼻・目 / Eve nose & eyes	`#2c1810`, `#1a0e08`
床（木目）/ Floor (wood)	`#c8a878`, `#a88858`, `#e0c8a0`
壁 / Wall	`#e8e0d0`, `#d0c8b8`

11.5 アセットパイプライン全体図 / Full Asset Pipeline Overview

┌──────────────────────────────────────────────────────────────────────┐
│                     Asset Pipeline Overview                          │
├──────────────────────────────────────────────────────────────────────┤
│                                                                      │
│  ┌─────────────────────────────────────────────────────────┐        │
│  │ Modern Interiors / Exteriors (LimeZu) ── $4〜8          │        │
│  │ 【メイン素材 / Primary Assets】                          │        │
│  │                                                         │        │
│  │ ・部屋タイル 30種+ / Room tiles 30+ types               │        │
│  │ ・家具 数千点 / Thousands of furniture                   │        │
│  │ ・John/Sara スプライト / John/Sara sprites              │        │
│  │ ・アニメーション / Animations (idle, run, sit, etc.)     │        │
│  └────────────────────┬────────────────────────────────────┘        │
│                       │                                              │
│                       ▼                                              │
│  ┌─────────────────────────────────────────────────────────┐        │
│  │ Tiled Map Editor (無料 / Free)                          │        │
│  │ 【マップ設計 / Map Design】                              │        │
│  │                                                         │        │
│  │ タイルセット読込 → ビジュアル設計 → JSON エクスポート    │        │
│  │ Load tilesets → Visual design → JSON export             │        │
│  └────────────────────┬────────────────────────────────────┘        │
│                       │                                              │
│                       ▼                                              │
│  ┌─────────────────────────────────────────────────────────┐        │
│  │ PixiJS v8 (Frontend)                                    │        │
│  │ 【レンダリング / Rendering】                             │        │
│  │                                                         │        │
│  │ @pixi/tilemap で JSON 読込 → リアルタイム描画            │        │
│  │ Load JSON with @pixi/tilemap → Real-time rendering      │        │
│  └─────────────────────────────────────────────────────────┘        │
│                                                                      │
│  ┌─────────────────────────────────────────────────────────┐        │
│  │ Higgsfield AI (有料 / Paid)                             │        │
│  │ 【補完 + プロモ / Supplementary + Promotion】            │        │
│  │                                                         │        │
│  │ ・Eve（柴犬）リファレンス → Piskel でピクセルアート化   │        │
│  │ ・プロモ素材（サムネ, カバー, トレーラー）               │        │
│  └─────────────────────────────────────────────────────────┘        │
│                                                                      │
│  予算合計 / Total Budget: $4〜28                                     │
│  （素材パック $4〜8 + Aseprite $20 任意）                             │
│  (Asset packs $4-8 + Aseprite $20 optional)                          │
└──────────────────────────────────────────────────────────────────────┘

12. 命名規則 / Naming Conventions

12.1 ファイル命名 / File Naming

{category}_{name}[_{variant}].{ext}

例 / Examples:
  characters/john_spritesheet.png
  tiles/floor.png
  items/tier1_items.png
  effects/sparkle_small.png
  ui/speech_bubble.png

12.2 スプライトID 命名 / Sprite ID Naming

{prefix}_{name}_{action}_{frame}

Prefixes:
  char_   → キャラクタースプライト / Character sprites
  tile_   → タイル / Tiles
  item_   → アイテム / Items
  furn_   → 家具 / Furniture
  fx_     → エフェクト / Effects
  ui_     → UI 要素 / UI elements

例 / Examples:
  char_john_walk_down_0
  char_eve_tail_wag_2
  tile_floor_wood
  item_cup_noodles
  furn_kotatsu
  fx_sparkle_gold_3

13. パフォーマンス目標 / Performance Targets

指標 / Metric	目標値 / Target	備考 / Notes
FPS	60 FPS 安定 / Stable 60 FPS	OBS キャプチャ時も含む / Including during OBS capture
テクスチャメモリ / Texture memory	32 MB 以下 / Under 32 MB	全アセット合計 / Total for all assets
スプライトシートサイズ / Spritesheet size	各シート 2048x2048 px 以下 / Each sheet under 2048x2048 px	WebGL テクスチャ上限考慮 / Considering WebGL texture limit
ロード時間 / Load time	3秒以内 / Under 3 seconds	初回ロード / First load
同時描画スプライト / Concurrent sprites	100 以下 / Under 100	家具 + キャラ + エフェクト / Furniture + characters + effects

ピクセルアート・アセット仕様 / Pixel Art Asset Specification ​

1. ビューポート方式 / Viewport Style ​

決定: トップダウン（見下ろし型）/ Decision: Top-Down View ​

画面解像度 / Screen Resolution ​

2. タイルマップ仕様 / Tilemap Specification ​

2.1 タイル基本設定 / Tile Base Configuration ​

2.2 レイヤー構成 / Layer Composition ​

2.3 1K ルームタイルレイアウト / 1K Room Tile Layout ​

ルームサイズ / Room Size ​

タイルマップ（16x10 グリッド）/ Tile Map (16x10 Grid) ​

初期家具配置 / Initial Furniture Placement ​

2.4 2DK ルームレイアウト（Phase 2）/ 2DK Room Layout (Phase 2) ​

3. スプライトシート仕様 / Spritesheet Specification ​

3.1 キャラクタースプライト共通仕様 / Character Sprite Common Spec ​

3.2 方向規則 / Direction Convention ​

3.3 John スプライトシート / John Spritesheet ​

フレーム配置 / Frame Layout ​

3.4 Sara スプライトシート / Sara Spritesheet ​

フレーム配置 / Frame Layout ​

3.5 Eve スプライトシート / Eve Spritesheet ​

フレーム配置 / Frame Layout ​

4. MVP アニメーション仕様 / MVP Animation Specification ​

4.1 アニメーション共通設定 / Animation Common Settings ​

4.2 5つの MVP アニメーション / 5 MVP Animations ​

4.2.1 Walk（歩行 / 歩く） ​

4.2.2 Stand（立ち / 待機） ​

4.2.3 Sit（座り） ​

4.2.4 Sleep（睡眠） ​

4.2.5 Eat（食事） ​

4.3 アニメーション状態遷移 / Animation State Machine ​

5. Tier 1 アイテムスプライト一覧 / Tier 1 Item Sprites List ​

5.1 アイテムスプライト共通仕様 / Item Sprite Common Spec ​

5.2 Tier 1 アイテム一覧（100〜400 LC）/ Tier 1 Item List (100-400 LC) ​

5.3 Tier 2 家具スプライト（500 LC 〜、参考）/ Tier 2 Furniture Sprites (500 LC+, Reference) ​

6. 投げ銭エフェクトアセット / Tip Effect Visual Assets ​

6.1 エフェクト概要 / Effect Overview ​

6.2 Small Tip エフェクト（100〜499 LC） ​

6.3 Medium Tip エフェクト（500〜4,999 LC） ​

6.4 Large Tip エフェクト（5,000+ LC） ​

6.5 Zzz パーティクル（睡眠用）/ Zzz Particle (for sleep) ​

6.6 吹き出し / Speech Bubbles ​

7. タイルセットアセット一覧 / Tileset Asset List ​

7.1 床タイル / Floor Tiles ​

7.2 壁タイル / Wall Tiles ​

7.3 初期家具タイル / Initial Furniture Tiles ​

8. 家具配置ルール / Furniture Placement Rules ​

8.1 基本ルール / Basic Rules ​

8.2 配置優先順位 / Placement Priority ​

8.3 配置アルゴリズム / Placement Algorithm ​

9. スプライト表示スケール / Sprite Display Scale ​

9.1 スケーリングルール / Scaling Rules ​

9.2 PixiJS スケーリング設定 / PixiJS Scaling Configuration ​

9.3 画面上のタイル表示数 / Tiles Visible on Screen ​

10. アセットファイル構成 / Asset File Structure ​

11. アセットパイプライン / Asset Pipeline ​

11.1 素材パック（メイン素材）/ Asset Packs (Primary Source) ​

11.1.1 Modern Interiors に含まれるもの / What Modern Interiors Includes ​

11.1.2 Modern Interiors のキャラ → John / Sara へのカスタマイズ / Customizing Characters to John / Sara ​

11.2 Higgsfield AI（補完素材 + プロモーション）/ Higgsfield AI (Supplementary + Promotion) ​

11.2.1 Eve（柴犬）のカスタムスプライト / Custom Sprites for Eve (Shiba Inu) ​

11.2.2 プロモーション素材の生成 / Promotional Asset Generation ​

11.3 マップ設計ツール / Map Design Tool ​

11.3.1 Tiled → PixiJS ワークフロー / Tiled → PixiJS Workflow ​

11.4 カスタムスプライト用カラーパレット / Color Palette for Custom Sprites ​

11.5 アセットパイプライン全体図 / Full Asset Pipeline Overview ​

12. 命名規則 / Naming Conventions ​

12.1 ファイル命名 / File Naming ​

12.2 スプライトID 命名 / Sprite ID Naming ​

13. パフォーマンス目標 / Performance Targets ​

ピクセルアート・アセット仕様 / Pixel Art Asset Specification

1. ビューポート方式 / Viewport Style

決定: トップダウン（見下ろし型）/ Decision: Top-Down View

画面解像度 / Screen Resolution

2. タイルマップ仕様 / Tilemap Specification

2.1 タイル基本設定 / Tile Base Configuration

2.2 レイヤー構成 / Layer Composition

2.3 1K ルームタイルレイアウト / 1K Room Tile Layout

ルームサイズ / Room Size

タイルマップ（16x10 グリッド）/ Tile Map (16x10 Grid)

初期家具配置 / Initial Furniture Placement

2.4 2DK ルームレイアウト（Phase 2）/ 2DK Room Layout (Phase 2)

3. スプライトシート仕様 / Spritesheet Specification

3.1 キャラクタースプライト共通仕様 / Character Sprite Common Spec

3.2 方向規則 / Direction Convention

3.3 John スプライトシート / John Spritesheet

フレーム配置 / Frame Layout

3.4 Sara スプライトシート / Sara Spritesheet

フレーム配置 / Frame Layout

3.5 Eve スプライトシート / Eve Spritesheet

フレーム配置 / Frame Layout

4. MVP アニメーション仕様 / MVP Animation Specification

4.1 アニメーション共通設定 / Animation Common Settings

4.2 5つの MVP アニメーション / 5 MVP Animations

4.2.1 Walk（歩行 / 歩く）

4.2.2 Stand（立ち / 待機）

4.2.3 Sit（座り）

4.2.4 Sleep（睡眠）

4.2.5 Eat（食事）

4.3 アニメーション状態遷移 / Animation State Machine

5. Tier 1 アイテムスプライト一覧 / Tier 1 Item Sprites List

5.1 アイテムスプライト共通仕様 / Item Sprite Common Spec

5.2 Tier 1 アイテム一覧（100〜400 LC）/ Tier 1 Item List (100-400 LC)

5.3 Tier 2 家具スプライト（500 LC 〜、参考）/ Tier 2 Furniture Sprites (500 LC+, Reference)

6. 投げ銭エフェクトアセット / Tip Effect Visual Assets

6.1 エフェクト概要 / Effect Overview

6.2 Small Tip エフェクト（100〜499 LC）

6.3 Medium Tip エフェクト（500〜4,999 LC）

6.4 Large Tip エフェクト（5,000+ LC）

6.5 Zzz パーティクル（睡眠用）/ Zzz Particle (for sleep)

6.6 吹き出し / Speech Bubbles

7. タイルセットアセット一覧 / Tileset Asset List

7.1 床タイル / Floor Tiles

7.2 壁タイル / Wall Tiles

7.3 初期家具タイル / Initial Furniture Tiles

8. 家具配置ルール / Furniture Placement Rules

8.1 基本ルール / Basic Rules

8.2 配置優先順位 / Placement Priority

8.3 配置アルゴリズム / Placement Algorithm

9. スプライト表示スケール / Sprite Display Scale

9.1 スケーリングルール / Scaling Rules

9.2 PixiJS スケーリング設定 / PixiJS Scaling Configuration

9.3 画面上のタイル表示数 / Tiles Visible on Screen

10. アセットファイル構成 / Asset File Structure

11. アセットパイプライン / Asset Pipeline

11.1 素材パック（メイン素材）/ Asset Packs (Primary Source)

11.1.1 Modern Interiors に含まれるもの / What Modern Interiors Includes

11.1.2 Modern Interiors のキャラ → John / Sara へのカスタマイズ / Customizing Characters to John / Sara

11.2 Higgsfield AI（補完素材 + プロモーション）/ Higgsfield AI (Supplementary + Promotion)

11.2.1 Eve（柴犬）のカスタムスプライト / Custom Sprites for Eve (Shiba Inu)

11.2.2 プロモーション素材の生成 / Promotional Asset Generation

11.3 マップ設計ツール / Map Design Tool

11.3.1 Tiled → PixiJS ワークフロー / Tiled → PixiJS Workflow

11.4 カスタムスプライト用カラーパレット / Color Palette for Custom Sprites

11.5 アセットパイプライン全体図 / Full Asset Pipeline Overview

12. 命名規則 / Naming Conventions

12.1 ファイル命名 / File Naming

12.2 スプライトID 命名 / Sprite ID Naming

13. パフォーマンス目標 / Performance Targets