引擎:游戏主程

  一、介绍

引擎发展  

游戏渲染流程

 

二、配置

快捷键

 设置浏览器和脚本编辑器

Cocos整合Webstorm编辑器

ECMAScript 6配置,见下图:

配置上Cocos Creator的源码路径,可以进一步提高Webstorm代码提示精度,见下图:

点击Add…按钮,添加Cocos Creator源码路径:

修改TS默认模板自定义模板

将摄像机对准当前界面

选中摄像机后,按ctrl shift f实现定位当前视角到摄像机

对准前

对准后

三、使用

1.节点脚本组件

脚本介绍

引擎执行流程

物体节点、声音组件\物理组件\UI组件、脚本组件


暴露变量到面板 

2.节点的查找

基本查找

this.node:挂载当前脚本的节点A;

this.node.parent:获取A节点的父节点;

this.node.children:获取A节点的所有子节点;

this.node.getChildrenByName/this.node.getChildrenByPath:获取A节点的指定子节点;

find:查找场景中的节点;

 ​​

其它查找 

添加节点

3.节点的事件

新版事件

    start () {
        input.on(Input.EventType.TOUCH_START, this.loadPlayingScenes, this)
        input.on(Input.EventType.TOUCH_START, this.loadMainScenes, this)
    }

触摸事件

  • TOUCH_START:触摸开始;
  • TOUCH_END:触摸结束;
  • TOUCH_MOVE:触摸滑动;
  • TOUCH_CANCEL:触摸撤销

 

键盘事件 

  • KEY_DOWN:按下;
  • KEY_UP:抬起;
  • 根据keyCode得到按下的值对应的键盘按键值

其它知识

 

4.节点的MashRender组件使用

预制体简介

  • 再“资源管理器中”创建预制体,然后拖到场景中就可以克隆使用,切记不能修改预制体,否者其它引用了当前预制体的地方就会跟着发生变化;
  • 如果要给预制体绑定事件则必须将其变为普通节点才能添加脚本;

代码方式创建预制体到场景

给当前节点的父节点添加一个预制体,即在摄像机的父节点是场景,在场景下创建一个新的预制体;

 

代码方式更换物体材质

下面是手动方式创建了一个材质球赋予红色,最后通过代码方式更换材质球样式;

开启节点的阴影

  • 默认情况下引擎为了性能所以没开启阴影;
  • 开启步骤:开启场景的阴影 -> 给需要产生阴影的物体开启cast

 

5.节点的动画

动画效果分为实时计算和烘培两种模式,前者效果好但性能消耗大,后者快但效果没得实时渲染的好;

动画切割与使用 

脚本控制动画播放

让其它物体与动画模型的某个骨节点一起摇动:

自定义动画

如果系统的动画组件播放动画有问题,那么可以考虑自定义动画组件来实现对应的效果;原理是在update中更换图片帧即可

原理

代码

启用

测试

6.粒子系统

Cocos Creator 3D的粒子系统真心非常强大,理论上可以实现各式各样的牛逼效果。

官网详见说明文档

简单火焰效果

  1. 首先,我请UI小姐姐做了一张火焰的图片,是这样的

 

  1. 新建材质,取名叫FireMaterial

可以看到,可供粒子系统使用的 Effect 有红框中的三种,这里我们要使用的就是builtin-particle。

  • builtin-particle:提供给粒子系统的 渲染模块(Renderer) 中的 ParticleMaterial 使用,当使用cpu渲染时,必须使用此Effect,这个也是默认选项。
  • builtin-particle-gpu:提供给粒子系统的 渲染模块(Renderer) 中的 ParticleMaterial 使用,当使用gpu渲染时,必须使用此Effect。
  • builtin-particle-trail:提供给粒子系统的 渲染模块(Renderer) 中的 TrailMaterial 使用。
  1. 然后,我们把美术小姐姐准备好的图片拖到 MainTexture 上,别忘记保存哦。

 

  1. 新建一个粒子系统,取名Fire2,展开 渲染模块(Renderer) ,将材质 FireMaterial 拖入到 ParticleMaterial 中。

 

  1. 我们想要的效果是,固定显示四个序列图中的随机一张,
  • 勾选 贴图动画模块(TextureAnimationModule),通过对材质的观察,我们可以看到图片是2*2的序列图。
  • 将 横向贴图帧数(NumTilesX) 设置为2。
  • 将 纵向贴图帧数(NumTilesY) 设置为2。
  • 将 **一个生命周期内播放几次循环(CycleCount)**设置为1,默认值0.
  • 将 一个周期内动画播放的帧与时间变化曲线(FrameOverTime) 选择两个常数的方式,设置为0~3,这样初始帧就会在4个序列中随机。 

 贴图动画模块(TextureAnimationModule)设置

 

  1. 展开 发射器模块(ShapeModule) ,将 粒子发射器半径(Radius) 设置为0,因为我们希望火焰从一个点内产生,而不是一个大的范围。
  2. 接下来对 主模块 进行设置。
  • 将 粒子系统运行时间(Duration) 设置为1,默认值是5。火焰是不断循环的,不需要那么久的运行时间。
  • 将 粒子系统所能生成的最大粒子数量(Capacity) 设置为30,默认值是100。
  • 将 每秒发射的粒子数(RateOverTime) 设置为30,默认值是10.粒子数量太多太少了都达不到预期的效果。
  • 将 粒子生命周期(StartLifetime) 选择两个常数的方式,设置为0.3~0.4,火焰的粒子不需要运行太久。
  • 将 粒子初始速度(StartSpeed) 设置为0.1,默认值为5,让火焰有微微跳动的感觉。
  • 将 粒子初始大小(StartSize) 选择两个常数的方式,设置为0.50.8,这样粒子的大小就会在0.50.8这个范围内随机。
  • 将 StartRotation(StartRotation) 选择两个常数的方式,设置为-30~308,给粒子添加随机不同的旋转角度。
  • 将 粒子受重力影响的系数(GravityModifier) 设置为-1,火焰应该是向上漂浮的,所以我们给他一个向上的重力系数。

 此时可以看到,现在有点像火焰的感觉了,不过火焰并不是向上运动的,而是在自己的坐标系内向着Y轴正方向运动的,这显然不是我们想要的效果。

  • ​ 将 控制粒子坐标计算所在的坐标系(SimulationSpace) 设置为World,默认是Local,这样火焰的运动就就在使用世界坐标系了。

来,看看疗效

 主模块参数设置

  1. 最后一步,给火焰上上色,勾选 颜色模块(ColorOverLifetimeModule),调节一个你需要的颜色。

 

  1. 通过,调节不同的颜色参数,可以达到很多不同的火焰特效。

 热情洋溢

 冷冽冰焰

要想把火焰效果做的完美,我们还需要,做一些锦上添花的优化,比如不断升起的火星,忽明忽暗的火光,这样才会更逼真。

不断升起的火星

  1. 新建粒子系统,命名为Spark。
  2. 展开 发射器模块(ShapeModule) 。
  • 将 粒子发射器半径(Radius) 设置为0.2,让发射器的半径和火焰的半径差不多就可以了。
  • 将 开合角度(Angle) 设置为0,让圆锥形的发射器变成圆柱形的发射器。

 

  1. 主模块设置
  • 将 粒子系统运行时间(Duration) 设置为1,保持和火焰一致就好。
  • 将 粒子系统所能生成的最大粒子数量(Capacity) 设置为20,火星的数量不宜过多。
  • 将 每秒发射的粒子数(RateOverTime) 设置为20.
  • 将 粒子生命周期(StartLifetime) 选择两个常数的方式,设置为0.30.5,火星生成之后大概0.30.5秒就会消失。
  • 将 粒子初始大小(StartSize) 选择两个常数的方式,设置为0.08~0.12,火星的尺寸可以设置的小一点。
  • 将 粒子初始速度(StartSpeed) 设置为8,默认值为7,让火星能达到的最大高度稍微高过火焰就好。

 

  1. 最后一步,调节一下火星的颜色,勾选 颜色模块(ColorOverLifetimeModule),具体颜色可根据实际情况随意调节。

 由黄变红的渐变色

  1. 看一下火星的效果

 火星效果

  1. 结合火焰一起的效果。

 配合上火星的火焰效果

 配合上火星的火焰效果

忽明忽暗的火光

  1. 新建粒子系统,命名为Light。

  2. 展开 发射器模块(ShapeModule) 。

​ 将 粒子发射器半径(Radius) 设置为0.01,火光和火星不同,只需要让它在很小的方位内生成就行了。

  1. 主模块 设置。
  • 将 粒子系统运行时间(Duration) 设置为1。
  • 将 粒子系统所能生成的最大粒子数量(Capacity) 设置为5,火光只需要很少的数量不断生成就可以了。
  • 将 每秒发射的粒子数(RateOverTime) 设置为5。
  • 将 粒子初始速度(StartSpeed) 设置为0,火光不需要运动,只需要在原地就好。
  • 将 粒子生命周期(StartLifetime) 选择两个常数的方式,设置为0.2~0.5,让粒子最长的生命周期比最短的还要大一倍,能最大程度感觉到闪动的效果。
  • 将 粒子初始大小(StartSize) 选择两个常数的方式,设置为1~2,以生成不同大小的火光。
  • 将 粒子初始颜色(StartColor) 设置为接近火焰的颜色。

 

 

  1. 火光成品效果

 闪动的火光效果

 最终效果

7.摄像机使用与分组管理

游戏场景中一般有两个摄像机,一种是透视投影用来展示游戏物体,另一种是正交投影用来展示ui物体;

 

 

8.序列化Json

9.网络请求

10.物理组件

给地形加上​MeshCollider碰撞体组件然后给角色加上RigidBody刚体组件和BoxCollide或CapsuleCollider等基础碰撞体组件即可实现这里碰撞感应并防止角色落入地下。

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不努力谁会可怜你?

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值