2024-04-11

Unity Learnのビジュアルスクリプティング学習を試すその４（Object変数の作成）

本日はUnityの技術調査枠です。
Unity Learnのビジュアルスクリプティング学習を試した内容を記事にします。
今回はObject変数の作成です。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

Graph変数を作成する

Object変数はビジュアルスクリプトを設定したゲームオブジェクトで利用できる変数です。
前回利用したGraph変数と異なり、Inspectorビュー上から編集が可能です。
docs.unity3d.com

RotateノードのYの値を設定するObject変数を作成します。
BlackboardパネルのObjectタブを選択します。

New Variable Nameの欄に変数の名前を入力して[+]ボタンをクリックします。
今回はY Rotateという名前を設定しました。

[Type]を[Float(浮動小数点数)]、[Value]を[1]に設定します。

変数の定義の左端にある横棒アイコンをGraphにドラッグします。
するとGraphにその変数を参照するGet Variableノードが追加されます。

Get Variableノードの出力ポートをRoateノードのY Angleの入力ポートに接続します。
これでRoateノードのY Angleの値がY Rotate変数の値で設定されるようになりました。

作成したObject変数はInspectorビューに表示され、ここから値を変更することができます。

動作を確認する

シーンの再生ボタンを押して動作を確認します。
Cubeオブジェクトが回転し始めます。

実行中、CubeオブジェクトのInspectorビューから変数の値を変更して回転のスピードを変更することができます。

次回はビジュアルスクリプトを使った基本プログラムを試すです。
bluebirdofoz.hatenablog.com

2024-04-09

Unity Learnのビジュアルスクリプティング学習を試すその３（変数によるビジュアルスクリプトの設定）

本日はUnityの技術調査枠です。
Unity Learnのビジュアルスクリプティング学習を試した内容を記事にします。
今回は変数によるビジュアルスクリプトの設定です。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

Graph変数を作成する

Graph変数は設定している対象のGraphで利用できる変数です。
ここでは前回、Rotateノードに直接設定した回転の値をGraph変数で指定できるようにしてみます。

Rotateノードの3つの値をすべて 0 に戻しておきます。
BlackboardパネルのGraphタブを選択します。

New Variable Nameの欄に変数の名前を入力して[+]ボタンをクリックします。
今回はX Rotateという名前を設定しました。

[Type]を[Float(浮動小数点数)]、[Value]を[1]に設定します。

変数の定義の左端にある横棒アイコンをGraphにドラッグします。
するとGraphにその変数を参照するGet Variableノードが追加されます。

Get Variableノードの出力ポートをRoateノードのX Angleの入力ポートに接続します。
これでRoateノードのX Angleの値がX Rotate変数の値で設定されるようになりました。

オブジェクト型の識別

変数で指定できるTypeは以下の通りです。

Float：23.456 や -0.9 などのような 10進数
Integer：23 や -1 などの整数
Boolean：True (真) や False (偽)
String：「hello, world!」のような英数字の連続した文字
Vector3：3D 空間で作業する際に便利な X, Y, Z の 3 つの浮動小数点数のセット
Vector2：2D 空間を扱うための 2 つの浮動小数点数、X と Y のセット
GameObject：シーン内のオブジェクト

ノードの入力ポートで要求されているTypeは上記の一覧で表示されているアイコンと一致しており、そこで識別できます。

ただしビジュアルスクリプトは型について厳密ではありません。
例えばFloatsとIntegersは互換性があり、そのまま接続して利用することが可能です。

動作を確認する

シーンの再生ボタンを押して動作を確認します。
CubeオブジェクトがX軸を軸として回転し始めます。

実行中、Graphウィンドウ上部のValuesボタンを有効にすることで入力されている値を確認できます。

また値を変更してみることも可能です。
BlackboardパネルからX Rotateの値を 3 に変更すると、Game画面でCubeがより早く回転するようになります。

シーンの再生を停止するとX Rotateの値は再生前に設定していた 1 に戻ります。
シーン実行中に行った変更は一時的な変更になることに注意してください。

次回はObject変数の作成です。
bluebirdofoz.hatenablog.com

2024-04-09

Unity Learnのビジュアルスクリプティング学習を試すその２（ビジュアルスクリプトのプログラム）

本日はUnityの技術調査枠です。
Unity Learnのビジュアルスクリプティング学習を試した内容を記事にします。
今回はビジュアルスクリプトのプログラムです。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

Start関数とUpdate関数

新規作成したGraphには以下の２つの機能を持つノードが生成されています。
・On Startノード：アプリケーション起動時に一度だけ実行します
・On Updateノード：アプリケーション起動中フレーム(画面更新)ごとに実行します

今回はOn Updateノードのみ利用するため、On Startノードは右クリックで[Delete]を実行して削除します。

ノードを作成したい場合はGraphウィンドウの何もないところを右クリックしてFuzzy Finderを表示します。
Fuzzy Finderを利用するとUnity Scripting API全体を含む、あらゆるタイプのユニットを探して追加できます。

ビジュアルスクリプトのプログラム

ノードを追加してCubeオブジェクトを回転させるプログラムを作成します。
Fuzzy Finderを表示し、Transform: Rotate (X Angle, Y Angle, Z Angle)を検索して追加します。

追加されたRotateノードは現在のオブジェクトを指定の値で回転する機能を持ちます。

On Updateノードの出力ポートをクリックドラッグしてRotateノードの入力ポートに接続します。
これでフレームごとにRotateノードが実行されるようになります。

RotateノードのX Angle, Y Angle, Z Angleに回転量を値で入力します。
Y Angleに 1 を入力しました。これでY軸を軸としてCubeオブジェクトが横回転するようになります。

動作を確認する

シーンの再生ボタンを押して動作を確認します。
Cubeオブジェクトが回転したら成功です。

次回は変数によるビジュアルスクリプトの設定です。

2024-04-08

Unity Learnのビジュアルスクリプティング学習を試すその１（ビジュアルスクリプトを始める）

本日はUnityの技術調査枠です。
Unity Learnのビジュアルスクリプティング学習を試した内容を記事にします。
今回はビジュアルスクリプトを始める手順です。

参考チュートリアル

本記事は以下のUnity Learnチュートリアルを試したものです。
learn.unity.com

今回は「ビジュアルスクリプトを始めよう」のセクションを実施します。
learn.unity.com

ビジュアルスクリプティングについて

Unityのビジュアルスクリプティングでは実際のコードを書くことなく、Unity プロジェクトのロジックを作成することができます。
ビジュアルスクリプティングは視覚的な「言語」であり、命令を図示することができます。
Unity バージョン 2021.1 以降では、Visual Scripting パッケージが Unity にデフォルトでインストールされます。
unity.com

ビジュアルスクリプティングを始める

本チュートリアルはビジュアルスクリプティングのユーザーインターフェイスに慣れるためのものです。
新しいUnityプロジェクトを作成して、最初のビジュアルスクリプトのアセットを作成します。

シーンの作成

Unity Hubを起動し、[New project]をクリックして新しいプロジェクトを作成します。

今回はUnityバージョンの2023.3.17fを利用します。前述の通りバージョン2021.1以降でビジュアルスクリプトがデフォルトでインストールされます。
[3D (URP)]のテンプレートを使用し、[Create Project]で新しいUnityプロジェクトを作成します。

新規プロジェクトが作成できたらシーンに正方形のオブジェクトを配置します。
Hierarchy欄で右クリックから[Create -> 3D Object -> Cube]を実行します。

これでシーンの準備ができました。
ビジュアルスクリプトを使ってCubeオブジェクトに様々な処理を実装していきます。

Script Machineコンポーネントの追加

Script Machineコンポーネントはビジュアルスクリプトを実行するコンポーネントです。
Cubeオブジェクトを選択し、InspectorビューのAdd ComponentからScript Machineコンポーネントを追加します。

Graphはビジュアルスクリプトの構成要素の１つで、ロジックを視覚的に表したものです。
Script MachineにはGraphを割り当てることでスクリプトが機能します。[New]ボタンを押下して新規Graphを作成します。

保存ダイアログが表示されるので適当なフォルダを作成し、名前を付けて保存します。
今回はVisualScriptsというフォルダーを作成してRotationと名付けて保存しました。

Graphを設定すると、Script Machineコンポーネントが更新されて[Title]と[Summary]フィールドが追加されます。

本フィールドはScript Machineコンポーネントの名前や説明をメモするためのものです。
今回は[Title]を[Cube回転]、[Summary]を[Cubeを回転させる]と入力しました。

Script Graphウィンドウを開く

Graphを作成する、または、[Edit Graph]ボタンを押すとScript Graphウィンドウが開きます。
Script Graphウィンドウには以下の3つのパネルが表示されています。
・Graph ウィンドウ：グラフを作成するためのパネル
・Graph Inspector：グラフの編集時に、グラフ内のユニットに関する追加情報を提供するパネル
・Blackboard：変数を作成および管理するためのパネル

Graph InspectorパネルとBlackboardパネルは右上の矢印ボタンをクリックして配置を変更することができます。

次回はビジュアルスクリプトのプログラムです。
bluebirdofoz.hatenablog.com

2024-04-07

Meshの環境作成チュートリアルMesh 201を試すその５（3Dアセットを使用してWeb APIを呼び出しWebSlateを更新する）

本日はMicrosoftMeshの小ネタ枠です。
Meshの環境作成チュートリアルMesh 201を試した内容を記事にします。
今回は3Dアセットを使用してWeb APIを呼び出しWebSlateを更新する方法を試します。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

サンプルの動作を確認する

初めに現在のサンプルの動きを確認してみます。
シーンを再生して背後を振り返り、地球儀のオブジェクトに近づきます。

地球儀の任意の個所をクリックしてみます。
デフォルトの状態では適切に設定が行われていないため、クリックに関係ないポイントの地図をWebSlateに表示しつづけます。

今ステップではこの地球儀のクイックしたポイントの地図をWebSlateに表示されるようにします。

ビジュアルスクリプトを使ってWebSlateを更新する

4 - LoadURLオブジェクトをダブルクリックして[Scene]画面を移動します。
本オブジェクトには地球儀型のEarthオブジェクトとWebSlateが配置されています。

Earthオブジェクトを選択してScript Machineの[Edit Graph]を開いてビジュアルスクリプトを確認します。
ここでは地球儀のポイントされた位置の緯度と経度を計算する処理が用意されています。本スクリプトは完成されているため、編集する必要はありません。

次にEarthActionsオブジェクトを選択してScript Machineの[Edit Graph]を開いてビジュアルスクリプトを確認します。
本スクリプトが一部未完成のため、これを更新する必要があります。

Custom Default Webslate Behavior

Custom Default Webslate BehaviorのエリアではWebSlateの初期化が行われます。
WebSlateURL変数を参照し、設定がなければ以下のURLを初期画面としてWebSlateの[Url]に設定します。

https://www.bing.com/maps/

URLBuilder

URL BuilderのエリアではEarthオブジェクトからポイントされた緯度経度を受け取って地図のURLを生成します。
本エリアのスクリプトは完成されているため、編集する必要はありません。

Update webslate

作成したURLはUpdate webslateのエリアでWebSlateURL変数に設定されます。
ここでWebSlateの[Url]にも反映することでWebSlateの画面を更新できます。

出力ポートをクリックドラッグしてWebSlate: Loadノードを追加します。

SetVariableノードの出力ポートをWebSlate: Loadノードの入力ポートに接続します。
これでWebSlateに作成したURLを反映できます。

次にURLを反映するWebSlateの参照を設定します。
Hierarchyから4 - LoadURL配下のWebSlateオブジェクトの参照をWebSlateノードにドラッグして設定します。

これでEarthオブジェクトがポイントされると指定のWebSlateのURLが更新されるようになりました。

動作テストを行う

シーンを再生して背後を振り返り、地球儀のオブジェクトに近づきます。

地球儀の任意の個所をクリックしてみます。
クリックした場所の地図がWebSlateに表示されれば成功です。

これでMesh 101のチュートリアルは完了です。Finished Project.unityと同様の状態になりました。
作成したイベント会場のアップロード手順は以下の記事を参照ください。
bluebirdofoz.hatenablog.com

2024-04-06

Meshの環境作成チュートリアルMesh 201を試すその４（ビジュアルスクリプトを使ってイベント参加者全員のHTMLコンテンツを読み込む）

本日はMicrosoftMeshの小ネタ枠です。
Meshの環境作成チュートリアルMesh 201を試した内容を記事にします。
今回はビジュアルスクリプトを使ってイベント参加者全員のHTMLコンテンツを読み込む手順です。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

ボタンのビジュアルスクリプトを編集する

3 - StaticContentWebslateオブジェクトをダブルクリックして[Scene]画面を移動します。
本オブジェクトにはLoadBunnton1とLoadButton2の2つのボタンが設定されており、本チュートリアルではLoadButton1を編集します。

LoadBunnton1オブジェクトを選択してScript　Machineコンポーネントの[Edit Graph]ボタンをクリックします。
[Script Graph]画面が開き、本ボタンに設定されているビジュアルスクリプトが確認できます。

既にButtonオブジェクトの参照を持つGame Objectノードが配置されているので、出力ポートをクリックドラッグしてIs Selectedノードを追加します。
Is Selectedノードはイベント内の全ての参加者にボタン押下されたことを通知するノードになります。

追加したIs SelectedノードをOn State Changedノードの入力ポートに接続します。
これで押下状態が変化したタイミングのみ通知が行われるようになります。

HTMLページを読み込んで表示する

前回と同様にボタンを押下したタイミングでアセットデータをWebSlateに読み込む処理を追加します。
既にWebSlateコンポーネントの参照は設定されているのでGet Component In Childrenノードの出力ポートをクリックドラッグしてNodeメニューを表示し、Web Slate: Load HTM Content(Html Asset)ノードを選択して追加します。

追加したLoad HTM Contentノードのコンポーネントの入力ポートとGet Component In Childrenノードを接続します。
これでGet Component In Childrenノードで取得したWebSlateコンポーネントの参照をLoad HTM Contentノードに引き渡せます。

次にWebSlateにアセットデータを引き渡します。
Get VariableノードにはHTMLアセットの参照が設定されているので、本ノードをLoad HTM Contentノードに接続するだけです。

これでボタン押下時に用意されたHTMLアセットがWebSlateに読み込まれるようになりました。

動作テストを行う

シーンを再生して動作を確認します。

Load1ボタンをクリックすると、WebSlateオブジェクトに表示されるページが変化すれば成功です。

前回記事との動作の違い

前回記事で作成したボタンとの動作の違いはMeshEmulatorSetupオブジェクトの[Initial Screen Count]を2以上に設定してマルチプレイを試すと確認できます。

前回記事で作成したボタンはIs Selected Locallyノードを使用しているため、ボタンを押下した本人のみ通知が行われてWebSlateの読み込みが発生します。
他の参加者はボタン押下の通知を受け取らないため、WebSlateが変化しません。

一方で今回作成したボタンはIs Selectedノードを使用しているため、イベント内の参加者全員に通知が行われます。
このため、参加者全員の環境でWebSlateの読み込みが発生してWebSlateが変化します。

次回は3Dアセットを使用してWeb APIを呼び出しWebSlateを更新するサンプルを試します。
bluebirdofoz.hatenablog.com

2024-04-05

Meshの環境作成チュートリアルMesh 201を試すその３（ビジュアルスクリプトを使ってHTMLコンテンツを読み込む）

本日はMicrosoftMeshの小ネタ枠です。
Meshの環境作成チュートリアルMesh 201を試した内容を記事にします。
今回はビジュアルスクリプトを使ってHTMLコンテンツを読み込む手順です。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

ビジュアルスクリプトを使ってHTMLコンテンツを読み込む

2 - LocalWebslateオブジェクト配下のLoadButtonオブジェクトを選択します。
本オブジェクトにはScript Machineコンポーネントが既に設定されています。

Script Machineコンポーネントの[Edit Graph]ボタンをクリックして[Script Graph]画面を開きます。

Is Selected Locallyノードはボタンを押下した参加者にのみ通知を行います。
またOn State Changeノードに接続することで押下状態が変化したタイミングのみ通知を通しています。

もしイベント内の全ての参加者に通知を行いたい場合はIs Selectedノードを利用する必要があります。

HTMLページを読み込んで表示する

ボタンを押下したタイミングでアセットデータをWebSlateに読み込む処理を追加します。
用意されているGet Component In ChildrenノードにWebSlateFramedオブジェクトをドラッグして参照を設定します。

Get Component In Childrenノードは指定のオブジェクトの子オブジェクトから指定のコンポーネントを取得します。
今回はWebSlateFramedオブジェクト直下のWebSlateコンポーネントに設定されているWebSlateコンポーネントの参照が取得されます。

Get Component In Childrenノードの出力ポートをクリックドラッグしてNodeメニューを表示し、Web Slate: Load HTM Content(Html Asset)ノードを選択して追加します。

次にWebSlateにアセットデータを引き渡します。
用意されているGet VariableノードにはHTMLアセットの参照が設定されているので、本ノードをLoad HTM Contentノードに接続するだけです。

これでボタン押下時に用意されたHTMLアセットがWebSlateに読み込まれるようになりました。

動作テストを行う

シーンを再生して動作を確認します。

Loadボタンをクリックすると、WebSlateオブジェクトに表示されるページが変化すれば成功です。

次回はイベント内の全ての参加者に共有でWebSlateを変化する手順です。