VSCodeでPlantUMLを使用する方法についてです。
PlantUMLは、プログラムの設計を図として可視化するツールです。VSCodeの拡張機能から選択できますが、その際に上手くできなかったのでその解決方法も紹介します。
ゲーム開発におけるPlantUMLの利点
ゲーム開発では設計を怠るとスパゲッティコードになりやすく、バグの原因となります。PlantUMLを活用することで、全体の構造を整理し、開発をスムーズに進めることができます。
VSCodeでPlantUMLを使用する手順
- Java実行環境の準備: Javaから最新の実行環境をインストールします。
- PlantUMLのダウンロード: PlantUMLからjarファイルをダウンロードし、特定のフォルダに保存します。
- VSCodeへのPlantUML拡張機能のインストール: VSCodeでPlantUML拡張機能をインストールします。
- settings.jsonの設定:VSCodeで
Ctrl + Shift + Pを押し、「Preferences: Open Settings (JSON)」を開き、以下の設定を追加します。"plantuml.jar": "C:\\PlantUML\\plantuml.jar", "plantuml.render": "Local" - .pumlファイルの作成: 拡張子
.pumlのファイルを作成します。
PlantUMLのサンプルコード
以下は、ゲーム開発の設計を表したサンプルコードです。
ChatGPTを使用して書いてもらいましたが、今後こういった手順も載せていこうと思います。
@startuml
'====================
' Model
'====================
package "Model" {
class GameSession {
+GetScore() : int
+GetRemainingTime() : TimeSpan
+IsGameOver() : bool
}
class ScoreManager {
-score: ReactiveProperty
+IncreaseScore(amount: int)
+DecreaseScore(amount: int)
+GetScore() : int
}
class GameTimer {
+StartTimer(duration: float)
+OnTimerEnd()
}
class CreatureSpawner {
+StartSpawning()
+StopSpawning()
+SpawnCreature()
+SetSpawnData(data: SpawnData)
}
interface ICreatureFactory {
+GetCreature() : GameObject
+ReleaseCreature(obj: GameObject)
}
class ObjectPool implements ICreatureFactory {
+InitializePool(initialSize: int)
+GetObject() : GameObject
+ReturnObject(obj: GameObject)
}
class SpawnDataLoader {
+LoadData()
+LoadedSpawnData : SpawnData
}
}
'====================
' Presenter
'====================
package "Presenter" {
class GamePresenter {
+Initialize()
+StartGame()
+EndGame()
}
class ScorePresenter {
+OnScoreChanged(score: int)
}
class InputPresenter {
+OnTapEvent(tappedObject: GameObject)
}
}
'====================
' View
'====================
package "View" {
interface IScoreView {
+UpdateScoreDisplay(score: int)
}
interface IGameView {
+UpdateTimerDisplay(remaining: TimeSpan)
+DisplayFeedback(feedback: string)
+PlayCreatureEffect(creature: GameObject)
}
class ScoreUI implements IScoreView {
+UpdateScoreDisplay(score: int)
}
class GameUI implements IGameView {
+UpdateTimerDisplay(remaining: TimeSpan)
+DisplayFeedback(feedback: string)
+PlayCreatureEffect(creature: GameObject)
}
}
'====================
' Relations: Model, Presenter, View
'====================
' Presenter uses Model components
GamePresenter --> GameSession : "管理・状態取得"
GamePresenter --> GameTimer : "制御"
GamePresenter --> CreatureSpawner : "生成管理"
ScorePresenter --> ScoreManager : "監視/操作"
' Presenter updates View
GamePresenter --> IGameView : "画面更新指示"
ScorePresenter --> IScoreView : "スコア表示更新"
' Input処理はPresenter経由でModelに通知
InputPresenter --> GameSession : "状態変更通知"
InputPresenter --> ScoreManager : "スコア更新要求"
InputPresenter --> GamePresenter : "イベント伝達"
' Model内部のSpawn Systemは従来通り
CreatureSpawner --> ICreatureFactory : "オブジェクト生成"
CreatureSpawner --> SpawnDataLoader : "spawnパラメータ参照"
@enduml
基本的な機能
- プレビュー画面を見る:
Alt + Dでプレビュー画面を表示できます。
- 画像としてエクスポートする:
Ctrl + Shift + Pでコマンドパレットを開くPlantUML: Export Current Diagramと入力- エクスポートする画像の拡張子を指定
まとめ
設計を可視化することで、開発の効率が向上し、コードの管理がしやすくなります。今後もPlantUMLを活用しながら設計を進め、AIエディタ（Cursor など）との連携も試していきたいと考えています。