以前我们玩游戏的时候，有时候需要让小鸟在弹弓上转个圈或者让别人帮着把它弹出屏幕之外。但如果什么都不做，那小鸟可能就会直接飞出屏幕，看不清游戏画面了。现在咱们就学习下怎么让摄像镜头跟随着小鸟移动，这样就能更好地观察游戏画面
镜头跟随实现方法
玩游戏时，画面跟着某物漂移挺有用的。最初我们可以用那只鸟儿当标准，遍历所有的物件，计算下其他物品相对位置，这样画面就能跟上了。虽然这种方法可行，但是每回都要全查一遍所有物件也太繁琐了！
技术交流与优化
搞定这个问题，我找Box2DJS的高手Technohippy求救过。他跟我说算坐标这事儿在玩儿游戏时挺常见的，别那么紧张！然后，我就在v1.4.1版本的扩展js中弄出了个记算坐标的同步函数。接下来咱们就来看看怎么用这个功能~
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
synchronous函数用法
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 backLayer.getWidth()){
backLayer.removeChild(bird);
bird = null;
}
}
现在可得加上codes，当鼠标往上移（也就是downOver的时候），给小鸟加点力！咋整？看看小鸟在哪里呗，算一算 backLayer地区该咋对着小鸟，还有别让它跑远了。
接着关键步骤是调用下面的代码：
javascriptLGlobal.box2d.synchronous();synchronous();
这个小程序是用来搞定物体坐标的事儿！只要小鸟跑出了手机屏，我们就要毫不留情地删掉它，这样才能保持画面整洁有序。
优化效果与测试
想要让鸟儿在画面里动起来更加自然？那就加些动物！比如猪什么的，先搞个Pig类出来，再来个setStage函数弄出点儿小东西就行。
在gameInit函数中加入以下代码：
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); }//加入5个物体和一个猪
setStage();
function setStage(img,x,y,rotate,m){ var stageLayer = new LSprite(); backLayer.addChild(stageLayer); var bitmap = new LBitmap(new LBitmapData(imglist)); 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); }
搞定！一打开游戏你就能看到跟图片上一样的效果咯。但是注意，原本那些元素都在画面右侧，而且起始视角是左侧。想要看清新添加的内容，得先把视角转到那边去
镜头移动实现
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);想让画风像真的一样？挺简单的，动一下背图层的位置就能实现画面的运动感了，加上同步小助手，保证物体在现实世界中移动到适合的位置。
好，接着看，播完这画面先等两秒钟哦(简单来说就叫做等待)。然后再用LTween Lite的缓动库做个慢动作特效给镜头。只要把延迟参数设成2，瞬间搞定。现在轮到让镜头从右向左缓缓溜达过去了，这时候就要用到sync函数算一下它该往哪走。这样一来，镜头就能稳稳当当地跑遍镜头了
总结与展望
本期课程就是让你们学会让小鸟在镜头中动来动去的技巧！而且还添了只小猪和其他可爱的元素，画面瞬间就变丰富了不少。下次课我们就要聊聊撞车检测的话题说不定到时候还能看到小鸟怎么把小猪撞飞的画面！记得来看~
backLayer.x = LGlobal.width - 1600; LGlobal.box2d.synchronous();。
原文链接：https://www.icz.com/technicalinformation/web/2024/04/14897.html，转载请注明出处~~~
评论0