cocosCreator 實現相機跟隨人物移動

一，需求；

人物移動，相機跟隨人物水平移動；當地圖展示到最左邊，或者最右邊時，鏡頭不再跟隨人物移動，人物可走到最左邊或最右邊；

二，代碼；

編寫一個js綁定到camera下：

其中，target是要跟隨的目標，tieldMap是地圖。

cc.Class({
    extends: cc.Component,
    properties: {
       
        target:{
            default:null,
            type:cc.Node
        },
        tieldMap:{
            default:null,
            type:cc.TiledMap
        }
    },

    start () {
        var mainWidth = cc.find("UI_ROOT").width;
        var mapWidth = this.tieldMap.node.width
        this.max_x = mapWidth - mainWidth;
    },

    update (dt) {
        if(!this.target) return;        
        // 將節點座標系下的一個點轉換到世界空間座標系
        var w_pos = this.target.convertToWorldSpaceAR(cc.v2(0,0));
        // 將一個點轉換到節點 (局部) 空間座標系
        var c_pos = this.node.parent.convertToNodeSpaceAR(w_pos);
        if(c_pos.x<=0 || c_pos.x>=this.max_x){
            return;
        }
        this.node.x = c_pos.x;
    },
});

三，原理；

計算玩家此時的世界座標w_pos，得到此時以玩家爲中心，畫面左下角應該要的空間座標c_pos，然後進行判斷。如果c_pos小於零，證明地圖已經加載到最左邊了；c_pos大於 max_x（地圖寬度 減 canvas寬度），證明地圖已經加載到最右邊了；除了這兩種情況之外，設置camera的x座標爲c_pos.x，即可實現相機跟隨。

四，最終效果；

素材、地圖、人物皆爲本人手工繪製，不太美觀還請見諒：D

cocosCreator實現相機跟隨功能