cocos creator实战-(一)台球小游戏
body参数
1: 重力为0, 对物体进行分类,配置碰撞关系。
2: 球: 线性阻尼,角速度阻尼 为1;
3: 球碰撞器的弹性系数为1;
4: 球杆的能量系数: 18;
5: 球杆最小距离: 20, 最大距离 100;
6: this.body.applyLinearImpulse(方向, 世界坐标的质心, true);
7: 设计分辨率: 414x736
碰撞检测
1: onBeginContact: 碰撞开始被调用;
2: onEndContact: 碰撞结束被调用;
3: onPreSolve: 碰撞接触更新前调用;
4: onPostSolve: 碰撞接触更新后调用;
5: 参数:
contact 碰撞信息
selfCollider: 自己的碰撞器;
otherCollider: 撞到的谁
1、准备游戏场景
物品摆放、添加物理引擎配置、分组
2、实现脚本
场景控制脚本game_scene.js
//game_scene.js cc.Class({ extends: cc.Component, properties: { // foo: { // // ATTRIBUTES: // default: null, // The default value will be used only when the component attaching // // to a node for the first time // type: cc.SpriteFrame, // optional, default is typeof default // serializable: true, // optional, default is true // }, // bar: { // get () { // return this._bar; // }, // set (value) { // this._bar = value; // } // }, balls: { default: null, type: cc.Node }, white_ball: { type: cc.Node, default: null } }, // LIFE-CYCLE CALLBACKS: // onLoad () {}, start() { this.is_game_started = true; }, check_game_over: function() { if (!this.is_game_started) { return; } for (var i = 0; i < this.balls.childrenCount; i++) { var child = this.balls.children[i]; if (child.active === true) { return; } } this.is_game_started = false; this.scheduleOnce(this.restart_game.bind(this), 5); }, restart_game: function() { for (var i = 0; i < this.balls.childrenCount; i++) { var b = this.balls.children[i]; b.getComponent("Ball").reset(); } this.white_ball.getComponent("WhiteBall").reset(); this.is_game_started = true; }, update(dt) { this.check_game_over(); }, });
开启物理引擎脚本
// enbale_phy.js cc.Class({ extends: cc.Component, properties: { // foo: { // default: null, // The default value will be used only when the component attaching // to a node for the first time // url: cc.Texture2D, // optional, default is typeof default // serializable: true, // optional, default is true // visible: true, // optional, default is true // displayName: 'Foo', // optional // readonly: false, // optional, default is false // }, // ... is_debug: false, // 是否显示调试信息; // 重力加速度是一个向量, 有方向的,2D, Vec重力加速度的大小; gravity: cc.v2(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; }, // called every frame, uncomment this function to activate update callback // update: function (dt) { // }, });
普通球ball.js
与球袋的碰撞
cc.Class({ extends: cc.Component, properties: { }, // LIFE-CYCLE CALLBACKS: // onLoad () {}, start() { this.startX = this.node.x; this.startY = this.node.y; }, onBeginContact: function(contact, selfCollider, otherCollider) { if (otherCollider.node.groupIndex == 4) { // 与球带碰撞 this.node.active = false; return; } }, reset: function() { this.node.x = this.startX; this.node.y = this.startY; this.node.active = true; }, // update (dt) {}, });
白球white_ball.js
点击白球不松,球杆出现,向远处拖,球杆距离变远,移动鼠标,球杆围绕白球旋转,球杆与白球距离小于xx,球杆消失,放弃此次挥杆,否则出杆
白球碰撞
与球杆(球杆消失)
与其他球
与球带(隔1秒后把白球放回原处)
与边
//WhiteBall.js 白球脚本 cc.Class({ extends: cc.Component, properties: { // foo: { // // ATTRIBUTES: // default: null, // The default value will be used only when the component attaching // // to a node for the first time // type: cc.SpriteFrame, // optional, default is typeof default // serializable: true, // optional, default is true // }, // bar: { // get () { // return this._bar; // }, // set (value) { // this._bar = value; // } // }, cue: { type: cc.Node, default: null }, min_distance: 20, }, // LIFE-CYCLE CALLBACKS: onLoad() { this.node.on(cc.Node.EventType.TOUCH_START, this.on_touch_start.bind(this), this); this.node.on(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move.bind(this), this); this.node.on(cc.Node.EventType.TOUCH_END, this.on_touch_end.bind(this), this); this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.on_touch_end.bind(this), this); }, start() { this.startX = this.node.x; this.startY = this.node.y; }, on_touch_start: function() { this.body = this.node.getComponent(cc.RigidBody); }, on_touch_move: function(e) { var w_pos = e.getLocation(); // 鼠标位置(世界坐标) var dst = this.node.parent.convertToNodeSpaceAR(w_pos); var node_pos = this.node.getPosition(); // 节点在父节点坐标系中的位置 var dir = dst.sub(node_pos); var len = dir.mag(); if (len <= this.min_distance) { this.cue.active = false; return; } this.cue.active = true; // 数学函数里角度是逆时针旋转,cocos里,物体的角度是顺时针旋转 var r = Math.atan2(dir.y, dir.x); var degree = r * 180 / Math.PI; degree = 360 - degree + 180; this.cue.rotation = degree; var half_widht = this.cue.width * 0.5; // 画图 dir.x / len = new_x / half_widht; var new_x = half_widht * dir.x / len; var new_y = half_widht * dir.y / len; dst.x += new_x; dst.y += new_y; this.cue.setPosition(dst); }, on_touch_end: function() { if (this.cue.active) { this.cue_comp = this.cue.getComponent("Cue"); this.cue_comp.shoot_at(this.node.getPosition()); } }, update(dt) {}, onBeginContact: function(contact, selfCollider, otherCollider) { if (otherCollider.node.groupIndex == 4) { // 与球带碰撞 this.node.active = false; this.scheduleOnce(function() { this.reset(); }.bind(this), 1); } }, reset: function() { this.node.x = this.startX; this.node.y = this.startY; this.node.active = true; } });
球杆cue.js
根据距离对球杆刚体施加冲量(世界坐标)
short_at
// Cue.js cc.Class({ extends: cc.Component, properties: { // foo: { // // ATTRIBUTES: // default: null, // The default value will be used only when the component attaching // // to a node for the first time // type: cc.SpriteFrame, // optional, default is typeof default // serializable: true, // optional, default is true // }, // bar: { // get () { // return this._bar; // }, // set (value) { // this._bar = value; // } // }, SHOOT_POWER: 18, }, // LIFE-CYCLE CALLBACKS: // onLoad () {}, start() { this.body = this.node.getComponent(cc.RigidBody); }, shoot_at: function(dst) { // 施加冲量 // 方向 当前位置--->目标 var dir = dst.sub(this.node.getPosition()); // 大小 var len = dir.mag(); var half_width = this.node.width * 0.5; var dis = len - half_width; var power_x = dis * this.SHOOT_POWER * dir.x / len; var power_y = dis * this.SHOOT_POWER * dir.y / len; // applyLinearImpulse(冲量大小向量,球杆的原点转为世界坐标,是否立刻唤醒true) this.body.applyLinearImpulse(cc.v2(power_x, power_y), this.node.convertToWorldSpaceAR(cc.v2(0, 0)), true); }, // update (dt) {}, onPreSolve: function(contact, selfCollider, otherCollider) { this.node.active = false; }, });
3、接入微信
微信配置
1: 下载微信开发者工具最新版本
https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=20171228
2: 注册和认证微信开发平台+公众平台;
3: 从公众平台小程序入口注册小程序/小游戏,选游戏类,目前还没有开放出来,生成一个APPID;
测试APPID: wx6ac3f5090a6b99c5
4: 开放平台绑定小程序/小游戏
![](https://img2018.cnblogs.com/blog/1454977/201903/1454977-20190322095951795-456611651.png)
打包发布小游戏
1: 打开”Cocos creator-->偏好设置”菜单,配置好微信开发工具的路径;
2: 打开 “项目-->项目设置” 裁剪好游戏引擎;
3: 项目构建发布:
![](https://img2018.cnblogs.com/blog/1454977/201903/1454977-20190322100026814-1327812699.png)
需要注意的点
碰撞分组设置好
刚体的类型要区分好 static和dynamic