UE5ぷちコンで幼児向けゲームを作ろうとした話(第20回UE5ぷちコン振り返り)

この記事はUnreal Engine (UE) Advent Calendar 2023(シリーズ 1)の19日目の記事です。

https://qiita.com/advent-calendar/2023/ue

ゲーム製作初挑戦（UE初心者）のぷちコン体験、感想記事です。
生温かい目で見守っていただけると幸いです。

## 3行まとめ
- UE5ぷちコンで幼児向けゲームを作ろうとした
- 幼児向けコンテンツは難しい（リサーチ、テストプレイ）ことが分かった
- 次は幼児向けではなく、自分の子供にだけ向けてを作ることを決意🔥

## UE5ぷちコンとは
- 株式会社ヒストリア様主催のUnreal Engine 5の学習を目的としたコンテスト
- 詳しくは以下参照

https://historia.co.jp/ue5petitcon20

## 作ろとしたもの
- モチーフ：紙相撲
- ターゲット：保育園児(年少)～小学生(中学年)：3才～10才、可能なら未満児もでも
- 塗り絵形式で書いた落書きをスキャンして、バーチャル紙相撲をする
- 想定ユースケース：地域イベントなどで子供たちにやってもらう
- ワンプレイを短く　2、3分くらい
- ひとまずゲームとして成り立つ最低限の部分から作り始める
- 以下はできたら
    - 落書きに応じてパラメータ(HP,攻撃力、守備力)や必殺技などが決まる
        - バーコードバトラー、モンスターファーム的な感じ
    - とんとん用コントローラーとかも作れたらいい（モバイルアプリで作ってタブレットで運用？）

## モチベーション
- UEで幼児向けコンテンツを作っている人があまりいないから作ってみよう！
    - 人と違うものを作りたい（差別化）
    - 子育て中というアドバンテージを活かしたい
- 地域に貢献できるコンテンツを作りたい
- 自分の子供も楽しめるコンテンツを作りたい

## できたもの
<iframe width="560" height="315" src="https://www.youtube.com/embed/yTH6PSXIKPE?si=wckm5-NWH0Xyxbyf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

- 制作時間18h
- 今回がUEでのゲーム製作が初めて（そもそもゲーム製作自体が初めて）だったこともあり、期間内には最低限の実装しかできなかった。。。

### ゲーム内容
- 起き上がりこぼし風のコマはUEの物理シミュレーションで実現
- マウスでクリックした場所にインパルスを発生させてステージを揺す+コマを弾いく
- 相手のコマをステージから落としたら勝ち
- 先にステージから落ちたら負け

### 工夫点
- コマを起き上がりこぼし風にして動きを面白く
- 時間の問題もあり基本的にUE物理シミュレーションを使って作成
- コマ同士がぶつかった際に大げさに吹き飛ぶようにBPで調整

### 制作過程
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ようやくぷちコン制作本格始動！<br>物理演算を使った【おきあがりこぼし(roly-poly toy)】ができた☺<a href="https://twitter.com/hashtag/UE5%E3%81%B7%E3%81%A1%E3%82%B3%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#UE5ぷちコン</a> <a href="https://t.co/ls2OUVufkL">pic.twitter.com/ls2OUVufkL</a></p>&mdash; fubuky35 (@fubuki35) <a href="https://twitter.com/fubuki35/status/1692005589822616012?ref_src=twsrc%5Etfw">August 17, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おきあがりこぼし紙相撲というおそらく被るであろうネタでゲームロジック実装中🥳　うーん、もうひと工夫かな🤔<a href="https://twitter.com/hashtag/UE5%E3%81%B7%E3%81%A1%E3%82%B3%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#UE5ぷちコン</a> <a href="https://t.co/zdsLbiuO5P">pic.twitter.com/zdsLbiuO5P</a></p>&mdash; fubuky35 (@fubuki35) <a href="https://twitter.com/fubuki35/status/1692071732268687821?ref_src=twsrc%5Etfw">August 17, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「らくがき おきあがりこぼし 紙相撲 」というよくわからないテーマで制作中。ひとまず仮テクスチャとトントンで土俵が揺れるギミックを実装。<br>試合のグダグダ感がまさに紙相撲だ😂<a href="https://twitter.com/hashtag/UE5%E3%81%B7%E3%81%A1%E3%82%B3%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#UE5ぷちコン</a> <a href="https://t.co/SHmZHLIqHE">pic.twitter.com/SHmZHLIqHE</a></p>&mdash; fubuky35 (@fubuki35) <a href="https://twitter.com/fubuki35/status/1692369891951874466?ref_src=twsrc%5Etfw">August 18, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">今日のUEもくもく会in富山で、「とんとんしてコントロール！　らくがき紙相撲」というテーマで、ぷちコン作品をもくもく開発しました！　ひとまず勝敗判定とぶつかった際に弾ける飛ぶ処理を実装しました。やや不自然😂<a href="https://twitter.com/hashtag/ue_toyama?src=hash&amp;ref_src=twsrc%5Etfw">#ue_toyama</a> <a href="https://twitter.com/hashtag/UE5%E3%81%B7%E3%81%A1%E3%82%B3%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#UE5ぷちコン</a> <a href="https://t.co/1r2xCNYHQq">pic.twitter.com/1r2xCNYHQq</a></p>&mdash; fubuky35 (@fubuki35) <a href="https://twitter.com/fubuki35/status/1692819199134245189?ref_src=twsrc%5Etfw">August 19, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 技術解説
- BPオンリーで制作
- コードを書いて開発することと比べてスピード感に驚いた

### 起き上がりこぼしActor
- 物理シミュレート(Simulate Phycsis)をONにして普通に起き上がりこぼしを作った
    - 球面の底部に重りを固定し、軽い上部をかぶせるだけ
    - 重さはMass(kg)で適当に設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3196409/fca244b5-75fd-7398-0b62-269030457775.png)

### コマ同士の衝突処理
- 衝突した際のコマ同士の位置の差から吹っ飛ぶ方向のベクトルを計算しImpluseを発生させるだけの簡単実装
![スクリーンショット 2023-12-16 052306.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3196409/43cc6c82-2832-5831-942e-a4f3dce8d4c0.png)
- 位置のみで重さや速度を考慮していないため不自然な動作になることも（あたりまえだけど物理知識大事:cry:）
    - 特に速度を考慮していないためか、下図のように攻撃側が不利（ぶつけに行くと吹っ飛んでしまう）というのは改善点だった。。。
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3196409/d1fdfb37-cb60-d807-7849-84107eb1f326.png)
    - 攻撃側（上図の左）
        - マウスクリックによるImpluseで吹っ飛んでいるので少し浮いている
        - このため、衝突時に発生するImpluseベクトルが上を向く⇒吹っ飛んでいく
    - 守備側（上図の右）
        - 衝突時に発生するImpluseベクトルが上を向く⇒地面にぶつかるのでそれほど吹っ飛ばない
    - 積極的に攻めると不利というのはゲーム性の問題なので、改善しようと思うも時間切れでそのまま提出。。。
    - ただこのゲーム特性のため、起き上がりこぼしの揺れを利用して下からすくい上げるようにあてる「すくい投げ」が強力な攻撃となった（完全にクソゲーの攻略法😂、以下動画の0:22くらいを参照）
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">今日のUEもくもく会in富山で、「とんとんしてコントロール！　らくがき紙相撲」というテーマで、ぷちコン作品をもくもく開発しました！　ひとまず勝敗判定とぶつかった際に弾ける飛ぶ処理を実装しました。やや不自然😂<a href="https://twitter.com/hashtag/ue_toyama?src=hash&amp;ref_src=twsrc%5Etfw">#ue_toyama</a> <a href="https://twitter.com/hashtag/UE5%E3%81%B7%E3%81%A1%E3%82%B3%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#UE5ぷちコン</a> <a href="https://t.co/1r2xCNYHQq">pic.twitter.com/1r2xCNYHQq</a></p>&mdash; fubuky35 (@fubuki35) <a href="https://twitter.com/fubuki35/status/1692819199134245189?ref_src=twsrc%5Etfw">August 19, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 結果（学び、理想と現実）
- いざ完成したゲームを息子（５才）にやってもらったが、上手く遊ぶことができなかった
    - そもそもマウスで狙った場所をすばやくクリックすることができない
        - PCをほとんど使ったことがないので当然といえば当然🥲
    - その結果、ほとんど試合が成立しなかった
    - 盤上で双方のコマがふらふらした挙げ句、一方が勝手に落下して終わるというリアル紙相撲らしい展開がほとんど
    - そもそも子供の発達段階はさまざま、また（３才）未満児と小学校中学年は違いすぎる
        - ターゲッティングができていない。。。
    - ランダムな操作でもそれなりの試合展開になるように設計すべきだった
    - 未就学児向けならタイミングよくボタンを押す、連打くらいの操作が妥当だったかも
    - 本気で幼児向けを作るならテストプレイはかなり大変
        - ベイブレードなどは子供向け玩具は偉大
        - 世の子供向け製品は研究の賜物だということがわかった
    - 自分が一番望んでいたのが「自分の子供が楽しめるコンテンツを作る」ことだと気づいた
- SEの重要性と難しさを学んだ

## 最後に
- DiscodeやXで進捗を共有したり他の参加者の交流が楽しかった
- 始めてゲームを形にできた満足感もあった
- 参加費無料でUE5を学べてかつ豪華参加賞ももらえた！
- みんなもやろうUE5ぷちコン！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">第20回UE5ぷちコンの参加賞届きました！　とても豪華☺️<a href="https://twitter.com/hashtag/UE5%E3%81%B7%E3%81%A1%E3%82%B3%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#UE5ぷちコン</a> <a href="https://t.co/g6JW5qY4Ep">pic.twitter.com/g6JW5qY4Ep</a></p>&mdash; fubuky35 (@fubuki35) <a href="https://twitter.com/fubuki35/status/1722960035691835691?ref_src=twsrc%5Etfw">November 10, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Next
- UE5ぷちコン映像編5th！

https://historia.co.jp/ue5petitcon-mv5

- 今度は自分の子供にだけ向けた作品を作る！
- 自分の心に素直に向き合う😊

以上