中級（インタラクティブ編）.1 インタラクティブなオブジェクト　- Wonderflで始めるAlternativa3d - Tips

TOP > TIPS > Alternativa3D > 中級（インタラクティブ編）.1 インタラクティブなオブジェクト

Wonderfulで始めるAlternativa3D

中級（インタラクティブ編）.1 インタラクティブなオブジェクト

Alternativa3Dのインタラクティブと言えば、どのサイトを見てもWalkControllerしかないような感じで書かれていますが、ちゃんと、MouseEvent3Dが用意され、Object3Dで使用できるようになっています。
ただ、若干クセがあり、Flash APIの様な感覚では、ん？っという所が何点かありますので、順を追って解説していきます。

プリミティブのマウスイベント

インタラクティブと言えば、まず思いつくのがロールオーバー、ロールアウト、クリックかと思いますので、まずはプリミティブにこれらのマウスイベントを設定してみます。

interactiveとbuttonMode

Alternativa3Dでマウスイベントを有効にする為には、まず最初に、Viewのinteractiveプロパティをtrueにします。 (interactiveプロパティは、デフォルトではfalseになっており、Mouseイベントを受け付けません)

またViewクラスは、flash.display.Spriteの派生クラスですので、指カーソルを有効にする場合は、buttonModeをtrueにします。（mouseEnabledやmouseChildrenは、viewのinteractiveプロパティの切り替えで自動で行われます。）

	//-------------------------------------------------------
	//プリミティブのロールオーバー、クリックを有効にする為 
	//viewのbuttonModeとinteractiveをtrueにする 
	//-------------------------------------------------------
	template.view.buttonMode = true; 
	template.view.interactive = true;

プリミティブの作成

ロールオーバーさせるプリミティブを作成し、MouseEvent3Dのリスナーを登録します。

	// マテリアルを作成します
	var material:FillMaterial = new FillMaterial(0xFF0000);
	
	// プリミティブを作成します
	var box:Box = new Box(600, 600, 600);
	box.cloneMaterialToAllSurfaces(material);
	
	// 3Dシーンのルートに追加します
	template.scene.root.addChild(box);

	//-------------------------------------------------------
	//プリミティブにロールオーバー、クリックのリスナーを追加
	//-------------------------------------------------------
	box.addEventListener(MouseEvent3D.CLICK, onClick);
	box.addEventListener(MouseEvent3D.MOUSE_OVER, onMouseOver);
	box.addEventListener(MouseEvent3D.MOUSE_OUT, onMouseOut);

ロールオーバー、ロールアウト、クリックの各動作を設定

各動作がわかるように、ロールーオーバーで半透明に、ロールアウトで不透明、クリックで色が変わるようにします。なお、Object3Dには、alphaプロパティがありませんので、マテリアルで半透明、不透明を設定しています。


	var colorCounter:uint=0;
	var colorArray:Array=[0xFF0000,0x0000FF,0x00FF00,0xFF00FF,0xFFFF00,0x00FFFF]

	//-------------------------------------------------------
	//ロールオーバー、クリック動作を設定
	//-------------------------------------------------------
	function onClick(e:MouseEvent3D):void {
		colorCounter=(colorCounter+1)%6;
		material.color=colorArray[colorCounter];
		box.cloneMaterialToAllSurfaces(material);
	}

	function onMouseOver(e:MouseEvent3D):void {
		material=new FillMaterial(colorArray[colorCounter],0.5);
		box.cloneMaterialToAllSurfaces(material);
	}

	function onMouseOut(e:MouseEvent3D):void {
		material=new FillMaterial(colorArray[colorCounter],1);
		box.cloneMaterialToAllSurfaces(material);
	}

.src