最后一个寒假说没就没。。。
话说我等Creator 的物理引擎等了好久好久，终于。。。。。。还是没等到。。。。。。
我们今天就用碰撞检测系统和一些算法简单的模拟一下2D平台动作的物理特性吧
先来看一下我们的主角
是不是很可爱啊
所以我们要给她起一个可爱的名字，
就叫她大马猴吧。。。
水平移动：
我们先来实现一下按键控制大马猴左右移动的效果
用渲染节点里的单色Sprite（后面的平台也用这个）制作一个地面平台，把大马猴放在地面上
新建MonkeyControl脚本，挂载在大马猴节点上
MonkeyControl.js
cc.Class({
extends: cc.Component,
properties: {
speed: 0,
maxSpeed:0,
acce: 0,
direction: 0
},
onLoad: function () {
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},
onDestroy() {
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},
onKeyDown(event) {
switch (event.keyCode) {
case cc.KEY.a:
case cc.KEY.left:
this.direction = -1;
break;
case cc.KEY.d:
case cc.KEY.right:
this.direction = 1;
break;
}
},
onKeyUp(event) {
switch (event.keyCode) {
case cc.KEY.a:
case cc.KEY.left:
case cc.KEY.d:
case cc.KEY.right:
this.direction = 0;
break;
}
},
update: function (dt) {
if (this.direction === 0) {
if (this.speed > 0) {
this.speed -= this.acce * dt;
if (this.speed <= 0) this.speed = 0;
}
else if (this.speed < 0) {
this.speed += this.acce * dt;
if (this.speed >= 0) this.speed = 0;
}
}
else {
this.speed += (this.direction > 0 ? 1 : -1) * this.acce * dt;
if (Math.abs(this.speed) > this.maxSpeed) {
this.speed = this.speed > 0 ? this.maxSpeed : -this.maxSpeed;
}
}
this.node.x += this.speed * dt;
},
});
我们在大马猴的控制脚本里加了四个属性
speed：x轴的速度
maxSpeed：x轴的最大速度，避免大马猴越跑越快
acce：x轴加速度
direction：按键控制方向，-1：左（按下左键），1：右（按下右键），0：不动（松开按键）
通常对物体运动的位置计算会放在update函数里，核心逻辑就是：位移=速度x时间，速度=加速度x时间
update这个函数是一个循环周期函数，每隔一个固定的时间（dt）就会调用一次
这里的if，else部分就是为了得出本次update的速度，然后根据速度乘时间更新本次大马猴的位置
如果感觉不好理解，是时候拿出高中物理课本复习一遍了
设置一下参数：
效果如下：
跳跃运动
突然脑子里响起了广播体操的音乐。。。
修改MonkeyControl.js
cc.Class({
extends: cc.Component,
properties: {
speed: cc.v2(0, 0),
maxSpeed: cc.v2(0, 0),
acce: 0,
direction: 0,
jumpSpeed:0,
gravity:0,
groundY: 0
},
onLoad: function () {
this.groundY = this.node.y;
this.jumping = false;
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},
onDestroy() {
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},
onKeyDown(event) {
switch (event.keyCode) {
case cc.KEY.a:
case cc.KEY.left:
this.direction = -1;
break;
case cc.KEY.d:
case cc.KEY.right:
this.direction = 1;
break;
case cc.KEY.w:
case cc.KEY.up:
if(!this.jumping){
this.jumping = true;
this.speed.y = this.jumpSpeed;
}
}
},
onKeyUp(event) {
switch (event.keyCode) {
case cc.KEY.a:
case cc.KEY.left:
case cc.KEY.d:
case cc.KEY.right:
this.direction = 0;
break;
}
},
update: function (dt) {
if (this.jumping) {
this.speed.y += this.gravity * dt;
if (Math.abs(this.speed.y) > this.maxSpeed.y) {
this.speed.y = this.speed.y > 0 ? this.maxSpeed.y : -this.maxSpeed.y;
}
}
if (this.direction === 0) {
if (this.speed.x > 0) {
this.speed.x -= this.acce * dt;
if (this.speed.x <= 0) this.speed.x = 0;
}
else if (this.speed.x < 0) {
this.speed.x += this.acce * dt;
if (this.speed.x >= 0) this.speed.x = 0;
}
}
else {
this.speed.x += (this.direction > 0 ? 1 : -1) * this.acce * dt;
if (Math.abs(this.speed.x) > this.maxSpeed.x) {
this.speed.x = this.speed.x > 0 ? this.maxSpeed.x : -this.maxSpeed.x;
}
}
this.node.x += this.speed.x * dt;
this.node.y += this.speed.y * dt;
if(this.node.y <= this.groundY){
this.node.y = this.groundY;
this.jumping = false;
}
},
});
这里我们给大马猴又加了几个属性
jumpSpeed：起跳速度
gravity：重力
groundY：大马猴落到地面时的Y轴位置
同时把speed和maxSpeed都变成了二维的
测试参数：
效果如下：
利用碰撞检测实现平台动作
首先我们再添加一个平台节点，然后给地面，平台和大马猴都添加碰撞组件
修改MonkeyControl.js
cc.Class({
extends: cc.Component,
properties: {
speed: cc.v2(0, 0),
maxSpeed: cc.v2(0, 0),
acce: 0,
direction: 0,
jumpSpeed: 0,
gravity: 0,
},
onLoad: function () {
cc.director.getCollisionManager().enabled = true;
cc.director.getCollisionManager().enabledDebugDraw = true;
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
this.jumping = false;
this.collisionX = 0;//x轴是否碰撞，0：没有碰撞，-1：左方有碰撞，1：右方有碰撞
this.collisionY = 0;
this.touchingNumber = 0;//同时碰撞物体的个数
},
onDestroy() {
cc.director.getCollisionManager().enabled = false;
cc.director.getCollisionManager().enabledDebugDraw = false;
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},
onKeyDown(event) {
switch (event.keyCode) {
case cc.KEY.a:
case cc.KEY.left:
this.direction = -1;
break;
case cc.KEY.d:
case cc.KEY.right:
this.direction = 1;
break;
case cc.KEY.w:
case cc.KEY.up:
if (!this.jumping) {
this.jumping = true;
this.speed.y = this.jumpSpeed;
}
}
},
onKeyUp(event) {
switch (event.keyCode) {
case cc.KEY.a:
case cc.KEY.left:
case cc.KEY.d:
case cc.KEY.right:
this.direction = 0;
break;
}
},
onCollisionEnter: function (other, self) {
this.node.color = cc.Color.RED;
this.touchingNumber++;
// 1st step
// get pre aabb, go back before collision
var otherAabb = other.world.aabb;
var otherPreAabb = other.world.preAabb.clone();
var selfAabb = self.world.aabb;
var selfPreAabb = self.world.preAabb.clone();
// 2nd step
// forward x-axis, check whether collision on x-axis
selfPreAabb.x = selfAabb.x;
otherPreAabb.x = otherAabb.x;
if (cc.Intersection.rectRect(selfPreAabb, otherPreAabb)) {
if (this.speed.x < 0 && (selfPreAabb.xMax > otherPreAabb.xMax)) {
this.node.x = otherPreAabb.xMax - this.node.parent.x;
this.collisionX = -1;
}
else if (this.speed.x > 0 && (selfPreAabb.xMin < otherPreAabb.xMin)) {
this.node.x = otherPreAabb.xMin - selfPreAabb.width - this.node.parent.x;
this.collisionX = 1;
}
this.speed.x = 0;
other.touchingX = true;
return;
}
// 3rd step
// forward y-axis, check whether collision on y-axis
selfPreAabb.y = selfAabb.y;
otherPreAabb.y = otherAabb.y;
if (cc.Intersection.rectRect(selfPreAabb, otherPreAabb)) {
if (this.speed.y < 0 && (selfPreAabb.yMax > otherPreAabb.yMax)) {
this.node.y = otherPreAabb.yMax - this.node.parent.y;
this.jumping = false;
this.collisionY = -1;
}
else if (this.speed.y > 0 && (selfPreAabb.yMin < otherPreAabb.yMin)) {
this.node.y = otherPreAabb.yMin - selfPreAabb.height - this.node.parent.y;
this.collisionY = 1;
}
this.speed.y = 0;
other.touchingY = true;
}
},
onCollisionExit: function (other) {
this.touchingNumber--;
if (this.touchingNumber === 0) {
this.node.color = cc.Color.WHITE;
}
if (other.touchingX) {
this.collisionX = 0;
other.touchingX = false;
}
else if (other.touchingY) {
other.touchingY = false;
this.collisionY = 0;
this.jumping = true;
}
},
update: function (dt) {
if (this.collisionY === 0) {//如果Y轴没有碰撞
this.speed.y += this.gravity * dt;
if (Math.abs(this.speed.y) > this.maxSpeed.y) {
this.speed.y = this.speed.y > 0 ? this.maxSpeed.y : -this.maxSpeed.y;
}
}
if (this.direction === 0) {
if (this.speed.x > 0) {
this.speed.x -= this.acce * dt;
if (this.speed.x <= 0) this.speed.x = 0;
}
else if (this.speed.x < 0) {
this.speed.x += this.acce * dt;
if (this.speed.x >= 0) this.speed.x = 0;
}
}
else {
this.speed.x += (this.direction > 0 ? 1 : -1) * this.acce * dt;
if (Math.abs(this.speed.x) > this.maxSpeed.x) {
this.speed.x = this.speed.x > 0 ? this.maxSpeed.x : -this.maxSpeed.x;
}
}
if (this.speed.x * this.collisionX > 0) {
this.speed.x = 0;
}
this.node.x += this.speed.x * dt;
this.node.y += this.speed.y * dt;
},
});
碰撞检测系统有三个检测碰撞的函数，分别是：
onCollisionEnter(other,self):碰撞体刚碰撞时触发
onCollisionStay(other,self):碰撞体持续碰撞时触发
onCollisionExit(other):碰撞体分开时触发
他们传入的参数other和self指的是什么呢？
指的就是他们的碰撞组件
比如我们在onCollisionEnter函数里写上这样两行代码
other.node.color = cc.Color.RED;
self.node.color = cc.Color.GREEN;
就可以实现让两个碰撞组件的节点变色的效果
那碰撞组件（这里用的是cc.BoxCollider）里还有什么属性方法呢？
通常我们遇到这种问题时，第一反应就是去查一下api，可是人生充满意外，Creator的api并不全，很多东西都没有
这里我给新手介绍一个查看属性的方法
我们这次不用模拟器，选择浏览器（谷歌浏览器）运行，按下F12启动调试窗口，然后在onCollisionEnter函数的第一行代码旁边单击设置一个断点，然后刷新浏览器
这样我们的程序就会运行到断点的位置，如下图
这时就可以进行相应的变量查看、测试
在控制台输入other，敲回车，就可以得到other组件的全部属性方法，真的是全部哦，一点都不会少（有时候函数名忘了，不查api，通过这种方式获得提示也是一种方法）
这里我们用到的属性主要是world里的几个
aabb：axis-aligned bounding box，轴对齐包围盒,也就是碰撞检测的区域
aabb.x、aabb.y:碰撞盒的位置，矩形的中心位置
aabb.xMin、aabb.xMax、aabb.yMin、aabb.yMax:碰撞盒的边缘位置，矩形的四个边
preAabb的属性跟aabb相同，代表着碰撞盒的上一次位置，我们利用这个”上一次位置”就可以实现“前面有障碍物，大马猴走不过去”的效果了
简单的思路就是：如果发生了不可移动的碰撞（障碍物），就退回到“上一次位置”
现在我们再来看MonkeyContro.js的代码
onCollisionEnter里我们做的事情就是保存上一次计算碰撞组件的位置，如果发生碰撞了就返回上一次位置，分别进行了x轴检测和y轴检测，如果想加深理解，可以尝试自己画个图
算了，我知道你也不会画
上图就是X轴碰撞的情况，Y轴碰撞的情况类似
最后来看一下效果吧
跟随平台移动
镜头跟随
添加触摸按键
虚拟摇杆
找个天气好的日子再写
扫一扫
1147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
