#09 超ハッカソン VRM対応ブラウザゲームの制作
YATTA!駆動開発の第9回。超ハッカソンのためにVRM対応ブラウザゲーム 「超居合」を制作しました。
https://gyazo.com/670c87fc71d3c5f9e6bd79525ab95e59
基本情報
前回:#08 VRMお手軽ポーズ 高解像度撮影 MaterialDebugモード
次回:#10 コードブロックごとにjsを実行するUserScript
制作物URL: https://unityroom.com/games/choiai
超ハッカソン
超ハッカソンとは
わずか1週間でアプリを作成するオンラインイベントです!
出来たアプリをみんなのVRMアバターで遊ぼう!
公式サイト
https://cho-hackathon.spajam.jp/
テーマ
バーチャルスポーツ
要するにVRM対応のゲームを作って投稿しようというイベントです。
プラットフォームが結構広くて
RPGアツマール
unity room
VirtualCast
cluster
BOOTH
ふりーむ!
とブラウザゲームからソーシャルVRまでいろいろでした。
VirtualCastやclusterでは作品をワールドやアイテムとして投稿する形でした。
制作物「超居合」
居合をモチーフにした超居合というゲームを制作しました。
鬼滅の刃のアニメを見ていたら刀を使ったゲームが作りたくなったので
完全に霹靂一閃に影響されてます。
開発環境
Unity2018.4
WebGLビルド
操作方法はできるだけシンプルにしたかったのでSpaceキーのみ
プレイしてもらった友人からはクリックにも対応してほしいと言われました。
スコア
https://gyazo.com/be232d9a5b001240da7647dbfb586920
ステージをループするようにして制限時間内にクリア出来たステージ数で競う仕様にしました。
ステージ追加の単純作業を後回しにしても問題がでないので楽でした。
ランキング機能とかも実装したかったのですが今回は時間がとれなかったのでやめました。
スケジュール
4月12日(日)〜 4月18日
1日目 (日)
テーマ発表
アイデア出し
2日目 (月)
ゲーム内容の決定
必要な機能
登場人物(比喩)を決める
プリミティブ オブジェクトをならべて画面構成を考える
3 ~ 5日目 (火 ~ 木)
実装
ゲームのコアを実装
見た目は全てプリミティブ オブジェクト
https://gyazo.com/1c7cb10cb4423862e0840dd35600c8af
6 日目 (金曜日)
見た目
敵オブジェクト
背景
モーション
エフェクト
UI
フォント
https://gyazo.com/670c87fc71d3c5f9e6bd79525ab95e59https://gyazo.com/b5ac35fb9d89957b25750e7dfd500cff
6日目にしてようやく立方体から解放
7日目 (土曜日)
ステージ追加
クレジット
提出
締め切りを日曜日だと勘違いしていてあせりました。
最終日はほぼほぼ単純作業だったので助かりました。
得られた知見、はまったところ
UnityStandaloneFileBrowserでVRMを読み込む
h.omaeさんがWebGLビルドでVRMのダイアログからランタイムロードを行うスクリプトを公開してくださっていたので使ってみました。
https://twitter.com/pigeon6/status/1250248580071211008?s=20
https://gist.github.com/hiroki-o/e283e7ea3b8453491512f33a45bd56ba
UnityStandaloneFileBrowserが必要です。
https://github.com/gkngkc/UnityStandaloneFileBrowser
UnityでVRM対応ブラウザゲームを作るでやったやり方よりも楽でした。
ただしイベントはOnClickじゃなくてPointer Downにするのを忘れない。
Physics.RaycastAllは順序が保証されない
敵を切る判定はRaycastでやっていたら、お邪魔役のシールドを実装したときに問題が起こりました。
シールドの奥の敵が死ぬ
原因はPhysics.RaycastAllで帰ってくる物は衝突した順番では無いからでした。
シーンを通してレイを飛ばし、ヒットした全てを返します。順序が保証されないことに注意してください https://docs.unity3d.com/jp/460/ScriptReference/Physics.RaycastAll.html
解決法 : 発射地点からの距離でソートする
code:cs
RaycastHit[] hits;
hits = Physics.RaycastAll(transform.position, transform.forward, 100.0F);
System.Array.Sort(hits, (a, b) => a.distance.CompareTo(b.distance));
リファレンスを読む案件でした。
参考
https://pixiv.github.io/three-vrm/docs/
https://twitter.com/pigeon6/status/1250248580071211008?s=20
次回は#10 コードブロックごとにjsを実行するUserScript