今年作ったUI演出の実装雑記

#はじめに
今年作った制作物から、UI演出周りに絞って実装方法を雑記。
商業向けではないので、実装方法は動けば良いが第一優先です。
初心者向けかつゲームジャムなどには使えるかもしれません。

#今年作ったやつ
#「真・見斬り」
https://youtu.be/t1mq-nm-xzw

チャンバラミニゲームにSEKIRO要素足したら面白いかと思ったんですが、手応えなしでした(ぴえんまで出したのに…)。
Twitterで公開して3RTでウケました。

#「腹から声出せ！おけまる喧嘩神輿」
https://youtu.be/JHCMn8OOGA8

株式会社ヒストリア主催第14回UE4ぷちコン向けに友人と制作したやつです。
マイクを使ったゲームなので顔出し実況動画作ったりで楽しい開発でした。

上記から使った内容を書いてみます

#アニメーションするカットイン演出
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/246dd2de-d737-1f70-cb85-af2376af84d8.png)
雷エフェクトは動かしつつ、敵モデル画像は敵に応じて変更してます。

・GIF(埋め込み方がわからない…)
<div style="width:100%;height:0;padding-bottom:58%;position:relative;"><iframe src="https://giphy.com/embed/KZV4SNW2XlunglYEID" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/KZV4SNW2XlunglYEID">GIF動画</a></p>


######画像更新
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/de5459ff-995f-3053-97c0-77cab6fdfeaf.png)
Photoshopで雷5パターン作成してインポート。
UMGにimageで「EnCutin01」配置。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/9ef26337-9590-a42f-b39e-737e2c4c40f2.png)


後はこんな感じで処理を書いてやることで、カスタムイベントが呼び出される頻度に応じて1～5の画像に順繰りに更新。
パラパラ漫画のように更新してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/b89ba809-89af-17ab-a449-e504633614f0.png)

##敵画像の更新
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/62e6ab5f-7efe-4e4d-b819-2d816e92ed13.png)
上によろしく、敵のアイコン画像をマップチップ等で作成。
敵にはあらかじめUE4上で管理用のEnemyIDを持たせておき、カットイン生成時にEnemyIDと一致した敵モデル画像を参照。

###過去に作ったやつではタイトルロゴのアニメーションなどにも同じ手法を使いました。
こっちはさすがに枚数多い＆サイズ大なので重かった記憶。
<iframe src="https://giphy.com/embed/XjpHLkroLjd5WN3h6Z" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/XjpHLkroLjd5WN3h6Z">GIF動画</a></p>


#QTEボタンの実装
![シーケンス 01.00_00_00_00.静止画001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/7c3953b2-d804-35e6-67aa-762b1a41a37b.png)!
良いタイミングで目押しするボタンの実装。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/d113bd0e-7047-fb9c-3903-3db6dba8a62e.png)
初めに、ボタンとその拡縮するサークル画像を作成。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/9ab45c83-4aee-5343-f2e1-e4b1ae53381a.png)
UE4にインポートし、UMG上に重なるように配置。
元画像が大きすぎたため、ボタンは0.5、サークルは拡縮させるため1.5のScaleで配置。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/5615a18e-4b3a-86b3-c0d4-a0c47ac1cf55.png)
ゲーム進行処理をGameModeBaseにやらせていたので、
Tickのインターバル値を取ってきて、その値で毎回サークルのScale値を引いています。
サークルの大きさがボタンのScaleより小さくなればストップするようブランチしています。

拡縮自体はこれで完成です。
QTEイベント好きなので、いつかこれでイベント作ってみたいな…。



#コントローラー操作での項目選択
![タイトル画面スクショ02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/69f1f381-b4ad-9217-187a-d0dcf89b9f40.png)
ちゃんとした方法だと実装コスト高そうなので、手抜きでやれるやつを(そもそもちゃんとした方法知らんが…。)。
項目が少ないタイトル画面などでは使えるかも。

<iframe src="https://giphy.com/embed/NRk0QK0IiMMNQbaqzr" width="480" height="278" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/NRk0QK0IiMMNQbaqzr">GIF動画</a></p>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/f860f039-5fd9-0458-1c7e-4dfe517a1ea4.png)
タイトル画面に表示するUMGに対し、項目とそれを選択している旨のカーソルをそれぞれに配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/67ba2980-a0ff-f037-59a9-d56a50d8ecf4.png)
次に、Titleに使うGameModeBase等に「UIselectNumber」でInt変数を作成。
画像のような処理を書きます。

やってる内容としては、
・上ボタンが押されたら「UIselectNumber」から-1。
・下ボタンが押されたら「UIselectNumber」から+1。
それぞれにブランチで下限、上限値を設定し、その範囲外の値にならないようにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/870774/e5f3efd1-df48-8fa6-779b-23bb78c220e8.png)
タイトルUMGに戻り、上記処理を書きます。
TitleModeBaseにキャストし、「UIselectNumber」を取得(適当にTickでやってます)。
あとは値に応じて、カーソルを表示・非表示で切り替え、疑似的に選択しているように見せています。

アイテムリスト等だと項目が莫大になるのでこんなことできないですが、、ゲームジャム等でリッチに見せるのによさげ。


#おわり
自分の「動けばええやん」精神が強すぎてあんまり実践的ではないですが、
僕のずさんさで同じような人たちに勇気を与えられたら幸いです。