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

原创 2012年07月25日 08:27:41

注:文章中很多链接已经失效了,愤怒的小鸟的demo在lufylegend.js引擎下载包中有源码,需要源码的请自己下载。

lufylegend.js引擎官网:http://lufylegend.com/lufylegend



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

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

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


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

在上一讲中,当鼠标弹起的时候,在弹起事件的侦听函数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层的相对坐标,下面的if是为了不让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的坐标就不用说了,调用synchronous函数的作用依然是将物理世界的坐标重新计算。

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

LTweenLite.to(backLayer,1,
		{ 
			x:0,
			delay:2,
			onUpdate:function(){
				LGlobal.box2d.synchronous();
			},
			onComplete:run,
			ease:Sine.easeIn
		}
	);
大家可以看到,我还是用了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


本次就写到这里,碰撞检测还是留到下一讲吧,在第三讲中会让小鸟展示自己的威力,将屏幕上的猪猪撞得脑袋开花,敬请期待。

Cocos2d-X 愤怒的小鸟实现----加载页面(一)

1、头文件中 #include #include "cocos2d.h" #include "Scence.h" #include "DefineHeader.h" #include ...
  • u011269801
  • u011269801
  • 2014-09-28 21:09:38
  • 663

Html5<em>愤怒的小鸟</em>源码

Android高仿<em>愤怒的小鸟</em>游戏源码 立即下载 上传者: Geminilyj 时间: 2013-11-04 综合评分: 4 积分/C币:3 JavaScript操作<em>canvas</em>制作前端H5小游戏——Flappy Bird...
  • 2018年04月08日 00:00

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

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

Unity3D学习 愤怒的小鸟之小鸟动画(八)

目标: 完成小鸟在地面上眨眼睛的动画 1.  新建一个Plane来制作小鸟动画,将包含3帧小鸟动画的图片贴到Plane上,然后设置下Plane的Transform属性。 为了让这个Pl...
  • ariel7321
  • ariel7321
  • 2012-07-19 23:25:34
  • 9235

c# 愤怒的小鸟

  • 2017年10月16日 19:15
  • 2.4MB
  • 下载

HTML5游戏开发进阶指南.pdf

全书共分12 章,第1 章介绍了本书相关的HTML5的诸多新特性,包括在<em>canvas</em> 上...《<em>愤怒的小鸟</em>》的游戏,全面介绍了物理引擎的概念,以及在游戏中使用物理引擎的...
  • 2018年04月11日 00:00

html5模仿微信打飞机游戏源码

打飞机html + js + <em>canvas</em> android游戏开发之打飞机源代码 立即下载 上传者...html5游戏开发-<em>愤怒的小鸟</em>-开源讲座(二)-跟随小鸟的镜头 html5模仿微信打飞机...
  • 2018年04月11日 00:00

基于java知识制作的愤怒的小鸟游戏

  • 2015年03月17日 12:35
  • 5.46MB
  • 下载

Unity5_仿愤怒的小鸟游戏

http://v.youku.com/v_show/id_XOTMxMjAzNjA4.html
  • uniquewonderq
  • uniquewonderq
  • 2015-05-29 15:01:52
  • 1155

Unity3D游戏-愤怒的小鸟游戏源码和教程(二)

Unity愤怒的小鸟游戏教程(二) 本文提供全流程,中文翻译。Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) A...
  • ChinarCSDN
  • ChinarCSDN
  • 2018-02-10 01:33:15
  • 248
收藏助手
不良信息举报
您举报文章:html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头
举报原因:
原因补充:

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