
マイケル
みなさんこんには!
マイケルです!!
マイケルです!!

エレキベア
こんにちクマ〜〜〜

マイケル
本日2/14は何の日か分かりますでしょうか?
そう バレンタインデー ですね!!!
そう バレンタインデー ですね!!!

エレキベア
(言っちゃったクマ・・・)

マイケル
というわけでイベントに合わせてバレンタイン用のゲームを開発してみました!
それがこちら!!
それがこちら!!

マイケル
「怪盗チョコレート」
です!!!!

エレキベア
(なんだそれクマ・・・)

マイケル
このゲームはマジでUnity1Weekレベルの短期間で詰めて作ったんだけど、
友人の協力もありなんとかバレンタインに間に合わせることができました!!
その辺りの短期間で開発するために行った工夫等についても触れながら振り返っていきます!!
友人の協力もありなんとかバレンタインに間に合わせることができました!!
その辺りの短期間で開発するために行った工夫等についても触れながら振り返っていきます!!

エレキベア
うぇ〜〜1、2週間でリリースまでやるのを考えると吐き気するクマね・・・

マイケル
睡眠削って普通に体調崩して熱出たからね・・・
そんな気合い入れて作ったエピソード含めて楽しんでいただければと思います!!
そんな気合い入れて作ったエピソード含めて楽しんでいただければと思います!!

エレキベア
(このゲームにそんな価値が・・・?)

マイケル
なお、今回もスクリプト部分はどんと全て公開していますので、
こちらも興味ある方はぜひご参考ください!
こちらも興味ある方はぜひご参考ください!
GitHub – masarito617/unity-chocolate-thief-scripts
[使用したバージョン]
Unity | 2021.3.1f1 (URP) |

エレキベア
何という男気クマ・・・
開発するに至った経緯
ふと思いつく

マイケル
きっかけは終電を逃して渋々歩いて帰っている時でした。
「今年はチョコもらえなさそうだなぁ・・・」
そう思いながら渋々歩いておりました。
「今年はチョコもらえなさそうだなぁ・・・」
そう思いながら渋々歩いておりました。

エレキベア
(悲しいクマ・・・)

マイケル
「もういっそ奪ってやろうか・・・」
そんな悪の気持ちが芽生えた瞬間、頭の中のプランナーが企画書を書き始めていました!!
それを具現化したものがこちら!!
そんな悪の気持ちが芽生えた瞬間、頭の中のプランナーが企画書を書き始めていました!!
それを具現化したものがこちら!!

マイケル
これが怪盗チョコレートの設計書(ALL)です!!
一部変わってはいますが、ほぼ最終的な内容と一緒ですね!!
一部変わってはいますが、ほぼ最終的な内容と一緒ですね!!

エレキベア
ほう・・・
まあ手軽に作れそうだしカジュアルゲームとしては悪くなさそうクマね
まあ手軽に作れそうだしカジュアルゲームとしては悪くなさそうクマね

マイケル
そう、悪くなさそうだなと思いつつも、問題なのは思いついたタイミングでした・・・。
これを出すとしたらバレンタインに合わせたい・・・しかし思いついたのは1/27でした・・・。
これを出すとしたらバレンタインに合わせたい・・・しかし思いついたのは1/27でした・・・。

エレキベア
おおぅ・・・

マイケル
2/14にアプリとしてリリースするとなると、最低限一週間前(2/8)くらいにはストア申請まで漕ぎ着けたい・・・。
そして2/1〜2/5は実家の家族が東京に遊びに来る(僕の部屋に泊まり)のため、5日間作業ができないのも確定していました。
つまるところ下記のような状態になります。
そして2/1〜2/5は実家の家族が東京に遊びに来る(僕の部屋に泊まり)のため、5日間作業ができないのも確定していました。
つまるところ下記のような状態になります。

マイケル
一週間も作業する時間が無いという事実・・・
使用できる土日も2日しかないため、これを仕事しながらリリースまではさすがに無理だろうと思いました。
使用できる土日も2日しかないため、これを仕事しながらリリースまではさすがに無理だろうと思いました。

エレキベア
さすがにこれは厳しいクマね〜〜〜

マイケル
そんなこんなで一旦仕様書はお蔵入りとなりました・・・。
プロトタイプ作成

マイケル
それでも割と「怪盗チョコレート」という響きが気に入っていた僕は、土日で作れるだけ作ってそこから決めようとプロトタイプの開発に着手してみました。

エレキベア
諦めが悪いクマね〜〜〜

マイケル
そんなこんなで出来たのが下記になります!
まずは土曜(1/28)の成果がこちら!
まずは土曜(1/28)の成果がこちら!

マイケル
Unityデフォルトの3DCubeが動き回っているだけの状態ですね・・・

エレキベア
まあこうなるクマね・・・

マイケル
そして日曜(1/29)の成果がこちらです!

エレキベア
おお・・!?なんかそれっぽいクマ・・・!

マイケル
後述しますが、3Dモデル等はアセットやツールをガンガン流用して、
何とかメインとなるインゲーム部分は完成させることができました。
ワンチャンいけるのでは・・・?という気持ちにもなってきました。
何とかメインとなるインゲーム部分は完成させることができました。
ワンチャンいけるのでは・・・?という気持ちにもなってきました。

エレキベア
むむ・・しかし一週間はさすがに・・・

マイケル
僕もそう思い、また一旦諦めることにしました・・・。
友人に協力を仰ぐ

マイケル
しかしここまで作ったので中々諦めることができず、何とか出来ないか考えていたところ
「画像やサウンドの素材を並行で作ってもらえばギリギリ間に合うかも・・?」という考えに至りました。
そこで友人の師匠ことwentに無茶振りで作成をお願いしてみました!
「画像やサウンドの素材を並行で作ってもらえばギリギリ間に合うかも・・?」という考えに至りました。
そこで友人の師匠ことwentに無茶振りで作成をお願いしてみました!
ロックマンゼロ(64×64)#ドット絵 #pixelart #ロックマンゼロ #Megaman pic.twitter.com/SLwdEnLoOv
— ugokiwa.went (@went15370325) February 4, 2023
↑師匠ことwentはドット絵やピコピコサウンドを作っている!作品を要チェックだ!

マイケル
あまりに急かつ短期間で引いていましたが、何とか作ってもらえることになりました!
元々一緒に作ってみたかったので丁度いい機会かもとも思いつつ、依頼したからには納得いく出来で完成させなければなりません!!
ここで何としても作り切る覚悟を決めて取り組むことにしました!!
元々一緒に作ってみたかったので丁度いい機会かもとも思いつつ、依頼したからには納得いく出来で完成させなければなりません!!
ここで何としても作り切る覚悟を決めて取り組むことにしました!!

エレキベア
申し訳ねえクマ・・・
もう逃げられねえクマ・・・
もう逃げられねえクマ・・・

マイケル
スケジュールを考慮すると、作業できないゾーンに入る前には全体のシーケンスと主要機能は完成させておきたい!
そういうわけで 1/30、31 に死ぬ気で作って、師匠作の素材差し替えまで何とか完了しました!
そういうわけで 1/30、31 に死ぬ気で作って、師匠作の素材差し替えまで何とか完了しました!

エレキベア
おお〜〜〜!!
何かほぼできてる感じがするクマ〜〜〜!!
何かほぼできてる感じがするクマ〜〜〜!!

マイケル
まあゲーム開発はここからが大変なんだけどね・・・
そして師匠は無茶振りでお願いしたにも関わらず、ドット絵とBGM、SEまで速攻で作ってくれました!!
さすが師匠ことwentです!!!感謝しかありません!!
そして師匠は無茶振りでお願いしたにも関わらず、ドット絵とBGM、SEまで速攻で作ってくれました!!
さすが師匠ことwentです!!!感謝しかありません!!

エレキベア
すげえええクマ〜〜〜〜〜

マイケル
余談ですが、師匠はエレキベアのドット絵も描いてくれています!
現在は僕のTwitterアイコンにしていますが、このブログのどこかにも飾っておきたいですね!!
現在は僕のTwitterアイコンにしていますが、このブログのどこかにも飾っておきたいですね!!

エレキベア
うええぇえ〜〜〜?!!?
まさか知らぬ間にドット絵化していたとはクマ・・・・
師匠ありがとうクマ〜〜〜〜〜〜〜
まさか知らぬ間にドット絵化していたとはクマ・・・・
師匠ありがとうクマ〜〜〜〜〜〜〜

マイケル
そしてそこからは地道に開発を続けて、作業できないゾーンもなんだかんだ夜中にちまちま作業しつつ、なんとか目標となる2/8にストア申請まで漕ぎ着けることができました!!

エレキベア
おお〜〜〜〜
バッチリ完成してるクマ〜〜〜〜
がんばったクマね
バッチリ完成してるクマ〜〜〜〜
がんばったクマね

マイケル
今回は運よくストア申請もあっさり通って余裕があったので、追加のアップデートもいくつか行うことができました。
詰め詰めできつかったけど、めっちゃ楽しかった!!!!
詰め詰めできつかったけど、めっちゃ楽しかった!!!!

エレキベア
やり切ったクマね〜〜
えらいクマね〜〜
えらいクマね〜〜
短期間で開発するために行った工夫

マイケル
全体の経緯を書いたところで、ここからは開発寄りの話に入っていきます。
まずはこの短期間で完成させるために行った工夫についていくつか紹介します!!
まずはこの短期間で完成させるために行った工夫についていくつか紹介します!!
前作ったコードを流用!

マイケル
一つ目は前に作ったアプリのコードを可能な限り流用すること!
こちらは以前作ったオセロのコードをベースにして作りました。
こちらは以前作ったオセロのコードをベースにして作りました。

エレキベア
オセロ懐かしいクマ〜〜〜

マイケル
メインとなるゲーム部分以外の機能は大方一緒なので、流用できる部分も多いことは一目瞭然です。
実際にタイトル画面を見比べてみてもデザイン以外はほぼ同じですね!
実際にタイトル画面を見比べてみてもデザイン以外はほぼ同じですね!

エレキベア
まあこの規模だと似たようなもんクマね

マイケル
具体的には下記のような押下時の処理含めて丸々移植します。
これによって作るゲーム固有部分の開発に集中する作戦です!
これによって作るゲーム固有部分の開発に集中する作戦です!
↑この辺は丸々持ってこれますね

マイケル
また、シーン構成に関しても基本は同じでタイトル画面のシーン、ゲーム画面のシーンがメインとなるため、全体のシーケンス処理についても流用できる部分が多いです。

エレキベア
そういうわけでゲーム全体の大枠は流用できたわけクマね
設計は細かく考えない!

マイケル
そして設計思想についても前回作った考えに合わせて、細かい部分については考えずスピード重視で作りました。
そのおかげで迷わずに実装を進めることが出来たと思います!
ただ、DIコンテナを使用してそれなりに分割はしているのでコード量もそれなりに多くなっていますね!
そのおかげで迷わずに実装を進めることが出来たと思います!
ただ、DIコンテナを使用してそれなりに分割はしているのでコード量もそれなりに多くなっていますね!

エレキベア
意外と設計部分で悩んで時間かかることも多いクマからね〜〜

マイケル
DIコンテナやVContainerの使い方について知りたい方は、下記記事にまとめていますのでこちらもご参照ください!!
モデルはアセットを活用!

マイケル
そして3Dモデルに関しては今回は自分で作っている時間はないので、アセットストアから使えそうなものを活用させていただきました!
キャラクター

マイケル
まずキャラクターですが、下記のハイパーカジュアル用のキャラクターをセットを購入しました!!普通に赤字です!!

エレキベア
このために買ったのクマか・・・

マイケル
まあ汎用性高いから今後も使えると思うし・・・・・・・
こちらのモデルを少しいじって、自作シェーダーを適用していい感じにしてみました!
こちらのモデルを少しいじって、自作シェーダーを適用していい感じにしてみました!

マイケル
女の子は可愛くしたかったのですが、ただのピンクの生き物になってしまった・・・・

エレキベア
まあ仕方ないクマ・・・
ステージ

マイケル
そしてステージについても何か無いかな〜〜と探していたところ、
以前購入した何かのセットに入っていたステージのモデルが使えそうなことが分かりました!
以前購入した何かのセットに入っていたステージのモデルが使えそうなことが分かりました!

エレキベア
使う機会ができてよかったクマね

マイケル
この中に入っていた道路のモデルを組み合わせて、それっぽい感じにしてみました!
割とイメージ通りですね!!
割とイメージ通りですね!!

エレキベア
たまたま持ってて助かったクマ
その他

マイケル
あとはチョコとマーカーだけBlenderでサクッと作りました!

マイケル
使用した3Dモデルは以上ですね!
なんて省エネなんだ!!
なんて省エネなんだ!!

エレキベア
アセットストアはマジ便利クマね
UIはProcedural UI Image!

マイケル
そしてUIについてはほぼ全てProcedural UI Imageを使用して作成しています!
こちらは以前紹介したツールですね!
こちらは以前紹介したツールですね!

エレキベア
UI作成は時間がかかるクマからこれもかなり便利クマね〜〜〜

マイケル
これはもはや標準の機能にしてほしい・・・
シンプルイズベストだ!!
シンプルイズベストだ!!
アニメーションはVeryAnimation!

マイケル
アニメーションはVeryAnimationというツールを使用してUnity上で作成しています!
こちらも定番となっていますね!
こちらも定番となっていますね!

マイケル
下記がプレイヤーと女の子のアニメーション遷移です。
こうしてみるとかなり多そうに見えますが、一つのアニメーションは数秒なのでこちらもサクッと作ることができました!
こうしてみるとかなり多そうに見えますが、一つのアニメーションは数秒なのでこちらもサクッと作ることができました!

エレキベア
これで中身の実装に集中できそうクマね
その他に工夫・挑戦した点

マイケル
その他に工夫・挑戦した点についてもいくつか振り返っていきます!
シェーダーをいくつか実装

マイケル
まずは最近描画周りを勉強中ということもあり、シェーダーをいくつか書いてみました!
トゥーンシェーダー

マイケル
まずはトゥーンシェーダー!
こちらはキャラクターに適用していて、以前書いた記事で解説したものをほぼそのまま使っています。
背面法で輪郭線描画するシンプルなものですね!
こちらはキャラクターに適用していて、以前書いた記事で解説したものをほぼそのまま使っています。
背面法で輪郭線描画するシンプルなものですね!

【Unity】トゥーンシェーダーを一から自作する(陰影+輪郭線)【シェーダー】
マイケルみなさんこんにちは!マイケルです!エレキベアこんにちクマ〜〜〜マイケル新年一発目の記事は、みんな大好きトゥーンシェーダーの実装だ!エレキベアついに来たクマか・・・マイケ...
↑トゥーンシェーダーの解説記事

エレキベア
トゥーンシェーダーは大好きクマ〜〜〜〜

マイケル
ただ一点、金色感を出すには陰影に少しオレンジ色を加えたらよいという意見をもらったので、ボーナスキャラの陰影には若干色を加算しています!
金色・・とまではいかないですが、少しゴージャスな感じにはなったかと思います!
金色・・とまではいかないですが、少しゴージャスな感じにはなったかと思います!

エレキベア
自分でシェーダー書くと細かい調整が簡単クマね〜〜〜〜
背景ボーダーシェーダー

マイケル
タイトルシーンの背景についてもシェーダーで実装しています!
ボーダーをスクロールさせるものですね!
ボーダーをスクロールさせるものですね!

マイケル
こちらは下記記事を参考に実装させていただきました!
uGUIで表示するための調整をいくつか行った上で実装しています!!
uGUIで表示するための調整をいくつか行った上で実装しています!!
参考:
そろそろShaderをやるパート12 線を描画してスクロールさせる

エレキベア
ありがたいクマ〜〜〜〜〜
集中線シェーダー

マイケル
そしてゲーム画面の集中線エフェクトもシェーダーで作ってみました!
こちらはShaderGraphでの実装例が多かったので下記記事を参考に挑戦してみました!
こちらはShaderGraphでの実装例が多かったので下記記事を参考に挑戦してみました!
参考:
集中線エフェクト【uGUI】|Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】

エレキベア
ShaderGraphも中々楽しいクマね〜〜〜

マイケル
適用したものが以下になります!
今回は調整が面倒だったので画面外からスケールさせることでエフェクトを出しています!
今回は調整が面倒だったので画面外からスケールさせることでエフェクトを出しています!

マイケル
ただ、モバイルだとやはり描画負荷が大きかったのでオプション設定にせざるをえませんでした・・・
この辺りはまだまだ調整してみたいですね・・・
この辺りはまだまだ調整してみたいですね・・・

エレキベア
むむ・・・やはり描画負荷がネッククマか・・・

マイケル
実装したシェーダーは以上になります!
ただ、URP環境でシェーダーを実装するにあたり中々一筋縄ではいかず、ShaderGraphからコード出力して一部修正したりといった不具合対処をいくつか行っています。
こちらは、URPでの描画周りの不具合対処として別途記事を書きますのでお待ちください!
ただ、URP環境でシェーダーを実装するにあたり中々一筋縄ではいかず、ShaderGraphからコード出力して一部修正したりといった不具合対処をいくつか行っています。
こちらは、URPでの描画周りの不具合対処として別途記事を書きますのでお待ちください!

エレキベア
URPはまだ発展途上な部分も多いクマからね〜〜〜
※↓こちらも記事にまとめました!
序盤は早く成長させる

マイケル
そして強化処理については、序盤は中々経験値が得られないことも考慮して初めの内ほど早く成長するよう簡単な調整を行ってみました。
こちらはEaseOutCircのイージング関数を使用して強化率を補完することで簡易的に調整しています!
こちらはEaseOutCircのイージング関数を使用して強化率を補完することで簡易的に調整しています!

エレキベア
イージング関数はアニメーションだけじゃなくこういう使い方もできるのクマね

マイケル
本当はもう少し細かく成長率を調整した方がいいとは思うけど、時間の関係上上記の処理のみで調整しました!
こちらの関数を用いて下記のように強化後のパラメータを計算しています!
こちらの関数を用いて下記のように強化後のパラメータを計算しています!
↑強化後のパラメータ計算

エレキベア
なるほどクマ〜〜〜〜
オブジェクトプールでの生成

マイケル
女の子の生成については、Listにプールしておくことで再利用して生成するようにしてみました!
UnityにもObjectPoolクラスなるものがあるという噂ですが、これくらいなら自分で実装した方が早いでしょう!
UnityにもObjectPoolクラスなるものがあるという噂ですが、これくらいなら自分で実装した方が早いでしょう!

エレキベア
オブジェクトプールのデザインパターンクマね
ゲーム開発の定番クマ
ゲーム開発の定番クマ
Timelineによるアニメーション作成

マイケル
あとは意外と余裕があったのでタイトル画面のアニメーションも作ってみました!
こちらはTimelineを使用して下記のようにUIを動かすことで作成しています。
こちらはTimelineを使用して下記のようにUIを動かすことで作成しています。

エレキベア
実際は海苔巻きで挟んだ感じになっているクマね

マイケル
せっかくカッコいいドット絵とBGMを作ってくれたから、いい感じに見せたかったんだよね
簡単なアニメーションだけど、個人的には結構気に入っています!
アニメーション制御のスクリプトについては下記のようになっています。
簡単なアニメーションだけど、個人的には結構気に入っています!
アニメーション制御のスクリプトについては下記のようになっています。

マイケル
タップでアニメーションスキップできるようにもしています。
しかし、アニメーション途中で意図しない状態で次へ進むと不具合の原因になりかねないので、アニメーションのCanvasは別途用意して作ったほうがよかったなと思いました。。
しかし、アニメーション途中で意図しない状態で次へ進むと不具合の原因になりかねないので、アニメーションのCanvasは別途用意して作ったほうがよかったなと思いました。。

エレキベア
なるべくアニメーションのみで切り離したいところクマね
ストアレビューを入れてみた

マイケル
あとは今回実験的にスタッフロール後にストアレビューを促すよう実装を入れてみました!
今回は時間がなかったのでiOSのみになります。
今回は時間がなかったのでiOSのみになります。

マイケル
ただレビューダイアログを出す前にもう一つ確認ダイアログを出すほうが丁寧だなと思いました。
こちらは次回以降実装したいですね!
こちらは次回以降実装したいですね!

エレキベア
レビューも中々付かないクマからね〜〜〜〜
反省点

マイケル
最後に、山ほどある反省点の中からいくつかピックアップしていこうと思います!
テスト、リファクタほぼ出来ていません!

マイケル
まず時間の関係上、勢いで実装したためテストやリファクタはほぼ出来ていません!!
せめてパラメータ計算部分だけでも単体テスト書いておけばよかったなと思っています。。
せめてパラメータ計算部分だけでも単体テスト書いておけばよかったなと思っています。。

エレキベア
まあもうアップデートすることもないだろうクマ()
自動ビルド環境作らなきゃ・・・

マイケル
短い期間で開発するにあたって、やはり各OSのビルド時間がネックになっているなと感じました。
こちらは早いところビルド環境を整えたいところですね・・・
こちらは早いところビルド環境を整えたいところですね・・・

エレキベア
お金は払いたくない・・・
そもそものゲーム仕様

マイケル
そもそものゲーム仕様として、もっと工夫できる点は多々あったなと思いました。
単純な周回だとメリハリが足りていないし、後半は気持ち良くなってくるけど序盤のモチベーション維持も工夫できた気がします・・
この辺は反省して次の作品に活かしていこうと思います!!
単純な周回だとメリハリが足りていないし、後半は気持ち良くなってくるけど序盤のモチベーション維持も工夫できた気がします・・
この辺は反省して次の作品に活かしていこうと思います!!

エレキベア
とりあえず実際に遊んでもらって正直な意見を集めながら改善していくのがよさそうクマね
開発テンプレートは用意しておきたい

マイケル
以前作ったソースコードをかなり流用しましたが、汎用的なものについてはテンプレートとしてパッケージ化しておいたほうがいいな、と思いました。
毎回作り直すのも面倒だしね・・・
毎回作り直すのも面倒だしね・・・

エレキベア
MolegoroLibを作るクマ〜〜〜〜〜
おわりに

マイケル
というわけでざっくりにはなりますが、今回の開発の振り返りでした!
最近は勉強目的で作ることが多かったけど、やっぱり思いついたものを勢いで作るのは最高ですね!
最近は勉強目的で作ることが多かったけど、やっぱり思いついたものを勢いで作るのは最高ですね!

マイケル
それと自分以外の誰かと作るのも初めてだったから本当に楽しかった!!
短い期間で急にお願いしちゃったのが申し訳ないけど、またもう少し時間を取って一緒に作れたらいいな〜〜と思います!
改めてありがとう師匠!!!!!
短い期間で急にお願いしちゃったのが申し訳ないけど、またもう少し時間を取って一緒に作れたらいいな〜〜と思います!
改めてありがとう師匠!!!!!

エレキベア
本当にありがとうクマ〜〜〜〜

マイケル
短期間で作る自信もついたから、開発テンプレートも用意したらUnity1Week等にも参加してみたいな!!
あんまり長いとモチベーション維持も大変だしね・・・
あんまり長いとモチベーション維持も大変だしね・・・

エレキベア
オセロはマジきつかったクマ・・・

マイケル
それでは今日はこの辺で!!
アデューーーー!!!!
アデューーーー!!!!

エレキベア
クマ〜〜〜〜〜〜
【Unity】「怪盗チョコレート」をリリース!工夫点や反省点をざっと振り返る【バレンタイン】〜完〜
↑よかったら遊んでください!!!