渋谷ほととぎす通信

「Unityをわかりやすく」初心者のためのゲーム作りブログ

【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】

【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】

こんにちは、Unityエンジニアのオオバです。

お悩みさん
お悩みさん
  • UI上のボタンタップで動くVisual Scriptingが作りたい
  • タップはどのノードを使えば良いかわからない
  • オオバ
    オオバ
    本記事ではこれらの悩みを解決します。

    Unity公式が提供するノーコードツール「Visual Scripting」で、UIボタンのタップで動く処理を作りたいけど分からないという声を頂いたので、本記事で解説していきます。

    結論、Visual Scriptingのノードを知っているか知らないかで決まります。この記事を通してノードの種類の幅を広げていきましょう。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_0

    Visual Scriptingをまだ触ったことがない方は、↓こちらの記事で始め方を詳しく丁寧に書いてますのでチェックしてみてください。

    Visual ScriptingのタップはOnPointerClickノードを使う

    はじめに結論を簡単にまとめます。

    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

    メニューGameObject -> UI -> Canvas からCanvasを作成してください。

    もしスマホ向けのUIを作っている場合は、以下のCanvas設定を参考にしてみてください。

    ステップ②Imageを追加

    次にステップ①で作成したCanvas内にImageを作成します。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_2

    Canvasを選択した状態で右クリック。UI -> Imageを選択するとImageが作成されます。

    ステップ③ImageにScriptMachineを追加

    次にImageにScreiptMachineを追加します。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_3

    AddComponentボタンからScriptMachineを検索してください。

    ステップ④ScriptGraphをセット

    最後にProjectウィンドウにScriptGraphを追加します。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_4

    メニューAssets -> Create -> Visual Scripting -> ScriptGraph を選択

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_5

    名前はTapGraphとしておきましょう。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_6

    このTapGraphをステップ③で作成したScriptMachineのGraphにドラッグアンドドロップしてセットしておきます。

    このあたりはVisual Scriptingの基礎的な部分ですので、もし復習したい場合はこちらの記事を参考にしてみてください。

    以上でVisual Scriptingの事前準備は完了です。

    ScriptGraphにタップ処理を実装

    ここからは実際にVisual Scriptingを使ったプログラミングを実装していきます。
    まずは、Visual Scriptingウィンドウを開いておきましょう。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_7

    OnPointerClickノードを追加

    グラフにノードを追加していきます。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_8

    Visual Scripting内で右クリックして「OnPointerClick」と検索してノードを追加します。
    この OnPointerClick ノードがタップをしたときに反応するノードです。

    タップに反応する処理を実装

    次にタップに反応する処理を実装します。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_9

    OnPointerClickノードの出力側コントロールポートからエッジを伸ばしてDebug:Logノードを追加してみましょう。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_10

    Debug:Logノードの入力側データポートをドラッグアンドドロップして String Literalノード を追加します。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_11

    String Literalノードに「Tapped」という文字列を追加しておきます。

    タップ処理の動作確認

    動作確認をしてみましょう。Unityエディタを再生モードにしてください。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_12

    するとこのようにImageをクリック(タップ)するとConsoleウィンドウにログが出力されるようになりました。
    このようにタップ処理を実装する際は OnPointerClick ノードを使うということを覚えておきましょう。

    ボタンのインタラクションをつけてみる

    Consoleウィンドウにログが出力されるだけではつまらないので、ボタンインタラクションを簡単に実装してみます。

    色を指定するColor変数を追加

    タップしたときに色を変更したいので変数を追加します。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_13

    ButtonDownColor、ButtonUpColorという名前のColor型の変数を2つ追加し、それぞれ色を指定しておきます。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_14

    ドラッグアンドドロップをしてGraph変数をグラフ内に追加しておきます。

    Visual Scriptingで使用する変数の種類については次の記事で徹底解説していますので、ぜひ参考にしてみてください。

    OnPointerDownノード / OnPointerUpノードを追加

    タップ時、タップを離した時のイベントを実装する必要があります。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_15

    そこで OnPointerDownOnPointerUp 2つのノードを追加しましょう。

    SetColorノードを追加

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_16

    OnPointerDown、OnPointerUpの出力側コントロールポートにそれぞれ Image:SetColorノード を接続してください。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_17

    Image:SetColorノード の入力側データポートにそれぞれ ButtonDownColorButtonUpColor のグラフ変数を接続します。

    準備はこれで以上で動作確認してみましょう。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_18

    Unityを再生すると、このようにタップしたときに色が変わりました。
    このようにボタンにインタラクションをつけたい場合はOnPointerDownOnPointerUp この2つを使えば実装できますので覚えておきましょう。

    Visual Scriptingだけで複雑なUIアニメーションも実装可能

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方【Visual ScriptingでUI開発】_19

    Visual Scriptingに慣れてくるとこんな感じでアニメーションもVisual Scriptingだけで実装可能です。試行錯誤しながらノードを接続するのは面白いのでUI開発に興味ある方は挑戦してみてください。

    ボタンが反応しない時の対応方法

    ボタンをタップしても反応しない時の対応方法について解説します。
    ボタンが反応しない原因はいくつかありますが、今回は代表的なものを紹介します。

    ImageのRaycastTargetがOFFになっていないかチェック してみてください。
    このチェックボックスがOFFだとボタンは動きません。必ずチェックを入れておきましょう。

    その他にいくつもボタンが反応しない理由はあります。↓こちらの記事でボタンが押せない原因を 思いつく限り全てリストアップ していますので、直らない方はぜひチェックしてみてください。

    標準ボタンを使用する必要はない

    最後にUnity公式が提供する標準ボタン(Buttonコンポーネント)をなぜ使わなかったのかを紹介します。
    結論から言うと「使わなくても動く」からです。

    標準ボタンでアニメーションさせる場合はAnimationClipを使う必要があったり、演出処理の使い回しが難しかったりと、経験上ゲーム開発するうえで不都合なことが多かったです。
    今回Visual Scriptingでボタンの実装をしてみてお気づきの通り、標準ボタンを使わなくても実装可能です。

    この件についてはオオバの経験談に基づいた持論を↓こちらの記事で展開していますので、興味ある方は読んでみてください。

    まとめ : 【Unity】UIボタンのタップで動くVisual Scriptingの作り方

    最後に記事の内容を簡単にまとめます。

    【Unity】UIボタンのタップで動くVisual Scriptingの作り方

    ①タップにはOnPointerClickノードを使う

    ②タップインタラクションにはOnPointerDown、OnPointerUpノードを使う

    ③ボタンが反応しない時はRaycastTargetに注目

    ④標準ボタンを使う必要はない

    こんな感じです。

    Visual ScriptingでUIボタンを実装してみていかがだったでしょうか。一切コードを書かずに実装するというのも面白いですよね。

    もちろん、実際の現場でそのまま使えるテクニックではありませんが、開発効率を上げるためのアイデアにはなると思います。

    Visual Scriptingはプログラマーとクリエーターが協業しやすくなるツールだとオオバは考えているため、今後もVisual Scriptingについての発信も続けていこうと考えています。

    最新情報はX(旧:Twitter)の方で発信してますので、フォローもよろしくお願いいたします。

    この記事があなたのゲーム開発に少しでもお役に立てたら嬉しいです。

    「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
    ぜひチャンネル登録をお願いします!

    最後まで読んでいただきありがとうございました!
    すばらしいVisual Scriptingライフをお過ごしください。

    オススメ記事
    検証環境
    • Unity2022.3.18f1