トップ > FIVe3D > FIVe3D Sprite2D の活用法

FIVe3D Sprite2D の活用法

FIVe3D は通常 Sprite3D や Graphics3D などを主に利用するのが一般的かなと思う。

個人的に少し気になったクラスが Sprite2D 。

3D ライブラリなのに、なぜ 2D ?

ちょっと疑問に思ったりしない?

さらに、これも個人的なんだが、3D オブジェクトと言っても形を変形して欲しくない時が時折あるんだよね。

実は、Sprite2D クラスを利用することで、この 2 つの疑問と要望が繋がったりする。

サンプル

このサイトをご覧頂くには最新の Flash Player Plug-in をお使いのブラウザにインストールする必要があります。
Flash Player Plug-in はこちらからダウンロードする事が出来ます(無料)。


ピンクの図形が、Sprite3D 。
オレンジの図形が、Sprite2D 。

見て分かるように、オレンジの図形は変形せず、純粋に等倍の大きさで奥行き感を表現している。
こういう表現も欲しかったんだよね。FIVe3D やるねー!

ソースはこちら

Sprite2D には、TextField や Sprite を addChild することが可能。そして、その Sprite2D を Sprite3D の中に addChild してあげれば良いだけ。まったく簡単。


package {
	
	//クラス
	import flash.display.StageScaleMode;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	//FIVe3D v2.1
	import five3D.display.Scene3D;
	import five3D.display.Sprite3D;
	import five3D.display.Sprite2D;
	import five3D.utils.Drawing;
	
	public class Main extends Sprite {
		
		private var sc3D:Scene3D;
		private var base3D:Sprite3D;
		private var sp3D:Sprite3D;
		private var sp2D_txt:Sprite2D;
		private var sp2D_sp:Sprite2D;
		private var TXT:TextField;
		private var FMT:TextFormat;
		private var SP:Sprite;
		
		//コンストラクタ
		public function Main() {
			
			//ステージサイズ設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			//シーン設定
			sc3D = new Scene3D();
			sc3D.x = stage.stageWidth / 2;
			sc3D.y = stage.stageHeight / 2;
			sc3D.viewDistance = 200;	//透視投影
			sc3D.ambientLightIntensity = 0.5; //明るさの強さ設定
			addChild(sc3D);
			
			//ベースオブジェクト生成
			base3D = new Sprite3D();
			base3D.childrenSorted = true; //Z ソートON
			sc3D.addChild(base3D);
			
			//Sprite3Dオブジェクト生成
			sp3D = new Sprite3D();
			sp3D.graphics3D.beginFill(0xFF0099);
			sp3D.graphics3D.drawRoundRect(-20, -20, 40, 40, 20, 20);
			sp3D.graphics3D.endFill();
			sp3D.z = 100;
			sp3D.flatShaded = true;	//奥行きによって明るさを変更
			base3D.addChild(sp3D);
			
			//Sprite2Dオブジェクト生成(テキスト配置)
			sp2D_txt = new Sprite2D();
			sp2D_txt.x = 100;
			//テキスト生成
			FMT= new TextFormat();
			FMT.font = "Times New Roman";
			FMT.size = 12;
			TXT = new TextField();
			TXT.autoSize = TextFieldAutoSize.LEFT;
			TXT.text = "Text";
			TXT.textColor = 0x000000;
			TXT.embedFonts = true;
			sp2D_txt.addChild(TXT);
			base3D.addChild(sp2D_txt);
			
			//Sprite2Dオブジェクト生成(スプライト配置)
			sp2D_sp = new Sprite2D();
			sp2D_sp.z = -100;
			//スプライト生成
			var SP:Sprite = new Sprite();
			SP.graphics.beginFill(0xFF9900);
			SP.graphics.drawRoundRect(-20, -20, 40, 40, 20, 20);
			SP.graphics.endFill();
			sp2D_sp.addChild(SP);
			base3D.addChild(sp2D_sp);
			
			//イベント設定
			base3D.addEventListener(Event.ENTER_FRAME, base3DEnterFrame);
		}
		
		private function base3DEnterFrame(e:Event):void {
			e.target.rotationY += 2;
		}
	
	}
}


上記ソースには「FIVe3D」が別途必要。また「Times New Roman」フォントも一部埋め込んでいる。
あと、ついでに、その他のちょこちょことした発見したプロパティについてもメモしておく。


sc3D.ambientLightIntensity = 0.5


Sprite3D を奥行き?(オブジェクトの背面?)によって明るさを変更することができるのだが、その明るさの強弱の付け方を設定できるようだ。


base3D.childrenSorted = true; //Z ソートON


base3D の中にあるオブジェクトを Z の値に合わせてリアルタイムで重なり順を変更してくれる。
サンプルを見て分かるように手前にあるオブジェクトが必ず最前面に配置されている。これは超便利!


sp3D.flatShaded = true;	//奥行きによって明るさを変更


flatShaded を true にすると、奥行き?(オブジェクトの背面?)によって明るさをリアルタイムに変更してくれる。

この記事をブックマークしておく

コメント:0

コメント投稿

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

この情報を記憶する

トップ > FIVe3D > FIVe3D Sprite2D の活用法

記事検索
カテゴリ
RSSフィード

このページの先頭へ戻る