「ActionScript3.0アニメーション」をcanvasで置き換える 3Dラッピング応用

chapter15 3dの基本 ラッピングの応用。Tree部にImageを用いる。
オリジナルクラスImageLoadAndDraw.jsで画像を読込み描画させる手もあったが、ひとつだけなので今回は使用しない。
結果以下のクラスを用いる。
Point3D.js :
自身の座標保持。3D座標を2D座標に変換
applyImage3DMoving.js :
画像の読込
Point3Dの生成
Point3Dの変換2D座標へのImage描画

今回は1枚しか画像を使わないが、複数枚使う場合は上記
1.ImageLoadAndDraw.jsにて読込
2.すべての画像の読込判定
3.Point3D生成
4.画像配列( imageLoadAndDraws)と3D座標配列(point3ds)の対応付け(ソートがあるので少々面倒か?)が必要となる。

操作は前回同様↑キーで直進↓キーで後退。→キー←キーでそれぞれの方向に移動。spaceキーで上昇。

http://nouv.biz/labo/20120816_tree/javascript/applyImage3DMoving.html

発展系としてスプライトシートを作って走るアニメを用いるのが考えられる。またいずれ。
それにしてもFlashを使わないってのはスマホ・タブレット対策。にも関わらず操作に矢印キーだのスペースキーだの用いるって時点でもう…。この対策もまたいずれ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。 またURLは投稿できません。(スパム対策)