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

# はじめに

historia様主催の第21回UE5ぷちコン(テーマ「おす」)に参加したので振り返りです。
応募した作品の動画は以下になります。

https://youtu.be/rccQdWrmdJo

- 使用バージョン：UE5.3.2

# 方向
今回のテーマ「おす」は色々と言葉遊びができました。ここまで自由度があると選択肢が凄く多かったのですが、ゲームと相性の良い「押す」でシンプルにいくことにしました。
[![20240412_ぷちコン21_マインドマップサムネ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/b72c7764-7956-a747-cdad-3f1054e17a97.png)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/c4ab9a59-c4b2-8ee5-38d0-df983148e86a.png)

# とりかかり
前回感じた「早目のレベルデザインとフィードバック」を目指すべく、ひとまずは「試作→感触を試す」のイテレーションにとりかかる。
期間は限られているので、早々に見切りをつけることを予め決めておく。
とりあえず2種類くらい試作したところで、手応えが今一つイメージできなかったので、今回のゲームのベースになる案「風で押す」でいくことに決めました。
- コインプッシャータイプ
  - アイテムをゲットするため、コインプッシャーの中で動き回るイメージ
  - 変化する段差の中で動き回る
  - 常に上の位置をキープすれば安泰な感じがする
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/36726e05-2107-4042-de12-586afc4a4a26.png" width="50%">

- アイテムを押して集めるタイプ
  - アクション的には良さそう？
  - 物理だと思ったように押せない
  - 何かのゲームの一部ならあり？
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/faee2524-7068-d696-dd72-21a8a9cddbb6.png" width="50%">


# 動き出し
内容が決まったので動き出します。
ルールはシンプルに以下に決定。「風で押す」ことだけは絶対に変えないこととしました。
- 風で押してゴールを目指す
- 落ちたらアウト
- 障害物に当たったらアウト
- ポイント通過でボーナス

「風で押す」表現のためには、浮いているものを対象とすると都合が良さそうです。浮いている理由があると説得力も増すので、その辺りも考えてファンシーな方向に決めました。
そして、クローバーを持たせたキャラが生まれました。これなら、空中に浮いていても不自然さは無く、風が吹けば飛ぶことは間違いありません。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/7e74300c-7a8a-3924-9840-0cfc3f64d83d.png" width="50%">

## 奥行きのつかみにくさ
このゲームには、「奥に押す」と「上に押し上げる」2種類の風があります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/9736eee3-6188-77e1-fffe-e9bc90d45db2.png" width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/955088f9-61c5-f314-ce4e-587a837b38fe.png" width="50%">

作成開始当初は以下のように、プレイヤーが中央にいました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/10659781-fe22-2cbc-a57e-cb1901b5b67f.png" width="50%">
この状態では対象が見えないので、カメラの位置を調整しています。対象が本体に隠れることが無くなったため、風を当てやすくなりました。TPSなどで見られるカメラ位置です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/f2fc1c09-c833-60af-8a6a-b81f46ed84a7.png" width="50%">

とは言うものの、やはり当たりにくさは残りますので、それぞれの風について別の対応をしています。

押し上げる風については、プレイヤーの前方に対象が入った際にサイトを表示することで対応しました。
ある程度範囲を広くして、あまり狙わなくてもサイトに捉えることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/e1a93905-3fe2-233d-0c9c-fdda895f301d.png" width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/b77cdcdb-909b-5dfb-b5da-34c2c7c16953.png" width="50%">

サイト位置に風が発生するので、奥行きを意識しなくても簡単に押し上げることが可能です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/ef657180-7a6c-650a-44ec-715356a3bc97.png" width="50%">

押す風については、TPSなどでよく見るクロスヘアによる方向補正で対応しようとしました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/1089fbc2-9afe-402f-1757-dcdc08b5a561.png" width="50%">

カメラの位置をずらしてしまうと、画面での見え方と実際の射線に違いが出てしまいます。
右下のカメラ視点だとプレイヤー正面方向の軌道が対象に向かっているように見えますが、実際の正面の軌道はかなりずれています。対象に正確に当てるためには、青い矢印の方向に軌道を補正する必要があります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/4435f0a1-748b-b50d-c0e9-5776484ed716.png" width="50%">

実際に対応を組み込んでみると、押す風を当てやすくなりました。
しかし、このゲームでは、「動きを読んで予め配置しておく」ことが重要なため、対象に直接当てないことの方が多くなります。その場合、クロスヘアと対象の当たり判定が取れず、軌道補正ができないため、この対応は断念しました。

代わりに目安となるガイドを表示してその場しのぎの対応で逃げました。
同様の仕組みを作る機会があったら、調整をうまくやりたいです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/d2aa246c-d447-78e0-30c9-ea769eb8bb2e.png" width="50%">

また、空中を漂うお友達の位置がつかみにくかったので、真上からのライティングにしています。地面を見ると落ちる場所が分かります。
ライティングの見映えが微妙かもしれませんが…

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/9e05ad11-f89b-01a9-f042-55504df74047.png" width="50%">

# コントロールリグ
コントロールリグは、アセットには無いアニメーションを作成するのに便利です。
今回はキャラクターの可動箇所は少ないですが、それでも自分のイメージに近いモーションが作れるのは重宝します。
可動箇所の少なさは、練習としては最適でした。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/26526fdc-3ea6-6147-8fd0-b72ec109842b.png" width="50%"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/1c171216-bee6-86d3-4e2d-13d2b36af7cc.png" width="50%">

公式の説明を見れば、簡単に設定できるようになります。指先まであるとかなり大変そうですが…
そのうち自動で作れるようになりそうな雰囲気はあります。

https://dev.epicgames.com/documentation/ja-jp/unreal-engine/how-to-create-control-rigs-in-unreal-engine

シーケンサーでデモを作る時にも、そのまま使えるので便利です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/0c732afd-97d9-14c7-e306-e5ff6c886b23.png" width="50%">

# エフェクト

以前から作りたかった回転系のエフェクトが作れて満足しました。
以下は、気絶時の星とチャージの吸い込みです。

![Video_回るエフェクト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/4d5d599c-7f8a-c02f-b897-907e0d97f9ce.gif)

ゴール演出の花もNiagaraで作成しています。上を飛ぶ蝶の動きを回転で実装しています。

![Video_花が咲くエフェクト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/248eddcd-cfe3-a0e6-e484-9bc43fc98d4b.gif)

デフォルトで回転モジュールはありますが、今回は勉強なのでNiagaraのモジュールで実装しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/0bc6f39e-12d2-496d-0fe6-afb4b82824f6.png" width="50%">

星も、吸い込みも回転は同じで、違いは中心からの距離を維持するか、縮めるかの違いだけです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/040a8f00-fe1d-c0df-3481-6f082a128a08.png" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/3f3f8d72-6e6a-11e3-567f-d30a6514a751.png" width="50%">

蝶の回転移動は、移動方向を回転させながら移動するだけの簡単な処理です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/208d30c2-03ba-3b40-ad76-fee7965e4cbb.png" width="50%">

また、ゴールした後の花のエフェクトは、`Particle State`の設定でKillされないようにしてみました。
可能な限り長いLifetimeを指定することでも実現できますが、ステージのプレイ時間などを気にすることなく、動きのあるオブジェクトを配置できるので使いどころがありそうです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/ab8b9900-94e1-1ef7-2c8a-9084116b98c7.png" width="50%">

ついでに、蝶はスタティックメッシュの頂点カラーを利用して、マテリアルで翅の部分をアニメーションさせています。
スケルタルメッシュを使わなくても良いのでお手軽です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/6cdf8db1-6090-9e33-3db6-26bc696dad7a.png" width="50%">

# タイトルロゴ

今回はゲーム内容に合わせて緩い感じを出してみました。
色は、空の青と雲の白をイメージしています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/90731fd7-7cfd-8095-3287-2d2499e57164.png" width="50%">

Substance 3D Designerでは2023からスプラインが導入されました。
うまく使えば、色々と変形ができるので便利です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/5f9830e8-c623-626a-b198-107d654e1c83.png" width="50%">

UEで慣れ親しんだノード形式が直観的で使いやすく、一度ノードを作れば、同じパラメータで同じものが作れるのも魅力です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/ac9c2558-9b20-5eec-7693-2257289aded3.png" width="50%">


# 小ネタ

## Niagaraアセットのサムネイル

Niagaraのアセットは、サムネイルがデフォルトのままだと、どれがどのエフェクトか分かりにくいです。

こちらからサムネイルを作成できるので、作業の合間に適宜サムネイルを作成しておくと後々地味に便利です。
この振り返り記事を書いている段階で、ここにボタンがあることに気づきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/85d9a94e-44c9-6de2-4a43-b6f09b0f7d7d.png)

今までサムネイルを気にしていませんでしたが、アセットの視認性が良くなることを実感できたので、今後は作成したいと思いました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/8be533f0-9994-0f4f-ab1c-ffa3a137ed17.png" width="50%">

プレビューの背景を単色に変更する場合は、`プレビューシーン設定`から`環境`で変更できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/15936e93-6a87-9c29-bc47-e8a4f26184bc.png"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/2c0cf094-fee1-4773-1662-c2d3fb680e75.png">


## アセットのリネームができない
レベルを複製したりしていると時々エラーが出てリネームできないことがあります。同じファイル名のアセットは無いはずなのになんで？と思いつつも、短期間の制作なので違うファイル名にして凌いでいました。

![20240413_リネーム時にエラー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/48536fae-bd38-a2c7-0d8f-bfc4c607bc63.png)

アセットの移動時などにシンボリックリンクのようなものが残るので、それがリネームできない原因のようです。
参照元はこちらの記事ですので、詳細はリンク先をご参照ください。

https://historia.co.jp/archives/1028/

対応としては、`その他のフィルタ`→`リダイレクタを表示`をチェック。

![20240413_フィルターでリダイレクタを指定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/d566b871-c6ca-9fbf-639c-1a896e3e021e.png)

リダイレクタが表示されるので、右クリックから`修正する`を選択すれば、リダイレクタが消えてリネームできるようになります。

![20240413_リダイレクタが表示される.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/11fbd2e4-54d5-0918-4944-6beb197ac0b2.png)

![20240413_リダイレクタを修正.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165865/d7359d37-7c20-a7bb-c123-a1d5f07620e1.png)

# 振り返り

## Keep
- 早目の試作とイテレーション
  - 早めに感触をつかむ
- ランドスケープの活用
    - それらしい地形が作れたので、必要なら活用していく

## Problem
- UIのセンスが無い
  - 今回は表示するものが無かったが、最低限のものだけでもそれらしく見せたい
  - UI周りを作るのが面倒なので、楽に作れて見映えの良い方法を模索する
- 画面内で動きが足りない
  - プレイヤー以外の箇所の動きがほしい
  - マテリアルで変化を表現するなども考慮する
  - 蝶や鳥など、場面に合った小物でにぎやかすのも良さそう
  - エフェクトなどもう少し多くても良かった
- エフェクトの表現が足りていない
  - 風の表現なのでシンプルになったが、もう少し風っぽさを出せるはず
  - テクスチャやパーティクルの動きなど、見ごたえのあるエフェクトにできれば良かった

## Try
- UEっぽくない画面にする
  - シェーダー
  - 2D？
- 画面内にリアクションを入れる
  - プレイヤーの動きに合わせて背景のオブジェクトがリアクションをするなど
- エフェクトを勉強する
  - 見ごたえのあるもの、または説得力のあるものにしたい

今回はのんびりと普通に制作を進められたので、可も不可も無い印象。
次回は、エフェクトを含めて、画面の見え方を更に良くするようにしていきたい。

# 最後に

色々と作ってきたつもりですが、まだまだ学習することがあると感じました。
知識としてはあるけれど実際にやったことが無いことも多く、そういったことを試す良い機会であることも実感できました。
今後も普通のことを普通に積み重ねて、自身の学習のために頑張っていこうと思います。

いつも素敵なコンテストを開催いただいているhistoria様に感謝です。


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

- マーケットプレイスのアセットです。

||||
|:--|:-:|:--|
[MEGA Monsters Pack](https://www.unrealengine.com/marketplace/ja/item/7aa10bdabede473b98d51b2b03c37f23)|<img src="https://cdn1.epicgames.com/ue/product/Screenshot/SS-1920x1080-f80d3954dc3c00ca0ccce5feaad90a08.jpg">|今回のキャラクターはこちらから。可愛いキャラが多く、いつか使いたいと思っていましたが、今回ようやく使うことができました。|
|[ANIMAL VARIETY PACK](https://www.unrealengine.com/marketplace/ja/product/17c2d7d545674204a7644c3c0c4c58ba)|<img src="https://cdn1.epicgames.com/ue/product/Screenshot/StoreFoxscreenshot01-1920x1080-accbfeeb23aed2c5445c48ad3fb485fe.png">|ゲーム中での存在感は薄いですが、こちらのアセットではカラスを使用しています。|
|[Stylized Ruined Village](https://www.unrealengine.com/marketplace/ja/item/ad5d7d35e94340ce95cf0dd4b0659cab)|<img src="https://cdn1.epicgames.com/ue/product/Screenshot/01-1920x1080-d40fb6de99917246fce051ec8caf3101.jpg">|風車がイメージにあったので使用しました。フォリッジが豊富で、ランドスケープ用のマテリアルの使い勝手が良かったです。|
|[Dreamscape: Stylized Environment Meadows - Stylized Nature Open World Fantasy](https://www.unrealengine.com/marketplace/ja/item/b4514562504e434db2a03c84b86bb25d)|<img src="https://cdn1.epicgames.com/ue/product/Screenshot/Screenshot371920-1920x1080-3814b1a9bd8e89565046659d6a44c2b1.jpg">|花や地形の一部を使用しています。|
|[Pro Sound Collection](https://www.unrealengine.com/marketplace/ja/item/f6f88552c30e42b3a7ceeb2c638c66fa)<br><br>[Ultimate SFX Bundle](https://www.unrealengine.com/marketplace/ja/item/c3df7087e15149bd8564ebb59a375eaf)<br><br>[Sounds Of War 1 - Medieval Blades, Sword and Weapons](https://www.unrealengine.com/marketplace/ja/item/a88623899cfd47ada8f99c45cc93a62f)|<img src="https://cdn1.epicgames.com/ue/product/Screenshot/ProSoundCollection1920x1080-1920x1080-86e1796fa257e304920613a18a300fa9.jpg"><br><img src="https://cdn1.epicgames.com/ue/product/Screenshot/Untitled%20design%201-1920x1080-9b2a1875e2b4083b8b94cf165c4caaad.png"><br><img src="https://cdn1.epicgames.com/ue/product/Screenshot/SOW1%20Unreal%20Gallery-1920x1080-ec84d345cd17392647aef5b65400ccdd.jpg">|毎度お世話になっているSEです。|

- BGMはこちら。

https://audiostock.jp/audio/49179

https://audiostock.jp/audio/111843

- 今回はこちらのフォントを使用させていただきました。全角漢字は使えませんが、イメージにぴったり。手持ちのフォントで探していましたが、雰囲気に合うフォントを探すのも楽しいです。

https://github.com/satsuyako/CherryBomb