historia様主催の第15回UE4ぷちコンに参加しました

## はじめに

historia様主催の第15回UE4ぷちコンに参加しました。ゲームで使用した技術的なことの説明と合わせて、振り返りを書き出していきたいと思います。

応募した作品のプレイ動画はこちらになります。

https://youtu.be/RrmDtd_D2VM

## 今回のテーマは「かわる」

今の季節は環境や職場、学年など色々と変わるタイミングであると感じたので、この季節である「春」にこだわろうと決めました。関係無いですが、自分の好きな季節でもあります。この時点で`冬 → 雪解け → 春`のイメージが漠然とありました。

ネタ出しとして、思いつくことを書き出してみたマインドマップが以下です。

<img width="100" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/4239d2ca-27b0-24fd-0e7a-5d8e34e0b6a5.png">

## 雪のイメージ

雪と言えば、昔、雪を踏みつけて道を作りながら歩いていたことをふと思い出しました。道に囲まれた範囲の雪が解けて春になる…陣地取りのような感じがして、ゲーム的に何やらいけそうな予感。
そこで、ゲームの肝になる雪と足跡の表現をどう対応するか色々探していると、YouTubeにありました。実装の解説動画をアップされている方が多くて有難いです。

https://www.youtube.com/watch?v=WZfaVOHhiRc

簡単に説明すると、レンダーターゲットの濃淡をメッシュのオフセット情報に反映して足跡として残すものです。ゲーム内容を考慮して、足跡の形はシンプルにしています。

## 「囲む」を実現するには？

雪に足跡で道を作れたら、次は「囲む」を実現する必要があります。囲むための方法としては、パスや画像認識が思いつきましたが、自由に動けることや、ジャンプも視野に入れていたので、パスだと厳しそうでした。画像認識できれば格好良さそうですが、こちらは時間的に少々厳しそうだったので却下。などと色々考えているうちに、以下の対応を思いつきました。

![petitcon15_塗りの説明.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/c641bb7f-469c-3b58-0549-7ce5afcf79f1.png)

この手法だと、昔なつかしいペイントアルゴリズム(スキャンラインシードフィル)で表現可能そうなので、実装に踏み切りました。塗りの範囲を小さくすれば、最近のPCなら毎フレームチェックしても問題無さそうなところも良さそうです。

これで、`足跡 → 囲まれた判定 → 春に変わる`が技術的に実現できる目途が立ちました。

## 味付け

足跡がずっと残るのは良いのですが、ゲーム性として少々難がありそうなので、一定時間が経過すると足跡の部分の雪が戻っていく処理を追加しました。これは、レンダーターゲットの色を少しずつ元の色(白)に戻していく、ちょうど足跡と逆の処理で簡単に実装可能でした。ついでに、画面に動きをつけるため、段階的に戻す対応を入れています。時間差でもりもりと雪が戻っていくので、ちょっと見ていて楽しいものになりました。
また、道を作る際にも、Niagaraで作成したエフェクトを入れることで、雪をかき分けて進んでいる感を出すことができました。動きに直結する対応はゲーム作りの醍醐味、やっぱりテンションが上がります。

## 敵の材質

ステージクリア時に春に変わる演出を強調するため、ステージ内のオブジェクトはなるべく冷たい色で統一しつつ、世界観に合わせるため、敵の質感を氷のようにしてみました。
マテリアルを作成する際、こちらの記事を参考にさせていただきました。

https://weirdmaterials.hatenablog.com/entry/2020/06/19/010412

このページで説明されているように、この方法は光源を正確に反映しているわけではありませんが、今回のゲームではキャラクターがアップで表示されることは無く、ほぼ問題はありませんでした。また、ゲーム画面に設置された場合の視認性を考えて、青味は強めにしています。

* 元のマテリアル

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/d54ae0f3-1364-fc2a-3f34-dba9d150427b.png">

* マテリアル適用済み

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/b97ff7ca-1b74-27e2-b3e0-a694d17ac2fa.png">

* 実際のゲーム画面

![petitcon15_ステージ上の敵.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/a3bd9da7-809e-7230-6808-4a03a6eeb482.png)



* 使用テクスチャ

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/6811fcdf-c4a8-d0f9-641d-e709e3aaff7c.png">

* マテリアル
 
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/482b54df-8942-f1bb-1c95-9ee5d704633f.png">


## クリア演出

春になるためには、雪には消えてもらわないといけません。最初は、雪のメッシュの表示オフセットを調整することで雪の高さ全体を下げていましたが、均等に高さが変化するため、最後は雪全体が一気に消えてしまい、ちょっと格好悪い状態でした。消え方にばらつきを持たせるために、ノイズを使って生成した模様を、足跡と同じように重ね塗りしていくことで、それっぽく消えるようになりました。ノイズって便利ですね。

* ノイズで雪の消え方を調整

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/d903f40d-6dd0-0a8e-a4eb-1a756f71d1a4.png">

* ノイズを利用した、雪を消すためのマテリアル

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/7c5a1e1b-a5de-7309-fdcc-10495c13b3ac.png">

雪が消えた後は、「春」への変化を表す演出です。これは、プレイヤーから一定以上の距離にあるピクセルは「見えない」または「白い」マテリアルを作成しました。パラメータである「距離」を変化させることで、徐々に出現/色が変わる演出を行っています。今回はプレイヤーを中心として演出が広がるようになっています。また、演出の変化がより明確になるよう、境界部分は発光を強めにしています。

* 演出と、それに使用したマテリアル

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/9fc5bfaa-de61-f2a6-92eb-74df1101b566.png">

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/b07ff59c-4eed-8eed-9c17-1d8a755fe2d5.png">

## 提出前日の思いつき

緑のグレイマンにしたのは良いのですが、誰もその理由には気付かないと思い、提出前日にシーケンサーで説明を加えようと思いつきました。動きやセリフだけでは物足りなかったので、ステージクリア時のマテリアルを流用して、緑に変える演出も追加しています。グレーと緑の境界にはノイズを適当に加えました。やっぱりノイズ便利です。ついでに、Niagaraのパーティクルも合わせて、即興ながら、それっぽく見えなくもない演出になったかなと思っています。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/83f93b31-335d-fdae-367d-ad677aedfd05.png">

提出前日でしたが、色々と盛り込みやすい場所だったので楽しく作業できました。もう少しヒーローもののような力強さを出したかったのですが、シーケンサーの習熟不足でそこまでは至らなかったので次回の課題です。

## 提出へ

録画のためスタンドアローンで起動するも、雪の戻りが速くなる現象が発生しました。原因を調べる余裕が無かったので、そのままエディターのプレビューから録画することに。落ち着いてから調べてみると、スタンドアローン時の起動の場合、フレームレートが上がっていた模様。フレームレートに依存する書き方をしていた場所が、その影響を受けていました…
早い段階で最終環境での確認は必須だと改めて実感しました。

## 振り返り

振り返りはKPT形式です。

### Keep

* 気になったアセットや実装などは色々試す
* UnrealオンラインラーニングやYouTubeで気になったものをやってみる
 + 動画を見ながら自身でも手を動かすと、知らなかったエディター操作やノードなど色々と気づきが得られる
* ゲームに合った空気感を演出する
 + デフォルトのライティング以外の対応ができたので、これからも続ける
* ベースになるActorを継承して使う
 + 今回は意識して継承できたので、これからも続ける
* フォントを使う
 + 以前はデフォルトフォントを使っていたが、今回はフォントを追加して使えたので、UIにテキストを出すだけでそれっぽくなった

### Problem

* シーケンサーのカメラワークが弱い
 + ダイナミックなカメラの動きや流れなどが不足している
* プレイヤーの動きがサードパーソンの移動部分のみで、アクションに乏しい
 + 遊び方に幅を持たせたい
* AIがただプレイヤーを追いかけるだけで弱い
* フレームレートに依存する処理を書いていた
* スタンドアローンでの検証を提出直前まで行っていなかった

### Try

* シーケンサーのカメラワークを磨く
 + 現実のカメラワークなどの知識を学ぶ
* AIの行動に幅を持たせる
 + 追いかけるだけじゃなく他の行動もさせる
* プレイヤーに移動以外の動きを追加するゲームデザインを考える
* ラフな状態でプレイアブルを作る(ゲーム性の検証を素早く行う)
* フレームレート依存の処理は書かないよう気に留める
* スタンドアローンでの検証を早目に行う

## 最後に

他の参加者の作品を拝見するたびに、「ぷちコン」とは？ と疑問に思わざるを得ないくらい、クオリティの高い作品ばかりでした。ぷちコン14や冬のぷちコンゲームジャム参加の時よりは色々なことができるようになってきたものの、まだまだ至らないところばかりです。
次回参加までに、今以上に色々実現できるよう頑張りたいと思います。次はUE5を覚えるところから…？

ガチな作品が多いですが、ぷちコンのコンセプトは参加の敷居が低くなるので、このままであって欲しいです。
素材を提供されている方々や資料を公開されている方々に感謝です。
historia様とEpicの皆様、審査お疲れ様でした。

***

## 使用素材とアセット

今回使用させていただいた、フリー素材とアセット(無料・有料含む)です。

* BGMが多数あり選ぶのが大変ですが、ゲームのイメージが膨らみまくりでテンションが上がります

https://dova-s.jp

* 一覧にある名前から、イメージに合った音が探しやすいです

https://soundeffect-lab.info/

* 足音は大抵これで賄えそうです

https://www.unrealengine.com/marketplace/ja/item/c77aeb5b9a93448c94b4e6235fb4edc4

* 探すのが楽しくなるくらいSEが豊富にあります

https://www.unrealengine.com/marketplace/ja/item/f6f88552c30e42b3a7ceeb2c638c66fa

* ファンタジー的な世界観で敵にぴったりな外見でした

https://www.unrealengine.com/marketplace/ja/item/c6e4fd5e34f947b7ab50bc9b50647d6d

* ニッチなポーズが多いですが、ツボにはまるものが見つかると思います

https://www.unrealengine.com/marketplace/ja/item/dff982f74a7040428638c625e79d5efa

* 主に植物を使わせていただきました

https://www.unrealengine.com/marketplace/ja/item/3482d95fcd024bf6b217ec819fe807ba

* 何かとお世話になっているエフェクトです

https://www.unrealengine.com/marketplace/ja/item/963c62c38abb403aa08b575584b765d0

https://www.unrealengine.com/marketplace/ja/item/aa644bc2837b4a74b3b4d238474bb348

* Blueprintやマテリアルのノードのスクショ保存に便利です

https://www.unrealengine.com/marketplace/ja/item/a00dc91582774660912d810324da0a74