Cocos Creator 教程:座標系統

主要簡單講解下座標系統，由於Creator是基於Cocos2dx，也就是使用OpenGL的座標系，即原點在屏幕左下角，x軸向右，y軸向上。然後講解下本地座標與世界座標，最後講下座標轉換。

座標系

基於OpenGL座標，也就是原點在屏幕左下角，x軸向右，y軸向上。下面講解的世界座標也就是與OpenGL座標系方向一致。

本地座標

本地座標是相對於父節點而言的，也就是相對於父節點的位置。通過node的getPosition()來獲取座標。

世界座標

世界座標也就是上面說的OpenGL座標，原點在屏幕左下角，x軸向右，y軸向上。例如觸摸事件中得到的座標就是世界座標。

錨點

錨點是對應於Node屬性中的AnChor。其中(0.5,0…5)是位於中心，(0,0)是位於左下角，(0,1)是位於左上角，(1,0)是位於右下角，(1,1)是位於右上角

座標轉換

• 取得節點的世界座標

/**
 * 得到一個節點的世界座標
 * node的原點在中心
 * @param {*} node 
 */
function localConvertWorldPointAR(node) {
    if (node) {
        return node.convertToWorldSpaceAR(cc.v2(0, 0));
    }
    return null;
}

/**
 * 得到一個節點的世界座標
 * node的原點在左下邊
 * @param {*} node 
 */
function localConvertWorldPoint(node) {
    if (node) {
        return node.convertToWorldSpace(cc.v2(0, 0));
    }
    return null;
}

• 世界座標轉換成某個節點下的座標

/**
 * 把一個世界座標的點，轉換到某個節點下的座標
 * 原點在node中心
 * @param {*} node 
 * @param {*} worldPoint 
 */
function worldConvertLocalPointAR(node, worldPoint) {
    if (node) {
        return node.convertToNodeSpaceAR(worldPoint);
    }
    return null;
}

/**
 * 把一個世界座標的點，轉換到某個節點下的座標
 * 原點在node左下角
 * @param {*} node 
 * @param {*} worldPoint 
 */
function worldConvertLocalPoint(node, worldPoint) {
    if (node) {
        return node.convertToNodeSpace(worldPoint);
    }
    return null;
}

• 節點的本地座標轉到另一個節點的本地座標下

/**
 *  * 把一個節點的本地座標轉到另一個節點的本地座標下
 * @param {*} node 
 * @param {*} targetNode 
 */
function convetOtherNodeSpace(node, targetNode) {
    if (!node || !targetNode) {
        return null;
    }
    //先轉成世界座標
    let worldPoint = localConvertWorldPoint(node);
    return worldConvertLocalPoint(targetNode, worldPoint);
}

/**
 *  * 把一個節點的本地座標轉到另一個節點的本地座標下
 * @param {*} node 
 * @param {*} targetNode 
 */
function convetOtherNodeSpaceAR(node, targetNode) {
    if (!node || !targetNode) {
        return null;
    }
    //先轉成世界座標
    let worldPoint = localConvertWorldPointAR(node);
    return worldConvertLocalPointAR(targetNode, worldPoint);
}

最後

通過本文的講解，希望給新手們有所幫助。座標轉換的應用可以到觸摸事件Demo查看。最後還是那句話，喜歡就動動手指點喜歡，關注我吧。我會不定時更新Cocos Creator教程哦~