第22回ぷちコン参加振り返り

# はじめに
historia様主催の第22回UE5ぷちコン(テーマ「ゆうえんち」)に参加したので振り返りです。
応募した作品の動画は以下になります。
- 使用バージョン：UE5.4.3
<iframe width="1205" height="678" src="https://www.youtube.com/embed/etXjzljVQGA" title="第22回UE5ぷちコン応募作品：トンデモアトラクション" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# 方向

今回のテーマ「ゆうえんち」からは言葉遊びが難しく、遊園地固有のイメージしか浮かびませんでした。
遊園地を雨から救うという微妙なアイデアから、トランポリン＋ピンボールを思いついて今回の形になりました。
[![マインドマップ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/333f6663-fa8e-de0c-5a84-811d2a512941.png)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/e0069b16-89f1-5200-42e7-f17b1ae06a54.png)


# 今回目指したこと
- UEっぽくない見た目
- トゥーンシェード、または2D
- 仕事が忙しくなりつつあるので、なるべく手間をかけずに作る

いつも同じような見た目だったので、今回はとにかく違いを出すことを目指しました。
手持ちのアセットがほぼ3Dなので、表現手法は2Dではなくトゥーンシェードを選択しています。

# 今回やったこと

## 見た目の調整
今回は、主要箇所をトゥーン＋アウトラインで表現。特定の箇所のみアウトラインをつけるため、ステンシルを使用しています。
他の箇所は、外観が分かる程度に情報量を削減して差別化しました。

![今回の見た目2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/194d2489-50f5-b431-86a6-cd70ff3600d7.png)

サイドビューのため、素材をそのまま使うとプレイフィールドの視認性が悪かったので、素材の手前をカット。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/7048d40a-834f-0155-5464-ee5ac6e41a52.png" width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/670f4ffd-0d12-652a-e799-dfae3018074e.png" width="50%">

オブジェクト内の特定の範囲のみをマスクして、メッシュの一部をカットすることで視認性が向上しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/16f2ce27-220e-3d58-2a32-f2ffbeb0ad8e.png" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/c08b15f6-cc5e-422a-252c-9f38c01d6229.png" width="50%">

## 背景
当初の予定だった「UEっぽくない画面」は実現できましたが、情報を落とし過ぎて背景がシンプルになりすぎてしまいましたので、山や雲などを追加して背景の隙間を埋めました。

シンプルでも見ごたえのある絵作りを心掛けるようにしないと…

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/53206324-baaf-e026-0821-9cbb1bbfbcbd.png" width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/a7018752-99eb-0297-fe2e-ce920ee99e3d.png" width="50%">

## 当たり判定

サイドビューのゲームなので、当たり判定はプレイフィールドであるXZ平面上に配置しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/47521a40-eade-6cac-efe4-d0cc6841a61f.png" width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/f951170a-81ba-0925-1ba9-5af3f0fdc6a8.png" width="50%">

レイアウトをしやすくするため、コースターを画面奥に配置していますが、当たり判定だけプレイフィールド上に位置するよう座標を調整しています。

カメラはOrthographicを使用しているので、見た目に問題無ければ奥行方向の配置は自由です。今更ですが、観覧車などもこの対応で良かったかもしれません。

## 挙動は物理任せ

直感的な動きを実現できて設定も手軽な物理挙動。物理を使うと荒振って制御しきれないケースもありますが、コミカルな見た目のゲームなので、むしろ許容できます。

アクター内の対象のオブジェクトで物理シミュレーションをチェックして、座標は対象平面のみに限定するだけの手軽さ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/334e09f3-61dc-79ec-3028-7c02ef719e3e.png)

打ち返しは`AddImpulse`で、数値は手ごたえを確かめながら調整しています。
![打ち返すためのAddImpulse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/85bc2a09-e077-51b7-c9bf-45e83bdb59e5.png)


## レンダリング結果のウィジェット表示

今までやろうと思いつつ出来ていなかったので実装。
説明のテキストだけではなく、絵や動きも加わると、画面が引き締まって説得力が増すように感じましたのでやって良かったです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/b38d4977-7949-af92-9cf6-08771c9b0aca.png" width="50%">

レンダリングは、同じレベル内でゲームカメラの背後にあたる上空で行っています。こんな対応で良いか分かりませんが、見た目が意図したものになっているのでOK。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/2fea1da0-b300-f8f9-3f4f-0231db95cb59.png" width="50%">

トゥーンシェードとアウトラインは、ポストプロセスマテリアルで対応しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/7892bb0a-a493-6fae-b2ae-986ecf497ef1.png" width="50%">

## NiagaraのAttributeReader

NiagaraのAttributeReaderは、今まで使ったことが無い機能だったので使ってみました。
Ribbonの親になるパーティクルの状態を参照して、αとリボン幅に反映しています。
![NiagaraのAttributeReaderを使ってトレイルを調整.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/980e49cb-0797-803d-a847-75ce47353aeb.png)

AttributeReaderで取得した親の状態を利用して、親が消える動作に合わせてリボンを消すことができました。以前から、親が消えた場所にリボンが残って消えていくのが気に入らなかったので、収穫有りでした。

左：親が消えた位置でリボンの動きが停止してしまうのが不自然
右：親が消える状態に合わせてリボンも消える(消えるときにリボンのαと幅が変化)
![Niagaraアトリビュートリーダー未使用.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/b26daa09-e194-7ed6-6e28-7fc0ae4b8e8c.gif)![Niagaraアトリビュートリーダー使用.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/b430361d-5289-4f42-bd75-0fbaee012668.gif)

# 振り返り
## Keep
- ぷちコンへの参加
- 早目の試作と感触の確認

## Problem
- 画面をシンプルにし過ぎた
  - 画面全体の見映えでバランス良くなるようにする
- UIが弱い
  - ゲームのイメージ、視線誘導などを意識したUIを心がける
- ゲームに合ったエフェクトが作成できていない
  - 思い付きで作ったものが多いので、ゲームの雰囲気に合わせたものにしたい

## Try
- カメラワークに一工夫入れる
- ゲームに合わせたUIとエフェクトを作る

## 所感
物理を使ったので、ゲームは割と遊べた印象。
シンプルな画面を目指してはいたが、シンプル過ぎた気がする。デザインにもよるが、なるべく単調・単色にならないよう気をつけたい。
エフェクトやUIが相変わらず弱いので。ゲームの雰囲気に合ったものになるようにしたい。

遊びやすくなるよう画面を固定しているが、出来る範囲で画面を広く使えるようなカメラワークがあっても良かった。

トゥーンで表現できたのは良かったが、画面が寂しくなった。
エフェクトをもう少し盛るなどして、シンプルな画面でも、見ごたえのある絵作りをしたい。

# おわりに
アイデアを考えるのが苦手で制作開始まで2～3週間くらいかかるものの、何とか形になりホッとしています。
今回で参加9回目になりますが、やる度に新たな発見があります。また、自由気ままに作れるので、仕事の合間の癒しにもなります。

これから仕事が忙しくなりそうなので、今まで以上に時間を割くのが難しくなりそうですが、その時はその時なりのゲームを作れるようにしたいと思います。
コンテストの開催、運営いただいているhistoria様に感謝です。

# 今回使用したアセットと素材

||||
|---|---|---|
| Amusement Park - Low Poly Asset Pack by ithappy | <a href="https://www.unrealengine.com/marketplace/ja/item-detail/80387cf817504a34b7f187b3e26921f6"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/9f6b5564-a008-e52f-e459-3e3300f8d1e4.png" width="100%"> | 今回のテーマを表現するために必須のアセット。ローポリでマテリアルもシンプルで扱いやすいです。 |
| POLYGON - City Pack | <a href="https://www.unrealengine.com/marketplace/ja/item-detail/cee7a6790aec4b4fa9c8089a4f29e45c"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/4fa9731e-5a3a-823b-acd4-1da658b86dc2.png" width="100%"> | 画面内を跳ね回るお客として、人物のスケルタルメッシュを使用。一部、演出にも使用しています。 |
| POLYGON - Town Pack | <a href="https://www.unrealengine.com/marketplace/ja/item-detail/3482d95fcd024bf6b217ec819fe807ba"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/6d553e19-7e6f-a893-2926-56ddba2bcccd.png" width="100%"> | こちらも同じく人物のみを使用。 |
| Pro Sound Collection | <a href="https://www.unrealengine.com/marketplace/ja/item-detail/f6f88552c30e42b3a7ceeb2c638c66fa"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/1bf5db8a-f460-552c-a1a2-d4a2b8f37593.png" width="100%"> |　定番のSEアセット。コミカルなものが少ない印象だけど、大体のものが揃ってます。 |
| Graph Printer | <a href="https://www.unrealengine.com/marketplace/ja/item-detail/a00dc91582774660912d810324da0a74"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/10e92ddc-48a8-c709-b485-969737a9373b.png" width="100%"> | ブログのスクショ作成に便利。 |

BGMは以下の2点。割と直前に選定しましたが、ゲームの雰囲気に合っていてお気に入り。

https://audiostock.jp/audio/47070

https://audiostock.jp/audio/120140