ATHROID2020（アスロイド2020）アプリ製作ブログ③ ～ 【アイパッド対応他プログラム大幅修正 】
こんにちは、HOUEN Inc.です。
前回（2020年5月6日）の続きで、10回目の投稿です。(*^^)v
アスロイド2020がリリースされたので、順調にブログ更新中です！
前回は、競技種目の説明を４種目目の競技「400ｍ走」まで書きました。
アプリに関してはこちらから(=ﾟωﾟ)ﾉ
今回は前回のラストにあります、アイパッドガクガク現象の対応から書きたいと思います。
何がガクガクだったのか・・・こだわりの残像が出現すると動きがガクガクになってしまうのです(T-T)。
400ｍ走の競技は、アスロイドがある一定の速度を超えて加速すると残像が現れます。
速く走っている感じを出す演出のつもりです。
アイパッドで動作確認をしたところ、この残像が現れた直後からスクロールやアスロイドの動きがガクガクと狂い始めました。
処理能力不足と思われます・・・。
今回のアプリ製作に当たっては、ほとんどのチェックをアイフォンＸで行ないました。
Ｘ以外では、アイフォン５と６、それからアイパッドの４機種です。
このガクガク現象はアイフォン５、６では起きませんでした。
なんとか処理速度を追いつかせたい！
と思い、行なった対策が以下になります。
１：描画と計算のプロセスを分離した
２：View Controlerの処理を分配した
３：残像の数を減らした・・・(´;ω;｀)
色々と調べて描画の処理が遅くなる原因を試しました。
調べた結果で一番多く出てきた事が、α値変更による処理でした。この件は、物体が半透明になって、背景が透けて見える処理なので、処理に時間がかかりそうな理屈はわかります。
しかし、αは１のまま残像を出してみましたが、全く改善されませんでした。
（何故かは未だによくわかりませんが・・・）
まず１の項目ですが、内容的には「そんなの当たり前！！」
と言われそうな事です σ(^_^;) 。
製作当初は描画の最大速度を気にせず製作していたため、とにかく速く、無理やり描画させようとしていました。
素人発想でお恥ずかしいですが、アイフォンの描画は１秒間に６０フレームなのに対して、１秒間に１０００回描画の命令を出していたのです・・・
この件で「なるほど！」と思ったのは、400ｍ走のタイマーの動きでした。
実際、計算のプロセスでは０．０１秒毎にタイマーをカウントアップさせているのに、画面に表示される（画像が更新される）のは、０．０１６秒毎なのでした。
（１秒 ÷ ６０フレーム ＝ ０．０１６６６・・・）
計算のプロセスというのは、アスロイドのパーツ一つ一つの角度や座標、背景の座標、等ですが、こちらは今まで通りに行なわせ、描画に関してはTimerを使い、０．０１６秒に１回、計算結果に基づいた位置や角度に画像を描画させる、といった処理に変更しました。
次に２の項目に関してですが、こちらは処理速度とは関係ないと思います・・。
内容は、メイン画面をViewControlerで、競技の画面をPlayViewContolerという名称で処理していましたが、あまりにも詰め込み過ぎてどこに何があるのかわかりづらくなったため、それぞれの競技の計算に関しては、それぞれHandThrowView、ArcheryView、HighJumpView・・・と分けて、描画に関してのみをPlayViewに入れるように変更しました。
プログラムの引っ越し作業が大変だったので、最初から分けておけば良かった・・という失敗談ですm(_ _)m。
最後に３の項目です。色々と試しましたが結局アイパッドのガクガク動作が修正出来ず、いっその事残像を諦めようかとも思いましたが、残像の数を減らす事でアイパッドもちゃんと動くようになったので、アイパッドに関しては少し寂しい演出になってしまいました・・・。(>_<)
続きまして、アイパッド座標ズレまくりに関して書きたいと思います。
開発者の皆様はこの件で苦労していませんでしょうか？？
私は何度となく修正に頭を悩ませました・・・。
前述した通り、製作のメインはアイフォンＸで行なっています。
そして、演出的にも是非アイフォンＸ以上の機種で、ご覧いただきたいです！！
下の画像をご覧いただくとわかりやすいと思いますが、アイフォンＸが一番ダイナミックに画像が表示されています。
それ以外の機種では表示されない背景もありますので・・・(+o+)
製作初期の段階で、まず一番左の画像、「アイパッド - A」ですが、実は製作するのはこのサイズが一番楽でした。なぜならば、このサイズはアイフォン６と全く同じ解像度だからです。
（スクショの画像は横幅を揃えていますが、実際にはアイパッドが大きいので）
一昔前のアプリをアイパッドでダウンロードすると画面の中央に小さく表示されると思います。これはアイパッド対応を念頭に入れていないアプリ（もしくは大きく表示させる気が無かった？）だと思います。
私もアイパッドはこれで良いかなぁ・・・なんて思ったこともありましたが、やはりせっかくの大画面なので出来るだけ大きく表示させようと「アイパッド - B」のタイプにしました。
（アプリによっては、逆にアイフォンＸの画像の上下をカットして他の機種の比率に合わせてあるものもありますね。）
アイフォンＸとそれ以外を見比べていただくと分かると思いますが、苦労したのは座標の位置合わせです。
位置合わせで工夫（・・と言うほどのものでもないですが・・・）したのは、画面の上から何ドット、中央から何ドット、下から何ドット、という具合に３段階に分けて考えたところです。
この画像では基本的に下から合わせています。
左上の赤い丸ボタンは「非常停止ボタン」ですが、これは上から合わせています。
「なんだ！！それだけの事じゃん！！」
と思われるかもしれませんが、競技によってはこの３段階を駆使して、いかに同じような演出が行なわれるか、にかなり時間と労力を費やしました。
同じく苦労したのが「競技の結果」です。
見た感じでは同じように動いているのに、例えば画像の「ハンドスロー」競技で、結果の数値が４００．５ｍと、４０２．３ｍなど僅かにズレる現象も多々発生しました。
「アイパッドの方が記録が出やすいよ！！」
なんてゲームにはしたくなかったので、ここは機種間で同じように動けば同じ結果になる事は確認済みです。（当たり前ですね・・・( ;∀;)）
結局よく考えれば何故数値がズレたのかわかりましたが、とにかく苦労した記憶があります。悩んだ時は図にしてみたりすると解決したりしました。
そして、ここに来てもう一つの壁が立ちはだかりました！！
アスロイド第一号「Knight（ナイト）」と言いますが、開発当初は無計画のまま下の画像のように、四角い枠の中に納まるように製作しました。
無計画その①：アスロイドを増やすつもりがそもそも無かった・・・
この一体で競技の記録を競えば良いと思っていましたが、私の大好きなツ〇ツ〇の醍醐味の一つである、「多くのキャラクターからマイツ〇をセットして遊ぶ」に反していると思い、アスロイドの種類を増やそうと考えました。
ところが、この決められた枠内に収まるキャラクターって、かなり限定されてしまうのでは・・・と気付きました。
頭も体も、これより小さなキャラクターしか当てはまらない(;´Д｀)
無計画その②：効率良く動かすなんて考えてもなかった・・・
製作当初、例えば足を回転させるにも、このまま回転させると画像の中心を起点に回転するため、間接が離れてしまいます。（下図）
このため外れた画像の座標を修正して、位置を合わせる、というプログラムで動いていました。（今思うとどうやっていたのか不思議なくらい複雑なプログラムだったと思います）
これでは当然処理のロスにもなってしまうので、一つ一つのパーツをこれより何倍も大きな枠に入れて、回転させるべき関節部分をその枠の中央に配する事で、処理も何倍も軽く、プログラムも単純にすることが出来ました。
さらに枠を大きくしたので、もっと巨大なアスロイドを製作する事も可能となりました。
とにかく無計画で進んでいる感じが書いていてお恥ずかしい限りですが、無事２体目のアスロイド「Virgo（バルゴ）」（下図）が完成します。
現時点（2020年5月7日）、１６体のアスロイドの中で最も大きいアスロイドです。
アプリ製作も順調に来ていましたが、ここに来て今回書きました壁を乗り越えるために、かなりの時間が流れ・・・ヴァルゴ完成時点で2018年12月28日。
しかし、リリースまでの道のりはこんなもんじゃ済みませんでした(ノД`)・゜・。
最後までご覧いただき、ありがとうございました。
アプリは無料ダウンロード（アップ内課金有り）ですので、是非お試しください！
