cocos creator基礎-(二十一)Camera組件、物理引擎案例

1: 完成課堂案例，掌握物理引擎的基本使用;
2: 了解Camera組件，完成Camera跟隨玩家;

 

 

官方物理引擎案例

1: 准備好tiled地圖;
2: 為tiled地圖編輯好物理碰撞器;
3: 放出角色,為角色編輯好物理碰撞器;
4: 監聽鍵盤消息:
　　cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.on_key_down.bind(this), this);
　　cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.on_key_up.bind(this), this);
5: 設置角色的水平和豎直速度; 豎直600,水平400
6: 設置cc.Camera組件,設置Camera跟誰玩家;

　　

開啟物理引擎和debug模式腳本enable_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.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;
    },

    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

　　

主角邏輯hero.js

cc.Class({
    extends: cc.Component,

    properties: {
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        this.body = this.node.getComponent(cc.RigidBody);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.on_key_down.bind(this), this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.on_key_up.bind(this), this);

        this.input_flag = 0;
    },

    start() {

    },
    jump: function() {
        var v = this.body.linearVelocity;
        v.y = 200;
        this.body.linearVelocity = v;
    },
    walk: function(dir) { // dir -1 左 1右
        var v = this.body.linearVelocity;
        v.x = dir * 200;
        this.body.linearVelocity = v;

        this.node.scaleX = dir; // 修改scaleX 1 或者-1實現橫坐標鏡像翻轉
    },
    on_key_down: function(e) {
        console.log(e);
        switch (e.keyCode) {
            case cc.macro.KEY.a:
                this.input_flag = -1;
                break;
            case cc.macro.KEY.d:
                this.input_flag = 1;
                break;
            case cc.macro.KEY.w:
                this.jump();
                break;
        }
    },
    on_key_up: function(e) {
        switch (e.keyCode) {
            case cc.macro.KEY.a:
                this.input_flag = 0;
                break;
            case cc.macro.KEY.d:
                this.input_flag = 0;
                break;
            case cc.macro.KEY.w:
                break;
        }
    },
    update(dt) {
        if (this.input_flag !== 0) { // 注意一下 !=  !==對於0和1判斷的區別
            this.walk(this.input_flag);
        }
    },
});

cc.Camera組件
1: 配置哪些物體受Camera組件影響;
　　Targets: 受Camera影響的物體的集合;

2: 配置Camera跟隨目標:
　　var w_pos = this.target.convertToWorldSpaceAR(cc.p(0, 0));
　　var pos = this.node.parent.convertToNodeSpaceAR(w_pos);

　　攝像機和角色綁定，跟隨移動bind_camera.js

　　

cc.Class({
    extends: cc.Component,

    properties: {
        target: {
            default: null,
            type: cc.Node
        }
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {

    },

    update(dt) {
        // target到哪里，camera就到哪里
        /**
         * 1、target坐標轉換成世界坐標
         * 2、target的世界坐標轉化為camera父節點的坐標系下
         * 3、設置camera坐標
         */
        var wpos = this.target.convertToWorldSpaceAR(cc.v2(0, 0));
        var pos = this.node.parent.convertToNodeSpaceAR(wpos);
        // this.node.setPosition(pos); 
        this.node.x = pos.x; // 此方法只移動x軸
    },
});