cocos creator 3D | 拇指射箭

拇指射箭！你能射中靶心麼？

效果預覽

配置環境：

cocos creator 3d v1.0.0

玩法介紹：

長按屏幕，拖動瞄準，放手發射。風向、重力和距離影響最終結果！越靠近中心得分越高！最高分10分！

實現原理

流程圖：

鏡頭控制：

採用兩個攝像機控制鏡頭顯示。一個是發射視角的攝像機；另外一個是綁定在箭節點的攝像機，會跟隨箭一塊兒移動。經過控制攝像機節點的 active 實現鏡頭切換。

弓箭控制：

經過觸摸移動的距離乘以一個調控係數，控制弓箭的位置。

private onTouchMove(touch: Touch) {
    const delta = touch.getDelta();
    this.NodePos_bows.x -= delta.x * CONST_TOUCH_FACTOR;
    this.NodePos_bows.y += delta.y * CONST_TOUCH_FACTOR;
}

爲全部須要控制位置的節點寫了一個通用的組件腳本。只要爲節點添加這個腳本，就能夠經過設置 x,y,z 調整位置。

export class NodePos extends Component {
    private _curPos: Vec3 = cc.v3();
    start() {
        this._curPos = this.node.position;
    }    
    get x() {
        return this._curPos.x;
    }
    set x(x: number) {
        this._curPos.x = x;
    }
    // 省略部分代碼
    update(deltaTime: number) {
        this.node.position = this._curPos;
    }
}

發射箭：

使用 tween 控制箭位置，並在發射結果添加劇力、風向和距離的影響。併爲箭添加了拖尾組件。

tweenUtil(this.NodePos_arrow)
    .stop()
    .to(5, { z: targetZ, x: targetX, y: targetY })
    .to(1, {})
    .call(() => {
        this.gameOver();
    })
    .start()

得分計算：

經過計算箭和靶心的距離，以及靶子的半徑關係，能夠計算出得分。

const dis = this.NodePos_arrow.position.clone().subtract(this.NodePos_target.position).length();
const score = dis < CONST_TARGET_RADIUS ? ((1 - dis / CONST_TARGET_RADIUS) * 10).toFixed(2) : ('0');

小結

這個拇指射箭遊戲採用了兩個攝像機控制鏡頭顯示。因爲 cocos creator 3d 不能直接設置 x,y,z 控制位置，因此寫了個簡單的組件控制位置。

以上就是這個拇指射箭的主要實現方案。文章底部能夠點擊連接試玩哦！打到 9 分以上仍是要技巧的哦！

---

---

本文使用圖片素材來自網絡！版權歸原做者全部，若有侵權還請聯繫！

在線試玩
源碼獲取