pixel-art-game-builder

ピクセルアートゲームビルダー

プロシージャルなスプライト生成を使った、ピクセルアートの放置・インクリメンタルゲームの設計と構築に関するエキスパートガイドです。

クイックナビゲーション

必要な内容	移動先
新しいプロジェクトを始める	クイックスタート
動作するコードをコピーする	templates/
パターンを理解する	patterns/
完全な例を見る	examples/
詳細なリファレンス	references/
CSS／Tailwind のセットアップ	assets/

基本設計理念

3つの柱： ミニマル。光り輝く。思索的。

• 制約が創造性を生む：限られたパレット（12色）、低解像度（16×16スプライト）
• 空間が語る：暗い背景と少ない要素が、広大さを感じさせます
• 光が導く：重要な要素は輝きます（レア度が高いほど明るく輝きます）
• 動きが息づく：ゆっくりとした自然なアニメーション（周期は最低500ms）
• プレッシャーゼロ：タイマーなし、期限なし、FOMOなし、否定的なメッセージなし

クイックスタート

npm create vite@latest my-idle-game -- --template react-ts
cd my-idle-game
npm install zustand immer
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

次に、CSS と Tailwind の設定ファイルを assets/ からコピーします。

重要な実装ルール

ピクセルアートのスプライト（16×16）

// MANDATORY for pixel-perfect rendering
ctx.imageSmoothingEnabled = false;

/* CSS for any sprite element */
.sprite { image-rendering: pixelated; }

• スプライトあたり最大4色：ベース、ハイライト、シャドウ、アウトライン
• 使用可能領域は12×12（グロー効果用に2pxの余白）
• 表示時は4倍に拡大（16×16 → 64×64）
• アンチエイリアスなし、グラデーションなし

カラーパレット（全12色）

const PALETTE = {
  deepBlack: '#0a0a0f',      // Main background
  spaceGray: '#1a1a2e',      // Panels
  borderGray: '#2d2d44',     // Borders
  neonCyan: '#00fff5',       // Primary actions, RARE
  softMagenta: '#ff6bcb',    // Notifications, EPIC
  cosmicGold: '#ffd93d',     // Rewards, LEGENDARY
  validGreen: '#39ff14',     // Success, UNCOMMON
  alertRed: '#ff4757',       // Alerts (rare use)
  mysteryPurple: '#6c5ce7',  // Hidden/secret
  mainWhite: '#e8e8e8',      // Body text, COMMON
  secondaryGray: '#a0a0a0',  // Disabled
  interactiveCyan: '#7fefef' // Links
};

const RARITY_COLORS = {
  common: PALETTE.secondaryGray,
  uncommon: PALETTE.validGreen,
  rare: PALETTE.neonCyan,
  epic: PALETTE.softMagenta,
  legendary: PALETTE.cosmicGold,
};

ゲームループのパターン（100ms間隔）

useEffect(() => {
  const interval = setInterval(() => {
    const now = Date.now();
    const delta = (now - lastTick) / 1000;

    // Update resources
    addCredits(incomePerSecond * delta);
    regenerateEnergy(delta);

    setLastTick(now);
  }, 100);
  return () => clearInterval(interval);
}, [incomePerSecond, lastTick]);

状態管理（Zustand + Immer）

import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

const useGameStore = create<GameState>()(
  persist(
    immer((set, get) => ({
      credits: 0,
      energy: 100,
      addCredits: (amount) => set((s) => { s.credits += amount }),
    })),
    { name: 'game-save' }
  )
);

テンプレート（コピーして使用）

すぐに使えるコードは templates/ にあります。

テンプレート	説明
game-loop.tsx	デルタタイムを使った100ms間隔のゲーム処理用フック
save-system.ts	マイグレーション機能付きの Zustand 永続化パターン
progression.ts	スケーリング式（指数関数的なコスト、逓減効果）
sprite-renderer.tsx	ピクセル単位で正確に描画する Canvas コンポーネント

パターン（理解して応用）

概念的なガイドは patterns/ にあります。

パターン	説明
resource-system.md	通貨、上限、再生成の構造
upgrade-tree.md	直線的なアップグレード、スキルツリー、プレステージのアンロック
prestige-loop.md	リセットの仕組み、メタ進行、永続ボーナス
procedural-sprites.md	シードから多様なスプライトを生成

例

動作するコードは examples/ にあります。

例	説明
minimal-idle-game.tsx	リソース、アップグレード、セーブ機能を備えた約150行の完全な放置ゲーム

詳細なリファレンス

詳細なドキュメントは references/ にあります。

リファレンス	使用する場面
architecture.md	プロジェクト全体の構成、型、ストア
sprite-system.md	Canvas API、色の導出、キャッシュ
game-mechanics.md	経済、スキャン、進行度の計算式
ui-patterns.md	コンポーネント、レイアウト、アニメーション
content-structure.md	アイテム、セクター、アップグレードのデータ構造

設計の柱（必須）

1. すぐに分かること：すべてのボタンにテキストラベルを付け、表示する操作は最大3つ
2. 段階的な奥深さ：時間の経過とともに新しいコンテンツがアンロックされます
3. 心に響くコレクション：すべてのアイテムに140文字以内の物語風の説明を付けます
4. プレッシャーゼロ：タイマーなし、期限なし、FOMOなし
5. モバイルファースト：タッチ領域は44px以上、ブレークポイントは320／768／1024px

文体

• 語り口：穏やか、憂いを帯びた、さりげないユーモア
• ルール：140文字以内、「！」なし、大文字のみの表記なし、命令形なし

テンプレート：

• 面白い表現：「[Object]。[Absurd observation]。[Punchline]。」
• 心温まる表現：「[Object]。[Human detail]。[Universal truth]。」
• 奇妙な表現：「[Object]。[Strange property]。[Acceptance]。」

パフォーマンス目標

指標	目標
バンドルサイズ	gzip 圧縮後200KB未満
アイドル時のFPS	30以上
メモリ	100MB未満

すべきこと／してはいけないこと

すべきこと ✓

• ピクセルパーフェクトな描画（imageSmoothingEnabled = false）
• スプライトの色数は最大4色
• 12色のパレットのみを使用
• タッチターゲットは44px以上
• 生成したスプライトをキャッシュ
• モーションの軽減に対応

してはいけないこと ✗

• スプライトへのアンチエイリアスの適用
• ピクセルアートでのグラデーション
• アイコンのみのボタン
• アイテムの説明にステータスを記載
• タイマーやカウントダウン
• 否定的な失敗メッセージ
• モーダルの入れ子