こんにちは、コンテンツデザイン開発グループの竹田です。
Unreal Engine5でJsonが扱えるプラグイン「Json Blueprint Utilities」のベータ版が実装されました。
C++のコードを書くことなくBlueprintでJsonを扱うことができます。
サードパーティー製でBlueprintでJsonを扱うプラグインは以前から出ていましたが、今回は(ベータ版ですが)公式サポートということで、さっそくテストしてみました。
※本記事ではUnreal Engineを日本語モードにしています。
Json Blueprint Utilitiesの使用準備
プラグインにチェックを入れる
編集 > プラグイン から画面を開き、Json Blueprint Utilitiesプラグインを探してチェックを入れます。
![a_001 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_001.png)
![a_002 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_002.png)
これでBlueprintでJsonが扱えるようになります。
ノードの確認
利用できるようになったノードを確認します。
- Load Json from File
- Load Json from String
Jsonの読み込みに関わるノードです。File Path構造体を受け取るか、Stringで受け取り、JsonObject構造体を返します。
![a_003 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_003.png)
- Get Json String
- Has Field
- Get Field Names
- Get Field
JsonObjectに対して値の取得などを行うノードです。
Get Filed でFiled(キー)に対する値を取得できます。
Has FieldではFieldがあるかを確認できます。
![a_004 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_004.png)
- Set Field
- Save Json to File
- Make JsonObjectWrapper
Jsonの生成や書き出しに関連するノードです。
![a_005 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_005.png)
Jsonの読み込み、書き出しテスト
Jsonの用意
Jsonファイルを用意をします。 簡単な例として以下のような内容のファイルを作成します。
![a_006 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_006.png)
{
"id": "256",
"name": "Yamada",
"likeFood": "Sukiyaki"
}
Blueprint作成
今回はUMG内で完結するように作ります。ユーザーインターフェース > ウィジェットブループリントで作成します。
![a_007 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_007.png)
次のようなテストを作成しました。
![a_008 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_008.png)
ボタンを押すと指定FilePathのJsonファイルを読み込みます。
![スクリーンショット 2022-08-04 11.08.27 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_009.png)
指定したField Name、ここでは「id」に対応する値を取得しPrintします。
「Success」はJsonを読み込みやGetFieldの成否をBooleanで返します。
![a_010 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_010.png)
再生してみます。
![スクリーンショット 2022-08-04 11.16.29 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_011.png)
取得した値を表示できました。
![a_012 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_012.png)
GetFieldNamesで取得したFiled名の配列をForEachLoopで処理し、GetFieldに繋ぐ事ですべての対応する値を取得できます。
![a_013 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_013-1024x416.png)
![a_014 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_014.png)
配列構造のJson
次は配列構造のJsonでテストしてみます。
{
"userInfo": [
{
"id": 123,
"name": "Aoki",
"likeFood": "Tempura"
},
{
"id": 124,
"name": "Ikeda",
"likeFood": "Steak"
},
{
"id": 125,
"name": "Ueno",
"likeFood": "Sushi"
}
]
}
構造体の用意
Json読み込み後にStruct(構造体)に入れるようにします。ブループリント > 構造体でStructを作成します。
![a_015 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_015.png)
Jsonの内容に合わせて作成します。Jsonのキーと同じ変数名にしないと値は取得できないようです。
Struct名はUserInfoとしました。
![大阪中之島美術館 開館プロモーション動画 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_016.png)
Blueprintは以下のように作成してみました。
![a_017 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_017-1024x415.png)
GetFieldで「userInfo」の値を取得します。取得したものはuserInfo構造体の配列とし、ForEachLoopで回してそれぞれの値を表示します。
![a_018 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_018.png)
値を表示できました。
![a_019 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_019.png)
構造体配列の変数を作成してセットすると色々な場所で利用できそうです。
![スクリーンショット 2022-08-05 10.34.08 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_020.png)
Jsonの保存
Field名を「userInfo」とし、値は先程のUserInfo構造体の配列になるように書き出してみます。
SetFieldのValueにuserInfo配列を繋ぎます。
Set FieldとSave Json to FileのJson Object は JsonObjectWrapperを繋ぎます。
Save Json to File で指定パスに書き出されます。
![a_021 | 株式会社キャドセンター](https://www.cadcenter.co.jp/wp/wp-content/uploads/2022/07/a_021-1024x474.png)
このようなJsonファイルが作成されました(VSCodeで整形しています)。
{
"userInfo": [
{
"id": 121,
"name": "Tanaka",
"likeFood": "Yakisoba"
},
{
"id": 122,
"name": "Suzuki",
"likeFood": "Takoyaki"
}
]
}
後編に続きます。