拇指射箭！你能射中靶心麼？
效果預覽
配置環境：
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 分以上還是要技巧的哦！
分享到:
閱讀更多 白玉無冰 的文章
