HTML5ゲーム開発-Angry Birds-オープンソース講座(2)-鳥のレンズをたどる

前回の講座では、鳥を回転させたり、パチンコの上でジャンプさせたり、外力を利用して飛び出す方法を紹介しましたが、何もしなければ鳥はそのまま画面から飛び出してしまいます。この記事 今回は鳥の動きをカメラに追従させます。以下に前回の講義へのリンクを貼っておきますので、まだ前回の講義を読んでいない方はぜひご覧ください。

html5ゲーム開発-Angry Birds-オープンソース講座(1)-ポップアップバードに飛び込む

http://blog.csdn.net/lufy_legend/article/details/7765599

カメラを特定のオブジェクトに追従させる方法に関して、私の最初のアイデアは、物理世界のすべてのオブジェクトをループし、鳥を参照オブジェクトとして使用し、その後、他のオブジェクトの相対座標を計算してレンズ追従を実現することでした。ただ、毎回全オブジェクトをループするのはちょっと面倒だなと思い、box2djsの作者であるtechnohippyさんに具体的に聞いてみたところ（box2dwebとbox2djsの原理は同じなので）、たどり着いた結論は以下の通りでした。私の場合、すべてのオブジェクトをループする必要があります。座標計算はゲーム内にあるので、あまり心配しないでください。そこで、座標計算を同期関数としてカプセル化し、1.4.1 の拡張 js に追加しました。この関数の使い方について説明します。

前回の講義では、マウスが上に跳ね上がった際に、bounceイベントのlisten関数downOverで鳥に力が加わり、鳥が飛び出しました。次に、downOver関数にコード行を追加します

backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);

次に、ループ再生関数は次のとおりです

function onframe(){
	backLayer.x = LGlobal.width*0.5 - (bird.x + bird.getWidth()*0.5);	
	if(backLayer.x > 0){
		backLayer.x=0;
	}else if(backLayer.x < LGlobal.width - 1600){
		backLayer.x = LGlobal.width - 1600;
	}
	LGlobal.box2d.synchronous();
	if(bird && bird.x > backLayer.getWidth()){
		backLayer.removeChild(bird);
		bird = null;
	}
}

まず、鳥の座標を介してbackLayerレイヤーの相対座標を計算します。 backLayer の座標がゲーム画面外に移動するのを防ぐためです。

そして、鍵となるのは次のコード行です

LGlobal.box2d.synchronous();

これは、物理世界のすべてのオブジェクトの座標の再計算を実現します
最後に、鳥が画面の外に出ると、鳥は削除されます。

上記の 1600 は効果を見るためなので、ゲーム世界は少し長めに設定されています。

以下はレンダリングとテスト接続です。鳥を撮影して、カメラが鳥と一緒に動くかどうかを確認できますか?

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample03/index.html

効果をより明確にするために、豚といくつかのオブジェクト

まず Pig クラスを作成します

function Pig(){
	base(this,LSprite,[]);
	var self = this;
	var bitmap = new LBitmap(new LBitmapData(imglist["pig1"]));
	self.addChild(bitmap);
	self.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);
}

次に、setStage 関数を作成してオブジェクトを作成します

function setStage(img,x,y,rotate,m){
	var stageLayer = new LSprite();
	backLayer.addChild(stageLayer);
	var bitmap = new LBitmap(new LBitmapData(imglist[img]));
	stageLayer.addChild(bitmap);
	stageLayer.x = x;
	stageLayer.y = y;
	stageLayer.addBodyPolygon(bitmap.getWidth(),bitmap.getHeight(),1,m,.4,.2);
	if(rotate != 0)stageLayer.setRotate(rotate*Math.PI/180);
}

上記の準備により、最初に gameInit 関数をいくつかのオブジェクトをゲームに追加するのは非常に簡単です。次のコード

	setStage("stage03",1070,430,0,10);
	setStage("stage01",995,300,90,1);
	setStage("stage01",1140,300,90,1);
	setStage("stage02",1070,200,0,1.5);
	setStage("stage04",1090,200,0,2);
	var pig = new Pig();
	pig.x = 1150;
	pig.y = 400;
	backLayer.addChild(pig);

を追加して、5 つのオブジェクトと豚を追加します。効果は図

に示すとおりです。ただし、これらを追加したため、上の画像は実際には表示されません。ゲーム開始時の座標は (0,0) なので、まずカメラをゲーム画面の右側に移動します。ゲーム画面。

backLayer.x = LGlobal.width - 1600;
LGlobal.box2d.synchronous();

言うまでもなく、backLayer の座標を変更しても、同期関数を呼び出す機能は、やはり物理世界の座標を再計算することです。

その後、画像が表示されたら、少し待ってから、カメラを鳥が座っている場所に戻します。実装方法は次のとおりです

LTweenLite.to(backLayer,1,
		{ 
			x:0,
			delay:2,
			onUpdate:function(){
				LGlobal.box2d.synchronous();
			},
			onComplete:run,
			ease:Sine.easeIn
		}
	);

ご覧のとおり、LTweenLite イージングとパラメーター遅延を使用しています。 2 は、2 秒のイージング遅延後に実行し、イージング プロセス中に backLayer の x 座標を 0 に戻し、このようにして物理世界の座標を計算することを意味します。最初は画面の右側に表示されますが、すぐに左側に移動して、その効果を見てみましょう。ご覧のとおり、lufylegend ライブラリを box2dweb と組み合わせて使用​​するのは非常に簡単です。物理ゲームを作成してみませんか

このチュートリアルのソースコードは以下に示されています。原則として、lufylegend ライブラリと box2dweb は自分でダウンロードして設定する必要があります。ライブラリ 1.4.1 の拡張。

http://fsanguo.comoj.com/download.php?i=AngryBirds2.rar

今回はここまでです。衝突検出は次の講義に任せましょう。第 3 回の講義では、鳥たちはその力を誇示し、画面上の豚を粉々に叩きのめしますので、ご期待ください。

上記は、HTML5 ゲーム開発 - Angry Birds - オープンソース講座 (2) - 鳥のレンズをたどる の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.ん）！