专栏首页Creator星球游戏开发社区Creator3D 打砖块子弹发射,以及摄像机平滑移动控制!

Creator3D 打砖块子弹发射,以及摄像机平滑移动控制!

在线体验链接:http://example.creator-star.cn/block3d/

前面一篇教程《Creator3D图文教程【打砖块】》,我们讲了打砖块游戏中的 3D 物体的场景布局、材质资源、物理刚体与碰撞组件,接下来本篇文章重点介绍“子弹的发射”与“摄像机移动”,有了这两部分我们的游戏就可以初步玩起来了。

1

子弹的发射

子弹是由 3D 物体 Sphere 球体创建,并将节点改名为 bullet,看下图:

在层级管理器中将 bullet 节点拖动到资源管理器中,将它创建成一个 Prefab 预制体。同时在 bullet 子弹节点上挂载“球体碰撞组件”和“刚体组件”,如下图所示:

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

这里需要注意两点:

  1. 触摸事件是使用cc.systemEvent进行注册的;
  2. 工程中没有代码提示,需要从引擎安装目录中复制cc.d.ts文件到工程中,我是用的Mac系统上,路为: /Applications/CocosCreator3D.app/Contents/Resources/resources/3d/engine/bin/.declarations/cc.d.ts

预制体的实例化使用 instantiate 与我们在 Creator 2D 中使用的 API 完全相同,这里就不在赘述。这时我们就可以运行预览,通过点击鼠标或触摸屏幕发射子弹了。

2

摄像机移动

在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 对当前坐标到要移动的坐标进行插值计算。详细的完整代码,可参考DEMO源码。

3

小结

Creator3D 打砖块是 Shawn 制作的第一个 3D 游戏,也是公众号上第一次写的 3D 相关的教程,目前他只能算是一个 DEMO,还有很多不足的地方,如有不正之处还请大家多多指正。

在线体验链接:http://example.creator-star.cn/block3d/

源码下载地址:https://pan.baidu.com/s/1KadJBNUngg7pAYEFTwTj9g 密码:zjf4

原创不易,特别是一个新的东西,如果教程对你有用,也感谢你点个赞或分享给更多的人,你的鼓励是我创作的巨大动力,愿我们在前进的道路上砥砺前行,共同成长!

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star),作者:张晓衡

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 狂热「小工」的9款Creator游戏源码及图文教程,等你来拿!

    他在 Cocos 论坛上公开了自己9款小游戏作品,完成度相当之高,是不可多得的Creator学习资源,下面是论坛链接地址:https://forum.cocos...

    张晓衡
  • 重磅!H5游戏接入App已经解决了,民间SDK将会崛起!

      《各种红包 App 最后都会整合游戏!App+游戏的变现模式分析》一文让晓衡有幸结识到了一位技术大佬「梦近在咫尺」,有时候真的是心想事成!大佬在第2天就写下...

    张晓衡
  • 新版ShaderHelper,终于支持 Creator 2.1.2 了!

    之前有不少伙伴反馈 ShaderHelper 在 2.1.2 版本中不能工作,非常抱歉,让你们久等了!

    张晓衡
  • Canvas 绘制点线相交

    无论是Canvas 还是别的,前端的学习总是妙趣横生,只要思想在不断进步,技术就会一次次的突破。如果你学习过Canvas ,你会更加了解这段代码的神奇,送给你,...

    我不是费圆
  • 寿司快卖:实现游戏主流程--制作寿司和客户显示动画特效

    上一节我们搭建了游戏的基本框架。游戏界面被分为若干个板块,其中一个板块显示了各种制作寿司的材料,它的目的是用于玩家根据信息组装各种寿司,本节我们进入游戏的主流程...

    望月从良
  • 分享HTML5-CANVAS相交线动画代码实例

    今天全百科网分享的是HTML5-CANVAS相交线动画代码实例,史基于html、css、js三个方面制作而成,可用于网页背景,效果很是不错。

    于飞云计算
  • Mybatis深入源码分析之Mapper与接口绑定原理源码分析

    紧接上篇文章:Mybatis深入源码分析之SqlSessionFactoryBuilder源码分析,这里再来分析下,Mapper与接口绑定原理。

    须臾之余
  • 求超大文件上传方案( B/S )

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制...

    用户6892318
  • three.js 郭先生制作太阳系

    今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击three.js制作太阳系(加载时间比较长,请稍等一...

    郭先生的博客
  • 社区开源框架网络模块:ConnectionManager详解

    地址:https://github.com/Golangltd/LollipopCreator

    李海彬

扫码关注云+社区

领取腾讯云代金券