『TWISTOWER』を作ったわーって話
お待たせしました。・・・え、待ってないって?
こんにちは、えれのあ(@in_7010)です。
やってきました1週間ゲームジャム!
メイキングみたいなよくわからないやつ書きます!
作るのに精一杯で作り途中の画像とか撮り忘れたので、文章ばっかりになってしまってますがご了承ください。まとめ方が下手なのか、とてもだらだらと長く書いてしまってます。
目次
今回作ったゲーム
今回作ったのは、『TWISTOWER』というゲーム。
TWISTOWER | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう
回転しながら下の板の端に沿って大きさが変わる板を、高く積み上げていくワンクリックカジュアルゲームです。
この記事投稿時点で、評価数330、プレイ数1600をいただいています。遊んでくださった皆様ありがとうございます。
Unity 1週間ゲームジャム
Unity 1週間ゲームジャム(#unity1week)とは、unityroomさんが開催するネットのゲームジャムです。
第3回となる今回のお題は・・・「積む」!
簡単なようで難しいようで、う〜ん…!
Unity 1週間ゲームジャム | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう
投稿数が、前回は154だったのが、今回はさらにそれを上回ってきました。
恐ろしや・・・
作る
企画・アイデアをまとめる
私はいつも、このアイデアをまとめるところでつまずきます。
が、今回はすんなりまとまりました。
作業に早く取り掛かることができたので、短時間の制作では重要ですね。
「積む」の意味
積む、つむ、ツム・・・
改めて聞かれたらうまく説明できない…!
てことで調べました。
- 物の上に物を重ねる。
- 乗り物に荷をのせる。
- 物事を繰り返し行う。
- ためる。貯金する。
- 金を用意する。
- 次第に高くなる。
・・・いろんな意味があるんだなぁ。
多くの方は1を使ってるんじゃないでしょうか。
それを見越して他の意味で作ってる方もいるかも?
既存の「積む」ゲーム
派生ゲームもたくさんありますよね。
落ちものゲームはだいたい「積む」に該当するのかな。
あとは崩れないように積んで高さや個数を競う系とかも多い。
色々ある中でこんな感じの作りたいなと思ったのが、『Stack』というゲーム。
シンプルながらも、ついついやっちゃうやつ。連続でぴったり決まると気持ちいい。
アイデアを膨らませる
『Stack』はPositionを動かして、はみ出た分小さくなる。
じゃあ私はRotationを動かしてやろう!
でもはみ出たとこ削る方式だと、だんだん丸に近づいてくだけで小さくならない…
そこで、下のやつの縁に沿わせて、大きさを変える方式を思い付く。
作ってみた
・・・あれ?小さくはなる。でも一生なくならないじゃん…!
渋々、一辺の長さが一定以下になったらゲームオーバーという条件をつけることにする・・・
うまく積めたらボーナス的なの欲しいから、それも実装しよう。
グラデーション使ったら綺麗だから、だんだん色変わるようにしよう。
んで高く積まれたやつ最後に見てみたいよね〜
じゃあカメラをグッて引いて全体を映すようにしよう。
うん、いい感じにできそう!!
タイトル
アイデアが固まったら、まずゲームの名前決め。
私は新しいプロジェクトを作るときにタイトル(プロジェクト名)が決まってないと、なんかモヤモヤして始められない性格ですw
このゲームは、
- 積むとねじれていく。
- 出来上がるのは縦に長い塔。
twist(ねじれ、ひねり) + tower(塔、タワー) = twistower
これを、見た目的に考えて、大文字に。→『TWISTOWER』
…単純ですねw
ですが、タイトルは造語みたいな固有名詞にしたいなって思うので、とてもしっくりきました。
もうちょっとおちゃらけた(?)雰囲気のゲームだったら、『ねじったわー』とか『ひねったわー』とかになってたかもしれませんw
基本動作の実装
続いて、ゲームの基本となるところを作っていきます。
積まれる板
回る速さは一つ一つランダムで、1秒間に3/8〜5/8回転させています。
ランダムにしたのは、一定のリズムで積まれるのを避けるため。
大きさについては色々よくわからないことしたので省きますが、三角関数とかつかってなんやかんやしました。
で、この三角関数ではまった・・・
コサインを使いたかったんだけど、実行したらめちゃくちゃ荒ぶる。
Mathf.Cosの引数は、Mathf.Deg2Radを掛けてラジアンにしないといけなかったんですね。
わからずに数時間にらめっこしてましたw
計算が間違ってるもんだと信じて疑わなかったからさぁw
まったく、ややこしいんじゃい!
今度から、はまったらまずリファレンスをよく読むようにします…(教訓
ゲームオーバー
このゲームに於いて、一番納得のいってないところ。
だって、小さくなりすぎると終わるんですよ?脈絡なさすぎる。
その中で最善だと思ったのが「厚みが1辺の長さを超えたタイミング」でした。
ちなみに初期の大きさは、厚みが1に対して1辺の長さが5です。
つまり初期の大きさの20%以下になるとダメってことですね。
突然ゲームオーバーになると本当に意味不明なので、パーティクルもつけました。
このパーティクルはCubeのメッシュを飛ばしてます。
そこそこましになったかなぁという感じ。
ボーナス
ぴったりになったときに大きくするんだけど、必ず誤差がでるのでぴったりってのは無理。
だから、ほんの少しだけ許容してます。下のと比べて大きさが98%以上は100%とみなす仕様です。
続いて、どれくらい大きくするか。
これは初期の大きさの5%で定数にしました。
定数にした理由は、小さい時ほどボーナスの恩恵が大きくなるようにできるからです。
自分で何言ってるかわかんないので、数字で例えてみる。
大きさが初期の100%のときはボーナス加算すると100%→105%で大きさは1.05倍になる。
対して、大きさが初期の20%のときは20%→25%で1.25倍になる。
っていうのは後付けした理由で、公開した後気づきました。
実際に作っている時は何も考えずにやってて、調整なしの一発で確定しちゃいましたw
もしや私は無意識に最適解を出せる可能性が微レ存…?
デザイン
操作の少ないシンプルなゲームなので、無機的な雰囲気で統一したいなって。
かつ、思わずシェアしたくなるような芸術的なデザインを目指しました。
フォント
なごみ極細ゴシックというフォントをお借りしました。
このフォントは、かな文字以外はM+ FONTSというフォントで補っているそうです。
かな文字は「遊び方」に使いましたが、メインであるタイトルやスコアはM+ FONTSということですねきっと。(よくわかっていない
ボタン
UIのボタンはicooon-monoというサイトからダウンロードしたアイコン素材を、半円と長方形を合わせたものから切り抜いた感じになるように加工しました。
加工とかあんまり慣れてないんですが、雰囲気を崩さずわかりやすいものができたかと。
背景
いつも同じ色味で飽きが来ないようにするためにも、毎回変えるようにしました。
平たく伸ばしたCubeです。
SkyBoxの設定を変えることも考えましたが、こっちの方がやりやすそうだったので。
グラデーションにするシェーダーを使い、シーン読み込み時にTopColorとBottomColorをランダムで決めてます。
そのときに使ったのがRandom.ColorHSVメソッド。
H(色相)、S(彩度)、V(値)、それぞれランダムの範囲指定ができる。
便利なのがあるんだね。見つけられて良かった。
こういう3Dゲームに於いて、やっちゃいけないと思うのが、デフォルトのSkyBoxが画面に映ってること。
オブジェクトとのミスマッチを起こすと、めちゃくちゃダサいです。
背景を変えてみるだけでグッとクオリティが上がった気になります。
デザインは今後作るゲームにも流用できそうかな〜。
サウンド
BGM
こちらをお借りしました。
雰囲気に合わせて主張の少ないものをと思ったのですが、なかなか探すのに苦労しました。
そりゃ、フリー音源は自分のゲームのために作られているわけじゃありませんからね…
その点、オリジナル音源が使われてるゲームは、完成度が高くなる。羨ましい。
誰か私に曲作ってくれませんかね・・・ 楽器もできなければ、作曲もよくわからない
SE
ボタン音は木琴。多分一番好きな楽器。
柔らかくて、暖かくて、整った音がとても良き。
ぴったり積めたときに鳴るのは、刀を打ち合う音!w(時代劇のアレ
合わせて、普通に積むときは刀を構える音。
「シャキーン」て感じの音を探してたら見つけました。
実際にゲームに入れてみたらなんとなくコレジャナイ感があったんですが、他に探す時間がありませんでしたw
でも、気持ちいいって言ってくださる方もいたので、良かったのかな。いや、う〜ん、どうだろ。
ゲームオーバー時の音はクラッカー。
弾けるパーティクルに合わせたチョイスです。
本当になんで弾けるのか謎。
ツイートの音はうぐいすの鳴き声。
これ、いい音で、テストプレイ時に無意味に何回もツイートボタン押してましたw
アニメーション
このゲームでは、初めて動くUIに挑戦してみました。
今まで、アニメーションはほとんど触っておらず、新たな試みだったのですが、かなりうまいことできたんじゃないかって思います。
どういう風に実装するのが正しいのかわからなかったので、自己流でやりました。
それにしてもアニメーションすごいです。Activeとかも切り替えられちゃう!
最早なんでもアニメーションでできちゃうのでは!(それはない
途中から作るのが楽しくなっちゃって、力を入れました。
アイコン
アイコンはそのゲームの顔。
見ただけで、どんなゲームなのかわかる、やりたくなる。
そういうことを意識して作りました。
綺麗さが全面に出せたと思います。
unityroomのトップページでは確か黄金長方形(1 : φ ≒ 1.6 くらい)で表示されるので、文字はそこに収まる位置に入れました。
というか、文字、あんまり気づかれてなさそう。
板の角度に合わせて配置して、結構凝ったんだけど、目立たなすぎだね。
その他
ツイート機能とランキングをつけました。
unityroom運営のnaichiさん(@naichilab)のサンプルをお借りしました。
殆どコードを書かずに実装できるので本当にありがたいです。
でも、動くUIに合わせてランキングも動かすためにいじったら、結構苦労しました…
あと、後でスマホ(Android × Firefox)にも対応しました。
なぜかタッチ直後の処理が連続で行われてしまったため、指を離したときに止める仕様にしました。
ランキングの文字入力ができなかったけど、そもそも入力にラグがあってランキングに入れない。
作れなかったこと
やりたかったんだけどできなかったことが3つ。
技術的に無理
ゲームオーバー画面をスクショしてツイートに添付させたかった。
WebGLだと、
— naichi (@naichilab) 2017年6月25日
・ポップアップで画像添付できないのでGyazoのようなサービスにアップロードしてURL添付する必要がある
・GyazoのようなサービスにAPI経由でアップロードする必要がある
の2点が超めんどくさいです。
スマホ版なら簡単にできるのでスマホリリース待ってますw
超めんどくさいんだって。えぇ…
そして、とても自然な流れでスマホアプリ化を勧めてくるnaichiさん。
制作初期段階から画像付きツイートを考えてて、シェアしたくなるようなデザインを目指したのに、それが自動的にはできないとはな…
ちょっと悔しいですね。
これを読んでくださってる方は、ぜひプレイ画像をスクショしてシェアしてやってください。
時間が足りなさすぎた
タイトル画面左端にあるアレ。「ショップ」機能です。
開発中、様々なモードなどを考えていました。
ただ、1週間では無理だった・・・
シンプルなゲームでやり込んでもらうにはどうしたらいいか?
ということで考えたのがゲーム内通貨を使ったショップ機能でした。
まぁ、結局時間内には実装できなかったんですけどね。
具体的にどんなモードを考えてたか書こうと思います。
・AntiClockモード
通常時計回りのところを、反時計回りにするモード。
試してみたら、気持ち悪くなりそうな感じでしたw
時計回りで慣れすぎたのかな…
・Triangleモード
四角い板が、三角の板になるモード。
これは試せていないですが、難易度は結構変わってくると思います。
もし実装するなら別ランキングかなって思ってます。
・Hardモード
これは微妙かなーと思ってますが一応。
回るスピードを上げたりする。
Triangleとは併用不可。
これも別ランキング。
・テーマ変更
板のテクスチャを変えるようなものを実装したい。
一つ作ることができれば、あとはテクスチャの種類を増やすだけで品揃え豊富。
好みのを買って使うもよし、全部アンロックして達成感に浸るもよし、みたいなね。
いろんな見た目の画像が出回って、 「自分もこのテーマでやりたい」って思わせて、それを買うためにやり込ませる。そんなビジョンを描いていました。
アップデート予定って書いてしまったので、やらねばならぬ!
早めにやらないと冷めちゃいそうだから次の日曜くらいまでには!
できなくても責めないでください…
普通に忘れてた
Standard AssetのBloomをつけてたんですが、テストプレイとか色々してるときに非アクティブにしたまま忘れてました…
Bloomはオブジェクトを光らせるやつ。
気づいたときに直してすぐアップデートしても良かったのですが、気づかなかったってことはなくても全然違和感ないってことだから、このままにしようってなりました。
でもせっかく入れたので、これもショップの要素の1つにしようかと思ってます。
ここまで読んでいただき、ありがとうございます。
長々と書いたくせに、まだ続きます!!