tanaka's Programming Memo

プログラミングについてのメモ。

Unity1週間ゲームジャム「夏」に参加しました！(ちょっと追記)

Unityメモ unity1week

3回目の参加でした。登録した作品はこちら↓

蝉ファイナル

是非、遊んで、星などいただければ幸いです^^

目次

今回の目的

今回は以下を目的に参加しました。

  • PostProcessing Stack Ver2 を試す
  • Unity2017.1 を使う
  • Blender3D でモデリング

1週間を振り返る

週の前半

この週は月曜が試験。木、金曜が、高校生向けの専門学校の体験授業があり、金曜日の夜からの参加となりました。

当初は、時間がないので専門学校の体験授業向けに作ったゲームのモデルを差し替えるだけにしようと考えていました。お題は「夏」。海に囲まれた孤島で、スイカを拾って射出するプレイヤーを操作して、ガリガリ君的な青い棒状の弾を撃ってくる敵と、島から落とし合いをする、というものでした。モデリングにはMagicaVoxelか、LeoCADを使ってみようかなと考えていました。

voxel.codeplex.com

www.leocad.org

しかしプレイヤーのイメージが固まらない、MagicaVoxelでモデリングしたとしてアニメーションをどうするのか、ビーチやスイカネタはすでにTLに溢れている、と、完成像が完全にはまとまりませんでした。

木曜日

専門学校に行くために駅に向かっていると、セミの声が聞こえてきました。アブラゼミやミンミンゼミも鳴き始めたな、と考えた時に、夏といえば「セミ爆弾」！というのが降ってきました。うちのマンションの階段でいつも晩夏の頃にやられる奴です。

そこからパッと浮かんだのが、階段を下りていると、時々セミが飛んでくるので、クリックして手で払いのける、というワンキーゲームでした。これまでのUnity1週間ゲームジャムの作品を見ていて、ノイジーな画面いいなと思っていました。今回はダークな雰囲気にして、それを試してみよう、ということで、完成像が一気にまとまりました。

金曜日

体験授業を終えて、21時ぐらいから作業を開始です。

プロジェクトの作成とアセットの追加

Unity2017.1で新規プロジェクトを作成して、必要そうなアセットをボンボン追加していきました。

階段や松明はいいやつが見つかりましたが、セミと手のモデルが見つかりません。昆虫といえば、クモ、サソリ、蝶、アリ、ハチなどなど。敵としては攻撃力がなく、蝶のように見栄えがする訳でもないセミは、あまり需要がないのか・・・。去年、撮影していた写真はあるので、最悪、円柱に写真を貼り付けて誤魔化すことにしました。セミを払いのけるための手はVR関連であるだろうと思ったのですが、無料のものは見つかりません。これも少し先のことなので、後回しにしました。

フォント、効果音、曲も見つけて追加しました。

画面作り

Dungeon Creator Kit LITEアセット(Aquarius Max)に含まれていた階段のプレハブを画面に配置しました。そこに、高さ1.5mのCubeをプレイヤーに見立てて配置。階段の大きさは調整不要でした。また、プレイヤーのCubeの適当な場所にカメラを設定しました。

次に、Unity Particle Pack(Unity Technologies)にあったTorchを配置しました。Torchはかなり大きかったので、適度なサイズに縮小。複数のTorchを配置すると、3秒ごとに画面が一瞬暗くなります。パーティクルのライフタイムと発生タイミングに一瞬の隙間があるようで、ライフタイムを少し伸ばしました。また、Torchごとに、少しサイクルを変更して、光り方が変化するようにしました。

環境光は不要なので、Light設定からSkyBoxを削除して、環境光は真っ黒に設定。あとはPost Processing Stackをいじって、想像していた感じに設定していきました。

画面のイメージを合わせるために、点数を配置して、フォントを設定してみました。

シーンの実装

ゲームロジックを実装する前に、フレームワークを組み込みました。フレームワークにアセットを追加してプロジェクトを始めればよかったのですが、Post Processing Stackを使うぞ！と先走ってしまって手順を間違えましたが、この段階なら影響なし。シーンのフェード切り替えや音の管理、naichiさんのハイスコアランキングなどが組み込まれました。

歩きの実装

ゲームロジックの実装開始です。プレイヤーとなるCubeにRigidbodyを仕込んで、前進するスクリプトを組み込みました。

次は、階段がずっと続くようにします。階段が途切れて見えないように、階段のアセットを4つ並べた上で、遠くはFogで隠れるようにしました。階段1ブロックを通り過ぎたら、そのブロックを最先端に移動するようにしました。これで無限に階段を下りることができるようになりました。

音の実装

音の管理ルーチンが組み込まれたので、H/MIX GALLERYさんで見つけたBGMをタイトルとゲーム中に組み込みました。

また、床に落下した時に足音を鳴らすようにしました。足音は効果音ラボさんからダウンロードした足音から4つほど切り出して、それをランダムで鳴らすようにしました。足から聞こえて欲しいので、Playerの足元にEmptyなゲームオブジェクトを追加して、そこにAudioSourceと4つの足音のAudioClipを持たせて、ランダムに鳴らすようにしました。

WebGLへのビルド

丑三つ時を過ぎたので、動作確認も兼ねて動画をキャプチャしようとWebGLをクラウドビルドしたところ、実行時にエラーが発生！デバッグログを仕込んで実行しようにも、この時はこんな感じ。

Windowsの実行ファイルで試したところ、やはりエラー。インスタンスを取得する前に、デバッグ用の平行光を消そうとしてNull例外が発生していたのがログから分かりました。これを解決してWindowsの実行ファイルが動くようになり、スクリーンキャプチャをとって初日を終えました。

WebGLはまだ動かず。問題は持ち越しとなりました。

土曜日

WebGLのビルドがIL2CPPで失敗する原因調査

WebGLで動かなければ話にならないので、原因追求から開始です。WebブラウザーのConsoleに表示されるログを確認して、Audio関連のエラーっぽいことは分かりました。しかし・・・

最小ビルドでも失敗。プロジェクトではなく、システムの問題ということは分かりました。

しかし、βでもうまくいかず。Webで情報を調べていくと、nodeを更新したら直った、という記事がありました。

一般的に発生するエラーなら、もっと記事が見つかりそうなものなのでうちのPCの設定に原因がありそうです。しかし、根本原因を探している時間はありません。試しに、ビルドが成功するUnity5.6にバンドルされているnode.exeを、Unity2017.1のものと置き換えたところ、ビルドに成功しました！今回のゲームジャムでの最大の収穫はこれかも知れません。

ここで昼ご飯など。買い出しやセミの撮影やらを終わらせてから、デバッグログをあちこち仕込んで、ついに原因発見！

Post Processing Stackをあれこれ設定したし、もしかしたらWebでは動かないかも、と心配していましたが、問題なく動きました。

セミの作成

環境的な山は越えましたが、最大の山はセミのモデル作りでした。当初予定していたMagicaVoxelやLeoCADだと、フォトリアルな背景に合いそうにありません。それらしい形状を作って、写真を貼り付けるしかなさそうです。しかし、使えるモデルソフトはチュートリアルを見ながらテントウムシを作ったことがある程度のBlender3Dのみ。そして、インストールすらまだしていなかったという。厳しい・・・。

こんなつぶやきも出ます。テントウムシのチュートリアルを見ながら、立方体を分割したり、押し出しながら、なんとなく形を整えました。やったことは大体以下のような感じ。

  • テンキーがないので、こちら( Blender（3DCG作成ソフト）の3D Viewの設定と操作 - モーリーのメモ )を見て、テンキーの操作を数字キーに割り当て
  • 真正面から撮影したセミの写真を背景に設定
    • 下絵は、平行投影([5]キー)の正面図([1]キーなど)の設定でのみ表示
  • 立方体を作成
  • ループカット([Ctrl]+[R]キー)で、それらしい角の数になるように立方体を分割
  • 頂点を移動([G]キー)して、形を整える
  • 胸の形状ができたら、各面を[E]キーで押し出して、頭や胴体を作る
  • 近くの点は、[Alt]+[M]キーで結合
  • ループカットができない部分は、ナイフでカット
    • ナイフでカットできない場合、頂点が分かれている可能性があるので、切りたい辺の頂点をマージしてみる
  • マテリアルを作成
  • テクスチャを作成
  • UVを展開して、テクスチャを書き出す
  • 写真から、UVの各パートを着色

なんとかセミらしきものが出来上がったのは、土曜の丑三つ時。

まともな資料がなかったので、厚さは適当。セミというか、目がクリクリした謎のクリーチャーになりました^^; 胸の厚みが足りないのが敗因と思われます。もう最終日です。

日曜日

時間がないので黙々と作業。をしつつ、F1とかF2とかGP3とか見たりして。

セミの実装

最終日は、セミの出現ルーチンから。Boundsで範囲を設定して、Gizmos.DrawWireCubeでギズモを描画。それを見ながら、1ブロックにつき3箇所の出現ポイントを作って、それぞれの出現ポイントにつき、1～5匹のセミを出現。

セミは死亡してるやつ、フェイントをするやつ、襲ってくるやつの3タイプ。パラメーターの設定には、勉強したばかりのScriptableObjectのアセットが役立ちました。アセットとして保存しているので、プレハブの値を[Inspector]で迂闊に修正して設定をおじゃんにするなどがないので安心して作業ができました。

死亡セミとフェイントセミはすぐにできました。あとは襲ってくるやつです。最初は旋回しながら前方に飛ぶようなややこしい動きを考えていましたが、もっとシンプルでよいのではと思い、こちらを振り向かせつつ、単純にプレイヤーの頭部目掛けて加速してくるだけにしてみました。明後日の方を向いていたやつが、突然こっちに飛んでくるという予測不能性が、セミ爆弾っぽくて成功でした。手間も大幅に省けましたし。

羽ばたきのアニメーションですが、アニメーションを勉強している時間はありません。とにかくそれらしく見えればいいんだ、ということで、Unity上で、羽を閉じた状態と、開いた状態の羽をセミにくっつけて、交互に表示を切り替えることにしました。Post Processing Stackに設定したブラーによる残像のおかげで、それらしくなりました。

最後に飛び立つ時にセミの鳴き声を再生して、セミ完成！足がないけど・・・

回避

夕方頃から、最後の要素であるセミを払いのける動作に取り掛かりました。手のモデルとして利用できそうなアセットをダウンロードしてみましたが、手をどのように動かすかが難しい。もう時間もないし、棒で叩き落せばいいか、と思って円柱を出して調整してみましたが、最後の力を振り絞って飛んでくるセミを叩き落とすというのはどうなんだろうと思えてきました。

もっとソフトに払いのけるとか、手で顔を覆うとか、避けるだけとか。そうだ！しゃがんで避けるだけならモデルが必要ないし、動かすのも楽！ということで、セミに優しく、開発工数的にも優しい完成形が見えました。

プレイヤーとぶつかった時に、しゃがみ状態だったら得点を入れて、そうじゃなければゲームオーバーに移行。これでゲームシステムが完成しました。この時点で、20時は軽く過ぎて、22時ぐらいだったのではないかと思います。

仕上げ

ゲームバランスの調整、画面の調整など。

ビルドすると、エディターとは明るさなどが変わってしまうので、最終調整はビルド後のもので確認する必要がありました。調整が終わり、あとはWebGLにビルドして登録して終わり！と思ったところで、こんな症状が発生。

WebGLだとセミが少ないことに気付いて、調べると階段を通り抜けて下に落っこちていることが判明。フレームレートが低いからか、当たり判定が大雑把になるらしく、階段モデルの板ポリゴンでは通り抜けてしまっていた模様。仕方ないので、階段のサイズのCubeを作って配置したことで直りました！

ビルドをしつつ、動画やスクリーンショット、文面を作って、公開完了したのは朝の4時半すぎでした。

フリーズバグ修正

当たり判定方法をCubeに変えたことで、足が引っかかってゲームが進まなくなる致命的なバグが入っていました。夜も明けてきていたし、セミが床抜けしないことだけ確認して安心してしまっていました。

コライダーの形状をBoxからCapsuleにして解決して、すでに更新済みです。ご報告いただいた【なかなか】様、ありがとうございました。

まとめ

いつも、完成形が見えそうで見えないぐらいの進捗の時が精神的に厳しいですが、今回はより厳しかったです。TLで面白そうだったりセンスのよい画面が流れてくると、中途半端なものを完成させる労力に意味はあるのか、という疑問が湧いてきます。他にやることがあったら、今回は諦めていたかも。しかし、他にやることは無くはなかったものの、それはそれで手を付けるのが面倒くさい。ということで、ジリジリと作業を進めていたら、トンネルを抜けて完成形が見えるところまで進められました。

出来上がってみれば、得るものはちゃんとありました。Unity2017.1のWebGLビルドの環境ができましたし、Blender3Dでなんとなくモデリングができましたし、Post Processing Stackをスクリプトから制御する方法も分かりました。当たり判定で苦労したことも今後に活かせそうです。

前回の記事に書いた今回のテーマは以下の通りでした。

  • ピンポイントでコンパクトに勝負
    • → Post Processing Stackで雰囲気のある画面を作って、あとはルールや動作をシンプルにした
  • 画像アイコンを工夫する
    • → 最初の公開時に動画GIFを作れた
  • ScriptableObjectの理解を深める
    • → 完了済みで、今回、少し使えた
  • 操作するものでステージを変化させる
    • → これは今回できず

ステージを変化させるという以外は、ほぼできていました。

次回に向けて

今考えている、次回のテーマです。

  • 2Dものにする
  • ステージを変化させる
  • MagicaVoxelかLeoCADで作った画像をアニメーションさせる方法と、ドット絵にする方法を調査
  • ピンポイントでコンパクト勝負は継続
  • プレイヤーが遊びたいと感じるものにする

そろそろ、Phaserの教科書作りを本格化したいので、そのためのサンプルにできるものを検討したいです。そのためには、グラフィックが重要。MagicaVoxelやLeoCADを調べたいところです。

企画についてちょっと追記(8/2)

開発面での成果はありましたが、企画は失敗でした。プレイヤーが遊びたい、体験したい、というものにしなければならないのに、インパクトに引っ張られて、日常であまり体験したいとは思えない状況を作ってしまいました。作り手の典型的な自己満足系の企画になってしまいました。

次回は気を配りたいところです。

今回お世話になったアセットやプログラムなど

今回も、様々なアセットやツールのお世話になりました。ありがとうございました！

カメラの制御に使いました。使い方を一度覚えればとても便利なアセットです。

階段のモデルに使いました。これでダンジョン作れそうです。

Unity公式のパーティクルのセットで、Torchを松明として利用しました。爆発とか燃やしたいとか血を噴き出させたいとかの場合に重宝します。