Blender Tips編 #19 Blender 公式MCPを使用してClaude CodeでBlenderを操作する

どうも蒼水です。
今回はBlender公式から出されているMCPを導入してClaudeCodeにBlenderを操作できるようにする方法について解説します。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com

使用Blenderバージョン：5.2.1LTS

今回の目的

今回はBlender公式から出されているMPCを導入してClaude CodeがBlenderを操作できるような環境を構築し、各種操作やアドオン開発の役に立てることを目的とします。
MCPを導入することでAIエージェントがBlenderを操作できるようになるためアドオン開発時のBlender関連のモジュール（bpy等）を読めるのはもちろん、開発後の実機動作確認などまでほぼ自動で開発することができるようになります。
アドオン開発以外でも3DView等を直接操作することができるのでモデリング等もさせることも可能です（ちゃんとしたモデル作るなら人の手は介入させた方が良いとは思いますが）
なお、本記事は公式ページのこちらを参考にしています。
www.blender.org

前提知識：MCPって何？

エンジニアの方等で普段からAIを使用した開発をしている人とかでは馴染みある人が多いと思いますが、モデラー等のデザイン系の方にはあまりなじみがないと思われるので先に説明しておきます。
MCPとはModel Context Protocolの頭文字をとった言葉で、つまりClaude CodeやCodexといったLLM（AIエージェント）と接続するためのプロトコル（共通規格）のことです。
今回扱うBlender MCPでは公式MCPをBlenderにアドオンとして追加することでLLMがBlenderを操作できる環境を構築します。

Blender公式MCP導入手順

Blenderバージョンの確認

Blender公式MCPを使用するにはBlenderのバージョンが最低でもBlender5.1以上であることが要件となっているのでまず自分が使用しているBlenderのバージョンを確認しましょう。
自分は基本LTSを使用しているため、Blender5.2.1LTSを使用しています。
Blender5.2.1LTSは以下ページからインストールできます。
www.blender.org

MCPアドオンを導入する

まず先に編集->プリファレンスのシステムからネットワークにあるオンラインアクセスを許可にチェックを入れておく必要があるのでここの設定をしておきます。

次に公式MCPのページにある青い破線の部分をBlenderに2回ドラッグ＆ドロップします。
www.blender.org

1回目ではBlender Labのリポジトリの追加のみが行われます。
何やらいろいろ出てきますが基本そのまま進めばOKです。

2回目でアドオンの追加が行われます。
ここまで完了すればアドオンが追加されており、アドオンの一覧にMCPというアドオンが入っていることが確認できます。
AutoStartにチェックが入っているので一度導入すれば再度Blenderを開いたときに自動的にMCPサーバーが立ち上がりLLMとの接続が可能な状態となります。

Claude CodeからBlenderを制御してみる

ではここから先はClaudeCodeに移ります。
仮にアドオン開発をするものとして自分の場合はDドライブにBlender_Toolsというフォルダを作成してそこで作業するのでClaudeCodeではそのフォルダを指定して作業するものとします。

Blenderコネクタを追加する

ClaudeがBlenderを操作するにあたり、コネクタというものを追加しておく必要があります。

追加方法はチャット欄の下にある「＋」からコネクタを参照、Blenderで検索すればコネクタが出てくるのでそれを追加します。

Blenderを選択してインストールからコネクタを追加できます。

疎通確認

準備ができたのでMCPサーバーとの疎通確認を行ってみます。
今の状態とかも聞いたのでいろいろな情報が拾えていることがわかりますね。
前回の記事で開発したアドオンの情報とかも見れてますね。

実際に何か動かしてみる（モデリング）

上の例ではデフォルトキューブを配置してXYZに45度の回転を入れるように指示してみたものです。
結果として指示通りの操作が行われ、その結果のスクリーンショットも撮影して共有してくれます。
このようにBlender MCPを導入することでモデリング作業を行うことができます。

実際に何か動かしてみる（アドオン開発/実機確認）

また、モデリングだけでなくアドオンの開発もMCPを使用することで実機確認を行うことができます。
試しに前回の記事で開発したOrigin to Face Normal（原点操作アドオン）を操作させてみましょう。
その結果、きちんと指示通りにアドオンの機能が実行・設定され検証結果の報告も行ってくれました。

おわりに

アドオン開発に関してはもはやコーディングから手動テスト/デバッグはほぼ自動化され自分の欲しいアドオンを都度開発してしまうことまでも可能となります。
これからはもう自分でアドオン開発する時代ですねぇ！
プログラムがわからなくてもそれなりのアドオンはそれなりに作れてしまうのでデザイン系の人でもぜひこのMCP＋AIAgentでの制作は試してみて欲しいですね！

次回記事

＜記事ができ次第追加＞

Blender Tips編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク

Blender Tips編 #18 選択した面を基準に原点設定を行う | アドオン配布/説明

どうも蒼水です。
今回はちょっと個人的に欲しくなった機能として原点のトランスフォームをあとからお手軽にいじりたくなったが、検索してもそれっぽいの出てこないし公式の機能でいい感じのなくないか...?となってしまい...。
だったらアドオン作ればいいだろ！！！というわけで作ったのでその紹介となります。
なおアドオンはBOOTHで無料公開していますので以下からご自由にご利用下さい！（♡つけてくれるだけでもうれしいので是非よろしくお願いします！）
atelier-aomi.booth.pm
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
開発環境：Blender 5.2LTS

今回の目的

例えばですが、上動画のように（0,0,0）の位置に最終的にフリーズさせると左のキューブのような状態になるのですが、マニピュレータの操作の都合上右のキューブのように特定の面に合わせたい！みたいなシチュエーションが個人的にちょいちょいあり、Blenderのデフォルト機能でやれないことはないんですがちょっとめんどくさいなぁ....となったのでお手軽に原点のトランスフォームを設定できるアドオンの開発をしました。
今回の記事では本アドオンの導入方法から使い方の解説をします。
同じようなシチュエーションの方がいれば是非ご利用ください！

導入方法

本アドオンは以下のBOOTHで無料公開していますのでこちらからDLしてご利用ください。
atelier-aomi.booth.pm


DLしたら中にpythonファイルが入っていますのでこれをBlender内で編集 -> プリファレンスの中にあるアドオンを開き、右上のディスクからインストールで読み込んでください。
これでOriginToFaceNormalという名前のアドオンがインストールされます。

使い方

インストールすると面コンテキストメニュー（編集モードで面選択した状態で「W」キー）、あるいは上部メニューにある「メッシュ」から「原点を選択面の法線に設定」から実行することができます。
実行後はでデフォルトではオブジェクトの中心に原点位置が設定されます。実行後に3DView左下に出るウィンドウで原点位置と法線に合わせる軸を設定できます。
タンジェントの軸も設定できるので２軸目を指定することで法線方向の軸を維持したまま任意の回転をかけることもできます。

おわりに

説明は以上です。
とても簡素なアドオンですがかゆいところに手が届くようなツールではあると思うので同じシチュエーションに遭遇してしまった方はどうぞ！
なお、本アドオンはClaudeCodeで作成してるんですが最近はもうアドオンを手軽に自動開発してるような環境構築しているのでこういった小さいアドオン作って個人利用しまくるとかめっちゃ良いと思います。作ったらどんどん本記事みたいに書いて無料公開します。（よほど独自性があったり作りこんだツールでもない限りは有償販売はしない予定）
次回記事で自分のアドオン開発環境について少しお話ししようかなと思います！
Tipsとして書きますが、これはBlenderユーザーならみんなやった方が良い（食い気味）
というか誰でもできるから無料公開するしてるやつ。個人利用だけでもいいけどどうせすぐできるものだからみんな使おうぜ！の精神（それなりにデバッグはしてるけど保守コストとか責任あまり持ちたくないというのもある）

次回記事

atelier-aomi.hatenablog.com

＜PR＞

リンク

Unity UI編 #11 トグルのUIの使い方を理解する

どうも蒼水です。
今回はトグル（Toggle）という所謂チェックボタンの挙動を実際に触りつつ理解を深めていきます。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

今回はトグルUIを配置して実際にチェックのON/OFFをした際にイベントを発火させたりしてどういった挙動をするのかを理解することを目的とします。
なお、今回も前回のボタンと同様にスクリプトの実装が必要なUIとなりますのでそこも含め解説していきます。

トグルを配置する

ボタンUIを配置するにはヒエラルキーで右クリック -> UI -> Toggle を選択して配置することができます。
あとはマニピュレータかRect Transformで位置を設定して任意の場所に配置します。

トグルのオブジェクト構成を理解する

トグルは一番親のToggleとその子階層2つの画像（Image）と1つのテキスト（Text）から構成されます。
ボタンの時と同様にImageが参照するSpirteを変更すればルックを変更することができますのでこれは後ほど試しすこととします。

とりあえずなにも実装しない状態で再生してチェックボックスをクリックすることで動作を確認することができます。
クリックするたびにチェックのON/OFFがされることが確認できます。

Toggleコンポーネントを理解する

ここからはToggleコンポーネントにフォーカスしていきます。
理解しておくべき箇所はボタンのルックを定義するColor関連とOn Click()の2か所が特に重要となります。
それぞれ確認していきましょう。

Color関連

Color関連にはいろいろとありますが、要するにマウスの挙動に合わせてボタンのルックを定義するものです。
基本的に前回の記事のボタンのColor関連と同じです。

Normal Color	通常時の色
Highlighted Color	マウスカーソルと重なっているときの色
Pressed Color	クリックされている状態（押しっぱなしにされているとき）の色
Selected Color	クリックして選択された状態の色
Disable Color	無効化されている状態の色

On Value Changed（Boolean）

トグルにおいて最も重要になるのがこのOn Value Changed（Boolean）です。
チェックボックスの切り替えを行うたびに登録したイベントを発火します。
またその際に引き数としてチェックの状態によってBoolean型（True/False）を渡します（＊Dynamicの場合。詳細は後述。）
スクリプトの実装の際はチェックボックスの状態を受け取り、それを内部で分岐させる形で実装することでON/OFFの状態ごとにイベントを設定できます。
今回もボタンの時と同様にい呼ぶ関数を選択できるようにするためにpublicにしておいてください。

public void ToggleChangeEvent(bool isOn)
{
    if (isOn)
    {
        // ON時の処理記述
        Debug.Log("ONになった");
    }
    else
    {
        // OFF時の処理を記述
        Debug.Log("OFFになった");
    }

1点見落としがちな点としてToggleのイベント設定にはDynamicとStaticの二つが存在していることです。
違いとしてはその名の通り動的か静的かであり、挙動としてはDynamicは再生時にクリックして切り替わったりした際のその時の状態をBool型で返します。
一方Staticでは再生時の状態にかかわらずインスペクタで設定されているチェックボックスの状態をBool型で返します。例えば再生時にクリックしてONにしているがインスペクタではOFFに設定されているという状態では必ずFalseを返します。
分岐処理の実装したのにどちらか一方しか返ってこない！という躓きをした場合はDyanmicではなくStaticでイベント設定をしていないかを疑ってみてください。

Is On

In Onは文字通りチェックが入っているかどうか、がインスペクタに表示されています。
実際の操作はGame Viewで行うのが基本ではありますがインスペクタで操作してもきちんとScene/Game Viewの方も反映されていることがわかります。
なお、公開されている値となるのでスクリプトから制御することもでき、以下の実装でスクリプトから操作することが可能です。
この方法ではGameViewでクリックしたときと同じ扱いで処理されるため、設定しているイベント（On Value Changed）が発火されます。

toggle.isOn = true;
toggle.isOn = false;

イベントを発火せず切り替える方法もあり、以下の実装で切り替えることができます。

toggle.SetIsOnWithoutNotify(true);
toggle.SetIsOnWithoutNotify(false);

トグルのルックを変更する

ボタンと同様の方法でトグルもルックの変更を行うことができます。
トグルの構成の項でも説明した通り2つのImageと1つのテキストから構成されているのでそれぞれの参照する画像およびフォントを変更すれば自由にルックを変更することができます。
自分のプロジェクトのトンマナに沿ったデザインにするのが良いと思います。

おわりに

これでトグルの基本的な使い方は理解できたと思います。
ユーザーにチェックボックスを触らせて何かするときは大体これで何とかなります。
次回ですが、次のUIに入る前にUI共通で存在するListenerというものについて触れておこうと思います。
ボタンやトグルといった操作できるUIにはListenerという機能があり、今回扱った制御と違った制御実装方法が存在するのでそちらについても触れていければと思っています。

次回記事

＜記事ができ次第追加＞

Unity UI編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク

Unity Tips編 #16 Unity CLI + Unity Pipelineを導入してClaude CodeでUnityを操作できるようにする

どうも蒼水です。
AI編にするか迷ったんですが前回記事からの続きなのでUnityTipsとして書きます。
前回の記事に引き続きUnity CLI + Unity Pipelineが導入された環境を前提としてClaude CodeでUnityエディタを操作できるようにしたのでその導入記録です。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

前回の記事で導入したUnity CLI とUnity PipelineでAI AgentがUnityエディタを操作するための準備は整っているので彼らが実際に操作できるようにすることを目的とします。
なお筆者はClaude Codeを使用しているので今回の内容ではClaude Codeでの連携になりますので予めご了承ください。
前回記事が必須になっているため、これらを導入していない方は先に以下の記事を参照してください。
atelier-aomi.hatenablog.com

前提：Claude Codeが必要とするもの

UnityとClaude Codeが連携するためには必要なものが３つほどあるようなので一旦それらをまとめておきます。
これらをを用意することで実行可能なコマンド等をClaude Codeは必要に応じて呼び出すことができるようになります。

Unity Pipeline用のSkills

Claude CodeはUnity CLIやUnity Pipelineをことを事前に理解しているわけではありません。
そのためUnityを操作するにあたり、彼らがそれらを理解するための前提知識をSkillsとして用意して常に読みに行くような環境を構築します。

CLAUDE.md への記述

CLAUDE.mdは Claude に永続的な指示を与え、自動メモリで Claude が自動的に学習を蓄積するためのものです。
ここに関連知識を追記しておく必要があります。

code.claude.com

Setting.json への記述

Settings.jsonでは実行できるコマンドの許可リストを記述できます。破壊的なコマンドを都度許可制ににしたり常に許可するコマンド等を記述しておきます。

必要なものを用意する

前項で記述した3つが必要になりますがこんなもの自分で書いてられないのでClaude Codeに丸投げします。
前回の記事までで自分のプロジェクトにはUnity CLIとUnity Pipelineは導入してローカルHTTPサーバーも立てられているのでそれらをClaude Codeに以下のプロンプトで読ませてみました。

• このプロジェクトでClaudeCodeと連携するためにUnity CLIとUnity Pipelineを導入してある。これからClaudeCodeがこれらが持つコマンドを理解してそれらを自動で実行できるようにしたい。

その結果として以下の3つが作成されました。これが前項で説明した3つの必要なものです。

ローカルHTTPサーバーと接続を確認する

前回までの記事で各種設定が済んでいればUnityエディタを起動していれば自動的にローカルHTTPサーバーが立ち上がります。
以下のコマンドで接続の確認は可能です。

unity pipeline list

以下のように表示されていれば準備はできているのでClaude CodeはUnityを操作できる状態になっています。

Claude Codeに直接聞いてしまっても良いです。

• 今ってUnityのローカルHTTPサーバーと接続できてる？

実際にClaude Codeで操作してみる

Transformを操作する

Transform等を制御する例として上動画ではキャラモデルを後ろ向きになるようにY軸で180度回転させる操作をClaude Codeにさせてみました。
注：動画では思考中が長いのでカットしています。

アセットを配置する

次にアセットの配置例として上動画ではキャラモデルと同じ位置にプリミティブなキューブを配置させてみました。
今回はキューブを配置していますが、あらかじめ用意したアセットとかを指定の位置に配置することも問題なくできます。

マテリアルを設定する

最後に上画像ではキャラモデルを取得してそのモデルが持つマテリアルをすべて取得し、Base Colorを赤に設定してみました。
Claude CodeはRendererを探索しそれが持つマテリアルをすべて取得したのちに該当プロパティを見つけ全てのマテリアルに対して順に実行している様子が確認できます。

簡単なゲームを作ってみる

上動画のゲームは人が一切手を入れることなく横スクロールの障害物を避けるゲームを作ってくれというゴールを決めてClaude Codeに作らせたものです。
ビジュアル周りは人が整えるとして、ゲームの基本的な設計/ロジック周りはやらせても問題ないかなぁという気持ちですね。
ざっくり基礎だけ作らせて人間が詰めていくみたいなフローや、とりあえず触れるプロトをさっと作ってしまうとかは全然アリな気がします。

これらはあくまでも一例となりますが理論上人間が手動で操作できる操作はほぼほぼ操作できると思われ、タスクを設定してあとはお任せしてしまう、ということが可能です。

おわりに

最近IDEも触らなくなってきているしUnityエディタもあまり触らなくても開発ができてしまう時代が来てしまうのだろうか...。
さすがにビジュアルに関するアセットとかは人の手入れたいけどコードとか設計はLLMに任せてしまっても良さそうな気がしますねぇ。
寝る前とかに指示だけしておいて起きたら出来てる、とかそういうのができてしまうので便利ですね。
Unity7から本格的にAIが導入されていく雰囲気があるのでしっかり追いかけて適応していきたいですね。

次回記事

＜記事ができ次第追加＞

Unity Tips編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク

Unity Tips編 #15 Unity CLIとUnity Pipelineをインストールして使用する

どうも蒼水です。
AI時代が進みゆく中Unity7からよりAIを使用を前提としたような機能が追加されていきそうな感じになっているのでこれからのために少しずつ導入を進めていこうかと思います。
前回のUnity Tips記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

今回はUnity7の到来に備えてUnity6以降から使用可能になっているUnity CLIというものを自分のプロジェクトに導入し、コマンドラインから実際操作して理解を深めることを目的とします。
なお、今後進めていくLLMと組み合わせた使用方法までは進めず、まずはUnity CLIのみで何ができるのかを理解することを目的とします。
ClaudeCode等のAI Agentとの組み合わせについては次回記事で執筆します。

Unity CLIとは？

Unity CLIとはUnity Command-lineInterfaceのことで従来のように通常Unityエディタを操作して何かするのではなく、コマンドライン（WindowsだとPowerShell等）から操作するためのインターフェースです。
これを使用することでいつものようにUnityエディタを手動で操作するのではなくコマンドラインからあらゆる操作を実行することができるようになります。
なお、Unity CLIはUnity6以降で使用可能なもののためそれ以前のエディタでは使用できてない点に注意してください。
これはClaudeやCodex等のLLMにUnityを操作させる際に非常に役に立ちます。
docs.unity.com

Unity CLI をインストールする

docs.unity.com
上記のドキュメントを見つつ進めていきます。なお、筆者はWindosなのでその前提で書きます（MacOSの方は上サイトから確認できます。）
先に以下のcdコマンドを使用してPowerShellで使用するプロジェクトに移動しておきましょう。
自分の場合は以下のパスに本ブログ用のプロジェクトを作成しているので以下のように移動しておきました。ここは自分のプロジェクトに合わせてください。

cd D:\GitProjects\TeckBlog

次にUnity CLIを以下のコマンドでインストールします。

$env:UNITY_CLI_CHANNEL='beta'; irm https://public-cdn.cloud.unity3d.com/hub/prod/cli/install.ps1 | iex

コマンドが実行されると数秒かけてインストールが実行され、無事完了すれば下画像のようになります。
再起動してくれと指示されているのでPowerShellを再起動しましょう。

次に公式の記事にあるように以下のコマンドを実行してコマンド一覧を取得できるか確認してみましょう。

unity help

無事実行できれば下画像のような状態になります。

ここに表示されているものがUnity CLIで実行できるコマンド一覧となります（画面外にたくさんあるので各自確認してください）
試しにバージョン確認のコマンドを実行してみましょう。

unity --version

実行するとインストールしたUnity CLIのバージョンが確認できますね。現在Unity CLIはbetaとして公開されていることがわかります。

一旦これでUnity CLIを使用してUnityをコマンドラインから直接操作する基礎部分を構築することができる環境が整いました。

Unity CLIのコマンドを使用して実際に操作してみる。

では本題。ここから実際にUnity CLIを使用してUnityエディタを操作してみましょう。

Unityアカウントにログインする

認証で引っかかるとアレなので先にUnityアカウントのログインをしておきます。これもUnity CLIから可能となっており以下のコマンドから認証できます。

unity auth login

このコマンドを実行するとブラウザが立ち上がりログインを求められます。
ブラウザ側でログインすることでUnityアカウント認証を行えます。

ログインの許可が求められたらAllowします。

これで無事認証が完了しているのでPowerShellの方の戻ると「サインインしました。」と出ていれば認証成功いることを確認できます。

任意のプロジェクトを開く

プロジェクトを開くには以下のコマンドを実行します。

unity open

この際openの次にプロジェクトパスを指定する必要があるようですが、cdコマンドで既にプロジェクトの階層にいるのでopenだけで開くことができます。
任意のunityプロジェクトのパスを指定すればそのプロジェクトを開くことができます。
コマンドが成功すると「現在のディレクトリのプロジェクトを開いています」と出て、そのあとUnityプロジェクトが起動したことがわかります。

なお、openをはじめとした実行できるコマンドはこちらにリファレンスがあるのでunity help以外でもこちらで確認することもできます。
docs.unity.com

Unity Pipeline パッケージをインストールする

次にコマンドラインからUnityエディタをローカルHTTPサーバー経由で制御するためのツールであるUnity Pipelineパッケージをインストールしておきます。
インストールはコマンドラインから行うことになるので以下のコマンドを実行します。

unity pipeline install

無事インストールできれば下画像のようになりインストールされたことが確認できます。
Packages/manifest.jsonに追加、とあるのでエディタに戻るとインストールの読み込みが走ります。

読み込みが終わってPackageManagerを確認するとUnity Pipelineパッケージが発見できます。
これでコマンドラインからUnityエディタを操作する準備が整いました。
この状態になればエディタを起動した際にローカルHTTPサーバーが立ち上がりUnityエディタを操作できるようになります。

次にローカルHTTPサーバーの状態を確認するために以下のコマンドを実行します。

unity pipeline list

Unity Pipelineパッケージが正しくンストールされ、問題なければサーバーの状態が下画像のように表示されます。
これで全ての準備が整いました。

以下のコマンドを実行するとunity pipelineで実行可能なコマンド一覧を取得できます。

unity command

これからのコマンドのうち使いやすそうなものをいくつか実行してみましょう。

シーンを再生/停止する

シーンを再生するには以下のコマンドを実行します。
なお、Unity Pipleline パッケージのコマンド実行にはかならずunity cmdあるいはunity commandのあとに続けて書くようにします。

unity cmd editor_play

逆に停止する際は以下のコマンドで停止できます。

unity cmd editor_stop

おわりに

このようにUnity CLI + Unity Pipelineパッケージを使用することでUnityエディタを手動で触ることなくコマンドラインから実行できる環境を構築することができます。
今回は理解をするために手動でコマンドを実行したりしていましたが、実際のワークフローではこの環境をベースにClaude CodeやCodex等のLLMと連携し彼らAI Agent自身がコマンドを実行できるようにすることでUnityでのAIを使用したワークフローの構築に役立てます。
なので実際に手動でコマンドを人間が実行するわけではなく、これらのコマンドをLLMが認識して必要に応じてあらゆるコマンドを彼らが自動で実行するというのが実際想定しているワークフローとなります。
次回記事ではここまでで構築した環境をもとにClaude CodeやCodexといったLLMとの連携を行い実際にAI AgentにUnity開発を行わせてみます。

次回記事

atelier-aomi.hatenablog.com

Unity Tips編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク

Unity UI編 #10 ボタンのUIの使い方を理解する

どうも蒼水です。
今回は画像、テキストと触ってきて次はボタンのUIについての理解を深めていきます。
前回のUI記事はこちらからどうぞ。
atelier-aomi.hatenablog.com
実行環境：Unity6(6000.1.17f1)

今回の目的

今回はボタンUIを実際に配置して機能を設定し、実行するところまでを触りながら理解を深めることを目的とします。
ボタンを押したときの挙動は予め自分で機能を定義することができるので結構いろいろなことができます。
ボタンはこれまでの画像とテキストの組み合わせであり、スクリプトとの連携も必要になるので前回までの内容が理解できている方が良いので必要あれば前回までの記事を参照してください。

ボタンを配置する

ボタンUIを配置するにはヒエラルキーで右クリック -> UI -> Button - TextMeshPro を選択して配置することができます。
あとはマニピュレータかRect Transformで位置を設定して任意の場所に配置します。

ボタンのオブジェクト構成を理解する

配置したボタンの中身を見てみましょう。
前回までの記事で画像やテキストを理解してきたわけですが、ボタンのUIはこれまで扱ったそれらを組み合わせたものになっています。
また、ボタン独自のコンポーネントとしてButtonというコンポーネントがアタッチされており、ボタンを押したときの挙動を設定することができます。

Button コンポーネントを理解する

ここからはButtonコンポーネントにフォーカスしていきます。
理解しておくべき箇所はボタンのルックを定義するColor関連とOn Click()の2か所が特に重要となります。
それぞれ確認していきましょう。

Color関連

Color関連にはいろいろとありますが、要するにマウスの挙動に合わせてボタンのルックを定義するものです。
上動画ではマウスカーソルを動かしてボタンUIに重ねる→クリック（長押し）→離して別の場所をクリック（非選択状態にする）
という流れの動画です。以下の各色の説明と合わせて理解してみてください。

Normal Color	通常時の色
Highlighted Color	マウスカーソルと重なっているときの色
Pressed Color	クリックされている状態（押しっぱなしにされているとき）の色
Selected Color	クリックして選択された状態の色
Disable Color	無効化されている状態の色

On Click()

ボタンにおいて最も重要になるのがこのOn Click()です。
こちらはスクリプトとの連携が必須にはなるのですが、スクリプト側で設定した挙動をボタンを押したときにに発火させるための機能となります。
この後はサンプルスクリプトと一緒に説明していきます。

On Click()に機能を設定するためには機能を予め設定したスクリプトを用意します。
今回は以下のようにText Mesh Proのテキストを更新するスクリプトを用意しました。機能としてはText Mesh ProのTextを参照し書き換える機能となります。
ここで大事なこととしては関数はPublicに設定し、外部から呼び出せるようにしておく必要があります。また戻り値もvoid（戻り値無し）にしておきます。
引き数も1つに限り設定することができますが、それはこの後別途説明します。

public class ButtonSample : MonoBehaviour
{
    [SerializeField] TextMeshProUGUI textMeshPro;
    
    public void OnClickSample1()
    {
        textMeshPro.text = "1番目のボタンを押しました。";
    }

    public void OnClickSample2()
    {
        textMeshPro.text = "2番目のボタンを押しました。";
    }
}

このスクリプトをどこでも良いのでアタッチします。今回はわかりやすくButtonそのものにアタッチしてみました。
On Click()の＋ボタンを押すとスクリプトを参照する場所が出てくるのでスクリプトを参照し、先ほど設定した関数を選択することでその機能を呼び出すことができます。
この設定をしたボタンを押したときの挙動が下動画になります。押したボタンによってテキストが書き換えられていることがわかると思います。

また、ボタン機能には前述のように1つに限り引き数を取ることもできます。
分岐処理を１つの関数として下のような書き方をすることもできます。
ボタンの番号に合わせて処理を分岐させる処理となります。

public class ButtonSample : MonoBehaviour
{
    [SerializeField] TextMeshProUGUI textMeshPro;
    
    public void OnClickSampleAll(int num)
    {
        switch (num)
        {
            case 1:
                textMeshPro.text = "1番目のボタンを押しました。";
                return;
            case 2:
                textMeshPro.text = "2番目のボタンを押しました。";
                return;
            default:
                return;
        }
    }
}

引き数が設定されている場合On Click()の中に引き数を設定できるフィールドが表示されるのでそこに必要な値を設定することで対象の関数に引き数を渡すことができます。
書き方は違えど挙動としては同じになるのでその辺は自分のプロジェクトでどういった設計にするかで使い分けるのが良いと思います。

ボタンのルックを変更する

標準のボタンのルックはさすがにアレなので独自のものに変更してみましょう。
今回独自のものとして上画像のような画像を用意してSprite Editorで対応したものを用意しました。
今回は枠の追加とドロップシャドウを追加しています。


用意出来た画像をButtonについているImageコンポーネントの参照に入れ替えることでルックを変更することができます。
ルックがおかしくなった場合はPixels Per Unit Multiplierの値を調整すると改善することがあります。

おわりに

これでボタンUIの基本的な設定方法は理解できたと思います。
ボタン機能は自分でスクリプトを書かないといけないのでデザイナーだとちょっと敷居が高い気もしますが、昨今はAIもあるのでClaudeとかに機能作ってもらって設定するとかもアリだと思います。
ボタンのルックはプロジェクトに合わせて良い感じの素材を用意して設定しましょう。
今回さらっとスクリプトとUIの繋ぎこみをやりましたが、このへんの話はUIの基本周り網羅したら別途記事を執筆予定です。

次回記事

atelier-aomi.hatenablog.com

Unity UI編記事一覧はこちらからどうぞ。
atelier-aomi.hatenablog.com

＜PR＞

リンク

AI編 #逆引きまとめ

AI編記事の概要の逆引きでまとめていますので目的に応じてご利用ください。
記事が更新されるたびこちらのまとめ記事も随時更新されていきます。

Claude / Claude Codeの基本的なあれこれ

Claudeのパーソナライズについて知りたい

▶Claudeのパーソナライズについてはこちら
atelier-aomi.hatenablog.com

ClaudeのSkillsについて知りたい

▶Claudeのパーソナライズについてはこちら
atelier-aomi.hatenablog.com

Unityとの連携事例

Claude Codeを使用したUnityでのシステム開発事例

▶Claude Codeを使用したUnityでのシステム開発事例はこちら
atelier-aomi.hatenablog.com

AIを使ったツール開発事例（ツール公開あり）

テクスチャ生成ツール

▶テクスチャ生成ツールの事例はこちら
atelier-aomi.hatenablog.com

ノーマルマップ生成ツール

▶ノーマルマップ生成ツールの事例はこちら
atelier-aomi.hatenablog.com

Google WorkSpaceとの連携事例

GASで情報収集/統計を自動化した事例

▶GASで情報収集/統計を自動化した事例はこちら
atelier-aomi.hatenablog.com

以下記事追加予定地

随時追加