- 浏览: 932495 次
- 性别:
- 来自: 山西
文章分类
最新评论
-
白小默:
你好 可以提供下源码DEMO吗,不知为何,我导出来的excel ...
jxls 使用模板文件导出生成excel -
zkzqzzz:
博主威武!
让微信二维码扫描您的APK -
zkzqzzz:
感谢博主 原来那些类都不是必须的 或者自己写!!博主真棒 ...
抢红包插件实现原理浅析 -
zkzqzzz:
博主 请问你的其他类在哪里呢?
抢红包插件实现原理浅析 -
zkzqzzz:
其他类在哪呢?
抢红包插件实现原理浅析
上一讲中介绍了如何让小鸟旋转跳上弹弓,以及利用外部力使小鸟弹飞出去,但是如果不做任何处理的话,小鸟就这么直冲冲的飞出屏幕了,本次我们就要让镜头时刻跟随小鸟来移动。下面是上一讲的连接,没有看过上一讲的朋友们请先了解一下。
关于如何让镜头跟随某一物体,我一开始的想法就是循环所有物理世界里的物体,以小鸟作为参照物,然后来计算其他物体的相对坐标,从而实现镜头跟随。但是觉得每次循环所有物体有些麻烦,于是我专门请教了box2djs的作者technohippy(因为box2dweb和box2djs的原理相同),得出的结论和我的想法一样,需要循环所有物体,technohippy表示坐标计算在游戏中很平常,不用太过在意。于是我将坐标计算封装为synchronous函数,加到了1.4.1的扩展js中,下面说一下这个函数的用法。
在上一讲中,当鼠标弹起的时候,在弹起事件的侦听函数downOver里给小鸟加了一个力,使得小鸟弹飞了出去。下面给downOver函数加一行代码
- backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
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;
- }
- }
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();
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);
- }
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);
- }
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);
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.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.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
本次就写到这里,碰撞检测还是留到下一讲吧,在第三讲中会让小鸟展示自己的威力,将屏幕上的猪猪撞得脑袋开花,敬请期待。
发表评论
-
IOS-HTML5-Video标签不能播放
2019-05-06 12:04 1500h5的video标签 在UIwebview ... -
七步配置phonegap+cordova+ionic开发环境
2016-12-19 16:21 687本文讲的是Android混合 ... -
iOS企业应用发布教程
2016-11-01 08:51 375iOS企业应用可以不经过app store发布,而可以直接在 ... -
IOS在自己网站发布APP(企业版$299上线流程)
2016-11-01 08:49 447最近刚上线一个企业内 ... -
xcode Run Script Command /bin/sh failed with exit code 1
2016-09-09 17:38 1224Xcode编译库报错:Command /bin/sh fai ... -
(二十三):Objective-C代码混淆扩展----安全攻防之代码混淆的一个小工具iOS安全攻防
2016-09-09 15:10 1172http://blog.csdn.net/yiyaaixu ... -
iOS安全–浅谈关于iOS加固的几种方法,代码混淆,类名方法名混淆等
2016-09-09 15:00 791转自:http://www.blogfshare ... -
Request获取用户真实IP
2016-09-05 11:26 562在Servlet里,获取客户端的IP地址的方法是:reque ... -
IOS UIAlertView(警告框)方法总结
2016-09-02 16:17 372摘要 在IOS8之后,UIAle ... -
iOS控件AlertView的使用
2016-09-13 10:46 426http://www.idev101.com/code/U ... -
iOS安全攻防(二十三):Objective-C代码混淆
2016-09-02 16:10 435iOS安全攻防(二十三):Objective-C ... -
iOS安全攻防(二十):越狱检测的攻与防
2016-09-02 15:23 624越狱检测的攻与防 在应用开发过程中,我们希望 ... -
iOS安全–IOS应用调试检测以及反调试
2016-09-02 15:05 1674一、检测调试 当一个应用被调试的时候,会给进程设置一个标识 ... -
iOS程序 防止动态调试和代码注入
2016-09-02 15:02 2325iPhone真实的运行环境是没有sys/ptrace.h抛出。 ... -
IOS 程序禁止被调试
2016-08-31 10:33 510IOS程序发布后,禁止被调试设置: 4.3.3开发环境 ... -
iOS设备是否越狱的判断代码
2016-08-31 10:36 507苹果是非常看重产品的安全性的,所以给用户设计了一套复杂的安全 ... -
苹果 App Store账号申请和证书申请发布app等知识
2016-07-21 15:27 806app store为开发者提供四种类型的申请: 个人i ... -
xcode 中生成和打包 ipa文件的方法和步骤
2016-07-21 15:15 504第一步:这里需要注意,要选择真机,否则Archive ... -
Xcode如何打包ipa安装包
2016-07-21 15:02 1257右键工程,选择“打开方式”->“X ... -
ios打包ipa的四种实用方法(.app转.ipa)
2016-07-21 15:01 4总结一下,目前.app包转为.ipa包的方法有以下几种: ...
相关推荐
该工程在MATLAB 2010a 上运行开发。所有的代码完全开源,您可以在了解了项目的架构之后,根据自己的想法进行二次开发。游戏的体验与安卓平台的运行体验一致。
C++设计模式--基于Qt4开源跨平台开发框架
好东西一定得分享,自己现阶段需要好好学习一下QT。C++设计模式--基于Qt4开源跨平台开发框架 完整清晰版中文PDF。好东西而且分数不贵!解压密码qt。
Android--开发--[开源项目]Android--开发--_炫酷的3D音乐播放器_各种特效OpenGL
c++设计模式--基于Qt4开源跨平台开发框架(源代码)c++设计模式--基于Qt4开源跨平台开发框架(源代码)c++设计模式--基于Qt4开源跨平台开发框架(源代码)c++设计模式--基于Qt4开源跨平台开发框架(源代码)c++设计模式--...
基于java的开发源码-smart-socket 开源的Java AIO框架.zip 基于java的开发源码-smart-socket 开源的Java AIO框架.zip 基于java的开发源码-smart-socket 开源的Java AIO框架.zip 基于java的开发源码-smart-socket ...
个人毕设-基于java开发的开源网址导航网站项目源码.zip个人毕设-基于java开发的开源网址导航网站项目源码.zip个人毕设-基于java开发的开源网址导航网站项目源码.zip个人毕设-基于java开发的开源网址导航网站项目源码...
开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列...
《C++设计模式--基于Qt4开源跨平台开发框架》涉及到qt的基础知识和容器语法的使用,qt中的设计模式,是很好的资料。现与大家一起分享。免费下载。 由于上传大小有限制,所以分为两部分。 第一部分下载地址: ...
Java版 愤怒的小鸟开源游戏
Keil uVision开发需要版权费,而网上开源的单片机、微控制器平台和资料比较少,有一些人用Eclipse。这篇文档讲解Eclipse + CDT + YAGARTO + J-link的STM32开源开发环境搭建。基于开源的精神,编写发布此文档,希望对...
基于java的开发源码-Solo Java开源博客.zip 基于java的开发源码-Solo Java开源博客.zip 基于java的开发源码-Solo Java开源博客.zip 基于java的开发源码-Solo Java开源博客.zip 基于java的开发源码-Solo Java开源博客...
基于java的开发源码-PublicCMS开源Java系统.zip 基于java的开发源码-PublicCMS开源Java系统.zip 基于java的开发源码-PublicCMS开源Java系统.zip 基于java的开发源码-PublicCMS开源Java系统.zip v基于java的开发源码-...
PHP实例开发源码—X-Cart Pro PHP购物车开源软件.zip PHP实例开发源码—X-Cart Pro PHP购物车开源软件.zip PHP实例开发源码—X-Cart Pro PHP购物车开源软件.zip
PHP实例开发源码—X-Cart Gold PHP购物车开源软件.zip PHP实例开发源码—X-Cart Gold PHP购物车开源软件.zip PHP实例开发源码—X-Cart Gold PHP购物车开源软件.zip
打地鼠游戏设计c 基于java的开发源码-md blockchain 开源java区块链平台.zip 基于java的开发源码-md blockchain 开源java区块链平台.zip 基于java的开发源码-md blockchain 开源java区块链平台.zip 基于java的开发...
基于java的开发源码-belog博客程序(Java开源博客系统).zip 基于java的开发源码-belog博客程序(Java开源博客系统).zip 基于java的开发源码-belog博客程序(Java开源博客系统).zip 基于java的开发源码-belog博客程序...
毕业设计项目开发-[信息办公]简易java开源订销管理系统_javainfo.zip
基于java的开发源码-iqq(开源 QQ 工具 iQQ).zip 基于java的开发源码-iqq(开源 QQ 工具 iQQ).zip 基于java的开发源码-iqq(开源 QQ 工具 iQQ).zip 基于java的开发源码-iqq(开源 QQ 工具 iQQ).zip 基于java的开发源码-...
基于java的开发源码-makagiga(开源个人桌面软件 Makagiga).zip 基于java的开发源码-makagiga(开源个人桌面软件 Makagiga).zip 基于java的开发源码-makagiga(开源个人桌面软件 Makagiga).zip 基于java的开发源码-...