HTML5 game development-Angry Birds-Open Source lecture (2)-Follow the shots of birds

The previous lecture introduced how to let the bird spin and jump onto the slingshot, and use external force to let the bird fly out. However, if no processing is done, the bird will fly out of the screen in such a way, this time, we will let the camera move with the birds. The following is the connection from the previous lecture. If you have not read the connection from the previous lecture, please first understand it.

HTML5 game development-Angry Birds-Open Source lecture (1)-jump into the pop-up birds

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

I first thought about how to let a lens follow a certain object, that is, to cycle all objects in the physical world, use birds as the reference object, and then calculate the relative coordinates of other objects, to achieve camera follow. However, I thought it was a little troublesome to loop all objects every time, So I specifically consulted the author of box2djs, mongohippy (because box2dweb and box2djs share the same principle) and came to the conclusion that they were the same as my thoughts, it is necessary to loop all objects. Hippy indicates that coordinate calculation is common in the game, so don't worry too much. So I encapsulated coordinate computing as a synchronous function and added it to 1.4.1 extension Js. The following describes the usage of this function.

In the previous lecture, when the mouse is started, the Interception Function downover of the event is used to add a force to the bird so that the bird can fly out. The following code is added to the downover function.

backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);

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

To explain the code, we first use the coordinates of birds to calculate the relative coordinates of the backlayer layer. The if below is to prevent the coordinates of the backlayer from being removed from the game screen.

Then the key is the following line of code:

LGlobal.box2d.synchronous();

It re-calculates the coordinates of all objects in the physical world.
Finally, remove the bird from the screen.

The above 1600 sets the game world a little longer to see the effect.

Below is the connection with the test. You can shot the bird and see if the camera is moving along with the bird?

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

To make the effect more obvious, add a pig and several objects.

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

Create another setstage function to create an object.

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

With the above preparations, it is easy to add several 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);

Add 5 objects and a pig.

However, in this case, the above figure is not actually visible, because I have added these objects to the right of the game screen, and the coordinates at the beginning of the game are (0, 0 ), we see the picture on the left of the game screen, So I first moved the camera to the right of the game screen.

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

It is unnecessary to change the coordinates of the backlayer. The function of calling the synchronous function is still to re-calculate the coordinates of the physical world.

Then, when the screen appears, after a pause, pull the camera back to the position 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});

As you can see, I still use ltweenlite for easing. The parameter delay: 2 indicates that the easing delay will be executed after 2 seconds, and then the X coordinate of the backlayer will be changed back to 0 through easing, in the process of easing, synchronous is called to calculate the coordinates of the physical world. In this way, the camera displays the right side of the screen at the beginning, and then quickly moves to the left side, now let's take a look at the effect.

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

As you can see, it is so easy to use the lufylegend library and box2dweb to create a physical game.

The following is the source code of this tutorial. For the old rule, you need to download and configure the lufylegend library and box2dweb by yourself. For the Extension Section of library 1.4.1, please download it in the first lecture.

Http://fsanguo.comoj.com/download.php? I =angrybirds2.rar

This time I will write it here. I will leave it to the next lecture. In the third lecture, I will let the birds show their power and hit the pig on the screen to blossom in the head. Please stay tuned.