2010年08月24日

Silverlightでパラパラアニメーション、素材のY軸にオフセットを設定するには

Silverlightでキャラ表示をパラパラアニメで動かそうと思って変なところで苦戦したのでメモ。

まず、パラパラアニメを動かすにあたっては、プログラム主体のSilverlightの勉強 その4 XAMLでパラパラアニメ(Tari Lari Run)が非常に参考になりました。というかほぼそのまんまいけちゃうぐらい。

が、Silverlight初心者の自分が躓いたのは「キャラチップを、左右だけじゃなくて前後アニメも含めて1枚画像にしたい」というケース。たとえば、こちらのチップのような画像ファイルです。縦方向に32ピクセルずつオフセットできれば、1枚の画像のまま、前に歩いたり、右に歩いたりするのを切り替えられるわけです。

で、Tari Lari RunさんのサンプルでImage要素にCanvas.Top属性をつけたりとかいろいろ試したのですが、どうもうまくいかない。

ようやく気がついたのが、Imageを直接オフセットさせるのではなく、いったんCanvasでくくって、そのCanvas要素をオフセットさせるという方法。

修正前:
<Image Name="walking" Source="/SilverlightApplication1;component/pc_01.png" Stretch="None" />

修正後:(↓の設定でY軸に64ピクセルずれるようになる)
<Canvas Canvas.Top="-64"><Image Name="walking" Source="/SilverlightApplication1;component/pc_01.png" Stretch="None" /></Canvas>

これで大きな画像の任意の一部分を切り出して使うことができるようになりました。
posted by へろ at 01:48 | Comment(0) | TrackBack(0) | コンピュータ