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を使わないってのはスマホ・タブレット対策。にも関わらず操作に矢印キーだのスペースキーだの用いるって時点でもう…。この対策もまたいずれ。