2012/02/17 デブサミ2012【17-A-3】スマートフォンにおけるHTML5実装の最先端 #devsumiA (2ページ目)

html5の描画とJavaScriptは遅い。 #devsumiA

2012-02-17 13:24:44

DeNA紀平「また音楽の制限、音のタイミング調整が非常にシビアなため、音ゲーなどには向かない。またiPhoneだと画面タッチのタイミングでのみ音楽再生が可能である。これは3G回線の制限回避のためだとAppleは説明している」 #devsumiA

2012-02-17 13:24:53

#devsumia HTML5の描画手段 Canvas(ラスタ),SVG(ベクタ),CSS3(変形、アニメーション)。SVGはアンドロイド2系ではサポートされない。Canvasで頑張って代用する……

2012-02-17 13:25:27

html5の描画手段はcanvas,svg,css3。svgはAndroid2系では使えない。 #devsumiA

2012-02-17 13:26:14

HTML5 の描画手段は３つ： Canvas, SVG, CSS3。猛者は CSS3 で描画したりするが、普通はおすすめしないｗ SVG でできることは、工夫すれば Canvas でできるし、Android でも動く #devsumiA

2012-02-17 13:26:22

DeNA紀平「HTMLの描画手段は大きく3つ。Canvas、CSS３、SVG。ただし、SVGはAndroid２でサポートされていない。これは、Canvasで代替可能なので、今日は、CanvasとCSS3の話をしたい。」 #devsumiA

2012-02-17 13:28:27

iOS4 の drawImage は遅い。小さい画像を転送しまくるのは最悪。exgame 何も考えずに呼びまくったら 2FPS とかになった。メモリ上にキャッシュを作って高速化する。 #devsumiA

2012-02-17 13:28:28

Canvas。AndroidほうがiPhoneより早い。iOS4ではdrawImageが遅いので如何に回数を減らすか。（キャッシュに綺麗に乗せたら勝ち） DOM構造でCanvasの上に物を載せない。 iOS5ではGPUのサポートが入った。 #devsumia

2012-02-17 13:28:49

_l0lim0m0_ @L0lim0m0

drawImageを呼ぶ回数が増えるとiOS4では非常に重い。iOS5からはGPUサポート #devsumiA

2012-02-17 13:29:32

あと Canas 上に DOM の何かをオーバーレイするのも遅くなる。 iOS5 で GPU サポートが入って、 Canvas がめっちゃ早くなった #devsumiA

2012-02-17 13:29:43

#devsumia iOS5でGPUサポートが入ったが、それでも遅い。今重いAPIはgetPixelData。結局キャッシュに載せるのが勝負。ExGameでは2fps→19fpsに。じゃじゃ馬。使いこなせば優秀だがそれまでが大変。

2012-02-17 13:30:38

DeNA紀平「Canvasは、Androidで速度が問題になることは殆ど無い、なのでcanvasではiPhoneで如何に上げるか、を考えている。使いこなせば最高だが、扱いにくいじゃじゃ馬というイメージ」 #devsumiA

2012-02-17 13:31:23

_l0lim0m0_ @L0lim0m0

iPhoneの場合はいかにメモリに乗せるかが速さの鍵(onMemory) #devsumiA

2012-02-17 13:31:30

CSS3 は「悪女」とっつきやすいがいきなり裏切る。信用出来ない。最初はサクサク動くが、同時に動く物体数が増えると、急激に遅くなる。ある日急に動かなくなる。Android のブラウザ・端末間の非互換性も、アニメーションに関しては多い。 #devsumiA

2012-02-17 13:32:00

#devsumia CSS3。動かすオブジェクトが8とか超えてくると急に重くなる。 Androidでは強烈に非互換が出る。変形はある程度互換性が期待できるが、アニメーションにかんしては………orz

2012-02-17 13:32:03

DeNA紀平「iOS5ではGPUのサポートが入り、驚くほど早くなった。何もしなくても早いが、別のAPIが重くなっている。その回避のためには結局はオンメモリのCanvasを利用することになっている」 #devsumiA

2012-02-17 13:32:25

もぐろふくぞー @mogurohukuzo

#devsumi #devsumiA CSS3は悪女とっつきやすいがいきなり裏切るらしい

2012-02-17 13:32:56

Makoto IGUCHI (いぐっち) @igucci

Canvas=じゃじゃ馬娘、CSS3=悪女 #devsumiA

2012-02-17 13:33:08

DeNA紀平「大体2ヶ月で倍早くなっている。使い方によってはかなりスピードを出すことが出来る、やはり、じゃじゃ馬。一方CSS3は”悪女”(笑)最初はサクサク動くが、同時に動く物体数が増えると急激に重くなる」 #devsumiA

2012-02-17 13:33:14

css3は、同時に動かす物が増えると急に重くなる。特にAndroidでブラウザバージョン、端末間で互換性が無いことが多い、特にアニメーションは厳しい、互換性ではcanvasの方が…。 #devsumiA

2012-02-17 13:33:31

DeNA紀平「CSS3は特にAndroidでブラウザや端末での互換性が無いところがある。CSS3は変形とアニメーションがあり、前者ではある程度の互換性が期待できるが、後者ではトラブルが散見される」 #devsumiA

2012-02-17 13:34:02

ゲーム的なアニメーション、数が多いとかカスタマイズしたいとかはCanvas。1枚もののアニメーションは CSS3 のほうがいい。CSSなので使える人も多い。 #devsumiA

2012-02-17 13:34:23

#devsumia PSVitaでExGame動かしてみたらばっちり動いた。Canvasの互換性は高い CSS3は一枚物のアニメーション、同時に動くものが少ない時。 Canvasは、シチュエーションに応じて変わるアニメーション、同時に動くものが多い場合。

2012-02-17 13:34:36