Cocos Creator 3D Arkanoid tutorial (b) | bullet fired smooth movement of the camera

Online experience Links:
http://example.creator-star.cn/block3d/

Previous article, we talked about [Arkanoid] scene layout, materials resources, rigid body physics and collision components of the game 3D objects, then this article focuses on the "bullet launch" and "camera movement", there the two parts of [our] Arkanoid games you can play with up initially.

Bullet launch

3D object is created by the bullet Sphere sphere, and renamed the bullet node, look:

Manager node in the hierarchy in the bullet drag to the resource manager, it will create a Prefab into preforms. Mounting assembly while the ball impact (cc.SphereColliderComponent) and the rigid assembly (cc.RigidBodyComponent) on the bullet the bullet node, as shown below:

With bullet preform, we can use the code to instantiate it, and to launch him out of TypeScript create a script and shoot it to mount the camera on the Camera node:

The shoot bullets preform assembly drag the past, the movement speed of the bullet is set to 50, we have to launch by clicking on the screen, below is a specific code:

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));
    }

Two things to note here:

1. Use the touch event is cc.systemEventto register;
2. Project code hints do not need to be copied from the installation directory cc.d.ts engine files to the project, I was on a Mac, you can use the following command to copy:

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

Examples of the use of preform instantiate API we use exactly the same as in the Creator 2D, not in the repeat. Then we can run preview, firing bullets through the click of a mouse or touch screen.

Camera moves

3D games, it is common practice to use four keys WSAD vertical and horizontal movement, which is the core node controlling the location of the camera. In order to simplify our game game operation, we control the camera only the x and y directions of movement:

• w: increase in the y direction
• s: y direction is reduced
• a: x direction is reduced
• d: increase in x-direction

Create a movement script for controlling the movement of the camera, the following components are set up:

We focus on the relevant code using the keyboard to control the camera movement following:

//使用 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 mark key events in the direction of movement under the button:

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;
    }
}

When the button is released, the offset variable return 0:

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

The focus is moving in each frame update event component in the real control the camera node:

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);
}

For smooth movement, Shawn herein with reference to official Demo case practice to use to move the coordinates of Vec3.lerp current coordinate to interpolate.

summary

Shawn Creator3D Arkanoid is making the first 3D game, but also the public's first written number of 3D-related tutorials, now he can only be regarded as a DEMO, there are many deficiencies, if any errors also please correct me a lot.

The original is not easy, especially in a new thing, if the article useful to you, and thank you to look at a point or share with a friend, your encouragement is my creative power, we would like to temper forward on the road ahead, common growing up!

This article from the blog article multiple platforms OpenWrite release!