2D回転なら DisplayObjcect.rotate
を使えば簡単に実行できます。
わざわざ Matrix3D
を使うのは、任意の点を中心に2D回転させたいという野望(ちょっと大げさ願望位かな)があるからです。
DisplayObjcect.rotate では基準点を中心に回転します。
任意の点を中心にするには rotate プロパティを使わずに Matrix をゴニョゴニョゴニョしないといけません。
これってかなり面倒くさそう。
Matrix3D
では appendRotation
という関数が使用でき第三引数で回転の中心が設定できます。
Matrix3D.appendRotation
public function appendRotation(degrees:Number, axis:Vector3D, pivotPoint:Vector3D = null):voidパラメーター
degrees:Number — 回転の角度です。
axis:Vector3D — 回転の軸または方向です。通常の軸は、X_AXIS(Vector3D(1,0,0))、Y_AXIS(Vector3D(0,1,0))および Z_AXIS(Vector3D(0,0,1))です。
pivotPoint:Vector3D (default = null) — オブジェクトの回転の中心を決定するポイントです。オブジェクトのデフォルトの回転軸は基準点です。
pivotPoint:Vector3D
のデフォルトは null
でこの場合は基準点を中心に回転します。
2D回転させるためには Vector3D.Z_AXIS
を使います。
Demo : Rotate any point
クリックしたポイントが中心点になります。
回転する対象と中心点の距離はクリックした時点のものになります。
そのため回転対象が画面外に消えてしまうことがあります、その時は慌てず(?)対象が近くにきたところでクリックしてあげるとその内画面内に戻ってきます。
作り込みが甘いのはお許しください。
import flash.display.MovieClip; import flash.display.Shape; import flash.display.Sprite; import flash.geom.Matrix3D; import flash.geom.Vector3D; import flash.events.Event; import flash.events.MouseEvent; // ステージの真ん中 var stageCenterX:Number = stage.stageWidth * .5; var stageCenterY:Number = stage.stageHeight * .5; // 回転対象 var target:Sprite = new Sprite(); target.graphics.clear(); target.graphics.beginFill(0xffcc00); target.graphics.drawRect(0, 0, 80, 40); target.graphics.endFill(); target.x = stageCenterX; target.y = stageCenterY; target.z = 1; // 基準点用のマーク var ellipse:Shape = new Shape(); ellipse.graphics.clear(); ellipse.graphics.beginFill(0xff0000); ellipse.graphics.drawEllipse(3,3,8,8); ellipse.graphics.endFill(); target.addChild(ellipse); addChild(target); var matrix3d:Matrix3D = target.transform.matrix3D; // 中心転用のマーク var circle:Shape = new Shape(); circle.graphics.clear(); circle.graphics.beginFill(0x000000); circle.graphics.drawCircle(0, 0, 6); circle.graphics.endFill(); circle.x = stageCenterX; circle.y = stageCenterY; addChild(circle); // 中心点と回転対象の間のライン var line:Shape = new Shape(); addChild(line); // ループ addEventListener(Event.EXIT_FRAME, onLoop); function onLoop (e:Event):void { matrix3d.appendRotation(7, Vector3D.Z_AXIS, new Vector3D(circle.x, circle.y,0,0)); line.graphics.clear(); line.graphics.lineStyle(0.5, 0xff6633); line.graphics.moveTo(circle.x, circle.y); line.graphics.lineTo(target.x, target.y); } // Clickで中心点が移動 stage.addEventListener(MouseEvent.CLICK, onStageClicked); function onStageClicked (e:MouseEvent):void { circle.x = e.stageX; circle.y = e.stageY; } |
target
の z
値を設定することで Matrix3D
を有効化しています。
target
の Matrix3D
参照を変数 matrix3d
へ。
matrix3d.appendRotation
を使うことで回転させています。
Matrix3D は Flash Player 10, AIR 1.5 から。
今回はココまで。
もうちょっとブラッシュアップしたいことがあれやこれや..