2012/05/15_【第3回】#SmartHacks - スマートフォンブラウザ技術勉強会 - ～ スマートフォン上で動くhtml5 + CSS3 + Javascriptについてhackathon形式で学びます ～

close_yutori @kimukou2628

#SmartHacks Facebookと連携してリプレイ機能もあるらしい

めるじ@なんとか @melge_1875

jsとcssで物理演算か #smarthacks

close_yutori @kimukou2628

#SmartHacks Final Revellion ・・マップの拡大等もHTM5ベースで開発

ふらだ @flada_auxv

デザイナーとかの方が多い雰囲気か #smarthacks

close_yutori @kimukou2628

#SmartHacks HTML5 in スマホ） ・Canvasを利用・・描画＝＞クリア＝＞描画 の流れ 画面をクリアしないとスプライトを移動させると残像が残る

close_yutori @kimukou2628

#SmartHacks CSS3アニメーション webkit-keyframesあたりを利用する

めるじ@なんとか @melge_1875

今のcssすげーな #smarthacks

おくみん2号 @okumin2

CSSでアニメーション。 #smarthacks

close_yutori @kimukou2628

#SmartHacks ・Transitionを使う ＝＞ HTML5を使わない場合 自分で移動 ・・HTML5が対応できないブラウザの場合は必要な処置

け ー す け @NaaaaSk_7aaaa5k

canvasかCSS３か…#smarthacks

close_yutori @kimukou2628

#SmartHacks Canvasアニメーション ・・・CSS3に比べるとパフォーマンスが多少落ちる、ただし複雑な部分はこちらで （メニューやストーリー画面はCSSで作る方がベター

け ー す け @NaaaaSk_7aaaa5k

Androidでバグ多数か…困ったな。#smarthacks

close_yutori @kimukou2628

#SmartHacks 開発中に困ったこと） ＝＞Canvas、CSS3にバグが（端末ごとに差異がある ＝＞Androidに凄く苦しめられている

ふらだ @flada_auxv

ハマった点　Canvasのバグ(主にAndroid)　アニメーションが重い(主にAndroid)　CSSのバグ(主にAndroid)　要するにAndroid消えてなくなれという事ですね #smarthacks

close_yutori @kimukou2628

#SmartHacks Retinaディスプレイ対応＜IPhone4＞） ・2倍サイズの画像を2倍サイズのCanvas設定＝＞1/2サイズにして描画＝＞普通の速さになる canvas自体は 200,200 style で100，100 ctx 200，200で作る

めるじ@なんとか @melge_1875

描画だったりアニメーションはユーザーの環境に左右されまくるから、Android対応大変そうだ #smarthacks

close_yutori @kimukou2628

#SmartHacks 描画範囲は最小限にする ＝＞消す領域は出来るだけ最小限で オブジェクトがとんでいる場合＝＞その領域のみ更新

Tomomi Imura 🌺 @girlie_mac

Retina: <canvas width='200' height='200' style='width:100px;height:100px'> ctx.drawimage(img, 0, 0, 200, 200); #smarthacks

close_yutori @kimukou2628

#SmartHacks puImageData・・getImageData で読み込んだものを表示 ＜drawimageDataより全然軽い ・・回転済みのデータをgetImageDataで作る＝＞そのアニメーションフレームを putImageData で貼付描画

めるじ@なんとか @melge_1875

iOSってすげーんだな #smarthacks

close_yutori @kimukou2628

#SmartHacks GPUアクセラレーション＞ IOS) IOSエミュレータで ・デバック＝＞ブレンドレイヤー で表示したとき 赤い領域が効いている場所

Tomomi Imura 🌺 @girlie_mac

Debug > Blend Layer menu on iOS emu - GPU accel. #smarthacks

KOSHIKAWA @ppworks

RT @flada_auxv: ハマった点　Canvasのバグ(主にAndroid)　アニメーションが重い(主にAndroid)　CSSのバグ(主にAndroid)　要するにAndroid消えてなくなれという事ですね #smarthacks

close_yutori @kimukou2628

#SmartHacks IOS5からtransformプロパティ指定＝＞GPUアクセラレーションを使うようになった

close_yutori @kimukou2628

#SmartHacks ・Canvasは複数枚重ねてレイヤー的に ・描画は2フレームに1度 ・キャラクタ画像） Ilustratorプラグイン（Ai2Canvas） AI=>Canvas で使っている（ベジェ曲線データになっている ＝＞低いコスト