本
文
摘
要
简介cocos creator1.10.2制作桌球游戏, 使用了物理引擎, 与碰撞系统, 接下来, 让我们看看制作过程
首先, 先看一下我们的场景树的结构, 按照场景树, 搭建我们的场景
由于游戏用有大量的碰撞, 列如: 桌球间的碰撞, 桌球和球桌的碰撞, 桌球和袋口的碰撞, 所有先打开cocos creator中的物理引擎, 打开enbale_phy.js, 将其挂载到项目根结点上
cc.Class({
extends: cc.Component,
properties: {
is_debug: false, // 是否显示调试信息;
// 重力加速度是一个向量, 有方向的,2D, Vec重力加速度的大小;
gravity: cc.p(0, -320), // 系统默认的
},
// use this for initialization
onLoad: function () {
// 游戏引擎的总控制
// cc.Director, cc.director 区别呢？
// 大写的cc.Director是一个类, 小写cc.direcotr全局的实例
cc.director.getPhysicsManager().enabled = true; // 开启了物理引擎
// 独立的形状，打开一个调试区域,游戏图像的，逻辑区域;
// 开始调试模式:
if (this.is_debug) { // 开启调试信息
var Bits = cc.PhysicsManager.DrawBits; // 这个是我们要显示的类型
cc.director.getPhysicsManager().debugDrawFlags = Bits.e_jointBit | Bits.e_shapeBit;
}
else { // 关闭调试信息
cc.director.getPhysicsManager().debugDrawFlags = 0;
}
// 重力加速度的配置
cc.director.getPhysicsManager().gravity = this.gravity;
},
start: function(){
},
new_game: function(){
cc.director.loadScene("game_scene");
},
// called every frame, uncomment this function to activate update callback
// update: function (dt) {
// },
});
cc.director.getPhysicsManager().enabled = true; // 开启了物理引擎之后, 接下来就是球杆的制作, 打开cue.js
cc.Class({
extends: cc.Component,
properties: {
SHOT_POWER: 18, // 力量;
},
// LIFE-CYCLE CALLBACKS:
// onLoad () {},
start () {
this.body = this.getComponent(cc.RigidBody);
},
shoot_at(dst) { // 发杆，射向哪个点
// 当前的 球杆,目标连线;
var src = this.node.getPosition();
var dir = cc.pSub(dst, src);
var len = cc.pLength(dir);
// 冲量: 矢量，方向，大小，;
var distance = len - this.node.width * 0.5;
var p_x = distance * this.SHOT_POWER * dir.x / len;
var p_y = distance * this.SHOT_POWER * dir.y / len;
this.body.applyLinearImpulse(cc.p(p_x, p_y), this.node.convertToWorldSpaceAR(cc.p(0, 0)), true);
},
onPreSolve: function(contact, selfCollider, otherCollider) {
this.node.active = false;
},
// update (dt) {},
});
这样, 我们在在白球上添加一个触摸事件, 玩家触摸白球后, 调用cue.js中的shoot_at方法
cc.Class({
extends: cc.Component,
properties: {
min_dis: 20,
cue: { // 拿到球杆
type: cc.Node,
default: null,
},
},
// LIFE-CYCLE CALLBACKS:
// onLoad () {},
start () {
this.cue_com = this.cue.getComponent("cue");
this.start_x = this.node.x;
this.start_y = this.node.y;
this.body_rigid = this.getComponent(cc.RigidBody);
// START, MOVED, ENDED, CANCEL
this.node.on(cc.Node.EventType.TOUCH_MOVE, function(e) { // 点击白球， 移动鼠标， 如果移动距离符合要求， 球杆出现
var w_pos = e.getLocation(); // 或去屏幕坐标;
var src = this.node.getPosition();
var dst = this.node.parent.convertToNodeSpaceAR(w_pos);
var dir = cc.pSub(dst, src);
var len = cc.pLength(dir);
if (len < this.min_dis) { // 隐藏球杆，准备放弃;
this.cue.active = false;
return;
}
this.cue.active = true;
var cue_len = this.cue.width * 0.5;
var cue_pos = dst;
cue_pos.x += (cue_len) * dir.x / len;
cue_pos.y += (cue_len) * dir.y / len;
this.cue.setPosition(cue_pos);
var r = Math.atan2(dir.y, dir.x);
var degree = r * 180 / Math.PI;
degree = 360 - degree;
this.cue.rotation = degree + 180;
}.bind(this), this);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, function(e) {
if (this.cue.active == false) { // 如果是在最小范围内击球, 击球无效;
return;
}
// 发杆;
this.cue_com.shoot_at(this.node.getPosition());
}.bind(this), this)
},
onBeginContact: function(contact, selfCollider, otherCollider){
if(otherCollider.node.groupIndex == 2){
this.node.scale = 0;
this.scheduleOnce(this.reset_ball.bind(this), 1);
}
},
reset_ball: function(){
this.node.scale = 1;
this.body_rigid.linearVelocity = cc.p(0,0);
this.body_rigid.angularVelocity = 0;
this.node.x = this.start_x;
this.node.y = this.start_y;
}
// update (dt) {},
});
以上, 就是桌球小游戏制作的核心内容
我也创建了个学习交流群 点击下面链接即可加入