1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-08-01

#はじめに
無料化&公式アセット化で最近話題の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
RectTransformを以下のように設定します。
Bolt_RectTransform.png
Textコンポーネントを以下のように設定します。
・Font Sizeを「28」
・Colorを白(FFFFFF)に設定
Bolt_Text.png

###2.Buttonオブジェクト「ButtonMessage」
ヒエラルキービューの「+」からUI>Buttonでボタンオブジェクトを配置し、名前を「ButtonMessage」とします。
RectTransformを以下のように設定します。
Bolt_Button_RectTransform.png

###3.Emptyオブジェクト「GameManager」
ヒエラルキービューの「+」からCreate Emptyでオブジェクトを配置し、名前を「GameManager」とします。
AddComponentで「Bolt>Flow Machine」を選択してFlow Machineコンポーネントを追加します。
AddComponent_Bolt.png Bolt_AddComponent_FlowMachine.png

NEWボタンを押し、ファイル名を「GameManager」にしてGameManager.assetを保存します。
Bolt_FlowMachine.png
Bolt_FlowMachine_Component.png
このコンポーネントにBoltスクリプトを作っていきます。

#ButtonのOnClick()設定
ButtonMessageのButtonコンポーネントにあるOnClick()部分を設定します。
このボタンを押した際にGameManagerにOnClickイベントが飛ぶように設定します。
Bolt_OnClick_List_is_Empty.png
「+」を押すと下の画像のようになります。
Bolt_OnClick_02.png
この「None(Object)」にヒエラルキービューのGameManagerをドラッグ&ドロップして設定します。
Bolt_OnClick_03.png
「No Function」をクリックして「FlowMachine>TriggerUnityEvent」を選択します。
その下の入力欄に「OnClick」と入力します。
Bolt_OnClick_04.png
これで、このボタンをクリックするとGameManagerに向けてOnClickイベントを発火させることができます。

#GameManagerに変数の設定
GameManagerにGameObject変数「TextMessage」を設定します。
GameManagerのVariableコンポーネントにある入力欄「(New Variable Name)」に「TextMessage」と入力します。
Bolt_GameManager_Variables.png
Typeを「GameObject」に設定します。
Value欄にヒエラルキービューの「TextMessage」をドラッグ&ドロップして設定します。
Bolt_GameManager_Variables02.png
Boltでテキストを変更する際に、この変数を使います。

#Boltスクリプティング
いよいよBoltをいじります!
GameManagerのFlow Machineコンポーネントにある「Edit Graph」を押すと、Boltスクリプトの編集画面が開きます。
Bolt_FlowMachine_Component.png
初期状態で「Start」ユニットと「Update」ユニットがあります。
UE4のBlueprintではノードと言いますが、Boltではユニットと言うそうです。
Bolt_Script01.png
これはStart()とUpdate()と同じ働きをするもの、と直感的にわかると思います。
今回は、どちらのユニットも使いません。

###1.UnityEventユニット
グリッド上の背景を右クリックすると下の画像のようなユニットリストが出てきます。
虫メガネの検索欄に「UnityEvent」と入力して「UnityEvent (in Events)」を選択すると、画面上にUnityEventユニットが配置されます。
Bolt_UnityEvent.png
配置されたユニットの入力欄に「OnClick」と設定します。これでOnClickイベント発火時にこのユニットから処理が始まります。
Bolt_UnityEvent_OnClick.png

###2.GetVariableユニット
ヒエラルキービューにあるGameManagerのVariableコンポーネントで設定した変数「TextMessage」の「=」部分をBoltスクリプト編集画面にドラッグ&ドロップすると、自動的にGetVariableユニットが配置されます。
Bolt_GetVariable2.png

###3.Textユニット
右クリックして検索欄に「Text.text」と入力して「Text.text(set)」ユニットを配置します。
Bolt_Text.text.png
オレンジの丸の入力欄に「クリックしました」と変更後のテキストを直接入力します。
Bolt_Text.text2.png

###4.各ユニットの接続
3つのユニットを下の画像のように接続します。
Bolt_ユニットの接続.png
・UnityEventでOnClickを検知したらtext(set)を処理します
・text(set)を処理する際、入力値としてTextMessageを参照します
これでBoltスクリプトは完成です!実行してみましょう!

#実行してみる
実行すると最初は画面に「New Text」が表示されています。
Bolt_実行画面1.png
「Button」をクリックすると、テキストが「クリックしました」に変わります。
Bolt_実行画面2.png

#追記:こんな方法もありました
Bolt_OnButtonClick.png
「OnButtonClick」ユニットを使えば、OnClickイベントを設定しなくても同じことができました。
・GameManagerにGameObject変数「ButtonMassage」を宣言する
・ButtonMassageを入力値にOnButtonClickユニットをText.text(set)ユニットに接続する
後から追記しておいてなんですが、個人的にはこちらの方がわかりやすいかな、と…(お好みでどうぞ)

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

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?