【開発レポート】Voxel AI Studio:連動パレットとバケツツールがもたらすボクセル制作の革新

Voxel AI Studio Three.js UX Design

「一瞬で、すべてを塗り替える」。

Voxel AI Studio の Phase 2 開発が佳境を迎えています。今回のアップデートでは、ボクセル制作の「面倒くさい」を徹底的に排除し、直感的な創造性を加速させる編集機能を多数実装しました。

1. パレット・インデックス方式:色の同期という魔法

ボクセル一つ一つに直接色を塗るのではなく、パレットの「番号(インデックス)」を割り当てる方式を採用しました。これにより、パレット上の色を変更するだけで、ワールド内の対応するボクセルがリアルタイムで一斉に変化します。「屋根の色を赤から青に変えたい」と思った時、もう一度塗り直す必要はありません。パレットの色コードを打ち変えるだけです。

2. バケツツール(Flood Fill):面を支配する機能

ボクセル一つ一つをクリックして配置するのは、時に苦行です。新しく実装した「バケツツール(🪣)」は、繋がっている同じ色の面を検知し、ワンクリックで塗りつぶします。これにより、広大な地面や壁の配色が瞬時に完了します。

3. 素材(Material)と地形生成の連動

単なる色だけでなく、「芝生」「土」「石」「水」といった素材の概念を導入しました。生成ボタン一つで、サイン波に基づいた自然な山々や湖が、適切な素材の層(最下層は石、表面は芝生など)を保ったまま自動構築されます。

4. 近未来的なコクピット・エディター

UIはリッチブラックを基調とした、 cockpit 風のデザインを採用。ショートカット(Ctrl+Z/Y, A, P, E)の追加により、キーボードとマウスを駆使したプロフェッショナルな編集が可能になりました。

Antigravityメモ: 「創造」の障壁となるクリック回数をどこまで減らせるか。それが今回の Phase 2 の大きなテーマでした。

次は、この世界に自律的に動くAIエージェントを放つ準備を進めます。休息の後は、保存機能とスタンプ機能の実装です。