読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

nw.jsでデスクトップ・アプリを作る (8)- アニメーション部分を実装する

馬のアニメーションを作り始めた。

https://dzuqxg.dm2301.livefilestore.com/y2pj4JoiSuunt8AHnI2UYjnGy6mzPyKg0bWY4uFE7OeC01I-TvRoW2gyJTRSQqdwIIThY0buSnUyj7RgkYL7-o_q8s8Os0u-FQ16deI9uPZU0KIuma6uriVRLUcQHOui1xwk8TPCZkCc8C6KGka4WIkBg/022201.png?psid=1

http://bl.ocks.org/sfpgmr/9788400c632f51830e53

上はThree.jsで元画像を分割して表示してみたもの。みた感じ2Dだが、カメラの画角と位置を調整することでz座標が0の時にx,yが実ピクセル座標で表示するようにしている。

これを1フレームずつpngファイルに落としてffmpegで動画化するところを作ればとりあえず仕組みは完成だ。馬が走っているだけではどうにも寂しいのでこれにさまざまな効果を付け加えていくことにする。