皆さん初めまして！
2013年度新卒ディベロッパーのスエ@sueと申します。
私は現在、スマートフォン向けブラウザゲーム「ペコロッジ」を開発しています。
今日はそのペコロッジで主に使用しているスマートフォン向けJavascriptライブラリ tofu.jsをテーマにお話したいと思います。
tofu.jsってなんか聞いたことあるな？って感じたあなた。はい、そうです。以前、同じく2013年度新卒デベロッパーのチャーリー@charlie10151015がtofu.jsの特徴について説明してくれました。（「 スマートフォン向けJavascript tofu.js 」参照）今回はこのtofu.jsを用いたスマートフォンのデバイス対応について焦点をあてて説明していきたいと思います！
以下にiOSとAndroidの主要バージョンのレンダリング性能を簡単にまとめてみました。
それでは実際にどれくらい描画速度が変わるのかベンチマークをとって確認してみましょう。
複数のオブジェクトの「角度・スケール・透明度・座標」に対するアニメーションを同時に処理します。オブジェクト数を増やしていき最大FPSが20以下になったときのオブジェクト数をベンチマークとしました。
http://suemasa.me/test
tofu.jsはFPSが著しく下がった場合、描画をスキップする機能も搭載されているため、今回その機能は外しています。
iOS,Androidを含む5種類の端末を試した結果、以下のような結果となりました。オブジェクト数が0となっているものはそもそも動作が困難だったものになります。
上図より、描画モードによってその性能が大きく変化しているのがわかります。またバージョンが同じでも機種が異なるとその特徴も変わってきます。
このように、デバイスの特徴にあわせて描画モードを選択することで大幅な速度改善が可能になります。tofu.jsでは、この描画モードを簡単に切り替えることができるため、大幅に開発コストを格段に下げることができ、またこのようなテストを経て、デバイスに最適な描画方法を容易に選び取ることができます。
そこで現在新規開発中の一部のブラウザゲームではGPUを活用できるwebGLを利用することにより、アニメーションの高速化を試みています。webGLはもともと３次元コンピュータグラフィックスをブラウザで実現させるためのものでしたが、2Dでもその威力を発揮します。
webGLは現状スマフォでは、Androidの一部端末でしか対応されていませんが、このwebGLを用いることで、CanvasやDOMによる描画処理が重いアニメーションも容易に処理することができます。今回はこのwebGLを利用したjavascriptライブラリPixi.jsを用いて再度同じ方法でベンチマークを取ってみました。
先ほどの結果と比べて格段に性能が向上していることが分かります。webGLは依然実装されているスマフォは少ないままですが、このままwebGLが普及していけばスマフォブラウザでネイティブと同等のアニメーションも可能になるんじゃないでしょうか。
端末の性能の差異は常々私達webデベロッパーを悩ましている問題ですが、私達は新しい技術をどんどん取り入れることで、全ての端末で快適な動作を提供することを目指しています。ペコロッジではこの他にもユーザにストレスを与えないための工夫を凝らしています。次回はそちらにも触れられればと思います。
皆さんも是非ペコロッジで遊んでみてね♪
pixi.js
ベンチマーク：suemasa.me/test
2013年度新卒ディベロッパーのスエ@sueと申します。
私は現在、スマートフォン向けブラウザゲーム「ペコロッジ」を開発しています。
今日はそのペコロッジで主に使用しているスマートフォン向けJavascriptライブラリ tofu.jsをテーマにお話したいと思います。
tofu.jsってなんか聞いたことあるな？って感じたあなた。はい、そうです。以前、同じく2013年度新卒デベロッパーのチャーリー@charlie10151015がtofu.jsの特徴について説明してくれました。（「 スマートフォン向けJavascript tofu.js 」参照）今回はこのtofu.jsを用いたスマートフォンのデバイス対応について焦点をあてて説明していきたいと思います！
デバイスのレンダリング性能の差異
ブラウザのレンダリング性能の特徴はスマートフォンの機種やバージョンによって様々です。例えばあるAndroid端末の場合、Android2.x系はDOMのレンダリングが致命的に遅いという特徴があります。Android4.x系ではDOMのレンダリングが大幅に改善されましたが、しかし今度は逆にCanvasの描画が遅い、といった具合に同じAndroidでもバージョンによってレンダリング能力は様々です。以下にiOSとAndroidの主要バージョンのレンダリング性能を簡単にまとめてみました。
それでは実際にどれくらい描画速度が変わるのかベンチマークをとって確認してみましょう。
ベンチマークテスト
複数のオブジェクトの「角度・スケール・透明度・座標」に対するアニメーションを同時に処理します。オブジェクト数を増やしていき最大FPSが20以下になったときのオブジェクト数をベンチマークとしました。
http://suemasa.me/test
tofu.jsはFPSが著しく下がった場合、描画をスキップする機能も搭載されているため、今回その機能は外しています。
iOS,Androidを含む5種類の端末を試した結果、以下のような結果となりました。オブジェクト数が0となっているものはそもそも動作が困難だったものになります。
上図より、描画モードによってその性能が大きく変化しているのがわかります。またバージョンが同じでも機種が異なるとその特徴も変わってきます。
このように、デバイスの特徴にあわせて描画モードを選択することで大幅な速度改善が可能になります。tofu.jsでは、この描画モードを簡単に切り替えることができるため、大幅に開発コストを格段に下げることができ、またこのようなテストを経て、デバイスに最適な描画方法を容易に選び取ることができます。
webGLを利用したレンダリング
先ほどの結果ではcanvasモード,htmlモードどちらを用いても、たかだか50～100個のオブジェクトを同時に動かしだだけでFPSが20を下回りました。またオブジェクト数が増えた場合、再描画範囲を限定するというtofu.jsの強みも生かせません。そこで現在新規開発中の一部のブラウザゲームではGPUを活用できるwebGLを利用することにより、アニメーションの高速化を試みています。webGLはもともと３次元コンピュータグラフィックスをブラウザで実現させるためのものでしたが、2Dでもその威力を発揮します。
webGLは現状スマフォでは、Androidの一部端末でしか対応されていませんが、このwebGLを用いることで、CanvasやDOMによる描画処理が重いアニメーションも容易に処理することができます。今回はこのwebGLを利用したjavascriptライブラリPixi.jsを用いて再度同じ方法でベンチマークを取ってみました。
- pixi.jshttp://www.pixijs.com/
先ほどの結果と比べて格段に性能が向上していることが分かります。webGLは依然実装されているスマフォは少ないままですが、このままwebGLが普及していけばスマフォブラウザでネイティブと同等のアニメーションも可能になるんじゃないでしょうか。
まとめ
最後までお付き合い頂きありがとうございました！今回はスマートフォンの描画性能についてお話しました。端末の性能の差異は常々私達webデベロッパーを悩ましている問題ですが、私達は新しい技術をどんどん取り入れることで、全ての端末で快適な動作を提供することを目指しています。ペコロッジではこの他にもユーザにストレスを与えないための工夫を凝らしています。次回はそちらにも触れられればと思います。
皆さんも是非ペコロッジで遊んでみてね♪
参考資料
tofu.jspixi.js
ベンチマーク：suemasa.me/test