アプリ開発が楽しくなってきたtomita@atuwebです。
2016年8月に行ったTap Hannnya Shingyoのパフォーマンス改善についてまとめます。

別の端末で見てびっくり

Tap Hannnya Shingyoは最もポピュラーなお経といえる般若心経を題材としたAndroidアプリです。

Tap Shingyo IconTap般若心経
(マジでごめんけどAndroid版のみです。iOS版が欲しい方はぜひ私のTwitterにDMください)

このアプリは「デキる子」と言われるNexus 5で実機デバッグしながら開発しておりました。
そのため、アプリの速度などもNesus 5を基準にしております。

リリース後しばらくして「さすがに端末1つというのはなー」と考え、中古で検証用端末を購入したのですが、その古めの端末でプレイするとびっくり。
メインのお経モードを動かしてみると激重でストレスフルなのです。

これは改善しないわけにはいきません。

UIファイルにあらかじめ文字数分のドットを打ち込んでいた

般若心経は300字弱あります。
そのため、赤点を文字の横に表示し「今どの文字か」が分かるようにしております。

文字数が多いだけにこの赤点の処理には苦労しました。
座標を拾うのが難しい(面倒)と思って「あらかじめ描画しちゃったほうが簡単」と考え、Cocos Studioで1つ1つ画像を打ち.csbに出力して使用していました。

その数300弱。
オブジェクトの数が多すぎて、正直にCocos Studioまで息も絶え絶えという状況。

解決方法

  • 素直に座標を拾い
  • その座標を配列で管理
  • 赤点オブジェクトを3つ用意して使いまわす

という実装に変更しました。

atu-ts-psup-1

無駄なオブジェクトが減って.csbファイルも小さくなりました。

ちなみに、赤点を3つ用意した理由は「連打に対応するため」です。

文字ごとに3枚の画像があった

初期実装で枠と文字を別の画像として用意しており、機能追加時は「あるものを利用し、不足している画像を追加する」ことしか頭にありませんでした。

結果、1語に対し「枠」「漢字」「読み」の3画像を用意する形で実装してしまいました。

般若心経はなど、同じ漢字が何回も登場しますが、それでもそう画像点数は400弱ありました。
画像はスプライトシート(Sprite Sheet)にまとめるとはいえ、点数自体が多いので重たくもなります。。。

解決方法

atu-ts-psup-2
Spriteオブジェクトを減らすため、3つの画像をあらかじめ合成したものを描画することとしました。
これにより、総画像点数を130程度、スプライトシート2枚まで減らすことに成功しました。

スプライトシートに固める時の調整

画像ソフトで合成した画像はCocos Studioを利用してSpriteSheetに固めます。

今回、ここの画像サイズ(Width x Height)はそこそこ大きいため、無調整では空白が目立ちます。
2048x2048の領域を孤立よく利用するために、クリッピングや回転を許容すると、いい感じに幅を詰めてくれます。

atu-ts-psup-2-csudio

クリッピングすると出力時にバリがついてしまうことがありますのでSpacingを設定すれば完璧ですね。

スプライトシートの作成方法は以下に、もうちょっと詳しく記載してございます。

[cocos2d-x]Cocos Studioを使おう

スタート時に文字数分のSpriteを作成してメンバに保持していた

「最初にすべて描画しておけば、都度描画しないから早く動くよね」という発想で、すべてのSpriteをスタート時に生成していました。

解決方法

こちらは、Spriteを都度生成、都度破棄するようにしました。

改修後は「スプライトシート自体を読み込む時間」でもたつく部分が出ました。
これはスプライトシートのロードはシーンの生成時に済ませるようにしたところ、ゲーム進行後の挙動には改善が見られました。

まとめ

  • 開発は、性能低めの対応端末で行おう
  • 可能な限り、オブジェクトを減らす

こうやって書くと、ごく当たり前のお話ですね。

こういった経験を通じて、もっともっと良いプロダクトを世に出すことができるように創意工夫していきます!
私に失敗はありません!

スポンサーリンク
ad_336
ad_336
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
コメントの入力は終了しました。