builder-ux

建築 UX

建築メカニクスを構築するためのプレハブ、ブループリント、元に戻す／やり直し、選択、プレビューの各システムです。

クイックスタート

import { BlueprintManager } from './scripts/blueprint-manager.js';
import { CommandHistory, PlaceCommand, BatchCommand } from './scripts/command-history.js';
import { GhostPreview } from './scripts/ghost-preview.js';
import { SelectionManager } from './scripts/selection-manager.js';

// Initialize systems
const blueprints = new BlueprintManager();
const history = new CommandHistory({ maxSize: 50 });
const ghost = new GhostPreview(scene);
const selection = new SelectionManager({ maxSelection: 100 });

// Save selected pieces as blueprint
const { blueprint } = blueprints.save(selection.getSelection(), 'My Base');

// Load blueprint at new position
const { pieces } = blueprints.load(blueprint.id, newPosition, rotation);

// Place with undo support
history.execute(new PlaceCommand(pieceData, position, rotation, buildingSystem));
history.undo(); // Removes piece
history.redo(); // Restores piece

// Ghost preview with validity feedback
ghost.show('wall', cursorPosition, rotation);
ghost.setValid(canPlace); // Green/red color
ghost.updatePosition(newCursorPosition);

// Multi-select with box selection
selection.boxSelect(startNDC, endNDC, camera, allPieces);
selection.selectConnected(startPiece, getNeighbors); // Flood fill

// Batch operations
history.beginGroup('Delete selection');
for (const piece of selection.getSelection()) {
  history.execute(new RemoveCommand(piece, buildingSystem));
}
history.endGroup();

リファレンス

以下については、references/builder-ux-advanced.md を参照してください。

• PlaceCommand、RemoveCommand、UpgradeCommand、BatchCommand を使ったコマンドパターン
• ブループリントのシリアライズ形式とバージョン管理
• パルスアニメーションを使ったゴーストプレビューの描画
• 選択システム：単一、追加、範囲、半径、接続
• コピー／貼り付けとブループリントの共有

スクリプト

ファイル	行数	用途
blueprint-manager.js	~450	建築デザインの保存、読み込み、エクスポート／インポート
command-history.js	~400	コマンドパターンを使った元に戻す／やり直しのスタック
ghost-preview.js	~380	スナップ機能付きの透明な配置プレビュー
selection-manager.js	~420	複数選択、範囲選択、グループ操作

主なパターン

コマンドパターン

すべての建築アクションを、execute() と undo() を持つコマンドにします。これにより、以下が可能になります。

• 元に戻す／やり直しをすぐに利用可能
• ネットワークレプリケーション（コマンドをシリアライズしてサーバーに送信）
• マクロの記録（コマンドシーケンスを保存）
• 実行前の検証

ブループリントシステム

ブループリントは相対位置を保存するため、位置や回転に依存しません。主な機能は以下のとおりです。

• 保存時に自動で中央揃え
• 読み込み時の回転をサポート
• 共有用のエクスポート／インポート
• サムネイルの生成

ゴーストプレビュー

確定前に配置しようとしている内容を表示します。

• 緑＝配置可能
• 赤＝配置不可（衝突、支えがない）
• オレンジ＝ブロック中（権限）
• 視認性を高めるパルスアニメーション
• グリッド／回転スナップ

選択マネージャー

複数の選択モードをサポートします。

• 左クリック（選択を置き換え）
• Shift+クリック（選択に追加）
• Ctrl+クリック（切り替え）
• 範囲選択（画面空間）
• 半径選択（ワールド空間）
• 接続選択（フラッドフィル）

統合

// Full integration example
function setupBuildingUX(scene, buildingSystem) {
  const history = new CommandHistory({
    maxSize: 100,
    onChange: (status) => updateUndoRedoButtons(status)
  });
  
  const ghost = new GhostPreview(scene, {
    validColor: 0x00ff00,
    invalidColor: 0xff0000,
    snapGrid: 2,
    snapRotation: Math.PI / 4
  });
  
  const selection = new SelectionManager({
    maxSelection: 200,
    onSelectionChanged: (pieces) => updateSelectionUI(pieces)
  });
  
  const blueprints = new BlueprintManager({
    storage: localStorage,
    maxBlueprints: 50
  });
  
  // Keyboard shortcuts
  document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key === 'z') history.undo();
    if (e.ctrlKey && e.key === 'y') history.redo();
    if (e.ctrlKey && e.key === 'c') copySelection();
    if (e.ctrlKey && e.key === 'v') pasteBlueprint();
    if (e.key === 'r') ghost.rotate(Math.PI / 4);
  });
  
  return { history, ghost, selection, blueprints };
}

設計方針

建築 UX では、意図と実行を分離します。ゴーストプレビューで実行内容を表示し、コマンドで実行し、履歴で取り消せるようにします。この分離により、ブループリントの配置（構造全体をプレビュー）、一括取り消し（複数の操作を元に戻す）、ネットワーク経由の建築（コマンドをシリアライズして送信）が可能になります。