【Unity】Fungusでゲーム制作(4) コレクションで所持アイテムをリスト化する

Fungusの基本的な使い方に関しては[第1回](https://qiita.com/Kirikabu_ueda/items/bfc6e086d408b1cba34b)の記事で解説しておりますので、まだの方はそちらからお読み下さい。

[前回](https://qiita.com/Kirikabu_ueda/items/f050d2090b329a17b776)の内容で、画面内のアイテムをクリックして拾うようなイベントを作れるようになりました。しかし拾ったアイテムの一覧が見られないと不便ですね。
というわけで今度はアイテム欄を作ってみましょう。

アイテム欄を作るには、**持っているアイテムをリスト化**して、**それを画面に表示するためのUI**を用意すればOKですね。
前者についてはFungusに用意されているリストを取り扱うための枠組み**「コレクション/Collection」**を、後者については**uGUI**（このページを記述した2020年10月現在の、Unity標準のGUIシステム）をFungusから制御するためのコマンドを使えば達成できます。
今回はこの2つのうち、コレクションについて取り扱います。
# コレクションにアイテムを追加する
コレクションの使い方を試すために、まずはいくつかClickable Spriteを配置します。
![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/2cd04045-5ab1-1616-5f84-b231f7eeb087.png)
続いてコレクションを用意するのですが、これはいつものFungusのメニューからは作れませんので、GameObjectを自前で用意してコレクション用のコンポーネントをつけます。
**Unity全体のメニューバー**から**「GameObject」→「Create Empty」**を選び、できたGameObjectを選択してAdd Componentボタンから**「String Collection」**を選択して追加します（これのやり方についても前回の記事で説明しております）。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/4545ec48-45b2-eb5c-d6f8-805888d8c8d8.png)
追加されたString Collectionには、今は特に設定を行う必要はありません。フローチャートに行き、先ほど追加したClickable Spriteがクリックされた時に発動するブロックを作ります。ここでVariablesボタンからString型（文字列が入る）の変数も1つ作っておいて下さい（やり方については第2回を参照）。
ブロックに**Collection/Add**というコマンドを追加します。このコマンドはコレクションになんらかの要素を追加するためのものです。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/fd27cfcb-95ef-48d6-881e-18ffc9d9e975.png)
**Collection欄**に追加先のコレクションを指定するのですが、**肝心の追加するものについては変数を介して入れる必要があります**（先ほどString Collectionとありましたようにコレクションにも複数の型があるため、数値を入れる欄や文字列を入れる欄、と一通りに決めてしまっては対応できないのだと思います）。そこで**先ほど追加したString型の変数にSet Variableで文字列を入れ、Addコマンドに戻ってVariable To Use欄にその変数を指定**します。
コマンド一覧は下図の通りになると思います。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/236303a3-a141-1107-1323-b03278616a7a.png)
他のClickable Spriteに対しても同様のブロックを作ってあげましょう。第2回でコマンドを**Ctrl+C→Ctrl+V（Macの場合はCtrlをCommandに）**でコピペできると書きましたがブロックに対しても可能ですので活用してみてください。終わったらゲームを起動し、一通りコレクションに入れてみましょう。しかしコレクションの中身を確認するにはどうすればいいのでしょうか？
ゲームを起動したままHierarchyビューにあるコレクションを選択し、Inspectorビューを見てみましょう。下図のように、String Collectionのところに追加したものが入っていると思います。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/11b2aaa0-9d3d-db91-6674-132a2fd8e977.png)
# コレクションの中からアイテムを探す
今後はアイテムを拾った時に、**Set Variableでフラグを立てるのではなくコレクションに追加する**……という形で管理したくなると思います（変数を増やしすぎるとVariablesの表示が長くなって大変ですしね）。そうなるとコレクションの中に入っているアイテムを取り出して使う方法も必要になります。そのためのコマンドが**「Collection/Contains」**コマンドです。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/b982b26f-e1e1-da45-9614-bbd5e52ca31d.png)
こちらにも**Collection欄**があるので、中を探したいコレクションを指定します。**Variable To Use欄**もありますが、こちらには「何を探したいか」を入れた変数を指定します（たとえば『りんご』という名のアイテムを探したいなら『りんご』と入力したString型の変数を使う）。そして**Result欄**についてですが、これは「コレクション中で指定したアイテムを探した結果見つかったかどうか」を入れるBoolean型の変数を指定します（またVariablesボタンから作っておきましょう）。アイテムが見つかったならTrue、見つからなかったならFalseが入ります。
試しに『りんご』を持っているかどうか判定するイベントを組んでみましょう。下図のようになると思います。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/335052ea-0fe4-3d5b-0e36-8b3a2b73db56.png)
直接名前（数値や他のなにかという場合もありますが……）を指定して探すのではなく、「コレクションの何番目かに何が入っているかを確認する」というのもできます。その場合は**Elementコマンド**を使います。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/8bed8f00-36ff-f40e-f46e-457e9a18d7d5.png)
**Collection欄**には対象のコレクションを、**Index欄**には何番目のアイテムを見るかの数値を指定します。その結果が**Variable To Use欄**に指定した変数に入ることになります。ここで、コレクションに入っているものの番号は1ではなく0から始まることに注意して下さい（プログラミングにおいてリストを扱う場合は概ねそうなっているのです）。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/602ccfa3-ee52-3897-b544-c0b9faa6cc8b.png)
コレクションの3番のアイテム（最初から4番目に相当）を確認して表示する例です。第2回の最後の方で紹介した、文章に変数の中身を表示するタグも使われていますね。
ところで、Elementコマンドで**そもそもコレクションに存在しない番号を指定した時（例えばコレクション内に2つしかアイテムがないのに、3番のアイテムを取り出そうとするなど）にはエラーが出てイベントが止まってしまいます。**そのような時にはElementコマンドを使わないようにするための処理を付け加えましょう。
コレクションに入っている物の総数が「Elementで指定する番号+1（番号が0番から始まる為）」より小さい時にIfコマンドで分岐させればOKです。ここで、コレクションの総数を求めるには**Countコマンド**を使います。
![8_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/41b549fa-af07-972b-82d8-4ed2f15b20dd.png)
**Collection欄**に対象のコレクションを入れ、**Integer欄**に指定した変数に総数が入ります。
実際に処理を組んでみると以下のようになるかと思います。
![8_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/7f2091fd-8f4b-6cd1-8042-b2ce06dcf381.png)
#コレクションからアイテムを取り除く
使い終わったアイテムをその場で手放すようにしたいこともあるでしょう。そんな時は**Collection/Removeコマンド**でコレクションからアイテムを取り除くことができます。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/c8893a81-cac2-ae19-9a25-414a2ae92dad.png)
**Collection欄**にはやはり対象のコレクションが入りますし、**Variable To Use欄**も「何を取り除きたいか」を入れた変数を指定するところです。
先ほどのりんご所持判定イベントを改造し、りんごを持っているときだけそれを手放すイベントを作ってみました。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63319/ea9cde44-63dd-f19a-a241-921730366483.png)
今回はコレクションへのアイテムの追加、指定したアイテムがあるかどうかの確認、アイテムの除去の3つについて扱いました。
コレクションを扱うためのコマンドは他にも多くあるのですが、それらについてはまた必要になり次第解説したいと思います。

次回はFungusからuGUIを制御する方法について解説し、アイテム欄を完成させたいと思います。

[第５回に進む](https://qiita.com/Kirikabu_ueda/items/a748c22e1f645f4b448d)