一、介绍
引擎发展
游戏渲染流程
二、配置
快捷键
设置浏览器和脚本编辑器
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的粒子系统真心非常强大,理论上可以实现各式各样的牛逼效果。
官网详见说明文档
简单火焰效果
- 首先,我请UI小姐姐做了一张火焰的图片,是这样的
- 新建材质,取名叫FireMaterial
可以看到,可供粒子系统使用的 Effect 有红框中的三种,这里我们要使用的就是builtin-particle。
- builtin-particle:提供给粒子系统的 渲染模块(Renderer) 中的 ParticleMaterial 使用,当使用cpu渲染时,必须使用此Effect,这个也是默认选项。
- builtin-particle-gpu:提供给粒子系统的 渲染模块(Renderer) 中的 ParticleMaterial 使用,当使用gpu渲染时,必须使用此Effect。
- builtin-particle-trail:提供给粒子系统的 渲染模块(Renderer) 中的 TrailMaterial 使用。
- 然后,我们把美术小姐姐准备好的图片拖到 MainTexture 上,别忘记保存哦。
- 新建一个粒子系统,取名Fire2,展开 渲染模块(Renderer) ,将材质 FireMaterial 拖入到 ParticleMaterial 中。
- 我们想要的效果是,固定显示四个序列图中的随机一张,
- 勾选 贴图动画模块(TextureAnimationModule),通过对材质的观察,我们可以看到图片是2*2的序列图。
- 将 横向贴图帧数(NumTilesX) 设置为2。
- 将 纵向贴图帧数(NumTilesY) 设置为2。
- 将 **一个生命周期内播放几次循环(CycleCount)**设置为1,默认值0.
- 将 一个周期内动画播放的帧与时间变化曲线(FrameOverTime) 选择两个常数的方式,设置为0~3,这样初始帧就会在4个序列中随机。
- 展开 发射器模块(ShapeModule) ,将 粒子发射器半径(Radius) 设置为0,因为我们希望火焰从一个点内产生,而不是一个大的范围。
- 接下来对 主模块 进行设置。
- 将 粒子系统运行时间(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,这样火焰的运动就就在使用世界坐标系了。
- 最后一步,给火焰上上色,勾选 颜色模块(ColorOverLifetimeModule),调节一个你需要的颜色。
- 通过,调节不同的颜色参数,可以达到很多不同的火焰特效。
要想把火焰效果做的完美,我们还需要,做一些锦上添花的优化,比如不断升起的火星,忽明忽暗的火光,这样才会更逼真。
不断升起的火星
- 新建粒子系统,命名为Spark。
- 展开 发射器模块(ShapeModule) 。
- 将 粒子发射器半径(Radius) 设置为0.2,让发射器的半径和火焰的半径差不多就可以了。
- 将 开合角度(Angle) 设置为0,让圆锥形的发射器变成圆柱形的发射器。
- 主模块设置
- 将 粒子系统运行时间(Duration) 设置为1,保持和火焰一致就好。
- 将 粒子系统所能生成的最大粒子数量(Capacity) 设置为20,火星的数量不宜过多。
- 将 每秒发射的粒子数(RateOverTime) 设置为20.
- 将 粒子生命周期(StartLifetime) 选择两个常数的方式,设置为0.30.5,火星生成之后大概0.30.5秒就会消失。
- 将 粒子初始大小(StartSize) 选择两个常数的方式,设置为0.08~0.12,火星的尺寸可以设置的小一点。
- 将 粒子初始速度(StartSpeed) 设置为8,默认值为7,让火星能达到的最大高度稍微高过火焰就好。
- 最后一步,调节一下火星的颜色,勾选 颜色模块(ColorOverLifetimeModule),具体颜色可根据实际情况随意调节。
- 看一下火星的效果
- 结合火焰一起的效果。
忽明忽暗的火光
-
新建粒子系统,命名为Light。
-
展开 发射器模块(ShapeModule) 。
将 粒子发射器半径(Radius) 设置为0.01,火光和火星不同,只需要让它在很小的方位内生成就行了。
- 主模块 设置。
- 将 粒子系统运行时间(Duration) 设置为1。
- 将 粒子系统所能生成的最大粒子数量(Capacity) 设置为5,火光只需要很少的数量不断生成就可以了。
- 将 每秒发射的粒子数(RateOverTime) 设置为5。
- 将 粒子初始速度(StartSpeed) 设置为0,火光不需要运动,只需要在原地就好。
- 将 粒子生命周期(StartLifetime) 选择两个常数的方式,设置为0.2~0.5,让粒子最长的生命周期比最短的还要大一倍,能最大程度感觉到闪动的效果。
- 将 粒子初始大小(StartSize) 选择两个常数的方式,设置为1~2,以生成不同大小的火光。
- 将 粒子初始颜色(StartColor) 设置为接近火焰的颜色。
- 火光成品效果
7.摄像机使用与分组管理
游戏场景中一般有两个摄像机,一种是透视投影用来展示游戏物体,另一种是正交投影用来展示ui物体;
8.序列化Json
9.网络请求
10.物理组件
给地形加上MeshCollider碰撞体组件然后给角色加上RigidBody刚体组件和BoxCollide或CapsuleCollider等基础碰撞体组件即可实现这里碰撞感应并防止角色落入地下。