第17回UE4ぷちコン参加振り返り

# はじめに

先日開催された、historia様主催の第17回UE4ぷちコン(テーマ「かいとう」)に参加しましたので、その振り返りになります。
応募した作品の動画は以下になります。

https://youtu.be/ZI5lbZX1Tdc

# 方向

![マインドマップ(https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/4e9bfe49-d8fe-a889-2612-d5a555a6fe0e.png)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/913d5b0a-1e67-eea4-6ac7-ebe2f96f3d1a.png)

まずは、いつも通りマインドマップでネタ出し。
怪盗と言えば「ルパン三世」の世代なので、変装、解錠、トリック、逃走など、ゲームとしてのネタはつきませんが、サイドイベントの「ぷちスタ」が怪盗の方向だったので、そこは避けて解凍にすることに決定。テーマに沿ったものが何か入っていればOKなので、方向が決まれば、あとはいかに理屈をつけてそれっぽく見せるかの勝負。ここが決まるまで一週間ほどかかりました。

# 今回目指したこと

まずは、自分の中でずれない軸が必要なので、以下を決める。

- 自分で遊んで楽しいアクションを作る
- 流れのあるステージ構成(タイトル→デモ→チュートリアル→ステージ1→ステージ1ボス)
- アセットを盛る

今まで作ったぷちコン作品は、遊びの部分やゲームの流れがいまいちだったので、その辺りを何とかしたいと思っていました。
そして、痛感していたのが、アセットがうまく配置できていないこと。アンリアルクエスト2で、アセットの盛り込みが全然出来ていなかったので、アセットを盛り込むことを目指しました。

# 今回やってみたこと

## 氷表現

解凍を表現する上で一番大事なのが、氷が融けること。まずは検証からやってみたところ、意外と良い感じで表現できました。
ワールド位置オフセットで頂点を変形させているので、解凍が進むと端の方の重なりが見えてしまいますが、今回はクローズアップしてじっくり見せることは無いので、あまり気にしないことにしました。
マテリアルについては、公式の[屈折のマテリアル](https://docs.unrealengine.com/4.27/ja/RenderingAndGraphics/Materials/HowTo/Refraction/)を参考にしました。設定が少ないですが、すごく良い感じに仕上がりました。

![20220227_解凍.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/ad436304-8e70-8bfb-4da1-3861ed660f3c.gif)

敵も氷表現ですが、同じマテリアルを使うとアイテムと見た目の差異が少なく、少し視認性が良くなかったので、前々回のぷちコンでも使用したマテリアルを使用しています。
左が氷のマテリアルで、右が過去のマテリアルを使用したものです。これでアイテムの氷との差異が出るようになりました。
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/7db5f58c-80d2-04d0-e181-fa509b34cdf9.png">

平田ラタさんの記事を参考に作成していますが、画面に入ったときになるべくはっきり見えるよう、濃いめの色になるように調整しています。

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


## ボス

今回は、流れのあるステージ構成に必要なボスを作成しました。
ボスと言えば、戦闘開始前の演出もお約束なので、咆哮シーンをブラーとNiagaraエフェクトで作成。
放射ブラーのポストエフェクトと、
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/d86f017c-fcf8-5a9f-7a1f-e9a4ef3f5429.png">
Niagaraの効果線を重ねることで、
![ボス演出効果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/cf7dfdd7-9658-720d-5bdb-a8401d4e7b11.png)
演出時にはこんな感じに、それっぽくなりました。実際のゲームでは、カメラの揺れも入ります。
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/3b7e650e-da9f-3ea9-d637-dc1044586e03.png">

そして、巨体ならではの攻撃として、思いつくのが衝撃波的な何か。
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/8b236280-1b69-dc3a-adfa-2c5f71625e87.png">

最初は、当たり判定をメッシュにしようと思いましたが、以下の@O_Y_Gさんの記事を見て、Niagaraに判定を入れる方法が面白そうなのでやってみました。記事に詳しく書いてあるので、気になった方はご参照ください。

https://qiita.com/O_Y_G/items/d696d01b17250dccc273

当たり判定用の球を、衝撃波のエフェクトが広がる速度に合わせて飛ばしています。赤い球が当たり判定用です(ゲーム中では非表示です)。エフェクトがそのまま当たり判定も兼ねるのは便利かもしれません。今更かもしれませんが、Niagaraの応用範囲の広さに感動しています。

![エフェクトと当たり判定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/5aef94bb-249a-9858-0877-da80dd214899.png)

## ダメージ表現

アンリアルクエスト2の課題にあったダメージを受けたときの表現の流用です。氷のダメージなので、なんとなく氷っぽいような模様と色にしています。アンリアルクエストはイベントを楽しみながら勉強できておすすめです。
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/decc5637-2a6f-bda7-c9c6-242e94572311.png">

## ゲージ表現

見栄えのするUIも作りたかったのですが、デザインセンスが無いので、動きを作ってみました。テクスチャは、練習も兼ねてSubstance 3D Desingerで作りました。単純な形状しか作れませんが、これもまた良い勉強になりました。

![20220413_ゲージアニメーション.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/860598c7-866a-467c-8a54-b7e3f56263dc.gif)

波の動きを2つずらして重ねて、それっぽく表現しています。最後にゲージの形でマスクしています。4.27からマテリアルで使えるようになったNamed Rerouteが凄く便利です。結線しないで済むのでノードがすっきりします。
![M_GaugeTest-MaterialGraph_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/cbae22e0-bcb5-32f2-4064-66a1ad065c1e.png)

波の動きを表現するテクスチャは、そのまま「波」な感じです。
|<img width="256" height="256" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/0342e2f5-b799-2f06-e795-319219d1c1d6.png">|
|:--|

## ストーリー画面

タイトルにある「氷の杖」をゲーム中に出す予定は無かったのですが、村人が凍っていたりする説得力を出したかったので、杖の存在感をアピールするためのストーリー画面を実装することにしました。
ついでに、ゲーム中の敵が氷だったりする理由も入れています。自分の中では、ゲームっぽさが表現できたかなと思います。また、動画の字幕追加の手間が減るので一石二鳥でした。
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/531ee24a-9496-d95f-a8fd-82f491601df9.png">


## アセットの盛り

地形のメッシュは今までよりも配置したのですが、寂しかったので、木やフォリッジを追加しました。
開始直後のステージの背後は動画には映っていませんが、それっぽく木を配置しています。
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/8064de47-23fe-79f7-7af1-05906f8050d7.png">
フォリッジのおかげでにぎやかな草地になりました。今後は、レベルデザインを意識しつつ、アセットも盛っていければと思います。
<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/9e4af2f0-cbdd-2d09-293b-09a4c420de6c.png">

# 振り返り

## Keep
- 情報収集で解説配信などを見る　→　自分が知らない操作や技術を知るきっかけになる
- 開始時に最低限必要な骨組みを明確にする　→　何を実現したいか、見せたいか、ゲームの方向性を決めておく
- アセットの盛り込み　→　自分が実現したいイメージに合ったアセットの配置を行う
- BGMなどは早い段階で選択しておく　→　自分の中でイメージを膨らませやすくなる

## Problem
- 制作開始時にオブジェクトの設計ができていない　→　サードパーソンを継承してプレイヤーを作成、敵はEnemyベースクラスを継承して作成していたので、同じゲームのルール下で動くのに基底クラスが別になっていた
- レベルのレイアウトでメッシュのサイズを意識できていなかった　→　自由に配置しすぎてメッシュが重なり、ライティングビルド後にちらつきが目立って調整に手間がかかった

## Try
- 同じ性質を持つオブジェクトの基底クラス作成と継承　→　ゲームのルール下で動くキャラなどは基底クラスを継承する
- リファクタリングを極力おこなう　→　次回以降でも使いまわしできるように、可能な限り整理しておく
- レベルのレイアウト時にメッシュのサイズを意識して配置、レベルデザインを行う →　チップや配置物のサイズを決めてレベルの下地を作成する

概ね、目指したものは実装できたと思うが、敵の発生タイミングが難しかったり、スピード感が足りなかったりと、考えが及ばない部分があったので、今後の制作では意識できるようにしていきたい。
また、ヒットストップや画面暗転でのカメラ演出など、ゲームらしさと気持ち良さの表現も意識していきたい。

# 心残り

ライティングをビルドした際に、以下のように画面が壊れることがありました。提出が近づいたタイミングで解決方法も満足に見つけられなかったため、ライティングをビルドせずに実行することにしました。

<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/265e39a3-9d4c-1606-bbee-09be2c96e61a.png">

そして、よく見かけるエラーメッセージが画面左上に…

<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/72c40763-8124-6677-1250-bca044d73e96.png">

画面全体の色が崩れたまま提出するわけにもいかず、かといってエラーメッセージを残すわけにもいかないのでエラーを消すことにしました。どなたか解決方法をご存じでしたらご教示いただきたいです。

![20220429_メッセージ抑制.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/8bcfb9ca-bc07-e7da-191a-eb1ee8a9d64e.png)

エラーメッセージの削除については、まめおさんの記事を参考にさせていただきました。

https://papersloth.hatenablog.com/entry/2019/01/29/203333


# 最後に

以前よりもできることが増えた感じで制作が楽しかったですが、まだまだ知らないことが多いので、これからもできることを増やしながら勉強を続けていきたいと思います。

そして、今回「しお賞」をいただくことができました。特に新しいことをやっているわけでもなく、気付いたところを地道に埋めていった結果に対して、コメントをいただいたような気がして、とても嬉しかったです。

初回の作品(ぷちコン第14回)が出来もネタもひどい状態でしたが、そんな作品にも的確な指摘と温かさのある一言が添えられた@seiko_devさんのコメントが次につながる力になりました。ありがとうございます！
https://sites.google.com/site/seikodevmemo/top/ue4-petitcon14/impression/021-040#h.p_ID_560

改めまして、historiaの皆様、EPICの皆様、コンテスト開催や運営、審査などお疲れさまでした！！

# 使用素材とアセット
- 可愛らしくてお気に入りのキャラです。余談ですが、今回は前回(第16回ぷちコン)の続編で、異世界から戻った後のお話という設定です。

https://www.unrealengine.com/marketplace/ja/product/mistic

https://www.unrealengine.com/marketplace/ja/product/nana

- キャラを村人として使用しました。バラエティが豊富で良いアクセントになりました。

https://www.unrealengine.com/marketplace/ja/product/toony-tiny-rts-set

- 結構なゲームが作れるくらいアクションが豊富にあります。

https://www.unrealengine.com/marketplace/ja/product/skeleton-crew-bundle

- 今までザコとして使っていましたが、ようやくボスとして使えました。

https://www.unrealengine.com/marketplace/ja/product/four-evil-dragons-handpainted

- 見た目や動きが良い魔法系のエフェクトがいっぱいです。何かとお世話になっています。

https://www.unrealengine.com/marketplace/ja/product/advanced-magic-fx-11

https://www.unrealengine.com/marketplace/ja/product/advancedmagicfx13

https://www.unrealengine.com/marketplace/ja/product/luos-s-eight-elements

- やっぱり足元のエフェクトもおろそかにできません。

https://www.unrealengine.com/marketplace/ja/product/niagara-footstep-vfx

- 今回選択したキャラクターや世界観にすごく馴染みます。密度も高いので画面が引き締まります。

https://www.unrealengine.com/marketplace/ja/product/dreamscape-nature-meadows

- 方向性を決めた後のちょうど良いタイミングで3月の無料アセットになりました。想定していたイメージにぴったりでした。

https://www.unrealengine.com/marketplace/ja/product/resubmission-for-release-greenwood-fantasy-village

- ゲーム中のアイテムに重宝しています。マテリアルも豊富にそろっています。

https://www.unrealengine.com/marketplace/ja/product/low-poly-style-deluxe-2-tropical-environment

- 足音のエフェクトはこれ1つでまかなえています。

https://www.unrealengine.com/marketplace/ja/product/footstep-sound-effects-pro

- 足音以外のゲーム中のSEはこれでまかなっています。欲を言えば日本のアニメ系のボイスも入っているといいな…

https://www.unrealengine.com/marketplace/ja/product/pro-sound-collection