初心者が2週間かけてUnityで作ったアプリをGooglePlayにリリースしてみる話 第25・26(延長戦11・12)日目
「UIを作り込んでいるゲーム会社は神」
そんなことを最近は常に思っています、先端のマーシーです。
というのもUIのデザインや配置、ゲーム本編とは直接関係のない操作関係を触っている時は凄く手が止まる時間が長くなってきた様に感じるからです。
「つまらない」というと語弊がありますが（本当にそうなら既に辞めているので）、やっぱりゲーム本編を作っている時が一番楽しいのも事実です。
特に個人開発は殆ど全ての作業を自分で行うので、モチベーション問題は非常に深刻。
次回作からはゲーム本編の制作となるべく同時進行で行ったほうが、UIの開発にもモチベーションを最高潮のままに保てて良いかもしれません。
レベルデザイン（続き）
今回も細かい修正や内部動作の変更を色々しています。
まずカウントダウンの実装です。
前回の記事またはTwitterの動画を見て頂いた方にはわかると思いますが、STARTボタンを押してゲーム画面に移動するとゲームが直ぐに始まってしまいます。
ロード時間で数秒待たせているので直ぐに始まっても良いかなと考えていましたが、いざ実装してみると急に始まった感が拭えない状態です。
なのでシンプルなカウントダウンを本編の開始時、またはリスタート時に導入しました。
次にコンティニュー画面の実装。
後々に広告を入れようかと考えている広告のタイミングを表示するものとして、ゲームオーバーになった際に一度だけコンティニューを出来る画面を作成しました。
まだ入れている値も適当ですが、自分のハイスコアと比較してそれを上回りそうな時に出そうかと思っています。
そんな感じで導入したゲーム画面の動画がこちら。
カウントダウンと巨大な障害物(すり抜けるけど)、後々に広告のタイミングとして考えてるコンティニュー画面など......
— 先端のマーシー (@Masashi_Sentan) 2021年10月6日
UIがゲームにおいて果たす役割の大きさに驚いてる#Unity #madewithunity #プログラミング #ゲーム制作 pic.twitter.com/8qpf6y2Alx
中々良いですね。
ただ途中でジャンプで超える障害物を通り抜けてしまっています。
これはシンプルに大きさを間違えているのですが、ついでにジャンプの内部パラメータを変更しています。
というのもビルの障害物は40m/s以上の速度であれば飛び越えられるというものにしたいのですが、物理エンジンに判定を任せると怖い部分があります。
ユーザによってスマホが重くなってしまった時などにタイミングがずれて飛び越えられない等。
そんなことになればプレイしてる側は理不尽しか感じないだろうと思い、ジャンプパッドに差し掛かった時の速度で衝突判定を消しています。
これで後は見た目を変えるだけでOKという状態なので、次の記事の時には修正しておきます。
……そろそろ本当に1か月経ちそうで、自分の見通しの甘さを実感しますが。
Twitterのフォローもぜひよろしくお願いします！
初心者が2週間かけてUnityで作ったアプリをGooglePlayにリリースしてみる話 第22・23・24(延長戦8・9・10)日目
「2週間企画がもはや一ヶ月企画」
もしかしたら挫折したのか？と思わせるような不定期更新になってすみません。
先端のマーシーです。
思ったよりも細かい作業や調整が相次ぎ、動作確認や軽量化に時間を注いでいたらこんなに更新が止まっていました。
ただどれだけ時間がかかってもリリースまでは必ずやり切りますので、そこだけは安心していただければと思います。
1. 前回からの変更点
期間が開いてしまったので前回の記事で書いた、今後やらなければいけないことを再掲します。
- タイトルシーンの完成
- 音量や操作方法をユーザが切り替えれる設定の作成
- ジャンプアクションの障害物生成を既存のシステムに追加
- UIの配置/配色/サイズなど、デザイン面の調節
- スコアシステムと結果を反映する画面
- 広告の実装
この中で今回までに完成させたのは、
- タイトルシーンの遷移と背景の完成
- ジャンプアクションの障害物生成をシステムに追加
- UIの配置/配色/サイズなど、デザイン面の調節
の三点になります。
順番に触れていきましょう。
2. タイトルシーンの遷移/背景の完成
タイトルシーンについてですが以前まではこんな状態でした。
あまりにも殺風景かつ味気の無い画面ですね。
アプリをダウンロードして初めに見るのがこの画面であれば、即アンインストールされること間違いなしの代物です。
そこで「出来るだけ格好良く、かつタイトル詐欺にならないような画面」を考える必要があります。
もちろん私にユーザが興味を持ってくれるようなイラストを描く技術もないので、Unity上で作ってしまうのが一番無難です。
そこで今まで作った建物や道路のスクリプトを使い回し、カメラの視点を操作性を度外視した臨場感のみアングルにしてみました。
それがこちら。
タイトル画面は概ねイメージ通りに出来たから、あとは設定画面等の追加で完成に近づくかな？
— 先端のマーシー (@Masashi_Sentan) 2021年10月4日
とはいえタイトルのロゴがどれだけ理想通りに仕上がるか完成度が大きく変わりそう......#Unity #madewithunity #プログラミング #ゲーム開発 pic.twitter.com/QuwPQNzeEF
タイトルロゴや「TAP TO START」などの文字は追加する必要がありますが、中々ゲームイメージ通りのものにはなったのではないでしょうか。
建物が動きキャラクターがアニメーションしているだけの画面ですが、かなり疾走感を与えてくれる画面になったと思います。
一度タッチすると画面がPanelでぼかされ、ボタンが強調される様になってます。
また気付いた方もいると思いますが、今回からタイトル/ゲームシーン両方で空がめちゃくちゃ綺麗になってます。
skyboxのテクスチャを変えたのですが、使用したアセットは無料かつハイクオリティのこちら。
おかげさまで画面が超リッチになりました。
本当にありがたい限りです。
また動画でも確認できますが、シーンが切り替わった時に新しいシーンが暗くなってしまう状態も修正しました。
3. ジャンプアクションで使用する障害物の追加 / UIの構成をブラッシュアップ
前回まで障害物と同じ形で一定間隔ごとにジャンプパッドを追加していました。
そこから更に後ろに障害物を生成し、ジャンプパッドを踏んだ時のスピードによっては飛び越えられないという形までを作成しています(動画では500m毎)。
UI関連の稼動実験
— 先端のマーシー (@Masashi_Sentan) 2021年10月4日
ゲームシステム自体は問題なく動きそうなので、ジャンプパッドの修正だけでとりあえずはこちらも完成しそう#Unity #madewithunity #ゲーム制作 pic.twitter.com/QXtHUMLktu
ただしその障害物に当たった場合はゲームオーバーになることを想定しているので、まだ未完成の状態になります。
またスピードアップした時や着地した時、ジャンプ台との距離を表すメーターについても細かい調整を行いました。
4. これからの予定
今回の進捗や調整を踏まえて、新たにやらなければならないことをまとめてみました。
- タイトルロゴ等、必要なデザインの作成
- 設定画面の作成とシステムの連携
- ゲームオーバー処理の完成
- スコアリザルトの作成とランキングの実装
- 広告の実装
項目の数としては減っていないと思ってしまいますが、ゲーム本体への修正は殆どなくなってきましたね。
特にデザイン面でどれくらい時間がかかるのかわかりませんが、引き続き頑張っていくので応援よろしくお願いします。
Twitterのフォローもぜひよろしくお願いします！
初心者が2週間かけてUnityで作ったアプリをGooglePlayにリリースしてみる話 第20・21(延長戦6・7)日目
「延長戦の方が長くなった場合はもはや企画倒れでは？？」
そんな不安に駆られだし、急いで完成へとたどり着かなければいけない先端のマーシーです。
しかし今回もまたレベルデザインとUIの作業。
目に見えての進捗がここ数日で少ないのは焦ってしまいますね。
1. UIとリアルタイムステータスの反映
今回は主にゲームシーンでのUIを紐づける作業になります。
ゲームの進行に関係する内部ステータスは以下の二つ。
- 全体で共有している移動速度
- 道を進んだ距離
これらに加えて、ジャンプパッドまでの距離の差をゲージに表示しようと考えました。
上記三つはゲームの進行中、リアルタイムに変化するものです。
それらをユーザに可視化することでより一層ゲーム性を高めていきます。
暫定ですが、画面に配置して動作させたのがこちら。
UIの配置であったり配色、フォント、サイズ、etc...
— 先端のマーシー (@Masashi_Sentan) 2021年9月30日
画面構成を気持ちよくなるようにするのが一番悩ましくて正解がない作業かもしれない#Unity #madewithunity #ゲーム開発 pic.twitter.com/fzYQX6Cknv
ゲージの更新タイミングや配色についてはまだ調整していく予定ですが、右上が総移動距離で左下が現在の速度です。
総移動距離はそのままスコアとしても使用できそうなので、適宜条件を追加していこうと思います。
また気付きにくいですが、ジャンプパッドから少しの間だけ通常のギミックが出ないようにしました。
これは後に大きな障害物を配置すると以前に話していましたが、それと干渉して予想外の動作をしない様にしたものです。
2. これからの予定
今後手を加えていく箇所もかなり少なくなってきたので、自分のタスクリストも兼ねて「必要な要件」をまとめました。
- タイトルシーンの完成
- 音量や操作方法をユーザが切り替えれる設定の作成
- ジャンプアクションの障害物生成を既存のシステムに追加
- UIの配置/配色/サイズなど、デザイン面の調節
- スコアシステムと結果を反映する画面
- 広告の実装
...…本当にあと数日で終わるのだろうか。
最近になって改めてゲーム制作と期限を守ることがいかに難しいかがわかってきました。
ゲーム会社の人達はこの何倍もの規模と人数で制作するのだから本当にすごいですね。
とはいえやらなければいつまでも終わらないので、ペースを上げて制作していきましょう。
進捗なども上げていますので、Twitterのフォローもぜひよろしくお願いします！
初心者が2週間かけてUnityで作ったアプリをGooglePlayにリリースしてみる話 第18・19(延長戦4・5)日目
「どうすれば実現できるのかを考えている時が一番進み、やらなければいけない単純な作業の時は一番進まない」
そんな教訓を自分の作業時間から学びました、先端のマーシーです。
というのも主にスクリプトを書いている時はとても楽しくて悩んでいても手が進むのですが、素材が揃っているUIであったりを配置する作業は一向に始められませんでしたね。
しかし中身より見た目とまで言われるアプリにおいてUIは最重要課題。
なんとか作業効率を上げていきたいです。
1. タイトル画面のシーン作成
基本的には多くのシーンを作成するつもりはなかったのですが、タイトルや設定画面などゲーム中とは直接関係ない機能については分けた方が良いと考えました。
そこでゲームとは別にアプリ起動時に立ち上がるシーンを作成し、その中に必要なものをまとめていきたいと思います。
現時点で必要と考えている機能については、
- ゲームシーンへの移動ボタン
- アイテム(もしくは体力)の表示、追加UI
- 音声や操作方法など各種設定画面
としています。
また他にもチュートリアルやアイテムショップなど拡張させる機能も考えていますが、それは最悪リリース後でも良いと思ったので後回しに。
また現時点ではSEなども入れていないので設定画面は後日作成します。
今はまだ背景も無く、味気のない画面にはなっていますが必要最低限を追加したものがこちら。
いくら何でも寂し過ぎないだろうか。
という問題は置いておくとして、最低限のUIと機能を備えたものを作成しました。
とはいってもハートやダイヤといったものはまだ何のパラメータとも紐づけていないので適当ですが、この辺りはしっかりと個数から決めたいところです。
2. 各種UIとシーン遷移の紐づけ
1で記述したタイトルシーンからゲームシーンへの遷移、またはその逆も出来るようにスクリプトを変更します。
ただし大前提がスマホゲーム。
特にタイトルから重いゲーム画面に遷移する時にはロード時間を気にかける必要があります。
そこで今回初めて使用したのがコルーチン、非同期処理です。
LoadSceneAsync //シーン遷移もAsyncを使用
この機能を使用することでロード部分に差が出ないようにしようと思います。
スクリプトの参考にしたのはこちらのサイトの皆様(Special Thanks!)
またゲーム画面でも一時停止機能と、その際に開くポップアップメニューを作成しました。
ゲーム画面の色どりの多さに少し安心しますね。
ということはさておき、これらを開いた時にTime.timeScale（時間の進む倍率）を0にして停止しなければなりません。
またシーンを切り替えてもTime.timeScaleはそのままになってしまうっぽい（コルーチンがいつまで経っても進まなかったため）ので、しっかりとシーンごとに戻すことも忘れないでおきましょう。
これらを一通りつなぎ合わせて動作確認してみました。
シーン遷移とかリスタート云々に関しては見る限り全部の動作が正常やけど、途中でゲーム画面行ったら夕方になってて草#Unity #madewithunity #プログラミング pic.twitter.com/i7xl7klddJ
— 先端のマーシー (@Masashi_Sentan) 2021年9月28日
何故かライティングで途中おかしくなってますが、有名な症状みたいで直ぐに改善は出来るかなと思います。
おそらくもうそろそろ仕上げの目途も立ってくるくらいでしょうか。
進捗なども上げていますのでTwitterのフォローもよろしくお願いします！
初心者が2週間かけてUnityで作ったアプリをGooglePlayにリリースしてみる話 第16・17(延長戦2・3)日目
「今週の末には審査に出せると思うのは希望的観測……？」
昨日まで記事を書ける余裕がなかったのでサボっていました、先端のマーシーです。
なので2日分の進捗をまとめて書いていきたいと思います。
1. 移動速度とジャンプの紐づけ
前回までの進捗としてMixamoから持ってきたアニメーションを各状態に合わせて遷移するようにしていました。
それらのモーションを単純に再生するだけでも良いのですが、走る/ジャンプのアニメーションだけは少し変更を加えようと思います。
理由として
- 常に同じ速度で腕を振っていると速度が上昇しても分かり辛い
- 飛距離が伸びると途中でジャンプモーションが終わる
という事態が起こってしまったからです。
そこで全体で共有しているスピードに応じて各アニメーションのパラメータをそれぞれ分けてみました。
変更点としては、共有スピードに応じて
- 走るモーションの再生速度を上下
- 跳ぶ高さを上下
- 跳ぶ高さに応じたモーションの再生速度を上下
をテストプレイ状態では三段階の変更にしています。
2. 移動方法のAndroid適用
前回までのキャラクターの移動に関しては、開発環境がPCだったのでわかりやすく矢印キーをTime.deltaTimeを使用して秒速移動を適用していました。
ただずっとそのままでは駄目なので、スマートフォンにより適切な操作システムの導入が割と急務になってきました。
というのも、後で記述するのですが今回からUIを作り始める段階に差し掛かりました。
ただ制作過程で思うのが操作方法が確立していないと画面配置やCanvasでの描画順(UnityではUIの順番などを管理しているのがCanvas)をめちゃくちゃ決めづらいということです。
なので随分前に書いていた実装する操作方法のうちの一つ、ジョイスティック操作が出来るようにしました。
ただ一から使いやすいジョイスティックシステムを自作しようとすれば何日かかるかわからないので、例のごとくAsset Storeから取ってきました。
「これが無料！？」と驚くこと間違いなしのお手軽かつ求めている機能を直ぐに提供してくれる神アセットです。
このJoystickPackからFloating Joystick（画面のどこでも触った場所を基準にジョイスティックが現れるタイプ）を導入し、横のパラメータであるHorizontalをキャラクターの動きに適用させてみました。
マウスでは分かりづらさもあるけど、やっぱりタッチパネル想定だとジョイスティックの方がやり易くて良いかもしれない#Unity #madewithunity #ゲーム開発 pic.twitter.com/0qa6cegug7
— 先端のマーシー (@Masashi_Sentan) 2021年9月27日
これでキーボード操作を全く必要としない状態のゲーム画面が完成しましたね。
3. UIへの着手
こちらはまだ作成している成果物が見せられるレベルにないので明日以降で楽しんで頂けたらという形になります。
ただ例のごとく私にはデザインの知識や能力もないので、色々なソフトウェアを使用したところでダサくなってしまうのは明白。
なのでより完成度を高めるために、UIのパーツもAsset Storeから引っ張ってこようと考えています。
購入したアセットはこちら。
少し値段が張りましたが、貯金を切り崩しても買う価値はあったと思います。
というのもUIや画面構成がダサいと、どうしても素人が作った感がアプリ全体に滲み出てしまうからです。
これを回避するためにはやむなし.....
とはいえ完成するまでの素材代に10000くらいは飛んでいくのも、まぁまぁ胃が痛い話になってきました。
なんとか完成させねば......!
Twitterのフォローも是非よろしくお願いします！
初心者が2週間かけてUnityで作ったアプリをGooglePlayにリリースしてみる話 第15(延長戦1)日目
「延長戦が続くとタイトル変えないといけないのでは？？」
期限を一度伸ばしてしまうと直ぐに怠けそうになるのを何とか踏み止まっている、先端のマーシーです。
1. ジャンプパッドの追加とアニメーションの変更
前回までの記事で何度か触れましたが、ゲームの進行中に一定間隔で落とし穴を追加する予定でした。
ただ落とし穴を検討した時にモデルの用意と床の挙動と相性が悪いことがわかりました。
そして色々なことを考慮すると、地面にそのまま巨大な障害物とジャンプ台をセットで置いてしまえば良いのでは？と考えました。
その第一段階として一定間隔でギミックの代わりにジャンプ台を生成するスクリプトを書きました。
それがこちら。
ジャンプパッドの実装とアニメーションを調整するなど#Unity #madewithunity #プログラミング #ゲーム開発 pic.twitter.com/KPdSHnGwzA
— 先端のマーシー (@Masashi_Sentan) 2021年9月23日
現状では飛距離が一定ですが、スピードに合わせて高さを変えようと考えています。
これにより「スピードが足りないままジャンプ台に乗る」→「障害物に衝突してゲームオーバー処理」という形で落とし穴と同じ挙動になるよう近付けていきたいと思います。
2. ゲームオーバー時の挙動を追加
さて、現状で考えているゲームオーバーの条件ですが
- スピードが0になる
- 巨大な障害物に衝突する(落とし穴の代用)
の2つを考えています。
こうした条件を迎えた時に即時、リザルト画面など別のシーンに移動してしまうとぶつ切りされた感覚になってしまいユーザ体験が低下すると考えました。
そこでゲームオーバー条件時には倒れるアニメーションを追加し、ゲーム内時間を停止した状態を実装しました。
アイテム等の実装でコンティニュー操作や広告の表示などを今後やり易くしておくためでもありますね。
暫定的な実装段階の画面はこちら。
スピードが0になると倒れるアニメーションまでは簡単でも、全部のスピード停止と組み合わせるのが重労働
— 先端のマーシー (@Masashi_Sentan) 2021年9月22日
オブジェクト指向じゃなければもっと時間かかりそう#Unity #madewithunity #ゲーム開発 #プログラミング pic.twitter.com/f27sHYuXEv
アニメーションの遷移も問題なく出来ていますね。
アニメーションコントローラでの各アニメーションでの遷移(transition)方法で、Has Exit Timeを全てoffにしています。
ゲームなど、動作の途中でも直ぐに変更した場合はオススメの方法です。逆にアニメーションが終わる毎に変化させたい場合はonにしておいた方が良いかもしれません。
今後の予定ですがゲームオーバー処理の作り込みも必要なのですが、そろそろタイトル画面やUIなども作っていきたいところですね。
進捗動画なども挙げていきますので、Twitterのフォロー等もよろしくお願いします！
初心者が2週間かけてUnityで作ったアプリをGooglePlayにリリースしてみる話 第14日目
「間に合いませんでした！！！」
どうも2週間企画のくせに間に合いませんでした、先端のマーシーです。
せっかくなのでもちろん完成まで続けますが、とりあえず一区切りの結果報告と今後の予定について書いていきます。
1. 2週間経過後の結果発表
はじめてリリースするアプリということで尻に火をつけるため、2週間という期間を設けてゲーム制作に取り組んできました。
結果は......？
Mixamoとかいう神サービスのお陰でめちゃくちゃ躍動感のある棒人間になった最高#Unity #unity3d #プログラミング #ゲーム開発 pic.twitter.com/UlQieHXB04
— 先端のマーシー (@Masashi_Sentan) 2021年9月21日
ゲーム本編のみ、8割ほど完成といった形になりました。
未実装の機能としては
- タイトル/リザルト/設定画面の実装
- ゲーム画面のUI
- ゲームオーバー処理
- 広告の実装
となります。
企画としては、2週間ではゲームとして不十分な形になってしまいました.....
2. アニメーションの実装
1でも貼った動画を見て頂いた方はわかるかと思いますが、今までポーズのみのプレイヤーが左右に動くだけのものがしっかりと走る様になっているかと思います。
アニメーションはAdobeの提供しているサービス「Mixamo」から取得しました。
creativecloud等も必要なく、Adobeのアカウントさえ持っていれば無料で商用利用可能なモデルやアニメーションも使えるので気になった方は是非使ってみてください。
導入方法についてはSyntyStudioさんの動画を参考にしました。
3. 今後の予定
完成までは延長戦として投稿自体は続けます。
GooglePlayに審査を出した地点で一区切りにするつもりなので興味があれば最後まで追いかけて見てください。
Twitterのフォロー等もよろしくお願いします！
