UnityのBoltをさわってみたので超簡単なUIサンプルを書いてみた【初心者向け】

#はじめに
無料化＆公式アセット化で最近話題のBoltをさっそくいじってみました！
まだいじって一日目ですが「あーBolt完全に理解した」という心意気で、とりあえず簡単なサンプルを記事にしてみようと思います。

ちなみに、がっつりしたチュートリアルはちゃんと公式にあって一通りやってみましたが「もっと気軽にBoltってみたいなー」と思ったのでこの記事を書いてみました。

『Unity入門チュートリアル 「玉転がし」(Roll-a-Ball) ビジュアルスクリプティング版』
https://learn.unity.com/project/bolt-roll-a-ball-tutorial?uv=2019.4

#やりたいこと
・テキストとボタンがある
・ボタンを押すとテキストが「クリックしました」に変わる

#前提情報
Unity2020.1.0f1
Bolt Version 1.4.12

#新規プロジェクトの作成
2Dプロジェクトで「BoltTest01」という名前にしました。

#Boltのインストール
公式のチュートリアルがあるので、こちらでお願いします。
https://learn.unity.com/tutorial/bolt-install?uv=2019.4&projectId=5f0e8e30edbc2a1549c23a2c

#オブジェクトの配置と設定
以下のオブジェクトを配置、設定します。

###1.Textオブジェクト「TextMessage」
ヒエラルキービューの「+」からUI>Textでテキストオブジェクトを配置し、名前を「TextMessage」とします。
![Bolt_UI_Text.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/c048a87e-f23b-fee6-70fd-a38620d203b0.png)
RectTransformを以下のように設定します。
![Bolt_RectTransform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/e5a3d73f-dee5-1f72-91ae-ac9fda7d4e54.png)
Textコンポーネントを以下のように設定します。
・Font Sizeを「28」
・Colorを白(FFFFFF)に設定
![Bolt_Text.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/ec4fcea3-5034-4c62-aff4-5e31e2a8e4cf.png)

###2.Buttonオブジェクト「ButtonMessage」
ヒエラルキービューの「+」からUI>Buttonでボタンオブジェクトを配置し、名前を「ButtonMessage」とします。
RectTransformを以下のように設定します。
![Bolt_Button_RectTransform.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/8953efa9-61d9-f6df-50ed-6991943ff7c6.png)


###3.Emptyオブジェクト「GameManager」
ヒエラルキービューの「+」からCreate Emptyでオブジェクトを配置し、名前を「GameManager」とします。
AddComponentで「Bolt>Flow Machine」を選択してFlow Machineコンポーネントを追加します。
![AddComponent_Bolt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/4ead0f10-6f0d-a4ae-f2a4-ae30245d46a2.png)　![Bolt_AddComponent_FlowMachine.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/e1a71723-af29-df4c-d230-5931599622b6.png)


NEWボタンを押し、ファイル名を「GameManager」にしてGameManager.assetを保存します。
![Bolt_FlowMachine.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/6315229c-a35f-6ef5-e1b7-0f1adaf38be3.png)
![Bolt_FlowMachine_Component.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/0db70a05-b749-c271-687d-164c0779bce2.png)
このコンポーネントにBoltスクリプトを作っていきます。

#ButtonのOnClick()設定
ButtonMessageのButtonコンポーネントにあるOnClick()部分を設定します。
このボタンを押した際にGameManagerにOnClickイベントが飛ぶように設定します。
![Bolt_OnClick_List_is_Empty.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/b69ac417-763c-a2af-2c31-e1d997f2740b.png)
「＋」を押すと下の画像のようになります。
![Bolt_OnClick_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/32a1292b-daa1-0c66-a85b-946251c9855d.png)
この「None(Object)」にヒエラルキービューのGameManagerをドラッグ＆ドロップして設定します。
![Bolt_OnClick_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/6e8f6966-663a-91d0-042d-6b3e5544db89.png)
「No Function」をクリックして「FlowMachine>TriggerUnityEvent」を選択します。
その下の入力欄に「OnClick」と入力します。
![Bolt_OnClick_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/b8c58bc0-edc1-d3ba-e8b8-beaaea271265.png)
これで、このボタンをクリックするとGameManagerに向けてOnClickイベントを発火させることができます。

#GameManagerに変数の設定
GameManagerにGameObject変数「TextMessage」を設定します。
GameManagerのVariableコンポーネントにある入力欄「(New Variable Name)」に「TextMessage」と入力します。
![Bolt_GameManager_Variables.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/6e8abf2e-6c89-8906-ff99-405ed83b6922.png)
Typeを「GameObject」に設定します。
Value欄にヒエラルキービューの「TextMessage」をドラッグ＆ドロップして設定します。
![Bolt_GameManager_Variables02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/f19ac917-7e58-4e38-0b46-c7831de6b005.png)
Boltでテキストを変更する際に、この変数を使います。

#Boltスクリプティング
いよいよBoltをいじります！
GameManagerのFlow Machineコンポーネントにある「Edit Graph」を押すと、Boltスクリプトの編集画面が開きます。
![Bolt_FlowMachine_Component.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/0db70a05-b749-c271-687d-164c0779bce2.png)
初期状態で「Start」ユニットと「Update」ユニットがあります。
UE4のBlueprintではノードと言いますが、Boltではユニットと言うそうです。
![Bolt_Script01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/177361a4-4917-436e-2157-23d3c8fc53fb.png)
これはStart()とUpdate()と同じ働きをするもの、と直感的にわかると思います。
今回は、どちらのユニットも使いません。

###1.UnityEventユニット
グリッド上の背景を右クリックすると下の画像のようなユニットリストが出てきます。
虫メガネの検索欄に「UnityEvent」と入力して「UnityEvent (in Events)」を選択すると、画面上にUnityEventユニットが配置されます。
![Bolt_UnityEvent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/5a1abd4b-bb8e-a896-6216-0b5bc4ebb5c1.png)
配置されたユニットの入力欄に「OnClick」と設定します。これでOnClickイベント発火時にこのユニットから処理が始まります。
![Bolt_UnityEvent_OnClick.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/a55e9666-966d-de41-8959-48d7c269c772.png)

###2.GetVariableユニット
ヒエラルキービューにあるGameManagerのVariableコンポーネントで設定した変数「TextMessage」の「＝」部分をBoltスクリプト編集画面にドラッグ＆ドロップすると、自動的にGetVariableユニットが配置されます。
![Bolt_GetVariable2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/fae77a36-3310-1558-d188-abe0466ccfab.png)


###3.Textユニット
右クリックして検索欄に「Text.text」と入力して「Text.text(set)」ユニットを配置します。
![Bolt_Text.text.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/8a7c1dea-dde6-7bd5-4f58-30953fdd1bc2.png)
オレンジの丸の入力欄に「クリックしました」と変更後のテキストを直接入力します。
![Bolt_Text.text2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/8d5701b1-d4da-753a-13d3-bf7346bb6b91.png)


###4.各ユニットの接続
3つのユニットを下の画像のように接続します。
![Bolt_ユニットの接続.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/46da9717-25e4-f23f-f0e7-e07b68c18721.png)
・UnityEventでOnClickを検知したらtext(set)を処理します
・text(set)を処理する際、入力値としてTextMessageを参照します
これでBoltスクリプトは完成です！実行してみましょう！

#実行してみる
実行すると最初は画面に「New Text」が表示されています。
![Bolt_実行画面1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/83e7fb54-4d03-ac96-d5ad-39dddf4acfeb.png)
「Button」をクリックすると、テキストが「クリックしました」に変わります。
![Bolt_実行画面2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/c274f493-c475-5960-d39c-30eee4e6cf6e.png)

#追記：こんな方法もありました
![Bolt_OnButtonClick.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166815/bdd4587e-72b2-2bb6-ad5a-10fecc2d4716.png)
「OnButtonClick」ユニットを使えば、OnClickイベントを設定しなくても同じことができました。
・GameManagerにGameObject変数「ButtonMassage」を宣言する
・ButtonMassageを入力値にOnButtonClickユニットをText.text(set)ユニットに接続する
後から追記しておいてなんですが、個人的にはこちらの方がわかりやすいかな、と…（お好みでどうぞ）


#おわりに
主に自分用に書いた記事ですが、参考になれば幸いです。