前面一篇文章，我們講了【打磚塊】游戲中的3D物體的場景布局、材質資源、物理剛體與碰撞組件，接下來本篇文章重點介紹“子彈的發射”與“攝像機移動”，有了這兩部分我們的【打磚塊】游戲就可以初步玩起來了。
子彈的發射
子彈是由 3D 物體 Sphere 球體創建，並將節點改名為 bullet，看下圖：
在層級管理器中將 bullet 節點拖動到資源管理器中，將它創建成一個 Prefab 預制體。同時在 bullet 子彈節點上掛載球體碰撞組件（cc.SphereColliderComponent）和剛體組件 （cc.RigidBodyComponent），如下圖所示：
有了 bullet 預制體，我們就可以用代碼去實例化它，並將他發射出去，創建一個 shoot 的TypeScript 腳本並將它掛載到 Camera 攝像機節點上：
將shoot組件的子彈預制體拖動過去，子彈的移動速度設置為 50，我們通過點擊屏幕來進行發射，下面是具體的代碼：
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));
}
這里需要注意兩點：
- 觸摸事件是使用
cc.systemEvent進行注冊的； - 工程中沒有代碼提示，需要從引擎安裝目錄中復制cc.d.ts文件到工程中，我是在Mac系統上，可以用下面命令復制：
cp /Applications/CocosCreator3D.app/Contents/Resources/resources/3d/engine/bin/.declarations/cc.d.ts ./
預制體的實例化使用instantiate 與我們在Creator 2D中使用的API完全相同，就不在贅述。這時我們就可以運行預覽，通過點擊鼠標或觸摸屏幕發射子彈了。
攝像機移動
在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 對當前坐標到要移動的坐標進行插值計算。
小結
Creator3D 打磚塊是 Shawn 制作的第一個 3D 游戲，也是公眾號上第一次寫的 3D 相關的教程，目前他只能算是一個 DEMO，還有很多不足的地方，如有不正之處還請大家多多指正。
原創不易，特別是一個新的東西，如果文章對你有用，也感謝你點個在再看或分享給朋友，你的鼓勵是我創作的動力，願我們在前進的道路上砥礪前行，共同成長！
本文由博客一文多發平台 OpenWrite 發布！