Papervision 3Dでシンプル立体迷路を作る勉強

2008年10月28日 20:15

カーソルキーで動かしてください。

あんまり複雑にならないように、立体迷路を作ります。

XMLを読んで、地図を解析する。
XML通りに壁を作っていく（Cubeクラス）
Cubeオブジェクトに貼るマテリアル（テクスチャ）には取り急ぎ1枚の画像で間に合わせる。
移動キャラにはこちらもまずは紙飛行機オブジェクト（PaperPlane）を使う
紙飛行機はカーソルキーで左右に向き（角度）を変える
紙飛行機の移動はカーソルキー上下で行う
カメラが紙飛行機の後を追従していく
カメラは角度も紙飛行機の方角を狙い続ける
紙飛行機が壁に衝突したらそれ以上進まないようにする

まず、XMLの読み方としては、多くの方がEventDispatcherクラスを継承したXMLを読み込み完了したイベントを知らせるクラスを経由した後に解析する事が多いですが、ひとまず簡単に省略してしまいました。

外部に配置されているXMLファイルはこんな感じです。

0が通路で1が壁。それだけで試してみます。
一度Scene3Dクラスでシーンを作成してカメラはCamera3Dクラスを使います。
Viewport3Dではレンダリングする範囲などを決定させるために、第1,2引数にはステージサイズを入れておいて画面いっぱいを表示範囲にしてしまいましょう。この3つのオブジェクトはレンダリングする時に必要な要素になります。

さて、それらをレンダリングするエンジンとなるオブジェクトを作成するためにBasicRenderEngineクラスを使う、先ほどの3つのオブジェクトはこれによって関連付けられます。

DisplayObject3DクラスのインスタンスrootNodeを一つ作ったら、その中に『表示3Dオブジェクト』を入れてあげると階層3D空間を作る事が出来ます。

インスタンスrootNodeの中に紙飛行機PaperPlaneクラスのインスタンスをaddChild、さらにXMLを読み終わったら解析をして、配列にCubeオブジェクトを作成しながら、こちらもインスタンスrootNodeにaddChildさせるだけです。

Cubeオブジェクトの場合テクスチャを貼る場合は他クラスとちょっと違ってMaterialsListで各面に何を貼るか？を設定出来るのですが、複雑さを避けるため全面同じ画像を貼ります。

あとは、2重ループで1個づつCubeを配置してずらしていきます、このとき、出来たらXMLで書いた通りの順番に配置していきたいので、for文はデクリメントで回していきます。
csvデータの様に、カンマ（,）区切りなので、splitして配列に直していきます。
6列×5行なので、合計30回のループですね。

後で衝突判定用に別途配列wallArrayを作成して、マスが0の場合通路なので、Cubeは作らずに

wallArrayにはnullを代入します。

カメラがターゲットの向きを向きっぱなしにしたいため、三角関数atan2を使ってやっと出来たんですが、Papervision 3Dにはカメラにtargetって便利なプロパティがあるのを知らず、一生懸命計算してました。

衝突判定でまずやるべき事は、紙飛行機にどの壁（Cube）が当たっているか、とりあえず最も簡単なやり方、hitTestObjectメソッド（物理的にはこれではいけない場合もあるかもしれません）でいきます、先ほど作り直した配列内のCubeに総当たりで衝突判定をします。if文の条件ですが、配列にはCubeかnullが入っているため、まず配列に入っているオブジェクトの型はCubeなのか（nullじゃ無いのか）、それと、そのCubeが紙飛行機と衝突しているか、この2つがtrueの場合のみ、変数hitWallBlockに当たってるCubeを代入して、degreeLimitterメソッドを実行し、breakでそこでループ処理を中断します。

今回の移動制限の方法として、まず三角関数Math.atan2によって、紙飛行機と衝突している壁の距離が解るので、そこから2者の角度を出して180度逆の方向をはじき出します。
通常の移動量の分だけ、逆の方向にX,Z座標を移動させておけば、壁を突き抜けないようになります。

あと、3Dオブジェクトの移動はDisplayObject3DクラスのmoveLeft()などが使えるらしいんだけど、今回はそれを知らずにx,y,zで移動してしまいました。今日はとりあえずここまで。次回はColladaオブジェクトで迷路を徘徊したいです。

package {
	import flash.display.*;
	import flash.events.*;
	import org.papervision3d.view.*;
	import org.papervision3d.materials.*;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.core.geom.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;

public class Maze1 extends BasicView {
		private var myScene:Scene3D;
		private var myCamera:Camera3D;
		private var myViewport:Viewport3D;
		private var myRenderer:BasicRenderEngine;
		private var rootNode:DisplayObject3D;
		var myChara:PaperPlane=new PaperPlane(null,1);
		var myRotation:int=0;
		var myZ:int=0;
		var movePow:int=10;
		var blockSize:int=300;
		var wallArray:Array=new Array();
		var mazeXML:XML=new XML();
		var hitWallBlock:Cube=null;//キャラに衝突してる壁

public function Maze1():void {
			myViewport = new Viewport3D(stage.stageWidth, stage.stageHeight, false, false);
			addChild(myViewport);
			myScene = new Scene3D();//シーン生成  
			myRenderer = new BasicRenderEngine();//レンダリング専用クラス  
			myCamera = new Camera3D;//カメラオブジェクト生成  
			myCamera.zoom = 1;//カメラズーム  
			myCamera.focus = 500;//カメラフォーカス  
			rootNode = new DisplayObject3D("rootNode");//ルートノード  
			myScene.addChild(rootNode);//ルートノードを使うと階層化できる
			//キャラクターを設置して配置（ちょっとずらす）
			rootNode.addChild(myChara);
			myChara.z=250;
			myChara.y=-100;
			myChara.rotationY=-90;
			//カメラをキャラの位置に合わせる
			myCamera.x=myChara.x;
			myCamera.y=myChara.y+100;
			myCamera.z=myChara.z;
			mazeData();//迷路を作成
			addEventListener(Event.ENTER_FRAME,onEnterFrames);//毎フレーム処理
			stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownHandler);//キーボードイベント
			stage.addEventListener(KeyboardEvent.KEY_UP,keyUpHandler);//キーボードイベント
		}
		private function makeField():void {
			var material:BitmapFileMaterial = new BitmapFileMaterial( "./mazedata/kakine.jpg" );
			var mList : MaterialsList = new MaterialsList( {all : material } );
			for (var i:int=mazeXML.block.length()-1 ; i>=0 ; i--) {
				var blocks:String=String((mazeXML.block[Number(i)]).toString());
				var blockArray:Array=blocks.split(",");
				wallArray[int(i)]=new Array();//ブロックの行を配列に
				for (var v:String=0 in blockArray) {
					if(blockArray[int(v)]=="1"){
					//迷路の壁を作成
					var wall:Cube=new Cube(mList,blockSize,blockSize,blockSize,1,1,1);
					rootNode.addChild(wall);
					wall.x=-blockSize*int(v);
					wall.z=-blockSize*int(i);
					wallArray[int(i)].push(wall);
					}else{
					wallArray[int(i)].push(null);
					}
				}
			}
		}
		
		private function keyDownHandler(event:KeyboardEvent):void{
			if(event.keyCode==39){
				myRotation=5;//右へ
			}else if(event.keyCode==37){
				myRotation=-5;//左へ
			}
			if(event.keyCode==38){
				myZ=movePow;
			}else if(event.keyCode==40){
				myZ-=movePow;
			}
		}
		
		private function keyUpHandler(event:KeyboardEvent):void{
			if(event.keyCode==39 || event.keyCode==37){
			myRotation=0;
			}
			if(event.keyCode==38 || event.keyCode==40){
			myZ=0;
			}
		}
		
		private function onEnterFrames(event:Event):void {
			myRenderer.renderScene(myScene, myCamera, myViewport);
			mover();
		}
		
		function mover():void {
		myChara.rotationY+=myRotation;
		myChara.x+=(myZ)*Math.cos((90-myChara.rotationY)*Math.PI/180);
		myChara.z+=(myZ)*Math.sin((90-myChara.rotationY)*Math.PI/180);
		
		//camera
		myCamera.x=-100*Math.cos((90-myChara.rotationY)*Math.PI/180)+myChara.x;
		myCamera.z=-100*Math.sin((90-myChara.rotationY)*Math.PI/180)+myChara.z;
		myCamera.target.x=myChara.x;
		myCamera.target.y=myChara.y;
		myCamera.target.z=myChara.z;
		
		//衝突判定
		for(var i:String in wallArray){
			for(var v:String in wallArray[int(i)]){
				//キャラクタと壁の衝突判定
				if(wallArray[int(i)][int(v)] is Cube && myChara.hitTestObject(Cube(wallArray[int(i)][int(v)]))){
					hitWallBlock=wallArray[int(i)][int(v)];
					degreeLimitter();
					break;
				}
			}
		}
		
		}

前の詳細を見る Papervision 3Dでシンプル立体迷路を作る勉強次の詳細を見る

Flash AS3 学習リスト

デザイナー、秋葉秀樹のブログ

Papervision 3Dでシンプル立体迷路を作る勉強

秋葉秀樹(アキバヒデキ)