CocosCreator中如何限制主角在六邊形區域

摘要

在 CocosCreator 開發中，我們經常有限制位置的需求。對於長方形區域我們可以簡單的判斷 x y 方向的座標，但是遇到六邊形區域該怎麼辦呢？

正文

看看效果

畫個區域

我們先用 cc.graphics 組件繪製下限制區域。
（2.1.2 版本的繪圖組件有個 Bug 只能以左下角爲 0 0 ，現在 2.1.3 修復了。對本文章無影響。）

// 已聲明 this.area = [] 繪圖組件 this.g
onLoad () {
    // 裝入六邊形點
    this.area.push(cc.v2(200, 500));
    this.area.push(cc.v2(400, 500));
    this.area.push(cc.v2(500, 300));
    this.area.push(cc.v2(400, 100));
    this.area.push(cc.v2(200, 100));
    this.area.push(cc.v2(100, 300));
    // 繪製
    this.drawArea();
}

// 根據點繪製六邊形
drawArea () {
    let g = this.g;
    g.moveTo(this.area[0].x, this.area[0].y);
    for (let i = 1; i < this.area.length; i++) {
        g.lineTo(this.area[i].x, this.area[i].y);
    }
    g.lineTo(this.area[0].x, this.area[0].y);
    g.stroke();
}

使用API

在 CocosCreator 中有這麼一個 API 能夠測試點是否在多邊形內。

層級中添加單色的 player 節點。

// 已聲明 this.player 爲一個單色節點。
start () {
    this.node.on(cc.Node.EventType.TOUCH_MOVE, this._touchMove, this);
}
// 觸摸移動
_touchMove (event) {
    let pos = event.getLocation();
    if (cc.Intersection.pointInPolygon(pos, this.area)) {
        this.player.position = pos;
    }
}

實現了區域內的移動，但是手指出邊界就不能移動了！怎麼辦？

對齊x還是y

如圖，我們能夠清晰的看見幾個區域。
在上下區域我們應該對齊 x ，在左右區域我們應該對齊 y。

至於四個角落，可寫成定點，也可不處理。

如何算出座標

我們先看下直線的表示公式。

y1 - y2 = k * (x1 - x2)

所以先用公式求 k 值，再用公式求 x 或 y。
封裝一個方法。根據點的下標和給定的 y 值，計算 x 值並返回。

pointInLine (index1, index2, value) {
    let point1 = this.area[index1];
    let point2 = this.area[index2];
    let k = (point2.y - point1.y) / (point2.x - point1.x);
    let x = ((value - point1.y) / k) + point1.x;
    return x;
}

分區處理

_touchMove (event) {
    let pos = event.getLocation();
    if (cc.Intersection.pointInPolygon(pos, this.area)) {
        this.player.position = pos;
    } else {
        const CENTER = 300;
        const X_MIN = 200;
        const X_MAX = 400;
        const Y_MIN = 100;
        const Y_MAX = 500;
        // 區域判斷
        if (pos.y > Y_MIN && pos.y < Y_MAX) {
            // 左區右區各兩條直線
            if (pos.x < CENTER) {
                // 上直線
                if (pos.y > CENTER) {
                    pos.x = this.pointInLine(0, 5, pos.y);
                    this.player.position = pos;
                } else {
                    pos.x = this.pointInLine(5, 4, pos.y);
                    this.player.position = pos;
                }
            } else {
                // 上直線
                if (pos.y > CENTER) {
                    pos.x = this.pointInLine(1, 2, pos.y);
                    this.player.position = pos;
                } else {
                    pos.x = this.pointInLine(2, 3, pos.y);
                    this.player.position = pos;
                }
            }
        } else if (pos.x > X_MIN && pos.x < X_MAX) {
            // 上下區比較簡單
            if (pos.y > CENTER) pos.y = Y_MAX;
            else pos.y = Y_MIN;
            this.player.position = pos;
        } else {
            // 四角區不處理
        }
    }
}

結語

遊戲中很多問題都是需要數學知識解決的，要打好基礎哦！
O(∩_∩)O~~

工程源碼在我的微信公衆號回覆關鍵詞【限位】即可獲得

O(∩_∩)O~~

微信公衆號

遊戲中很多問題都是需要數學知識解決的，要打好基礎哦！
O(∩_∩)O~~

工程源碼在我的微信公衆號回覆關鍵詞【限位】即可獲得

O(∩_∩)O~~

微信公衆號

[外鏈圖片轉存中…(img-Hm9c0XEn-1569767321591)]