Unity 1週間ゲームジャム の第２回「テーマ：転がる」に参加しました。こんな作品↓
マウスでティーポットを操作してマイカップにぶつけて坂道を転がして、積んであるティーカップのタワーにぶつけて崩します。ゴルフとボーリングをくっつけたようなゲームです。
プレイはこちらから。
ティーカップボーリング | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう
開発の概要をちょっとご紹介。
参加目的
- 学生さんの参加を促すための先鋒となるため
- ゲームプログラミングとか教えているのに、ゲーム作りから遠ざかってしまったので、リハビリのため
とにかく、完成させて参加する！ということでした。
企画
専門学校の講義で紹介した、「フリーライティングによるキーワード列挙」と「ランダム選択」で一人ブレストでネタを出しました。5分で思いついたまま書きまくったキーワード（フリーライティング）から、4つのキーワードをランダムで選択して、そこに今回のテーマである「転がる」を加えた5つのキーワードを企画のスタートにしました。キーワードは以下の5つ。
- 転がる
- マグカップ
- 台風
- 鍵
- お堀
動作環境はWebGL縛りなので、画面サイズや操作系はそれを前提にしました。画面サイズは、1回目のゲームジャムの作品を見た感じで一先ず標準っぽかった960x540ピクセルにしました。が、もう少し小さくてもよかったように感じています。
企画案
以下のようなアイディアから始まりました。
- クリックすると、カーソルの位置に[台風]が生じる
- 色々なものを吹き飛ばす
- 発生させた風の方向に加速
- 台風の目に入れて上昇させる
- 熊本城の地形を舞台にする？(お堀)
自分の作品は、操作の影響が狭くてダイナミックさに欠けることが多いので、ちょっとの操作で大きく動かしたい、ということを最初に考えていたのを思い出しました。この時点では台風と、転がすと、ギリギリお堀しかテーマに入っておらず、マグカップをどう消化するかを考えてました。
第2案。強引にマグカップを加えてみる。
- [台風]で[お城]に閉じ込められた
- お城の窓から[マグカップ]を何らかの方法で転がして操作
- [お堀]に落ちた[鍵]をマグカップで回収して脱出する
要素は入ったけど、今度は操作が小さくなった。
第3案。
- [台風]の中、[お堀]を探索
- [マグカップ]に溜まった空気を吸って補給
- [鍵]を見つけて宝物をゲット
- 転がるがない・・・主人公が転がる生き物なら
マグカップがどうして出てくるのかが分からず、カリメロみたいにキャラクターが被ってたらどうだろうという案。マグカップアクションをするようなイメージ。普通のジャンプアクションになりそうで、規模的に無理がありそう。
そして第4案。
これが動き出した時の企画になりました。昔作成したハシルサルに近いもので、雰囲気がよさそう（特にカヤネズミ）に思いました。
しかし要素が多すぎる。出だしのキーワードは破棄して、マグカップを転がすところに集約させて、ほぼ今回の企画になりました。
企画を振り返ってみて
当初考えていたダイナミックな操作も、お気に入りのカヤネズミも残せず、最終的にティーカップを転がすという完成させやすそうな企画に落ち着かせてしまいました。
キーワード5つを全部盛り込もうとしたことも迷走の原因でした。キーワードのうちで一番強いやつでまとめた方がよさそうです。次回こそ、大きく動かして、シンプルな画面で、インパクトのある作品にしたい。
1週間を振り返る
日曜日の夜
- テーマ「転がる」を確認
- 企画検討で、案4まで出して寝る
月曜日
- 企画をティーカップを転がすということに集約
- Unityのプロジェクトを作成
- シーン遷移の開発
コンパクトさを重視するために、余計なものを削除した結果、ゴールはティーカップタワーにして、それをティーカップを転がして倒す今の企画になりました。この時点で台風のことはすっかり忘れました。
作業は夜のみ。シーンの共有をやったことがなかったので、ほほ～と試しているうちにこの日は終わりました。
火曜日
- 地面や背景の空を実装
- スプライン曲線で、配列の高さを補間して、Terrain に適用
最初はマップチップで作ろうとしていましたが、適したマップタイルの素材を見つけることができませんでした。アセットストアを眺めていたら Nature Starter Kit2 が目に留まって、地面は Terrain にしちゃおうということになりました。
Terrainエディターで面を作るのは厳しそうだったので、高さの配列データから滑らかな地面を生成するコードを作って、この日は終了。ちょっとお金払えばUnityストアにアセットがあったのですが、勉強ということで自作しました。
PostProcessingStackを組み込んで、この頃は画面が光ってました。
水曜日
- ティーポットのモデルを探して、転がすゲームオブジェクトを作成
- 仮のパワーゲージを作成して、カップを転がす
- ミニマップの表示
- ルールの明文化
専門学校の出講日で、午前は一年生向けの講義なので開発できず。午後の2年生の時間に、Unity1週間ゲームジャムに参加しようよと言っていたので、作業時間にしました。何かしらみなさん作り始めておりましたが、結果ははてさて。
この頃は、転がす強さをパワーゲージ上でクリックして、好きな強さで確実に転がせる操作を検討していました。英国紳士がクリケットのラケットみたいなのを振り回して、カップを転がすイメージ。
当初の目論見では、この日にはゲームを動かしておく予定だったのですが、全然でした・・・
木曜日
- シーンやフェーズの遷移によるゲームの初期化など
- カメラや操作説明を画面に表示
- 転がす操作を、パワーゲージからティーポットで弾くことに変更
- カップのタワーを作成して画面に配置
- WebGLにビルド
ようやくこの日にカップタワーが入って、カップを転がして倒すことができました。崩すのが面白いことが確認できて一安心した一方、WebGLでの動作がえらく遅くなり困ったことに。ポリゴン数を確認したところ、16M三角ポリゴンとか恐ろしい数字が出ていました。これは減らさねばと思いつつ、ツールがないのでこの日は終了。
金曜日
- ポリゴン減らし
- ティーポットの操作の実装
- 吹き出しや、ティーカップのタワーをステージデータから自動生成するように
午後に1年生向けの講義をして、放課後は居残って作業です。ポリゴンをいじるチャンスはこの日しかなかったので、3dsMaxの操作を調べながら、プロオプティマイザーとやらで減らせるのか、というレベルからなんとかローポリデータの作成をしました。最終的に、ティーポットは5万ポリゴン、ティーカップは2万ポリゴンほどに。十分多い気がしますが、これ以上減らすと形が崩れ、手元の環境では処理落ちは改善していたので、これでいくことにしました。
maxで見ると法線が今一つであれこれ試していたのですが、Unityに読み込んでみたら大して目立ちませんでした。調整しながらUnityで見ないと。
土曜日
- 最低限のゲームルールの実装
- 残りカップ数やスコアなどのインターフェース追加
- WebGLの処理速度対策
ステージ作成にはこの日も入れず。ポリゴンの削減、空のカメラの廃止、PostProcessingStackの無効化で、WebGLでの動きが滑らかにできて、時間はギリギリながら光明は見えました。あと1日・・・
日曜日
- Tiledでステージを作成して、読み込み
- 効果音の組み込み
- パーティクルの実装
- 完成
最終日にして、ようやくステージデータに取り掛かりました。が、この段階ではツールはなし。手入力はきついだろうと思い、先日知った Tiled を使うことにしました。やりたいことはシンプルだったので、データを作成して、あとはデータの読み込み。
Tiled の保存形式は XML なので、 C# の XMLDocument を使えば簡単に読み込めました。あれこれやってステージデータをゲームに組み込めるようになったのは15時すぎ。締切まであと5時間。
2面ほど作って遊びながら、目立った不具合を潰し終えたのが17時過ぎ。軽食を食べながら効果音を探してみたところ、必要そうなものが一通り揃ったので効果音を入れることに。これは SoundSource の PlayOneShot であっという間に入りました。Unity の凄み！
あとはステージを作っては遊び、作っては遊びで、19時すぎに7面までできました。30分ほど、残っている作業を優先順位に従って潰していって、残り３０分で一度アップロードして公開設定。
残り時間でパーティクルを入れて、微調整して、リビルドしている間にタイムアップ！
お疲れ様でした。・・・と思ったのですが、締め切り後も更新できるとのことでしたので、もう少し細かい調整を加えてアップし直しました。
怒涛の一週間が終わりました。
開発中に感じたこと
正直、1週間で時間が足りなくなるとは思っていませんでした。ブランクの影響は大きかったです。他の方の開発日誌を見ていると、2,3日で形にしている方が多い印象だったので、やはり時間がかかりすぎでした。
必要なものがいくつか見えたので、それを整理しておいて、初日からプロトタイプに取り掛かれるようにするのが次回までの宿題です。そして、他の方がやっているみたいに、開発の進捗をツイートしたいものです。
その他、箇条書きで。
- シーン管理の手順を決めて、必要なコードを用意する
- Tiledのマップデータを読み込めるようにする
- 簡単な3Dモデルは自作できるようにする
- 画像素材は自分で1枚に統合せず、バラバラのものをUnityにパッケージさせる
- フォントを見つけておく
- 使えそうなアセットを研究
- 手書きのイメージが全く作れなかった。日頃から落書きして、描くことに慣れておく
- 手軽にプレイ動画をGIFに変換できる環境の調査
- UnityのFrame Captureというプラグインがあったけど、うちのPCでは能力不足か、フレームレートが出ず
- フレームレートが遅くていいなら、Screenpressoが楽
- Screenpressoのキャプチャが遅いのも、うちのPCのせいかも・・・
- ツイートとランキングは最初から組み込んでおく
技術的なこと
今回、以下のようなことをやりました。
- マルチシーンを使って、ベースのシーンに、タイトルやゲームオーバー、クリアを重ねて制御
- ScriptableObjectとポリモーフィズムを使ったシーンやフェーズの管理
- 複数のカメラを使ってミニマップの表示
- 大昔、Unity3の時代に知ったチュートリアルの手法でやりました。今はカメラにRenderingTextureにレンダリングさせる方がよかったでしょうけど、細かい調整方法で時間を食いそうだったので、知っている方で対応
- 公式のチュートリアルに丁度この内容が出たようです
- Terrainの自動生成
- Terrainエディターでステージを作るのはしんどそうだったので、16個の高さデータを渡して、スプラインで補間した高さをTerrainに組み込みました
- これのおかげで、残り時間が少ない中で、複数のステージをバランス調整しながら用意できました
- 補間につかったスプラインのアルゴリズムが今回の用途には適しておらず、余分なうねりが出てしまいました。他の方法を検討したいところ
- Tiledの読み込み
- 3dsMaxでのポリゴン数の削減
利用したアセットやツール
この作品の開発でお世話になったアセットやツールのご紹介。
これは美しい！と思ったのを覚えていて、Terrainのテクスチャや草、木に利用しました。が、これ、ポストエフェクトで綺麗にしてるんですね。WebGLでもそこそこ動くとはいえ、今回はフレームレートを高くしたかったので、ポストエフェクト切ってしまいました・・・。結果的に、PS1というか、昔の3Dゲームっぽい画面に・・・
スカイボックスの空を調整しきれなかったので、2Dだし、2Dっぽい空をということで選びました。とても綺麗なのですが、良く見ると雲が切れてたり、カメラを動かすとおかしくなったり、少々癖があります。有料版もあるので、そっちならうまく動くのかな？
空専用のカメラを用意して、それを背景に重ねていい具合で動くようになったのですが、フレームレートが落ちてしまいました。ということで、静止画として背景に貼り付ける利用方法となりました。
Tothetapp. Cup 3D Model
ティーカップのモデルとして利用しました。ティーカップだけだと思っていたらティーポットもついていて、これで弾けばいいやとなって、英国紳士がラケットでカップを転がす案は消えました。
インテリアデザインなどのレンダリング用で、いわゆるハイポリ。100万ポリゴンを軽く越えていたので、3dsMaxのプロオプティマイザーでポリゴンを減らしたものを使いました。
魔王魂
音素材は、エンディング曲以外は魔王魂さんのフリー効果音素材で探しました。時間が少ない中で、一通りのものが見つけられたので大助かりでした。あちこちのゲーム制作ブログでお名前を拝見していたので、真っ先に探しに行きました。
H/MIX GALLARY
H/MIX GALLARYさんのジングル「祝福された大地」がエンディングにぴったりだったので使わせていただきました。クリアしなくても聞けますが、クリアして聴く一曲はお風呂上りのビールのように一味違う気がします。
Ishida So. 簡略化した３次スプライン曲線の生成方法
地面の高さデータから滑らかな Terrain データに補間するためのアルゴリズムはこのサイトで勉強しました。
利用したツール
- Unity5.6
- これがないと今回のゲームジャムは始まりません。これが十分動かせるPCを持っていることが前提ですが、ゲームを作るのには最高の開発ツールの一つだと思っています
- Visual Studio 2017 Community
- Unity5.6にバンドルされているバージョンです。2015は起動が遅く、MonoDevelopを使っていましたが、2017はどうだろうと思って使ってみました。補完機能が秀逸で、起動も以前のような遅さは感じません。個人利用はこっちに乗り換えようと思います
- Tiled
- フリーのマップエディターです。使いやすく、保存形式もXML形式で分かり易いです。ダウンロード時に$9必要な雰囲気ですが、その上のリンクで無料で入手できます。本当に優れたツールなので、自分は支払います
- Photoshop CS2
- ロゴ作成や、インターフェース作りに使いました。古いのを未だに使ってますが、ウィンドウの優先順位が崩れたりして、そろそろ限界な感じです・・・
- Screenpresso
- スクリーンキャプチャソフトです。動画を撮影したり、スクリーンショットの撮影に利用しました。これも無料で使えますが、制限がない方が楽なのでライセンス購入しています
- 3dsMax
- ティーセットのポリゴンを減らすのに使いました
最後に
とにかく、完成して、公開できてよかった！
リハビリの目的は強烈に達せました。頭の筋肉痛が出ております。
思った通りの注目や評価を得られず、がっかりした人もいるかも知れません。特に発表直後は疲れていて、落ち込んでしまいがちです。まず、ご飯食べ得て、良く寝て、回復させてください。コンテストではないし、仕事でやっている訳でもありませんし、自分が考えたものが完成して、発表できただけでも大成功だと思います。また、ネットでは発見されるまでに時間がかかります。半年後に突然注目されるとかもあるので、焦らず、コツコツ継続するのが吉です。
残念ながら未完成に終わったとしても、次回また挑戦したら今度は出来るかも知れません。まずは鋭気を養い、その後、ああしたい、こうした方がよかった、と気付いたことがあれば、次回はそれを実現できるように調査すればいいのだと思います。・・・と、自分にも言い聞かせてます。
さて、最初の目的であった、学生さん達は発表できたのか。水曜日のお楽しみです。
末筆ながら、素晴らしいサイトを作って、イベントを開催してくださいました naichilab. さん、ありがとうございました。
