サーバから動的なデータを表示してみよう
この章で学ぶこと
サーバから動的なデータを表示してみます。
Codespace の起動
GitHub にログインした状態で https://github.com/codespaces にアクセスします。
Codespaces のページです。さきほど使っていた Codespace をクリックして起動します。
サーバの起動
- ターミナルで
npx node-red -u week05-chapter03をサーバ起動 - ポートタブで今回のサーバ起動を公開
- シークレットウィンドウで今回のサーバが公開されているか確認します
✅ポイント
- color というデータベースがあります
- 以前のとおり JSON Server でシンプルなデータベースが使えます
今回の Unity シーンを起動
Project タブから Assets > Scenes を選択します。Week05-Chapter03 をダブルクリックして起動しましょう。
今日は、このプログラムをベースに、送る値や受け取る値を Unity に使っていきます。
✅ポイント
- GetAPI に Week05_Chapter03_GetAPI が割り当てられているのでこちらでつないでみましょう
JSON データを受け取って Unity で使えるようにしましょう
JSON データは気にせず、まずつないでみましょう。
サーバから サーバーURL + /color を読み込みます。urlAPI 変数をうまく変更してつないでみましょう。
今回は
{
"data": [
{
"id": "33d3",
"color": "Red"
},
{
"id": "230d",
"color": "Yello"
},
{
"id": "93b3",
"color": "Blue"
}
]
}
という data のオブジェクトの中に配列が入っています。
JSON データでの配列は Unity では List 型で変換できます。受信した JSON データを Unity で扱うデータにする ResponseData ベースクラスを調整しましょう。
各 Cube にテキストで color 値を割り振る
// データを一つずつ反映する
for (int i = 0; i < 3; i++)
{
}
JSON データを Unity データで扱えるようになったあと、各 Cube にテキストで Color 値を割り振れるように for 文を用意しています。 Cube 内の MessageText という TextMesh にテキストを反映してみましょう。
各 Cube に Color 値によって Cube の色を変更してみましょう
各 Cube に Color 値によって Cube の色を変更してみましょう。
ヒント : https://docs.unity3d.com/ja/2021.2/ScriptReference/Material-color.html
ややリアルタイム反映を作ってみよう
ここまでできると、Start 関数で GetDataCore を呼び出すことで最初の表示時に動作する流れを、InvokeRepeating 関数を使えば、値を変更するとリアルタイムに値が変わるようにできます。
- InvokeRepeating
InvokeRepeating("GetDataCore", 1.0f, 1.0f); で、第 2 引数は 1 秒後開始を意味していて、第 3 引数は 1 秒ごと実行される指定でやってみましょう。
void Start()
{
// 開始時に読み込み開始
// GetDataCore();
InvokeRepeating("GetDataCore", 1.0f, 1.0f);
}
このように GetDataCore の直実行をコメントアウトして InvokeRepeating を指定してみましょう。
{
"color": [
{
"id": "33d3",
"color": "Red"
},
{
"id": "230d",
"color": "Yello"
},
{
"id": "93b3",
"color": "Blue"
}
]
}
./week05-chapter03/db/db.json の JSON データを修正してみましょう。
{
"id": "230d",
"color": "Yello"
}
Yello を Blue に変更してみます。
今回の Codespace の終了
今回の Codespace 終了しておきましょう。