ポケモンカードのダメージ計算アプリを作った話
この記事の最後にダウンロードリンク貼っておきます。
追記 GooglePlayストアにて公開しました。
あとセキュリティソフトにも引っかからなくなりました。
GooglePlayストアに公開するやり方も調べなきゃわからないし、機種によってはレイアウト崩れるし、手元の端末でも動かない機種があるし、無駄に要求するOSバージョンが高いし、そもそもどのバージョンで動作するのか自分でもわからないし、悪意なんて一ミリもないのに何故かセキュリティソフトに引っかかるし、悪意があったとしても実装する技術力なんて無いし、色々とガバガバだけどそれでもいいよって人は使ってください。
ここから本文。
ポケモンカードのダメージ計算アプリを作った。
デッキの他にダメージカウンターいっぱい、GXマーカー、やけどマーカー、どくマーカー、コインが必要。
持ち歩くのが面倒だったので、アプリないかなーって思って探したけど・・・
外国人の方がPlayストアに公開しているのをひとつ見つけたけど、自分にはあまり合わなかった。
じゃあ、自分で作ってみるか！
一応、Android向けアプリの開発環境なら揃ってる。
ちなみに、プログラミングは専門でもなんでもなくて、ほぼ100%独学。
Javaの参考書を友人からもらって読んで、後はAndroidStudioっていうAndroid用の開発環境を触りながら覚えた。センサー値を表示させたりジャンケンしたりする程度ならやったことあるんだけど、ちゃんとアプリとして形にしたことはない。
1.要件
これをスマホでなんとかする。
2.YaruPokeの開発
既にPlayストアでリリースされている外国人の方のアプリの影響を大いに受けながら作った。YaruPokeって名前は適当につけた。
2,3日で完成した。
無知からのスタートだったので、それなりに達成感はあった。
ボタンを動作させるのも、コインだけ別画面にするのも、数字を入れ替えるのも、画像を表示するのも、全部難しかった。
何なら、一番最初にボタンを並べるだけでも1時間かかった。
配置とか大きさとかの設定方法がさっぱりわからなくて、それを調べるところから始まった。
そんな苦労の結果、
まあ、使えなくはないんじゃないか。
その程度だった。
本当はここから色や画像を入れて見た目を整えようと思ったけど、イチから作り直すことを決意。
ポケモンカードって、ダメカンをジャラジャラしてGXマーカーをめくってコイントスして、そういうグッズ満載でやる感じが楽しいんじゃん！
そう思って、実際にグッズを色々する感じのアプリを作ろうと思った。
なんというか、グラフィカルに動くって言ったらいいの？
そんな感じのを作ろうと思った。
3.DameKanの開発
作りました。
操作をほぼ全部ドラッグアンドドロップとスワイプにした。
実際にポケカやってて、コイントスで一喜一憂するのが楽しかったりしたので、コイントスだけは別画面で大きく表示するようにした。
やけどマーカーとどくマーカーは乗せるデザインにした。思いついた時に自分は天才なんじゃないかと思った。ついでにダメカンも乗せるデザインにした。
ダメージダウンをきずぐすりにしたのも良かったと思う。ポケ廃の人はすごいきずぐすりが120回復だと思いそうだけど、このアプリでは100回復な。
実際の［乗せる・投げる・めくる］って動作を、自分の拙い技術力で再現したかった。
ちなみに、作る前に考えたデザインはこんな感じ。
グラフィックに関するスキルがなさすぎてPowerPointで作図してるの、最高に弱いと思う。
最終的にこうなった。
もう大変だったから、苦労話を書かせてくれ。
今の僕は、卒業に必要な単位を取り終えた大学生っていうニートの次に暇な人種なんだけど、休みの日は全部これの開発に費やした。1週間半程度だったけど。
朝9時に起きて夜中の1時までぶっ通しで作業をした日もあった。食事もPCの前で。
苦労したところを挙げると
・スワイプに反応する
・ドラッグできるようにする
・ドロップできるようにする
・カードを丸角にする
・影をつける
・やけど、どくマーカーの横移動のアニメーション
・GXマーカーのめくれるアニメーション
・コインの回転するアニメーション
・コインの上下のアニメーション
ひとつにつき4時間~10時間くらいかかった。
一番苦労したのはコイントス。
回転するアニメーションがなかなか動いてくれなくて、仕方ないから物理エンジンで動かそうって思った。
まずUnityをインストール。
コインの3Dモデルを作ろうとしたら、表裏で違う画像を貼り付けるのはUnityじゃ難しいっぽい。
3Dモデル作成のためBlenderもインストール。初めて触るツールは配置とか考え方を理解するのが難しい。一回覚えてしまえば楽なんだろうけど。
これをUnityに入れる。
UnityのスクリプトはC#で記述する必要がある。Javaしかわからないけどググりまくってなんとか希望の動作を記述。
動作した。
Unityからスマホに入れる。
？？？？？？？？？？？？？
全く動かない。
燃え尽きた。この時点でUnityに丸一日使っていた。Unity内のビルドボタンを押してこれなので、これをAndroidStudioで作ったプロジェクトに組み込むのは…
途方にくれた。
もうちょっと頑張れば動いたのかもしれないけど。
そもそもコイントスだけ急に物理エンジンになるのも、それによって動作が重くなるのも、理想形ではないのでやめた。
んで、物理エンジンを使わない方法を模索する。
元々やろうとしてたアニメーション、自分と同じ症状の人が中々いない。
ふと思い立ってツイート検索してみると、4年前のツイートが1つだけ出てきた。
このアニメーション、稀に動かない機種があると。
ん？
手元にある別の端末で、元々やろうとしていたものを動作させてみる。
ずっと右側の端末で開発してた。
なんで動かないんだーーーって、半日かけて書いたコードを全消しして、次の日は丸一日Unityに捧げた。
お前が悪いのかよ、Huawei Nova。
こいつ、2017年発売のわりにWifiも5GHz帯に対応してなかったり、変なところが抜けてるドジっ子なんだよな。
すぐ左側の端末での開発に移行した。ちなみに手元の別の端末でも動作したので、マジでNovaがドジっ子なだけだった。
そして今日、完成した。まだ手を入れるかもしれないけど、とりあえず一区切りってことで。
2週間前の自分なんてなんもできなかったのに、よくもまぁ実用的なアプリが作れたなぁと。
しばらくしたらPlayストアで公開するかも。
それまでは、とりあえずこっちで公開。
褒めてくれると嬉しい。褒められて伸びるタイプなので。
ド初心者の作品なので文句は言わないでくれ。
ほならね、自分で作れって話でしょ。私はそう言いたい。
ダウンロードはここから。
※個人利用以外の目的でのダウンロードを固く禁じます。ご友人に勧める際はこの記事のリンクを共有して頂けますと幸いです。
2018年8月12日追記
Playストアにて公開しました。
尚、アプリのリリースにつきまして一切の収益化を行っていません。
