こんにちは、Unityエンジニアのオオバです。
Unity公式が提供するノーコードツール「Visual Scripting」で、UIボタンのタップで動く処理を作りたいけど分からないという声を頂いたので、本記事で解説していきます。
結論、Visual Scriptingのノードを知っているか知らないかで決まります。この記事を通してノードの種類の幅を広げていきましょう。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_0](https://i.gyazo.com/f35cfe8ae41084edfcd5bac379ca6afd.gif)
Visual Scriptingをまだ触ったことがない方は、↓こちらの記事で始め方を詳しく丁寧に書いてますのでチェックしてみてください。
Visual ScriptingのタップはOnPointerClickノードを使う
はじめに結論を簡単にまとめます。
①OnPointerClickノードを使用する
②RaycastTargetがONである必要あり
③Buttonコンポーネントを使用する必要なし
こんな感じです。
結論、Visual Scriptingのタップ処理は OnPointerClickノード
を使うと実現可能です。ただし使用上の注意点もあるため、以降の章で詳しく解説していきます。
この記事を通してあなたがVisual Scriptingについての学びが深まると嬉しいです。
👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!
Visual Scriptingでタップ処理を実装する前の下準備4ステップ
Visual Scriptingでタップ処理をグラフに実装する前に4ステップで下準備をしていきます。
ステップ①Canvasを作成
UnityでUIボタンを作る際は、Canvasを作成する必要があります。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_1](https://i.gyazo.com/cda7edb4f761b8212bcd79d427bfa1d3.jpg#469__500)
メニューGameObject -> UI -> Canvas
からCanvasを作成してください。 もしスマホ向けのUIを作っている場合は、以下のCanvas設定を参考にしてみてください。
ステップ②Imageを追加
次にステップ①で作成したCanvas内にImageを作成します。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_2](https://i.gyazo.com/d05bdd47d0715e2db8e6db396ee337da.gif)
Canvasを選択した状態で右クリック。UI -> Imageを選択するとImageが作成されます。
ステップ③ImageにScriptMachineを追加
次にImageにScreiptMachineを追加します。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_3](https://i.gyazo.com/11695afc0b126edae9604e6e7b2f03ce.gif)
AddComponentボタンからScriptMachineを検索してください。
ステップ④ScriptGraphをセット
最後にProjectウィンドウにScriptGraphを追加します。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_4](https://i.gyazo.com/343ad03f0f8b4a8571ea22bed1ea7156.jpg#750__247)
メニューAssets -> Create -> Visual Scripting -> ScriptGraph
を選択 ![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_5](https://i.gyazo.com/e972a90d8c4083361c4d647941f11414.jpg#596__308)
名前はTapGraphとしておきましょう。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_6](https://i.gyazo.com/cb215f04ade42e616b1783b0df11826c.gif)
このTapGraphをステップ③で作成したScriptMachineのGraphにドラッグアンドドロップしてセットしておきます。
このあたりはVisual Scriptingの基礎的な部分ですので、もし復習したい場合はこちらの記事を参考にしてみてください。
以上でVisual Scriptingの事前準備は完了です。
ScriptGraphにタップ処理を実装
ここからは実際にVisual Scriptingを使ったプログラミングを実装していきます。
まずは、Visual Scriptingウィンドウを開いておきましょう。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_7](https://i.gyazo.com/624bd868dc94c3ebdfd982ae70aebe60.jpg#750__478)
OnPointerClickノードを追加
グラフにノードを追加していきます。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_8](https://i.gyazo.com/a40ae5f89676aa87c5b76c5b3ec05eeb.gif)
Visual Scripting内で右クリックして「OnPointerClick」と検索してノードを追加します。
この
OnPointerClick
ノードがタップをしたときに反応するノードです。 タップに反応する処理を実装
次にタップに反応する処理を実装します。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_9](https://i.gyazo.com/39ece2550b8126f65dc8305da0f750e5.gif)
OnPointerClickノードの出力側コントロールポートからエッジを伸ばしてDebug:Logノードを追加してみましょう。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_10](https://i.gyazo.com/7ee4723a33d9699ab272b433cf157e6d.gif)
Debug:Logノードの入力側データポートをドラッグアンドドロップして
String Literalノード
を追加します。 ![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_11](https://i.gyazo.com/14c73ad6855a6be2ad120efc23ddeb28.png#352__266)
String Literalノードに「Tapped」という文字列を追加しておきます。
タップ処理の動作確認
動作確認をしてみましょう。Unityエディタを再生モードにしてください。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_12](https://i.gyazo.com/bd748feff4d8e9a7514b616c43446fde.gif)
するとこのようにImageをクリック(タップ)するとConsoleウィンドウにログが出力されるようになりました。
このようにタップ処理を実装する際は
OnPointerClick
ノードを使うということを覚えておきましょう。 ボタンのインタラクションをつけてみる
Consoleウィンドウにログが出力されるだけではつまらないので、ボタンインタラクションを簡単に実装してみます。
色を指定するColor変数を追加
タップしたときに色を変更したいので変数を追加します。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_13](https://i.gyazo.com/90a03b1a0310955d91f9720c52c457cf.gif)
ButtonDownColor、ButtonUpColorという名前のColor型の変数を2つ追加し、それぞれ色を指定しておきます。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_14](https://i.gyazo.com/1e4724091d2ab48567ca713abf5b607b.gif)
ドラッグアンドドロップをしてGraph変数をグラフ内に追加しておきます。
Visual Scriptingで使用する変数の種類については次の記事で徹底解説していますので、ぜひ参考にしてみてください。
OnPointerDownノード / OnPointerUpノードを追加
タップ時、タップを離した時のイベントを実装する必要があります。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_15](https://i.gyazo.com/98ddc495b62b8852b65362e550daeec8.gif)
そこで
OnPointerDown
と OnPointerUp
2つのノードを追加しましょう。 SetColorノードを追加
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_16](https://i.gyazo.com/0b64dfd02300537298105d8e171491d4.gif)
OnPointerDown、OnPointerUpの出力側コントロールポートにそれぞれ
Image:SetColorノード
を接続してください。 ![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_17](https://i.gyazo.com/26eac5b2f252c9a87099d5b51b7d4a6c.gif)
Image:SetColorノード
の入力側データポートにそれぞれ ButtonDownColor
と ButtonUpColor
のグラフ変数を接続します。 準備はこれで以上で動作確認してみましょう。
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_18](https://i.gyazo.com/5df8cec10368a1bce33abd541d423446.gif)
Unityを再生すると、このようにタップしたときに色が変わりました。
このようにボタンにインタラクションをつけたい場合は
OnPointerDown
と OnPointerUp
この2つを使えば実装できますので覚えておきましょう。 Visual Scriptingだけで複雑なUIアニメーションも実装可能
![【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_19](https://i.gyazo.com/f35cfe8ae41084edfcd5bac379ca6afd.gif)
Visual Scriptingに慣れてくるとこんな感じでアニメーションもVisual Scriptingだけで実装可能です。試行錯誤しながらノードを接続するのは面白いのでUI開発に興味ある方は挑戦してみてください。
ボタンが反応しない時の対応方法
ボタンをタップしても反応しない時の対応方法について解説します。
ボタンが反応しない原因はいくつかありますが、今回は代表的なものを紹介します。
ImageのRaycastTargetがOFFになっていないかチェック してみてください。
このチェックボックスがOFFだとボタンは動きません。必ずチェックを入れておきましょう。
その他にいくつもボタンが反応しない理由はあります。↓こちらの記事でボタンが押せない原因を 思いつく限り全てリストアップ していますので、直らない方はぜひチェックしてみてください。
標準ボタンを使用する必要はない
最後にUnity公式が提供する標準ボタン(Buttonコンポーネント)をなぜ使わなかったのかを紹介します。
結論から言うと「使わなくても動く」からです。
標準ボタンでアニメーションさせる場合はAnimationClipを使う必要があったり、演出処理の使い回しが難しかったりと、経験上ゲーム開発するうえで不都合なことが多かったです。
今回Visual Scriptingでボタンの実装をしてみてお気づきの通り、標準ボタンを使わなくても実装可能です。
この件についてはオオバの経験談に基づいた持論を↓こちらの記事で展開していますので、興味ある方は読んでみてください。
まとめ : 【Unity】UIボタンのタップで動くVisual Scriptingの作り方
最後に記事の内容を簡単にまとめます。
①タップにはOnPointerClickノードを使う
②タップインタラクションにはOnPointerDown、OnPointerUpノードを使う
③ボタンが反応しない時はRaycastTargetに注目
④標準ボタンを使う必要はない
こんな感じです。
Visual ScriptingでUIボタンを実装してみていかがだったでしょうか。一切コードを書かずに実装するというのも面白いですよね。
もちろん、実際の現場でそのまま使えるテクニックではありませんが、開発効率を上げるためのアイデアにはなると思います。
Visual Scriptingはプログラマーとクリエーターが協業しやすくなるツールだとオオバは考えているため、今後もVisual Scriptingについての発信も続けていこうと考えています。
最新情報はX(旧:Twitter)の方で発信してますので、フォローもよろしくお願いいたします。
この記事があなたのゲーム開発に少しでもお役に立てたら嬉しいです。
![](https://i.gyazo.com/15f523476a3f5461fcb1733003a58a32.jpg#1920.0__1280.0)
この記事が気に入ったらフォローしよう
「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
ぜひチャンネル登録をお願いします!
最後まで読んでいただきありがとうございました!
すばらしいVisual Scriptingライフをお過ごしください。
- Unity2022.3.18f1