はじめに
アプリ開発が本当に初めてという人に向けの記事です。
着想から書いていますので、かなり長いです。不要な箇所は読み飛ばすなどしてください。
各画面の項目のURL(別記事)にてコードを"すべて"公開しています。
アプリ『原人 -genjin prototype-』を以下からダウンロードいただき(Andoroidのみ)、見比べながら理解するとよりわかりやすいと思います。
※本記事はiOSやサーバー通信、広告、google開発者登録方法などの要素は出てきません。
着想
フレンドと原神についてチャットであまりにも原人と誤変換されたため「原人だったら武器はバナナでしょｗ」「クロマニョン人★4」などの冗談からアプリ作成を決意しました。
よって、話の流れで以下の項目の実装が決まっていました。
- ガチャがある
- キャラ（原人）と武器（バナナ）で戦う
- バナナは武器だが食べると回復する
- スマホアプリ
この時点で自分のスキルから以下を決めて、開発工数を削減しようと考えました。
- サーバー通信（なんらかのサーバーでユーザー情報を保存）はしない
- オリジナル画像の作成せず、フリー素材を活用する
- 戦闘は複雑でなくて良い
開発ツールの選定（6h）
以下の条件に合う開発プラットフォームをgoogle(US)で探しました。日本語の記事では以下の条件に合うものは出てきませんでした（当時）。
- スマホアプリを作成できる
- 無料
- ローコードもしくはノーコード開発（アプリ開発初心者の自分にとってはUnityレベルは難易度が高かったため、それよりも自由が低くても単純な開発プラットフォームを探しました）
- ある程度利用者が多く、stakoverflowやその開発ツールのコミュニティなどで疑問点が解決できる
上記の条件に最も合っていたのが『gdevelop』でした。
（結果、デバッグの手軽さやapkファイルの書き出し回数に惹かれて月額200円払いました。開発ツールを選定するときに、フリーバージョンの機能と少額の課金で増える機能や価格を確認すると良いです）
gdevelopをさわる
gdevelopに本決定し開発を始める前に、チュートリアルで開発できそうか試してみました（unityはチュートリアルで挫折した経験がありました）。
以下のチュートリアルでアプリを1つ作成してみたら「自分でも作れそうだな」という手応えがありました。
http://wiki.compilgames.net/doku.php/ja/gdevelop5/tutorials/platform-game/start
ちなみに、このチュートリアルで無理そうだと思ったら再度開発ツールの選定を行うつもりでした。
画面設計とグローバル変数（ざっくり）（2h）
大まかにどんな画面が必要か、またグローバル変数（画面を飛び越えて持っておく必要があるもの）を考えていきます。
下の画像がこの段階で考えていた画面設計の一部です。
アプリと見比べると異なる部分がかなり多いことがわかります。
イメージを沸かせる作業なので、この時点ではこれで問題ありません。
今回はゲーム部分は適当で良いと目標を立てていたので、gdevelopのチュートリアルでシューティングゲームを作ったので、簡単に作れそうなシューティングにしました。
キービジュアルの作成とフォント選び(3h)
今回はフリー素材を活用することを目標にしていたので加工OK、報告不要のフリー写真（pixaboyなど）から素材を借りて、キービジュアルを作成しました。
ここで、「宇宙×木×石」をビジュアルテーマに据えようと考えました。
またフォントは以下のように決めました。フリーフォントを紹介している記事から第一水準以上を対応しているフォントを選びました。
キービジュアル・石:ライラ(使用しているペイントソフト『メディバン』に付属)
地の文:無心
ボタン:殴り書きクレヨン
やりたいことの実装方法の確認（6h)
チュートリアルでもいくつか実装がgdevelopで可能かわからないor実装方法がわからない共通で使う部分があったので、本格的な実装に入る前に確認しました。
具体的には以下の箇所です。
- ローカルセーブ方法
- jsonファイルの取り扱い方法
- json形式の変数の取り出し方
- 日本語の取り扱い
- 実機での確認
実装方法は各画面の説明を読んでください。
現在のgdevelopはバージョン5ですが、それ以前のバージョンのQAは参考にならないケースが多く、また、読み替えるのにある程度スキルが必要です。
検索するときは「gdevelop5」で検索すると良いかもしれません。
アプリの設定（0.5h）
アプリを作るのにあたりアプリの設定をはじめに決めます。
これはやや取り返しのつかないor面倒くさい要素を含んでいるので、慎重に決めた方がいいです。
私はアプリ名を入れるべき箇所に知らずに一意となりそうな文字列をいれてしまったため、google playの配布URLになってしまい（変更不可）後悔しています。なんなら適当にハッシュ値のほうがまだ良いです。
各画面の実装（20h）
はじめに立てた目標に到達するための必須画面から作っていきました。
理由は途中で開発に飽きたとしても、その時点でリリースできるようにするためです（戦闘画面以外）。
戦闘画面は一番gdevelopの細かい技術力が必要そうであり、構想は既にあったので、ラストに作成しました。
各画面の実装の流れは以下の通りです。
①コア部分の作成
②エミュレータ（preview機能）で動作確認
③細かい部分を矛盾がないように作り込んでいく
④素材の収集＋加工
⑤テスト用のパラメータを設定
⑥エミュレータでその画面全体の動作確認（いわゆる単体テスト）
⑦テストケースを変えて⑤⑥の繰り返し
基本的にgdevelopはエミュレータが優秀なので画面ごとのテストを実機で行う必要はありません。
画面を作成した順序は以下の通りです。各記事でコード全文が置いてあります。
- ガチャ https://qiita.com/noto_a/private/59c44db7506647fd4a5a
- クエスト選択 https://qiita.com/noto_a/private/9d2bb4de59d63f94052f
- アイテム詳細 https://qiita.com/noto_a/private/233cea286d3ddddfcc40
- アイテム一覧 https://qiita.com/noto_a/private/9b5c62f620c9ea1385ad
- commonエクステンション https://qiita.com/noto_a/private/0f843c82f6147bfbb3b3
- ホーム https://qiita.com/noto_a/private/68efd7c70a8fc6407c3d
- クエスト潜入 https://qiita.com/noto_a/private/3938fb73fa6d9ff19721
- クエスト https://qiita.com/noto_a/private/ed091abe5f971a17183d
- healthエクステンション https://qiita.com/noto_a/private/20e5110d316379208bdb
その他、gdevelopを開発するにあたり躓いた部分を以下で紹介しています。開発する際は参考にしてください。
URL:作成中
あー失敗したなーと後悔しているコード
一部のコードで途中で仕様がかなりいまいちなことに気づいたのですが、修正するのが面倒（リリースが遠のくとモチベーションが下がる）で、問題なく動作をしていることを理由に修正しませんでした。
詳細は上記の各画面で説明しますが、以下のようにアプリ全体にまたがっている部分ばかりです。
数ヶ月に一度バージョンアップするような開発だと細かいことを覚えてられないので、メンテ性がかなり悪化しています。
2,3画面画面ができた時点でグローバル変数は設計書を起こすべきでした。
- 画面遷移に利用するcommon関数の引数が少なすぎて、画面間で適切に引数が引き継げない
- 上記に伴い、引数の命名がわかりづらい
- 変数の命名規則を徹底できてなかったため、同じ型なのに命名規則が異なる（このへんは開発前に『変数』『命名規則』でぐぐってください。それに則った命名をすると、変数がわかりやすいです）
- ガチャの確率までグローバルとして読み込まなくて良い
実機テストと修正（7h)
gdevelopのexport機能でapkファイルをダウンロードし、自分のスマホに送ります。
その際は身元不明のアプリを実行できるようにあらかじめ設定しておいてください。
https://techacademy.jp/magazine/2433
フリーライセンスでは2回/日までエクスポートすることができます。平日に少しずつ動作確認をしてバグを潰していける人はそれで十分だと思います。
私は、バグを発見ごとにダウンロードしてテストし直す方が楽だったので、月額200円のインディーズライセンスを買いました。それだと10回/日までエクスポートすることができるため、エクスポート前にテストコードを削除し忘れが多く、2回では足りませんでした。
google開発者ライセンス登録（1h)
為替に寄りますが、2500円のクレジット払いで登録が可能です。
詳細は割愛。iOSと比べて、年額ではなく永年なので安心してください。
google playに作成したアプリを登録と画面素材作成（2h）
google playに登録するために、アプリ画面の採取が必要です。
ユーザーに訴求するための文字入れをしたり、おしゃれにしたりして、下の黄色枠で見れるような画像を作成します。
リリース申請を行って1週間ほど待つと全世界でこのアプリがリリースされます！