HTML5 Game Development-Angry Birds-Open Source Lecture (2)-Follow the Birds' Lens-H5 Tutorial-php.cn

HTML5 Game Development-Angry Birds-Open Source Lecture (2)-Follow the Birds' Lens

黄舟

Release： 2017-03-02 13:44:33

Original

2079 people have browsed it

In the previous lecture, we introduced how to make the bird spin and jump onto the slingshot, and how to use external force to make the bird fly out. However, if nothing is done, the bird will just rush straight away. It flew out of the screen. This time we have to let the camera follow the movement of the bird. Below is the link to the previous lecture. For those who have not read the previous lecture, please check it out first.

html5 Game Development-Angry Birds-Open Source Lecture (1)-Jump into the pop-up bird

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

Regarding how to make the camera follow a certain object, my initial idea was to loop through all the physical world Object, use the bird as a reference object, and then calculate the relative coordinates of other objects to achieve lens tracking. But I felt that it was a bit troublesome to loop through all objects every time, so I specifically asked technohippy, the author of box2djs (because the principles of box2dweb and box2djs are the same), and the conclusion I came to was the same as mine. It is necessary to loop through all objects. technohippy said that coordinate calculation is in the game. It's very common, don't worry too much. So I encapsulated the coordinate calculation as a synchronous function and added it to the extended js of 1.4.1. Let’s talk about the usage of this function.

In the previous lecture, when the mouse bounced up, a force was added to the bird in the listening function downOver of the bounce event, causing the bird to fly out. Next, add a line of code to the downOver function

backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);

Copy after login

Then, the loop playback function is as follows

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;
	}
}

Copy after login

Explain the code. First, calculate the relative coordinates of the backLayer layer through the coordinates of the bird. The following if is In order to prevent the coordinates of backLayer from moving out of the game screen.

Then the key is the following line of code

LGlobal.box2d.synchronous();

Copy after login

It realizes the recalculation of the coordinates of all objects in the physical world
Finally, when the bird moves out of the screen, the bird is eliminated.

The above 1600 is to see the effect, so the game world is set a little longer.

The following is the rendering and test connection. You can shoot the bird out and see if the camera moves with the bird?

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

##In order to make the effect more obvious, let’s add a pig and several objects.

First create a new Pig class

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);
}

Copy after login

Then create a setStage function , to create objects

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);
}

Copy after login

With the above preparation, it is very simple to add a few objects to the game. Add the following code to the gameInit function at the beginning of the game

	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);

Copy after login

means adding 5 An object and a pig, the effect is as shown in the figure

However, if this is the case, the above picture cannot actually be seen, because I added these objects to the game The right side of the screen, and the coordinates are (0,0) when the game starts. The picture we see is the left part of the game screen, so I first moved the camera to the right side of the game screen.

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

Copy after login

Needless to say, changing the coordinates of backLayer, the function of calling the synchronous function is still to recalculate the coordinates of the physical world.

Then, when the picture appears, after a short pause, pull the camera back to where the bird is sitting. The implementation method is as follows

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

Copy after login

As you can see, I still used LTweenLite Easing, the parameter delay:2 means that the easing is executed after a delay of 2 seconds, and then the x coordinate of the backLayer is changed back to 0 through easing, and synchronous is called during the easing process to calculate the coordinates of the physical world. This is achieved. The camera initially displays the right side of the screen, and then quickly moves to the left. Without further ado, let’s take a look at the effect.

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

Everyone As you can see, it is so simple to use the lufylegend library combined with box2dweb to create a physics game. Why not give it a try
HTML5 Game Development-Angry Birds-Open Source Lecture (2)-Follow the Birds Lens

The source code of this tutorial is given below. The old rules, lufylegend library and box2dweb You need to download and configure it yourself. Please download the extension part of library 1.4.1 in the first lecture.

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

This time I will write At this point, collision detection is left to the next lecture. In the third lecture, the bird will show its power and hit the pigs on the screen until their heads explode. Please stay tuned.

The above is the content of HTML5 Game Development-Angry Birds-Open Source Lecture (2)-Following the Bird's Lens, and more related content Please pay attention to the PHP Chinese website (www.php.cn)!