Visual State Machine

Overview

Visual State Machine（VSM）は、Unityのエディタ拡張として開発したビジュアルノードエディタです。ゲームロジックをコードではなくグラフで設計・管理できます。ノードを繋ぐだけで状態遷移が定義でき、コンパイル後のJSONをイベント駆動ランタイムが実行します。ロジックの全体像が常に目に見える状態で設計できることが最大の特徴です。

• 6種類の条件タイプ（Click / Drag / キーボード / タイマー / クロスグラフ / 複合）
• フレームアニメーション・シナリオシステム
• パラメータシステム（スライダー連動）
• JSONへのコンパイルパイプライン（編集用・実行用の二層設計）
• Updateループを持たないイベント駆動ランタイム
• Unity Inspectorからドラッグ&ドロップで使用可能

Uniqueness & Design Philosophy

AIに作らせたコードはブラックボックス化しやすい。再利用も難しい。そこで「AIが人間にとって管理しやすい構造を作り、人間が透明性を確保した上で管理する」という設計思想のもとVSMを開発しました。ロジックとリソースを明確に切り分け、JSONファイル一つでゲームロジックを再現できる仕組みを実現しています。

1. 1クロスグラフ依存（TYPE_B）— 他のグラフがXに達したら自分も遷移する。複数エンティティ間の同期をビジュアルで設計できる既存Unityツールにない独自概念。
2. 2イベント駆動設計 — トリガーが発火した瞬間だけ評価する。ポーリングではなくイベントで動くべきという設計哲学を構造で表現。
3. 3二層JSON設計 — 編集用JSON（人間向け）とコンパイル済みJSON（AI向け）を明確に分離。将来AIがゲームロジックを生成・修正する足がかりとなるよう設計。
4. 4型付きポートによる接続制約 — 不正な接続をエディタが設計段階で防ぐ。コンパイル型言語的な安全性をビジュアルエディタに持ち込んだ。

Development Process

きっかけ

自作ゲームで「オブジェクトAを触ると、オブジェクトBが別の動作をする」という複数エンティティ間の依存関係が複雑化したことが出発点でした。コードで書くと見通しが悪く、変更のたびに全体を読み直す必要があった。「このロジックがグラフで見えたら」という仮説を立て、検証することにしました。設計・実装・テストのすべてを一人で担当。

1. 1

   5/1 夜 — コアアーキテクチャ

   StateEngine / Serializer / Compiler をTDDで一夜で実装。

2. 2

   5/2 午前 — 実機デバッグ

   アニメーションシステム・オブザーバーパターン追加。

3. 3

   5/2 午後 — UIバグと格闘

   UIElements CollapseButtonバグに6時間。DOM構造から地道に原因を追跡。

4. 4

   5/2 夜 — 機能追加

   AnimationData Importer・ImageNode追加。

5. 5

   5/3 — 仕上げ

   TYPE_C・ドラッグ方向・オートStateID・ノード複製（Ctrl+D）。

難しかったこと

Unity UIElementsの内部処理によるノード折りたたみバグ。特定の接続状態下でCollapseボタンがクリックを受け付けなくなる問題に約6時間を費やした。原因はUnity内部でのpickingModeの強制リセット。GeometryChangedイベントで上書きし続けるという解決策に辿り着くまで、DOM構造のログ出力から地道に追った。

AIとの関わり

初期設計のトレードオフをClaudeと対話しながら立案。「なぜこう設計するか」を議論し、設計の意図を持った構造を共同で決めた。実装はClaude Codeを使いテストファーストで進行。ツールを育てながらAIの使い方自体も学んでいる。

Status & Next Steps

現在の進捗

StateEngine（全6条件タイプ）・GraphCompiler・NodeEditorWindow・フレームアニメーション・パラメータシステムが実装済み。自作ゲームで実運用・検証済み。

今後の展望

• COND_ANDのより直感的なUI
• グラフのエクスポート / インポート
• グラフ間の依存関係ビュー
• PlayModeでのリアルタイム編集