Wonderfulで始めるAlternativa3D

中級(コントローラー編)2.コントローラーをカスタマイズ

あまり、好みでは無いキー操作
.swf
(要 FlashPlayer10)

前回作成した、車をコントロールするWalkControllerですが、何せWalkControllerな為、車をコントロールするにはデフォルトのキーセットでは多々不具合がありました。
ということで、今回は、このWalkControllerでsetDefaultBindings()を使わずに、自分好みのキーと動作を関連付けて自分仕様のCarControllerを作成してみたいと思います。

以下が今回セットする、キーと動作です。

W or (↑)UP ACTION_FORWARD 前に移動
Z or (↓)DOWN ACTION_BACK 後に移動
A or (←)LEFT ACTION_YAW_LEFT 左に回転(z軸で正方向に回転)
D or (→)RIGHT ACTION_YAW_RIGHT 右に回転(z軸で負方向に回転)
SHIFT ACTION_ACCELERATE 加速

キーのバインド

前回作成した、Controllerのインスタンスを作るまでは、同じで問題なし。
その後の「キーボードのキー(Keyboard.KEY)を関連付ける(Bind)する」以降を修正します。
まず、デフォルトのキーセットは使わないので、walkController.setDefaultBindings()は削除します。
次に、
bindKey(keyCode:uint, action:String)メソッドを使用し、必要な動作にキーを関連付けしていきます。(keyCodeは、alternativa.utilsパッケージの中のKeyboardUtilsクラスの定数を使用し、actionは ObjectControllerの定数を使用します。)

なお、アクションに複数のキーを関連付ける事は可能ですが、キーに複数のアクションを関連付ける事はできません。

			//キーボードのキー(Keyboard.KEY)を関連付ける(Bind)する	
			walkController.mouseEnabled=false
			walkController.bindKey(KeyboardUtils.W,ObjectController.ACTION_FORWARD);
			walkController.bindKey(KeyboardUtils.UP,ObjectController.ACTION_FORWARD);
			walkController.bindKey(KeyboardUtils.Z,ObjectController.ACTION_BACK);
			walkController.bindKey(KeyboardUtils.DOWN,ObjectController.ACTION_BACK);
			walkController.bindKey(KeyboardUtils.A,ObjectController.ACTION_YAW_LEFT);
			walkController.bindKey(KeyboardUtils.LEFT,ObjectController.ACTION_YAW_LEFT);
			walkController.bindKey(KeyboardUtils.D,ObjectController.ACTION_YAW_RIGHT);
			walkController.bindKey(KeyboardUtils.RIGHT,ObjectController.ACTION_YAW_RIGHT);
			walkController.bindKey(KeyboardUtils.SHIFT,ObjectController.ACTION_ACCELERATE);

初期位置の設定

コントローラーを使って、3Dオブジェクトをコントロールすると、3Dオブジェクトの位置情報は3Dオブジェクトのx,y,zやcoordsプロパティを使用する事はできなくなります。また、すでにx,y,zに位置情報が代入されていても、0,0,0にリセットされます。 なので、WalkController.coordsプロパティを使用して、3Dオブジェクトの初期位置を設定しないといけません。
実際には、WalkController.processInput()メソッド実行時にWalkController.coordsに置き換えられます。
なので、WalkController.processInput()を実行しない、または実行後に、3Dオブジェクトの位置を修正する事は可能です。)

			//初期位置を設定する
			walkController.coords=new Point3D(0,0,25);		
	

完成サンプル

ということで、自分好みのキーコントロールが出来るようになった、サンプル。
片手で操作(↑を押しながら、←→)で方向操作
ちなみに、止まっていても回転できちゃういます。


.swf
(要 FlashPlayer10)
.src

bindKeyを使わず、自前でイベントを管理し、カスタマイズする

上記完成サンプルでは、止まっていても、回転できてしまいます。
これを、前進、後進している時にのみ回転するようにする為には、bindKeyを使わずに自前でイベントを管理し、各行動の為のメソッドを使用しないといけません。

			//キーボードのキー(Keyboard.KEY)でメソッドを実行する
			walkController.mouseEnabled=false
			
			this.stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown)
			this.stage.addEventListener(KeyboardEvent.KEY_UP,onKeyUp)

			var moveFlag:Boolean=false

			function onKeyDown(e:KeyboardEvent) {
				switch(e.keyCode) {
					case KeyboardUtils.W:
					case KeyboardUtils.UP:
						moveFlag=true
						walkController.moveForward(true)
						break;
					case KeyboardUtils.Z:
					case KeyboardUtils.DOWN:
						moveFlag=true
						walkController.moveBack(true)
						break;
					case KeyboardUtils.A:
					case KeyboardUtils.LEFT:
						if (moveFlag) {
							walkController.yawLeft(true)
						}
						break;
					case KeyboardUtils.D:
					case KeyboardUtils.RIGHT:
						if (moveFlag) {
							walkController.yawRight(true)
						}
						break;
					case KeyboardUtils.SHIFT:
						walkController.accelerate(true)
						break;
				}


			}

			function onKeyUp(e:KeyboardEvent) {
				switch(e.keyCode) {
					case KeyboardUtils.W:
					case KeyboardUtils.UP:
						moveFlag=false
						walkController.moveForward(false)
						break;
					case KeyboardUtils.Z:
					case KeyboardUtils.DOWN:
						moveFlag=false
						walkController.moveBack(false)
						break;
					case KeyboardUtils.A:
					case KeyboardUtils.LEFT:
						walkController.yawLeft(false)
						break;
					case KeyboardUtils.D:
					case KeyboardUtils.RIGHT:
						walkController.yawRight(false)
						break;
					case KeyboardUtils.SHIFT:
						walkController.accelerate(false)
						break;
				}
			}


	


.swf
(要 FlashPlayer10)
.src

FlyControllerをカスタマイズ

次は、FlyControllerを使用してスペースシャトルが宇宙を飛行するっぽいものを作成してみます。
作り方はWalkControllerとほとんど変わりませんが、上昇、下降や左右へのひねりを追加しています。
また、FlyController固有のacceleration(加速)、deceleration(減速)プロパティを使用して、慣性っぽい表現をさせてます。

注意する点として、FlyControllerは、WalkControllerのように、コンストラクタでコントロールする3Dオブジェクトを指定する事はできません。(仕様なのか、実装ミスなのかは定かではありません^^;)
なので、flyController.object=jetとインスタンス作成後にobjectプロパティに3Dオブジェクトを代入しています。

			//Controllerのインスタンスを作る
			var flyController:FlyController=new FlyController(this.stage)
			flyController.object=jet
	
			//キーボードのキー(Keyboard.KEY)を関連付ける(Bind)する	
			flyController.mouseEnabled=false
			flyController.bindKey(KeyboardUtils.W,		ObjectController.ACTION_UP);
			flyController.bindKey(KeyboardUtils.Z,		ObjectController.ACTION_DOWN);
			flyController.bindKey(KeyboardUtils.A,		FlyController.ACTION_ROLL_LEFT);
			flyController.bindKey(KeyboardUtils.D,		FlyController.ACTION_ROLL_RIGHT);

			flyController.bindKey(KeyboardUtils.UP,		ObjectController.ACTION_FORWARD);
			flyController.bindKey(KeyboardUtils.LEFT,	ObjectController.ACTION_YAW_LEFT);
			flyController.bindKey(KeyboardUtils.RIGHT,ObjectController.ACTION_YAW_RIGHT);

			flyController.bindKey(KeyboardUtils.SHIFT,ObjectController.ACTION_ACCELERATE);

			//移動スピードを設定する
			flyController.speed = 5000;
			flyController.acceleration=5000;
			flyController.deceleration=1000;

			flyController.coords=new Point3D(0,-1400,25)
	

カメラを追従させる

また、今回は移動範囲が広いので、カメラをコントロールする3Dオブジェクトの中にネストして追尾するようにしています。

			//メインのカメラをジェットの後方に配置
			jet.addChild(template.camera)
			template.camera.coords=new Point3D(100,-500,200)
	

完成サンプル

(↑)UP ACTION_FORWARD 前に移動
(←)LEFT ACTION_YAW_LEFT 左に回転(z軸で正方向に回転)
(→)RIGHT ACTION_YAW_RIGHT 右に回転(z軸で負方向に回転)
SHIFT ACTION_ACCELERATE 加速
W ACTION_UP 上昇
Z ACTION_DOWN 下降
A ACTION_ROLL_LEFT 左ひねり
D ACTION_ROLL_RIGHT 右ひねり

十字キーが無いと、動かせんませんw
.swf
(要 FlashPlayer10)
.src

これも実際には、ひねりで方向が変わったり、上向き下向き回転で上昇下降させるようにしたいところですが、色々手間がかかるので、実践・応用編か実験編でいつかアップします。

Menu

入門編

初級編

7. Sprite3Dとは?

8. MovieClipMaterial

中級(インタラクティブ編)

1. インタラクティブなオブジェクト

2. 反応するモデルと反応しないモデル

3. サーフェースごとのマウスイベント

4. フェースごとのマウスイベント

中級(コントローラー編)

1. コントローラーとは?

2. コントローラーをカスタマイズ

3. 重力・衝突判定

4. LookAt

中級(カメラ&View編)

1. カメラZOOMとFOV

2. 複数のカメラとView

3. Viewのクリッピング

中級(メッシュ作成編)

1. 頂点を作成する

2. 面を作成する

3. 表面を作成する

4. UVを設定する

5. メッシュを作る

実践・応用編

1. 読み込んだ画像で絵本を作る

3. GoogleNexusOne

4. 3Dスロット

5. ルービックキューブ

実験編

1. 3dsの読み込みと操作

2. イラレで作ったpathを押し出す

3. 押し出しによるText3D

4. 自作のマテリアルクラスを作る

5. フラットシェーディングマテリアル

6. 衝突判定を利用した跳ね返り

7. Sprite3Dによるパーティクル表現

8. Sprite3Dでピクセルレンダー

9. Objectのグロー、ブラー