Shape Morphing 解説    #swfstudy 2      千葉史哉
自己紹介• 千葉史哉 @fchiba• 所属 DeNA• ExGame / Pex の開発者  – Broadtail 時代から従事  – 主にバグ取り担当    紀平が高速な描画アルゴリズムを実装する!     ↓    あちこちぶっ壊す><...
Canvas でハマった点について話すつもりだったんですが…
Shape Morphing とは • ある Shape を別な Shape へ滑らかに変形させること • SWF では、 DefineMorph で開始・終了時の Shape を定   義し、それを補完することで実現している。開始から終   ...
タイムラインとの関係•   raito と時間軸の関係は PlaceObject2 の置き方によって    決まる•   先ほどの例だと 4 フレームで表示                                            ...
補完の方法•   変えられるもの    –   BoundingBox    –   Edge の座標    –   線の色・太さ    –   塗りの色    –   Bitmap の Transform    –   Gradient の位...
DefineShape のおさらい   Tag Header                       ShapeRecords   CharacterID       StyleChangeRecord     Bounds        ...
DefineMorph の構造         Tag Header                                           StartShape              EndShape         Char...
補足• CurvedEdge と StraightEdge で補完が発  生することがある。その場合、後者を  CurvedEdge に変換する。  cx,cy           ax,ay            dx,dy
まとめ• SWF Specification に全部書いてあります  。• 珍しいことに (?) 素直に実装するだけで  、ちゃんと動きます。
おまけ• Canvas 関連小ネタ – Android の標準ブラウザの get/putImageData   のバグと回避方法 – putImageData の引数は整数を指定すべし – iOS ( JavaScriptCore )での fu...
Upcoming SlideShare
Loading in …5
×

Shape morphing (swfstudy)

1,537 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,537
On SlideShare
0
From Embeds
0
Number of Embeds
416
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Shape morphing (swfstudy)

  1. 1. Shape Morphing 解説 #swfstudy 2 千葉史哉
  2. 2. 自己紹介• 千葉史哉 @fchiba• 所属 DeNA• ExGame / Pex の開発者 – Broadtail 時代から従事 – 主にバグ取り担当 紀平が高速な描画アルゴリズムを実装する!  ↓ あちこちぶっ壊す><  ↓ 必死で直す• ngCore (native 版 ) も絶賛開発中!
  3. 3. Canvas でハマった点について話すつもりだったんですが…
  4. 4. Shape Morphing とは • ある Shape を別な Shape へ滑らかに変形させること • SWF では、 DefineMorph で開始・終了時の Shape を定 義し、それを補完することで実現している。開始から終 了までのどの段階にあるかは、 PlaceObject2 の ratio(0= 開始 ~65535= 終了 ) によって表されている。Start(r=0) (r=21845) (r=43690) End(r=65535)
  5. 5. タイムラインとの関係• raito と時間軸の関係は PlaceObject2 の置き方によって 決まる• 先ほどの例だと 4 フレームで表示 r=0 r=65535 DefineMorph (ID=10) PlaceObject2 (ID=10, depth=1, replace=0, ratio=0) ShowFrame PlaceObject2 (depth=1, replace=1, ratio=21845) t=0 t=1 t=2 t=3 ShowFrame PlaceObject2 (depth=1, replace=1, ratio=43690) ShowFrame PlaceObject2 (depth=1, replace=1, ratio=65535) r=0 r=65535 ShowFrame• PlaceObject2 を細かく置くとゆっくり変化する … PlaceObject2 (depth=1, replace=1, ratio=1024) t=0 t=1 t=2 t=64 ShowFrame PlaceObject2 (depth=1, replace=1, ratio=2048) ShowFrame … r=0 r=65535 → これだと 65 フレームかかる• イージングも実現可能 t=0 t=1 t=6
  6. 6. 補完の方法• 変えられるもの – BoundingBox – Edge の座標 – 線の色・太さ – 塗りの色 – Bitmap の Transform – Gradient の位置・色• 変えられないもの – Edge の本数(長さ0は OK ) – 塗りの種類( Bitmap から Solid color とかは NG) – など →Shape の構造は同じで数値だけが違う。  なので、本当に単純に線形補完するだけでよい    F(r)= ((開始の値) × ( 65535-r )+(終了の値) ×r ))/ 65535
  7. 7. DefineShape のおさらい Tag Header ShapeRecords CharacterID StyleChangeRecord Bounds Fill=1, Line=1 Curved Curved FillStyles Curved SolidFill StyleChangeRecord Color(255,0,0) Fill=2, Line=0 Bitmap Fill Straight ID=1, Matrix Straight Straight LineStyles Straight Width=10 EndColor(255,255,255)
  8. 8. DefineMorph の構造 Tag Header StartShape EndShape CharacterID StyleChangeRecord StyleChangeRecord StartBounds x, y, Fill=1, Line=1 x, y EndBounds Curved Curved Curved Curved FillStyles Curved Curved Solid Fill StyleChangeRecord StyleChangeRecordStartColor(255,0,0),EndColor(0,0,255) x, y, Fill=2, Line=0 x, y Bitmap Fill Straight Straight ID=1 StartMatrix, EndMatrix Straight Straight Straight Straight LineStyles Straight Straight StartWidth=10, EndWidth=10StartColor(255,255,255),EndColor(255 End End ,255,255)
  9. 9. 補足• CurvedEdge と StraightEdge で補完が発 生することがある。その場合、後者を CurvedEdge に変換する。 cx,cy ax,ay dx,dy
  10. 10. まとめ• SWF Specification に全部書いてあります 。• 珍しいことに (?) 素直に実装するだけで 、ちゃんと動きます。
  11. 11. おまけ• Canvas 関連小ネタ – Android の標準ブラウザの get/putImageData のバグと回避方法 – putImageData の引数は整数を指定すべし – iOS ( JavaScriptCore )での function 初回実 行重い問題とその対策 – Single Core CPU だと Android4.x はパフォー マンスわるいよ→ 興味ある方は @fchiba まで mention を。

×