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: 开放平台绑定小程序/小游戏

 

打包发布小游戏

1: 打开”Cocos creator-->偏好设置”菜单,配置好微信开发工具的路径;

2: 打开 “项目-->项目设置” 裁剪好游戏引擎;

3: 项目构建发布:

需要注意的点
　　碰撞分组设置好
　　刚体的类型要区分好 static和dynamic