html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头

转载 2012年11月26日 11:48:22

《html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟》
《html5游戏开发-愤怒的小鸟-开源讲座(三)-跳入弹出的小鸟》



上一讲中介绍了如何让小鸟旋转跳上弹弓,以及利用外部力使小鸟弹飞出去,但是如果不做任何处理的话,小鸟就这么直冲冲的飞出屏幕了,本次我们就要让镜头时刻跟随小鸟来移动。下面是上一讲的连接,没有看过上一讲的朋友们请先了解一下。

html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟

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


关于如何让镜头跟随某一物体,我一开始的想法就是循环所有物理世界里的物体,以小鸟作为参照物,然后来计算其他物体的相对坐标,从而实现镜头跟随。但是觉得每次循环所有物体有些麻烦,于是我专门请教了box2djs的作者technohippy(因为box2dweb和box2djs的原理相同),得出的结论和我的想法一样,需要循环所有物体,technohippy表示坐标计算在游戏中很平常,不用太过在意。于是我将坐标计算封装为synchronous函数,加到了1.4.1的扩展js中,下面说一下这个函数的用法。

在上一讲中,当鼠标弹起的时候,在弹起事件的侦听函数downOver里给小鸟加了一个力,使得小鸟弹飞了出去。下面给downOver函数加一行代码

[javascript] view plaincopy
  1. backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
然后,循环播放函数如下

[javascript] view plaincopy
  1. function onframe(){  
  2.     backLayer.x = LGlobal.width*0.5 - (bird.x + bird.getWidth()*0.5);     
  3.     if(backLayer.x > 0){  
  4.         backLayer.x=0;  
  5.     }else if(backLayer.x < LGlobal.width - 1600){  
  6.         backLayer.x = LGlobal.width - 1600;  
  7.     }  
  8.     LGlobal.box2d.synchronous();  
  9.     if(bird && bird.x > backLayer.getWidth()){  
  10.         backLayer.removeChild(bird);  
  11.         bird = null;  
  12.     }  
  13. }  
解释一下代码,首先通过小鸟的坐标,来计算backLayer层的相对坐标,下面的if是为了不让backLayer的坐标移出游戏的屏幕。

然后关键就是下面一行代码

[javascript] view plaincopy
  1. LGlobal.box2d.synchronous();  
它实现了物理世界里所有物体的坐标的重新计算
最后,当小鸟移出屏幕之后,将小鸟消除。

上面的1600是为了看出效果所以将游戏世界设置的长了一点。


下面是效果图和测试连接,你可以将小鸟射出,看看镜头是不是跟着小鸟一起移动起来了?

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


为了让效果更明显一些,下面来加入一个猪和几个物体

首先新建一个Pig类

[javascript] view plaincopy
  1. function Pig(){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.     var bitmap = new LBitmap(new LBitmapData(imglist["pig1"]));  
  5.     self.addChild(bitmap);  
  6.     self.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  7. }  
再新建一个setStage函数,来创建物体

[javascript] view plaincopy
  1. function setStage(img,x,y,rotate,m){  
  2.     var stageLayer = new LSprite();  
  3.     backLayer.addChild(stageLayer);  
  4.     var bitmap = new LBitmap(new LBitmapData(imglist[img]));  
  5.     stageLayer.addChild(bitmap);  
  6.     stageLayer.x = x;  
  7.     stageLayer.y = y;  
  8.     stageLayer.addBodyPolygon(bitmap.getWidth(),bitmap.getHeight(),1,m,.4,.2);  
  9.     if(rotate != 0)stageLayer.setRotate(rotate*Math.PI/180);  
  10. }  
有了上面的准备,下面给游戏加入几个物体就很简单了,在游戏开始时的gameInit函数里加入下面代码

[javascript] view plaincopy
  1. setStage("stage03",1070,430,0,10);  
  2. setStage("stage01",995,300,90,1);  
  3. setStage("stage01",1140,300,90,1);  
  4. setStage("stage02",1070,200,0,1.5);  
  5. setStage("stage04",1090,200,0,2);  
  6. var pig = new Pig();  
  7. pig.x = 1150;  
  8. pig.y = 400;  
  9. backLayer.addChild(pig);  
表示加入5个物体和一个猪,效果如图

但是,只是这样的话,上面这张图其实是看不到的,因为我把这些物体都加到了游戏屏幕的右边,而游戏开始时坐标是(0,0),我们看到的画面是游戏屏幕左边的部分,所以我一开始首先将镜头移动到游戏屏幕的右边。

[javascript] view plaincopy
  1. backLayer.x = LGlobal.width - 1600;  
  2. LGlobal.box2d.synchronous();  
改动backLayer的坐标就不用说了,调用synchronous函数的作用依然是将物理世界的坐标重新计算。

然后,当画面出现后,稍作停顿后,就将镜头拉回到小鸟坐在位置,实现方法如下

[javascript] view plaincopy
  1. LTweenLite.to(backLayer,1,  
  2.         {   
  3.             x:0,  
  4.             delay:2,  
  5.             onUpdate:function(){  
  6.                 LGlobal.box2d.synchronous();  
  7.             },  
  8.             onComplete:run,  
  9.             ease:Sine.easeIn  
  10.         }  
  11.     );  
大家可以看到,我还是用了LTweenLite缓动,参数delay:2表示,缓动延时2秒后执行,然后通过缓动将backLayer的x坐标变回0,在缓动的过程中调用synchronous,计算物理世界的坐标,这样就实现了镜头一开始显示的是屏幕右边,然后再快速移动到左边,废话不多说,现在看看效果吧。

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



大家可以看到,用lufylegend库件结合box2dweb制作物理游戏竟然如此简单,还不快尝试一下大笑

下面给出本次教程的源码,老规矩,lufylegend库件和box2dweb需要自己下载配置一下,库件1.4.1的扩展部分请到第一讲中下载。

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

java实现愤怒的小鸟游戏之Java swing图形界面开发游戏项目愤怒的小鸟源码及实现方式详解

今天给大家介绍一下Java swing实现游戏愤怒的小鸟的过程,完整源码下载地址在最下方,老规矩,先看运行结果: 下面我们来看看代码: /* * To change this template,...
  • llqqxf
  • llqqxf
  • 2016年07月13日 16:43
  • 4223

Cocos2d-X 愤怒的小鸟的实现------开始界面(二)

1、头文件中 #include #include "cocos2d.h" #include "Scence.h" #include "DefineHeader.h" #include"...
  • u011269801
  • u011269801
  • 2014年09月28日 21:21
  • 1205

Unity2S 愤怒的小鸟教程

Unity 2D Flappy Bird Tutorial Foreword前言 In this Tutorial we will learn how easy it is to make...
  • u012132482
  • u012132482
  • 2016年01月05日 00:45
  • 1278

[Unity3D]Unity3D游戏开发之《愤怒的小鸟》弹弓实现

各位朋友,大家晚上好, 我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei。今天我们来做一个高端大气上档次的东西。我相信大家都玩过一款叫做《愤怒的小鸟》的...
  • qinyuanpei
  • qinyuanpei
  • 2014年05月04日 02:09
  • 7364

Cocos2d Box2d 物理引擎实现愤怒的小鸟

Cocos2d  Box2d 物理引擎实现愤怒的小鸟   这里我们修改HelloWorldScene场景,在这里实现 我们的思路是首先初始化一些刚体,,然后实现点击屏幕产生小鸟,松开小鸟,小...
  • wy_boke
  • wy_boke
  • 2014年12月20日 17:26
  • 840

NOIP2016提高组 第二天第三题 愤怒的小鸟angrybirds 题解

题目描述 Kiana最近沉迷于一款神奇的游戏无法自拔。 简单来说,这款游戏是在一个平面上进行的。 有一架弹弓位于(0,0)处,每次Kiana可以用它向第一象限发射一只红色的小鸟,小鸟们的飞行轨迹...
  • u011056504
  • u011056504
  • 2016年11月28日 12:49
  • 1912

Cocos2d-x3.8.1制作愤怒的小鸟

//使用Cocostudio对拉弓动作进行处理 //设计很重要,设计的好可以事半功倍 //Cocostudio设计如下: //对主角bird可以作为右绳子的子节点 //并且各个节点的顺序我已经排好...
  • qq_33747722
  • qq_33747722
  • 2016年10月06日 16:39
  • 617

个性二维码,三分钟搞定,愤怒的小鸟!

具体调用的是一个api接口,传输的json数据。 接口演示地址: http://original-ad.com/qrCodeApi/qrCodeApi_Demo.html 以愤怒的小鸟作...
  • cheng110110
  • cheng110110
  • 2014年02月20日 12:07
  • 2062

[Unity3D]Unity3D游戏开发之《愤怒的小鸟》弹弓实现

欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei。今天我们来做一个高端大气上档次的东西。我相信大家都玩过一款叫做《愤怒的小鸟》的游戏,这款游戏之所以能够受到玩家的喜...
  • weini_xiong
  • weini_xiong
  • 2014年05月09日 06:28
  • 1106

Unity3D学习——(二)愤怒的小鸟项目总结

花了几天时间,边做愤怒的小鸟,变熟悉Unity3D 今天做完了,算是对Unity3D开发2D游戏有了一个了解 Unity3D确实强大了,省了很多功夫。 说说在开发过程中遇到的难题: (一)...
  • UnSkyToo
  • UnSkyToo
  • 2013年06月24日 01:16
  • 4895
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头
举报原因:
原因补充:

(最多只允许输入30个字)