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