Godot4.1.3でGodot State Charts 機能拡張プラグインを使う ２／２

 「Godot4.1.3でGodot State Charts 機能拡張プラグインを使う １／２」という記事の続きです。

https://qiita.com/FootInGlow/items/462bbb7382ed3396684e

# 前回の記事で作成した状態遷移
　前回の記事で実装したStateChartです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/66cc59ce-afaa-56b7-c4ea-1d424864f318.png)
　状態遷移図にすると下記のようになると思います。
　CompoundStateのRootにAtomicStateの２つの状態、IdleとObservingがあります。黒丸からの矢印はIdleが初期状態であることを示しており、"enemy_entered"イベントをトリガにObserving状態に遷移することを表しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/c78b84ca-9af4-4ea5-8cac-fb85f2b15699.png)

 本稿では、この状態遷移にObservingからIdleに戻る遷移の追加や、遷移のdelay、並列状態、ガード条件、即時遷移など実装します。

# ベースプロジェクト
　こちらのGodotプロジェクトをベースにStateChartの機能を追加します。

https://github.com/footinglow/Godot4/tree/main/03_study/SampleStateCharts

githubから取得後に下記の操作をすると実行できるようになります。
1. Godotにインポート
2. AssetLibからState Chartをダウンロード
3. プロジェクト設定のプラグインタブでState Chartを有効化する
# 敵が見張りの監視範囲外に移動したら、Idle状態に遷移する
　Observing状態からIdle状態に遷移したいので、遷移元のObservingを選択した状態で、名前を「To Idle」と入力して、Transitionの追加ボタンを押下します。
 ![2023-11-05 (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/dd0726ce-9785-9d9e-e649-e5251106a711.png)
　「To Idle」Transitionノードを選択した状態でインスペクターのTransionのToに遷移先としたい「Idle」状態を設定します。Eventは「enemy_exited」と手入力します。
 ![2023-11-05 (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/e89f1adb-9910-72fe-dc16-9963f458e8c1.png)
　この設定により、StateChartノードのsend_eventメソッドで"enemy_exited"イベントを送ると、Toで設定した遷移先「Idle」状態に遷移するようになります。
　Watchman/Area2Dを選択し、ノード/シグナルから「area_exited(area:Area2D)」シグナルをダブルクリックして、Watchmanのスクリプトに接続します。Watchmanのスクリプトを下記のようにして、StateChartに"enemy_exited"イベントを送信するようにします。
 ```GDScript
 extends Node2D

func _on_area_2d_area_entered(area):
	$StateChart.send_event("enemy_entered")

func _on_area_2d_area_exited(area):
	$StateChart.send_event("enemy_exited")
 ```

 実行します。
 マウスで敵を移動し、監視領域に入るとObservingになるのは前回確認しました。
 ![2023-11-05 (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/43b3d83e-e6a3-0478-c623-57a7d8bf95f8.png)
敵を監視領域の外に移動すると、Idleに遷移するようになりました。
![2023-11-05 (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b0925527-7227-f39a-b3a4-3f3ca181a967.png)

# Watchmanの向きを監視領域に入った敵の方向に変える
　StateChartには特定の状態がアクティブの場合に毎周期発行するsignalがあるので、それを利用します。
　Observing状態の時に、Watchmanの向きを敵の方向に変えるようにします。

 　「Observing」ノードを選択して、ノード/シグナルの「state_processing(delta:var)」をダブルクリックして、Watchmanのスクリプトに接続します。
  メンバ変数「enemy」を宣言し、_on_area_2d_area_enteredメソッドの引数areaが敵なので、enemyに代入して保存します。observingのstate_processingで「look_at(enemy.global_position)」として、敵の方を見るようにします。

```GDScript
extends Node2D

var enemy = null

func _on_area_2d_area_entered(area):
	$StateChart.send_event("enemy_entered")
	enemy = area.get_parent()

func _on_area_2d_area_exited(area):
	$StateChart.send_event("enemy_exited")

func _on_observing_state_processing(delta):
	look_at(enemy.global_position)
```

　Watchmanのアイコンを-90°回転します。
 ![2023-11-05 (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/422c3709-5632-9292-d119-1928690603c2.png)

　実行すると、敵が監視領域に侵入した場合、Watchmanが敵の方向を見続けるようになります。
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f75567e5-a507-646b-ce2a-ab38c26be624.png)

# Idle状態に遷移した場合、Watchmanの向きを正面にする
　敵が監視領域から離れた後も、同じ方向を見ているのは疲れそうなので、正面に戻してあげます。
　先ほどは敵に合わせて向きをリアルタイムに変更する必要があるため、毎周期処理が実行できるstate_processingシグナルを使用しましたが、今回はIdle状態になったときに1回だけ向きを正面に設定すればよいので、状態に遷移したときに発行されるstate_enteredシグナルを使用します。

　「Idle」状態を選択した状態で、ノード/シグナルの「state_entered()」をダブルクリックして、Watchmanのスクリプトに接続します。
  rotation_degrees = 90に設定して、正面を向くようにします。enemyも初期化します。

 ```GDScript
 extends Node2D

var enemy = null

func _on_area_2d_area_entered(area):
	$StateChart.send_event("enemy_entered")
	enemy = area.get_parent()

func _on_area_2d_area_exited(area):
	$StateChart.send_event("enemy_exited")

func _on_observing_state_processing(delta):
	look_at(enemy.global_position)

func _on_idle_state_entered():
	rotation_degrees = 90
	enemy = null
 ```

　実行します。敵が監視領域に入るとWatchmanが敵の方を見るようになりますが、敵が監視領域から離れると正面を向くようになりました。
![2023-11-05 (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b7b742d2-4a23-2b8a-8f10-a0e10347217d.png)

# 敵が監視領域から離れても、しばらく敵を見るようにする
　状態遷移のTransitionの実行を遅らせることができます。その機能を利用して、敵が管理領域から離れても３秒間は目で追いかけるようにします。

 　「To Idle」Transionノードを選択した状態で、インスペクターのTransitionの「Delay Seconds」に「３」を設定します。

![2023-11-05 (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/26824588-a1fa-089a-32a0-d09ceeae25a9.png)

　実行します。敵が管理領域から離れても、しばらくWatchmanが敵を見続けるようになります。
　StateChartDebuggerの表示を見ると、状態がObservingのままですが、その下に「>> To Idle(2.41)のように表示され、数字がカウントダウンして、0になるとIdle状態に遷移します。
![2023-11-05 (18).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f1badb26-616e-c6a9-e276-8fbe1342f982.png)

　To Idleのカウントダウン中に、敵をマウスで移動して監視領域に入ってもカウントダウンは進み、Idle状態になります。敵は監視領域内入ったままです。
　To Idleのカウントダウン中はまだObserving状態ですが、enemy_enteredイベントを処理しているのがIdle状態のみのためこのような状態になります。
　Observing状態にenemy_enteredイベントを受けて自己遷移するTransiton「To Me」を追加すると、敵が再侵入したときにObservingに自己遷移するので、To Idleのカウントダウンが停止します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/82712b26-49c3-41e6-1507-11248f08e052.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0f017f40-540a-ff1b-5cdf-7486eaf06195.png)

# 敵が監視領域に３回侵入した場合、Watchmanをバーサーク状態にする
　実装の仕方はいくつかありますが、並列状態を作って管理します。

　状態遷移図にすると下図のようになります（あまり大事ではないので、Observing状態の自己遷移と、enemy_exitedの３秒Delayの表記は省略しました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/e327e7cc-62ba-d186-bd1d-47ba40de7107.png)
　今まで使用していたRoot(CompoundState)はAlertStateに名前を変更し、新たにBerserkModeという状態遷移を追加しました。２つの状態遷移をRoot(ParallelState)で管理します。
　ポイントとしては、どちらの状態も"enemy_entered"イベントを使います。

　実際に状態遷移を変更します。
　Root（CompoundState）を名前をAlertStateに変更します。
　AlertStateを選択した状態で、名前に「Root」を入力してParallelState追加ボタンを押下します。
![2023-11-07 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/afbd2b91-9bcc-361c-65fb-83fa3c9f02e0.png)
　RootをStateChartにドラッグして、AlertStateをRootにドラッグします。AlertStateの中は操作しないので閉じました。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b48ec04a-a2fb-0500-ec4c-2dd7e0920ae2.png)
　Rootを選択した状態で、名前に「BerserkMode」を入力して、CompoundState追加ボタンを押下します。
　BerserkModeを選択して、名前「Normal」を入力して、AtomicState追加ボタンを押下します。同様に「Berserk」も追加します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/c01a8867-4f0b-1518-2af1-6ea289b31820.png)
  　初期状態を設定する必要があるので、「BerserkMode」を選択してインスペクターのInitial Stateは「Normal」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/407d155a-324d-1643-f013-f494f0952a43.png)
　敵が監視領域に３回侵入した場合にNormalからBerserk状態に遷移するので、遷移元のNormalを選択して、名前「To Berserk」を入力してTransition追加ボタンを押下します。
 　「To Berserk」を選択して、インスペクターのTransitionのToに「Berserk」を選択し、Eventに"enemy_entered"を設定します。

  「３回侵入した場合」を実現するため、Guard条件を設定します。Guardの右の「ｖ」をクリックして、「新規ExpressionGuard」を選択します。GDScript形式の評価式を記入して、trueの場合状態が遷移するようになるので、「enemy_entered_count >= 3」と入力します。評価式はGDScriptの表記にします。  
  　![2023-11-07 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/5cc3ed72-f5fd-cbd7-e58a-06092eb40d05.png)
　「enemy_entered_count」はGDScriptでStateChartに教えます。
 　メンバ変数として「enemy_entered_count」を追加して、敵が侵入したときのコールバック_on_area_2d_area_entered()が呼ばれたときに、カウントアップしたあと、set_expression_propertyメソッドでStateChartに通知します。
```GDScript
func _on_area_2d_area_entered(area):
	enemy_entered_count += 1
	$StateChart.set_expression_property("enemy_entered_count", enemy_entered_count)
 ```
  スクリプトはこのようになります。
```GDScript
extends Node2D

var enemy = null
var enemy_entered_count = 0

func _on_area_2d_area_entered(area):
	enemy_entered_count += 1
	$StateChart.set_expression_property("enemy_entered_count", enemy_entered_count)
	$StateChart.send_event("enemy_entered")
	enemy = area.get_parent()

func _on_area_2d_area_exited(area):
	$StateChart.send_event("enemy_exited")

func _on_observing_state_processing(delta):
	look_at(enemy.global_position)

func _on_idle_state_entered():
	rotation_degrees = 90
	enemy = null
```
 
　実行します。
　敵が監視領域に１回侵入すると、enemy_entered_count=1が通知され、StateChartDebuggerで値を確認することができます。ガード条件があるので、まだBerserkModeはNormalのままです。
 ![2023-11-07 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/27aada81-a1f1-0e55-4cae-ece524d0787d.png)
 　敵が監視領域に3回侵入すると、enemy_entered_count=3になり、ガード条件がtrueになるため、Berserk状態に遷移します。
![2023-11-07 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/27f48f37-2b5b-6ab1-84d0-96a0c4c327d2.png)

# Berserkしたらアイコンを赤くします。3秒後に元に戻します
　3秒後に元の状態に戻すのは、即時遷移でdelayを3秒に設定することで実現できます。

　まずBerserk状態になった場合にアイコンを赤くします。
　「Berserk」を選択して、ノード/シグナルのstate_entered()をダブルクリックして、Watchmanのスクリプトに接続し、下記のようにします。
```GDScript
func _on_berserk_state_entered():
	$Sprite2D.modulate = Color.RED
```

　3秒後にBerserk状態からIdle状態に遷移するようにします。
　遷移元の「Berserk」を選択して、名前「To Normal」にしてTransition追加ボタンを押下します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/fde63191-3aba-b46d-ed79-b96d1a3fb9e2.png)
　「To Normal」を選択して、インスペクターのTransitonのToは「Normal」を選択します。Eventは未設定にすることで、即時に遷移することになりますが、3秒待ちたいので、Delay Secondsに３を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/c5d08417-c90c-361b-172f-8c5b62b9ff35.png)

　Normal状態で、色を元に戻します。
　「Normal」を選択して、ノード/シグナルのstate_entered()をダブルクリックして、Watchmanのスクリプトに接続し、下記のようにします。enemy_entered_countをリセットしてStateChartに通知します。
 ```GDScript
func _on_normal_state_entered():
	$Sprite2D.modulate = Color.WHITE
	enemy_entered_count = 0
	$StateChart.set_expression_property("enemy_entered_count", enemy_entered_count)
```

　スクリプト全体はこのようになります。
 ```GDScript
 extends Node2D

var enemy = null
var enemy_entered_count = 0

func _on_area_2d_area_entered(area):
	enemy_entered_count += 1
	$StateChart.set_expression_property("enemy_entered_count", enemy_entered_count)
	$StateChart.send_event("enemy_entered")
	enemy = area.get_parent()

func _on_area_2d_area_exited(area):
	$StateChart.send_event("enemy_exited")

func _on_observing_state_processing(delta):
	look_at(enemy.global_position)

func _on_idle_state_entered():
	rotation_degrees = 90
	enemy = null

func _on_berserk_state_entered():
	$Sprite2D.modulate = Color.RED

func _on_normal_state_entered():
	$Sprite2D.modulate = Color.WHITE
	enemy_entered_count = 0
	$StateChart.set_expression_property("enemy_entered_count", enemy_entered_count)
```

　実行します。
　敵が3回、監視領域に侵入すると、赤くなりました。
　また、Berserk状態に遷移すると同時に即時遷移して、To Normalの3秒カウントダウンが開始されます。
 ![2023-11-07 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/3bbc1861-8f8c-b9af-780e-7aa20dc873bd.png)
 　3秒カウントダウンの後、Normal状態に遷移しました。

![2023-11-07 (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/1b447743-73f8-d14b-7c4b-7192ac9f865c.png)

# 終わりに
　Godot State Chartsを使ってみましたが、Godotのノードとsignalを上手に利用しているので、Godotユーザにはとても使いやすいと思います。また状態一覧がノードで見えるので、管理しやすく開発効率が良くなると印象です。 ゲームを作るときであれば、
 
 - タイトル、設定画面、ゲームなどのシステム状態の遷移
 - ゲーム中の開始、ゲーム中、Pause、クリアなどのゲーム状態管理
 - Playerの状態管理
 - 敵の状態管理
 
 などいろいろ活用できそうです。
 　マイナス点としては、状態遷移図として表示できないので、規模が大きいと状態間のつながりが把握しにくいことが挙げられますが、Transitionの名前の付け方を工夫すればうまく使えそうな気がしています。

# github
　ここまで作ったものをgithubに登録しましたが、Godot State Chartsは別途ダウンロードが必要です。

https://github.com/footinglow/Godot4/tree/main/03_study/SampleStateCharts2

実行する前に必要な手順
1. Godotにインポート
2. AssetLibからGodot State Chartsをダウンロード
3. プロジェクト設定のプラグインタブでState Chartを有効化する

　以上です。