flash.geom.Matrix3Dによる表示オブジェクトの制御

ActionScriptを始めて２ヶ月の『すたーりーわーくす』のやんちゃに見られるけど、真面目な男子です。

今まで役に立った事や詰まった箇所を、今後ActionScriptを始める人が見て役に立つような事を記載していこうと思ってます！
でも、まだまだ初心者なので、間違っている箇所があれば、ご指摘していただけたら幸いです！

今回はMatrix3Dにおいて、初心者でも理解出来るようなWeb上の資料がなかったので、自分のメモ代わりとしても書いておきます。

まず、Matrix3Dとは、

Matrix3D クラスは、3 次元（3D）表示オブジェクトの位置と方向を決定する変換マトリックスを表します。マトリックスでは、平行移動（x 軸、y 軸および z 軸に沿った位置変更）、回転、拡大 / 縮小などの変換機能を実行できます。

ActionScript 3.0 コンポーネントリファレンスより。。。

変換マトリックスとか難しく書いていますが、用は、今までx、yで表示オブジェクトを制御してきたのと同様に、Matrix3Dというクラスでも制御できますって理解したのだけど、あってるのかな・・・。
さらに、Matrix3Dでは、回転、拡大／縮小も出来ます。

とりあえず、回転等は抜きにして、x、y座標の制御から。

flash on 2009-7-7 - wonderfl build flash online

 
package {

	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.geom.Matrix3D;
	import flash.events.Event;
	
	
	public class TestMatrix extends Sprite {

 		private var box:Sprite;
		private var mat:Matrix3D = new Matrix3D();

		public function TestMatrix() {

			box = new Sprite();
			box.graphics.beginFill( 0x00ff00 );
			box.graphics.drawRect( -50, -50, 100, 100 );
			box.graphics.endFill();
			addChild( box );

			box.x = stage.stageWidth/2;
			box.y = stage.stageHeight/2;

			box.transform.matrix3D = mat;

			addEventListener( Event.ENTER_FRAME, onEnter );

		}

		private function onEnter( e:Event ):void {

			var v:Vector.<Number> = Vector.<Number>([
				1, 0, 0, 0,
				0, 1, 0, 0,
				0, 0, 1, 0,
				mouseX, mouseY, 0, 1
			]);
			box.transform.matrix3D.rawData = v;
		}

	}
}

注意が必要なのは、
box.transform.matrix3D = mat;
の箇所。
DisplayObject系の表示オブジェクトはnewした時点では、
2Dの方のMatrixがプロパティとしてセットされていて、
3Dの方のプロパティはnullなのでセットしとく。

後は、ENTER_FRAMEで指定の箇所にxとyをセットして、
更新してあげるだけ。

指定の箇所はVectorクラスで言う、12番目と13番目。
rawDataメソッドはMatrix3Dの16桁の数字を読み書きメソッド。

これで、終わり。

今の段階ではMatrix3Dで制御する恩恵が感じないけど、
これがもっと回転や拡大／縮小が重なると計算が増え、
重たくなるのでMatrix3Dが重宝します。
それはまた今度！

因に、イージングをつけたバージョンはこれ↓

forked from: flash on 2009-7-7 - wonderfl build flash online

 
	public class TestMatrix extends Sprite {
		
		private var box:Sprite;
		private var mat:Matrix3D = new Matrix3D();
		private var nowVe:Vector.<Number> = new Vector.<Number>(16);
		
		public function TestMatrix() {
			
			box = new Sprite();
			box.graphics.beginFill( 0x00ff00 );
			box.graphics.drawRect( -50, -50, 100, 100 );
			box.graphics.endFill();
			addChild( box );
			
			box.x = stage.stageWidth/2;
			box.y = stage.stageHeight/2;
			
			box.transform.matrix3D = mat;
			
			addEventListener( Event.ENTER_FRAME, onEnter );
		}
		
		private function onEnter( e:Event ):void {
			
			var v:Vector.<Number> = Vector.<Number>([
				1, 0, 0, 0,
				0, 1, 0, 0,
				0, 0, 1, 0,
				mouseX, mouseY, 0, 1
			]);
			for( var i:uint = 0; i < 16; i++ ){
				nowVe[i] += ( v[i] - nowVe[i] ) * 0.2;
			}
			
			box.transform.matrix3D.rawData = nowVe;
		}
	}

なんか毎回for分で16回回すのが何となく気に入らないので、
いい方法があれば、誰か教えてください！

Check　

Comments