イナヅマTVログ

ActionScript, Matrix3Dのお勉強 – 2「Matrix3Dを使って2D回転」

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;
}

targetz 値を設定することで Matrix3D を有効化しています。
targetMatrix3D 参照を変数 matrix3d へ。
matrix3d.appendRotation を使うことで回転させています。

Matrix3D は Flash Player 10, AIR 1.5 から。

今回はココまで。
もうちょっとブラッシュアップしたいことがあれやこれや..

コメントは受け付けていません。