PlayMaker勉強会 第2回 ～大量ファイル処理はArrayでやろう編～

# PlayMaker勉強会 第2回 ～大量ファイル処理はArrayでやろう編～

社内のSTYLYシーンクリエイター向けに、PlayMaker勉強会を実施しています！
せっかくなので、資料を公開します！

本記事は、第2回の資料ですが、過去の記事を読んでいなくても問題ありません！
興味があれば、読んでいただけると嬉しいです！

##### PlayMaker勉強会シリーズ

- [PlayMaker勉強会 第1回 ～多対多接続はやめよう編～](https://qiita.com/segur/items/24f4f564fd9729b086e7)
- PlayMaker勉強会 第2回 ～大量ファイル処理はArrayでやろう編～ ← 本記事
- [PlayMaker勉強会 第3回 ～ランタイムでマテリアルをいじろう編～](https://qiita.com/segur/items/fae40e8e5fbab10d739f)

# 大量のファイルを一括で扱いたい

たとえば、以下の図のように大量の画像ファイルをシーンに設置したいときがあります。
（数字の部分はuGUIのTextではなく画像です。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/1f2f03b1-945d-f2d5-f687-3260ca1fe111.png)

上記の図の場合、20個のファイルがあります。

20個のGameObjectやMaterialを編集するのは、骨が折れる作業です。
とくに画像を差し替える事になった場合、作業量がすごいことになります。

こんなときはPlayMakerのArrayを使ってみましょう！


# Arrayとは

Array（配列）とは、同じ種類のデータを1つの変数にまとめて管理できる仕組みのことです。

```mermaid
graph TB
  A["Array\n配列"]
  A --> B["Element 0\n要素0"]
  A --> C["Element 1\n要素1"]
  A --> D["Element 2\n要素2"]
  A --> E["Element n\n要素n"]
```

1つ1つのデータのことを、 `Element（要素）` と呼びます。
要素には、 0, 1, 2, ... のように順番があります。
1からではなく **0から数え始める** ので、ご注意ください。（PlayMakerに限らず、プログラミングでは一般的な数え方です。）



# Arrayを作成する

PlayMakerでArrayを作成するには、まずArrayを格納するための変数を作る必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/8b7da2dd-5ce6-17fb-3886-6101a8fffe72.png)

PlayMaker Editorを開き、右上の `Variables` タブを選択します。

`New Variable` 欄にArrayの名前を入力します。今回は複数の画像（テクスチャ）を格納したいので、 `InputTextures` と入力します。

`Variable Type` 欄を `Array` にして、 `Add` をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/09f741f6-67ad-0bdb-6c94-7c35ddfc55b5.png)

`Array Type` 欄では、Arrayの要素の型を選択します。
今回は画像ファイルを扱いたいので、 `Texture` を選びます。

`Input` 欄にチェックを入れると、 `Inspector` に表示されるようになるので、便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/5b6312bf-3c14-7b6a-63f6-58ae1d740040.png)

`Size` 欄には、Arrayのサイズ（格納できる要素の数）を指定します。
今回は20枚の画像を扱いたいので、 `20` と入力します。

すると、以下のように20個のElementが現れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/26dbfb79-7a57-102d-c114-c8271b3814fe.png)

この20個のElementに対し、画像ファイルを1つずつセットしましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/5e78bfd9-072e-3e82-5f0c-358bab26ee82.png)

（要素番号は0開始ですが、画像ファイル名の番号は1開始だったので、数字がズレています。ミスではないです。）

20個のセットが完了しました！これでArrayの作成は完了です！



# Stateを作る

実際にArrayを使って処理を作ってみましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/9aa1ee19-2f0c-0255-2632-a479066ef053.png)

今回は、配列の要素毎に以下の処理を実装します。

- 位置を計算する
- GameObjectを生成する
- テクスチャを設定する


## 配列の要素を取り出す

`Array Get Next` アクションを使うと、配列から要素を取り出すことができます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/fb80eb66-b675-2a43-dd3e-b5c3dfabd504.png)

まず、 `Array` 欄では、さきほど作ったArray `InputTextures` を選びます。

`Loop Event` 欄では、 `Loop` というイベントを作ってセットしてください。
今回は要素が20個あるので、この `Loop` イベントは20回発火します。

`Result` 欄には、 `CurrentTexture` という変数を作ってセットしてください。
これが配列の要素になります！
最初はElement 0が格納され、Loopイベントが発火するたびに、Element 1, 2, ... と順番にこの変数に格納されます。

`Current Index` 欄には、要素番号が格納されます！


## 位置を計算する

たとえば以下のように、x軸に沿って1メートル間隔で画像をシーンに設置したいとします。

| 要素        | x座標 | y座標 | z座標 |
|:----------:|:----:|:----:|:----:|
| Element 0  | 0    | 0    | 0    |
| Element 1  | 1    | 0    | 0    |
| Element 2  | 2    | 0    | 0    |
| ...        | ...  | ...  | ...  |
| Element 19 | 19   | 0    | 0    |

こういうときは要素番号を使うと簡単に実現できます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/dfff1c84-c90c-3f45-f721-8afab8ed42b0.png)

上図のように、 `Set Vector3 XYZ` アクションの `X` 欄に `CurrentIndex` をセットすればいいだけです！

計算された位置座標は、 `Vector3 Variable` 欄の `CurrentPosition` 変数に格納されます。


## GameObjectを生成する

位置に合わせてGameObjectを生成します。
これは `Create Object` アクションを使えばできます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/ed353b1f-be73-0099-d2cd-a4f17fafbefa.png)

まず、雛形となるプレハブを作って `Game Object` 欄にセットします。

次に、 `Position` 欄に `CurrentPosition` 変数をセットすれば、その位置にGameObjectは生成されます！

生成されたGameObjectは `Store Object` 欄にセットした `CurrentGameObject` 変数に格納されます。


## テクスチャを設定する

いよいよテクスチャをセットします！

ここでは、 `Set Material Texture` アクションを使いましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/67b08904-a2d4-040f-fe22-16fcf2e516f5.png)

`Game Object` 欄に `CurrentGameObject` をセットします。
`Texture` 欄に `CurrentTexture` をセットします。

これで、生成されたGameObjectにテクスチャが貼り付けられます！

これでシーンを実行すると、以下のように複数の画像を設置されました！目標達成です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/1f2f03b1-945d-f2d5-f687-3260ca1fe111.png)

## 画像が増えた場合

もし画像が増えたとしても、安心してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/dd877680-ce06-5e49-340c-0edaea5cc1e2.png)

Arrayの `Size` を増やすだけで、処理を一切変更せずに対応できます！

これがArrayの効果です！



# Arrayの用途

Arrayを活用すると、以下のようなことも可能です。

- 複数の敵キャラクターのGameObjectインスタンスを管理する。
- アイテムのリストを管理する。

いろんな使い方ができますので、ぜひ工夫してみてください！



# さいごに

今回はここまでです！おつかれさまでした！

次回はマテリアル制御編です！引き続きこちらも実践していただけると嬉しいです！

https://qiita.com/segur/items/fae40e8e5fbab10d739f

本記事作成にあたり、以下の記事を参考にさせていただきました！
ありがとうございました！

- [PlayMaker / Action Reference](https://hutonggames.fogbugz.com/default.asp?W2)