【unityアドカレ2021夏】Panoply: Comics & Splitscreen for Unityでなにを作ってみる

この記事は [Unity アセット真夏のアドベントカレンダー 2021 Summer!](https://assetstore.info/eventandcontest/adventcalendar/summer-advent-calendar-2021/) 16日目の記事になります。

昨日は[VR発掘隊さん](https://qiita.com/VRhaltukututai)の「自分が思うVisual Scripting(playmaker)の良い使い方」でした。

# 概要
本日ご紹介したいアセットは[Panoply: Comics & Splitscreen for Unity](https://assetstore.unity.com/packages/tools/utilities/panoply-comics-splitscreen-for-unity-58506?utm_source=twitter&utm_medium=social&utm_campaign=jp-advent-calendar-summer)です。

今回、[Panoply: Comics & Splitscreen for Unity](https://assetstore.unity.com/packages/tools/utilities/panoply-comics-splitscreen-for-unity-58506?utm_source=twitter&utm_medium=social&utm_campaign=jp-advent-calendar-summer)でなにを作ってみたい。

演出が重要なアセットの関係、合わせてこちら３つのアセットも含めて使用します。
1. [中世ファンタジーRPG風2Dキャラクターパック(2D Medieval Fantasy Character Pack)](https://assetstore.unity.com/packages/2d/characters/2d-medieval-fantasy-character-pack-114405?locale=ja-JP?utm_source=twitter&utm_medium=social&utm_campaign=jp-advent-calendar-summer)
2. [Camera Filter Pack](https://assetstore.unity.com/packages/vfx/shaders/fullscreen-camera-effects/camera-filter-pack-18433?locale=ja-JP?utm_source=twitter&utm_medium=social&utm_campaign=jp-advent-calendar-summer)
3. [2D Game Kit](https://assetstore.unity.com/packages/templates/tutorials/2d-game-kit-107098?locale=ja-JP?utm_source=twitter&utm_medium=social&utm_campaign=jp-advent-calendar-summer)（素材だけ使いさせていただきます。）

海外動く漫画のような演出を簡単に実現できるアセットです。
The Magic Orderという作品の演出が好きて、このアセットを見た瞬間即買いました。
このアセットを色々試して勉強中のため、公式チュートリアルを再圧縮した程度で紹介させていただきます。

## 成果物を展示する前にコンポーネントについて
必須なプレハブは PanelとPanoply この２つ。
![スクリーンショット 2021-08-09 16.13.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/5f7f4f11-cf8d-ebf4-db58-b790518d666c.png)

### Panoply
Panoplyのコアコンポーネント。操作やUIメニュー（ボタン拡張など）の設定もここに含まれています。

### Panel
カット演出用のプレハブ。一つカット演出は一つPanel。
このプレハブは３つコンポーネントが付けています。
1. カメラ。
2. Panel：カット演出の制御コンポーネント。
3. Panel Effect：勉強中。不明なところがあり、こちらについて避けさせていただきます。
![スクリーンショット 2021-08-09 20.48.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/10770c69-02f9-dda9-bd07-f55c4e2a387d.png)

__Panel：カット演出の制御コンポーネント__
最低限度のレベルになりますが、添付画像の４つピックアップはMain操作ところです。
①Global Timeline：Main制御タイムラインのフレーム。
②LayouT Grid：グリッドレイアウト、マス数のことです。
　・Rows：行数。
　・Cols：列数。
③Frame：このパネルのフレーム。
　・Key：ステップ追加か追加したステップを削除すること。
　・Ins：ステップを挿入すること。
　・Del：タイムラインに対して削除かこのパネルのフレームステップを削除すること。
④Layout Viewer：今のフレームの表示マス。
![スクリーンショット 2021-08-09 16.18.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/6c61a6b9-97a5-ffd2-9eb8-dba4518d9c45.png)

__②と④の関係性について__
例え、Rows = 2, Cols = 3で設定するならLayout Viewerはこのように列は３等分になります。
![スクリーンショット 2021-08-09 21.23.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/546ee49f-bcad-c7ec-0d89-e2cd3198d5f0.png)

Rows = ３, Cols = 3で設定するならLayout Viewerはこのように列は３等分、行も３等分になります。
![スクリーンショット 2021-08-09 21.23.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/416c7b05-4588-06f1-bef1-2c896b12f15f.png)

__スワイプだけで今のフレームの表示マスを設定できます。__
![Aug-09-2021 21-28-39.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/14c0d0ed-6ac2-239f-9d67-df7c9315dfba.gif)

## このアセットの３つ注意点
1. 環境による操作システムとUIMenuは今回記事にないですが、機能によってコード拡張や弄ることを避けられない。
2. Panoplyプレハブは２つカメラが持つ。Panelプレハブはカメラ付けてる。演出都合で同時複数Panel用意したい場合、階層とカメラ数は要注意。
3. 環境はスマホやWebGLなら使用できるメモリは制限されて、１つシーンのリソースをコントロールしないといけない気がする。

## Inのカット演出を作ってみます
__試しにフレーム０、１でInのカット演出を作ってみます。__
①PanelプレハブをHierarchyに追加。ここはPanel_001に命名変更。
②Panel_001の0フレーム位置を一番下に設置する。
![スクリーンショット 2021-08-09 23.10.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/3870606f-df5d-0fbb-a47e-8c8729863080.png)

__画像を追加する。__
Panel_001で表示したい画像をHierarchyに追加して、Artworkというコンポーネントを付けます。
ここは王道のUnity Logoで行きたいです（2D Game KitのUnityMasterWhite画像です）。

__画像の目標Panelを指定。__
Base Panelに目標のPanelを参照。ここはPanel_001のステップなので、Panel_001を付けます。
![スクリーンショット 2021-08-15 18.01.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/a8446523-3aa1-ceb8-dc61-11c7b831511b.png)


__引き続きフレーム１を設定。__
①フレーム１にKey追加する。「Key」ボタンをクリックかフレーム上にダブルクリックで追加できます。
②フレーム位置を真ん中全番に設置する。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3437333736392f30326431346139392d303938322d663435662d383733642d3332343336623637616363312e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/a28e6b53-06c6-0c3c-5dbd-c8b1764d66aa.png)

__ここで一旦実行してみます。__
実行するとデフォルトの位置。自動進むのはなくて操作で次のフレーム1に進む必要。
デフォルトの操作は方向キー。左は前に戻り、右は次に進み。
![Aug-09-2021 23-17-06.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/35be8799-c8d4-2bb8-9db1-07f2617dc6e4.gif)

__試しに右から左真ん中へのカット演出に変更。__
Layout Viewerのフレーム0の位置を右設置だけで完了。とても簡単です。
![Aug-15-2021 15-41-42.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/f05b2113-b761-0426-dd82-5c74aae16229.gif)

__InOutFadeを設定__
Fade実装する方法は演出都合によって方法が違います。
最善ではないですが、ここは記事作成都合でPanelコンポーネントの設定を使います。

PanelコンポーネントのMatte Colorのアルファを設定する。設定方法も同じフレームKeyに対して設置する。
アルファはフレーム0の時は255、フレーム1の時は0。
![Aug-15-2021 17-31-04.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/2f9338cb-580c-db32-8158-97e02c54f99e.gif)

__Panel_002を追加、Outのカット演出を作ってみます__
前のステップと同じ、ここは背景入れます（2D Game KitのStartSplash画像です）。
PanelをHierarchyに追加するとき、位置は自動的に設置されます。
![スクリーンショット 2021-08-15 17.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/0afa57c3-bd7a-4574-68ce-90067dbd8d10.png)

①Panel_002のフレーム0 Key、デフォルト同じく一番下に設置。
![スクリーンショット 2021-08-15 17.49.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/4d59e02c-33a1-435c-2466-5b2a760b9736.png)

②Panel_001のフレーム3にKeyを追加して、Out位置を一番上に設置。
![スクリーンショット 2021-08-15 17.50.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/3d7fcfa7-8a60-356c-e52c-4ce962315570.png)

③Panel_002のフレーム3にKeyを追加して、真ん中に設置。
![スクリーンショット 2021-08-15 17.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/647c3b2b-e1f3-73c2-eb77-1291cdfa8482.png)

__実行__
極シンプルでInOutができます。
![Aug-15-2021 17-54-20.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/23472f53-ceb5-efbf-25be-d06520f837c0.gif)

__これで最低レベル的なものを作れます__
In、Outカット演出プラスFadeだけ。

順番進む：
![Aug-15-2021 19-27-03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/199a86d6-0c80-28a5-5f5a-18f0b01cf72a.gif)

逆戻り：
![Aug-15-2021 19-27-17.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/4a0dddd3-7bc7-07a1-ef67-5fb37b467803.gif)

全共通のGlobe TimeLine一つ、Panelなど演出コンポーネントを叩く感じです。
操作簡単、しかも直感的です。

## テキストを加え
目標のPanelにCaptionコンポーネントを付けます。

__デザインについて__
詳細でお分かりですが、Panoplyのテキスト表示GUI Skinです。デザインをすれば、統一の会話ボックスができます。
![スクリーンショット 2021-08-15 19.38.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/65b79e6a-1c24-131e-0a1b-52eb747ca552.png)

__コンポーネントでダイアログかどうか切り替えできます__
表示タイプはボックスかダイアログや位置やサイズなど。

ボックス：
![Aug-15-2021 20-10-36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/19bf02db-e376-2d41-514c-ba108a99de12.gif)

ダイアログ：
Is Dialogue Ballonを付けるだけダイアログモードに切り替えできます。
![Aug-15-2021 20-17-36.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/948ad7ca-9b0e-5f2b-0b37-f54a9075e4c2.gif)

ここはPanoplyが用意してるGUI Skinを使います。
デフォルトの文字サイズは小さい、GUI Skin側のサイズを大きくします。
![スクリーンショット 2021-08-15 19.41.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/d9db5124-e46b-2b6c-ba1f-479755102315.png)

__実行__
テキストもLayoutに応じて動いてます。
![Aug-15-2021 19-59-04.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/6b64ff01-91fc-116e-baf2-4edd2aaba29c.gif)


## Camera Filter Packを加え
Panelはカメラが付いています。コミュニティ見たらCamera Filter Packはいい感じ使えるというコメントがあったので試しました。

効果分かりやすいBlizzardとFocusを撮りました：

__CameraFilterPack_Blizzard__
![Aug-15-2021 20-47-21.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/762cc966-a08a-c72c-0188-4ef2436b2ba3.gif)

__CameraFilterPack_Blur_Focus__
![Aug-15-2021 20-49-23.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473769/22deafe0-40b5-37c8-52c0-db90ebc6eaab.gif)

Passiveも問題ない、きれいにLayout切り替えできます。これはとても嬉しいことです。


## 最後
なにを作ってみるというより、テストもの作ることになりました。

概要にも書いたですが、このアセットを色々試して勉強中のため、公式チュートリアルを再圧縮した程度で紹介させていただきました。

演出の最低レベル機能だけ紹介したが、
演出設定が沢山あって、細かい調整すれば演出クオリティもより一層アップすることができます。

この紹介で皆さんの役に立つことできれば、幸いです。
また、このアセットの魅力をすこしでも伝えたら嬉しいです。

明日は[たいしさん](https://twitter.com/taishi_busido90)の記事です。