Cocos Creator 3D 打磚塊教程(二) | 子彈發射與攝像機平滑移動

時間 2019-11-07

標籤 cocos creator 3d 磚塊教程子彈發射攝像機平滑移動欄目 Cocos2d-x 简体版

原文原文鏈接

在線體驗連接：
http://example.creator-star.cn/block3d/node

前面一篇文章，咱們講了【打磚塊】遊戲中的3D物體的場景佈局、材質資源、物理剛體與碰撞組件，接下來本篇文章重點介紹「子彈的發射」與「攝像機移動」，有了這兩部分咱們的【打磚塊】遊戲就能夠初步玩起來了。app

子彈的發射

子彈是由 3D 物體 Sphere 球體建立，並將節點更名爲 bullet，看下圖：
ide

在層級管理器中將 bullet 節點拖動到資源管理器中，將它建立成一個 Prefab 預製體。同時在 bullet 子彈節點上掛載球體碰撞組件（cc.SphereColliderComponent）和剛體組件（cc.RigidBodyComponent），以下圖所示：
佈局

有了 bullet 預製體，咱們就能夠用代碼去實例化它，並將他發射出去，建立一個 shoot 的TypeScript 腳本並將它掛載到 Camera 攝像機節點上：
this

將shoot組件的子彈預製體拖動過去，子彈的移動速度設置爲 50，咱們經過點擊屏幕來進行發射，下面是具體的代碼：3d

import { _decorator, Component, Node, CCObject, Prefab, instantiate, RigidBodyComponent, Vec3 } from "cc";
const { ccclass, property } = _decorator;

@ccclass("shoot")
export class shoot extends Component {
  
    @property(Prefab)
    bullet: Prefab;

    @property(cc.Float)
    speed = 0;
 
    start () {
        //註冊全局觸摸點擊事件
        cc.systemEvent.on(Node.EventType.TOUCH_END, () => {
            this.shoot();
        });
    }

    shoot() {
        //實例化 bullet 預製體
        let node = instantiate(this.bullet);
        node.parent = this.node.parent;
        node.position = this.node.position;
        //爲剛體施加衝量
        let bullet:RigidBodyComponent = node.getComponent(RigidBodyComponent);
        bullet.applyImpulse(new Vec3(0, 2.29, -1 * this.speed));
    }

這裏須要注意兩點：code

觸摸事件是使用cc.systemEvent進行註冊的；
工程中沒有代碼提示，須要從引擎安裝目錄中複製cc.d.ts文件到工程中，我是在Mac系統上，能夠用下面命令複製：

cp /Applications/CocosCreator3D.app/Contents/Resources/resources/3d/engine/bin/.declarations/cc.d.ts ./

預製體的實例化使用instantiate 與咱們在Creator 2D中使用的API徹底相同，就不在贅述。這時咱們就能夠運行預覽，經過點擊鼠標或觸摸屏幕發射子彈了。blog

攝像機移動

在3D遊戲中，一般的作法是使用WSAD四個鍵進行上下左右的移動，其核心是控制攝像機節點的位置。在咱們這個遊戲中爲了簡化遊戲操做，咱們只控制攝像的 x 和 y 方向的移動：教程

w：y方向增長
s：y方向減少
a：x方向減少
d：x方向增長

建立一個 movement 的腳本用於控制攝像機的移動，下面是組件的設置：
遊戲

下面重點分析使用鍵盤控制攝像機移動的相關代碼：

//使用 cc.systemEvent.on 註冊全局鍵盤事件
start() {
    cc.systemEvent.on(Node.EventType.KEY_DOWN, this.onKeyDown, this);
    cc.systemEvent.on(Node.EventType.KEY_UP, this.onKeyUp, this);
        ... 
}

在按鈕下鍵盤事件 onKeyDown 中標記移動的方向：

onKeyDown(event) {
    cc.log(event);
    let rotation = this.node.eulerAngles;
    let position = this.node.getPosition();
    switch(event.keyCode) {
        case cc.macro.KEY.w:
            this.offset.y = 1;
            break;
        case cc.macro.KEY.s:
            this.offset.y = -1;
            break;
        case cc.macro.KEY.a:
            this.offset.x = -1;
            break;
        case cc.macro.KEY.d:
            this.offset.x = 1;
            break;
    }
}

當按鍵鬆開時，將 offset 變量歸 0：

onKeyUp() {
    this.offset.x = 0;
    this.offset.y = 0;    
    this.offset.z = 0;    
}

重點是在組件的每幀事件 update 中真正控制攝像機節點的移動：

update (deltaTime: number) { 
    //計算要移動的目標位置
    Vec3.add(this.point, this.node.position, this.offset);
        //插值計算
    Vec3.lerp(this.point, this.node.position, this.point, deltaTime * this.speed);
        //移動節點
    this.node.setPosition(this.point);
}

爲了平滑移動，Shawn這裏參考了官方Demo案例中的作法，使用 Vec3.lerp 對當前座標到要移動的座標進行插值計算。