引擎:主程渲染

一、引擎发展  

二、引擎使用

1.游戏渲染流程

 

2.3D场景编辑器操作与快捷键

3.节点的脚本组件

脚本介绍

引擎执行流程

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


暴露变量到面板 

4.节点的查找

基本查找

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

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

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

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

find:查找场景中的节点;

 ​​

其它查找 

添加节点

5.节点的事件

新版事件

    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得到按下的值对应的键盘按键值

其它知识

 

6.节点的MashRender组件使用

预制体简介

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

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

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

 

代码方式更换物体材质

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

开启节点的阴影

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

 

7.节点的动画

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

动画切割与使用 

脚本控制动画播放

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

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

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

 

 

9.UI界面

Button按钮

创建一个按钮

按钮禁用

精灵模式

颜色模式

缩放模式 

绑定点击事件

EditBox输入框

Layout布局

支持水平排列、垂直排列、背包排列

PageView页面视图

ProgressBar进度条

RichText富文本

 绑定点击事件

事件可以被其它标签包裹

图文混排

ScrollView滚动视图

content大小不要调整,加个layout布局组件让其自动撑开即可

案例1

案例2

Slider滑动器

Toggle复选框

ToggleGroup单选框

VidoPlayer播放器

WebView网页视图

Widget对齐

 在不同的设备屏幕上让内容一直靠右上角进行适配

Mask遮罩

托头像到空节点中 

给父组件添加遮罩组件

效果

材质球

创建

使用

10.Json格式

11.网络请求

12.自定义Animation

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

原理

代码

启用

测试

13.粒子系统

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. 火光成品效果

 闪动的火光效果

 最终效果

14.物理组件

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

三、Shader渲染

1.shader渲染原理

创建Shader脚本,创建材质球,将物体的的渲染效果Shader脚本挂载到材质球,最后把材质球挂到3d物体上面从而实现渲染。

2.模型边缘发光案例

原理:正对着摄像机的模型三角面边缘光最弱垂直于摄像机的模型三角面边缘光最强。利用顶点法线,正对着摄像机的面边缘光因子为0,垂直于摄像机的面边缘光因子为1。

 

四、实战案例

1.聊天

使聊天框的内容跟随文字显示

2.动画效果

创建动画片段

制作动画正向

 绑定动画播放完毕后要执行的脚本和传入的参数

制作反向动画

绑定使用动画

脚本控制动画

控制动画播放和显示对应图标

注意事项

默认不勾选

绑定脚本

五、开发技巧

1.修改ts默认模板,自定义模板

2.设置其它编辑器

3.将摄像机对准当前界面

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

4.消息机制

原理介绍

运用场景:可以把各个节点脚本给管理起来让其相互调用时看上去不杂乱无章

编写源码

消息类,用于节点脚本/消息中心之间传递数据消息,比如NPC的铁匠要UI刷新血量

接收消息基类,用于节点脚本继承后拥有接收消息的统一能力 

管理类,用于管理下级节点脚本,如UI管理类、NPC管理类 

消息中心类,用于管理下面的管理类,如管理UI管理类、NPC管理类

实际运用

其实玩家可以直接操作血条控件的,这里做了一层转换目的是为了防止以后各个组件网状调用很难维护很乱,但是如果只有几个脚本的游戏无需用套模式

角色

UI控件

玩家类脚本(消息发生者)

下面是源码

UI管理类脚本(消息传递者)

下面是源码

UI子脚本(消息接收者)

测试

5.状态机制

原理介绍

运用场景是:有很多个状态,并且同一个时间点只有一个任务在执行,用状态机制可以把状态封装到内部,外面直接调用状态机的方法即可切换,提高代码阅读性和可扩展性;

编写源码

状态基类

状态管理器

实际运用

飞行状态

死亡状态

控制状态的物体(绑定死亡和飞的事件)

六、打包发布

1.发布到WX平台

好像需要具备云函数能力的appid。

报错:app.json。参考

2.发布到Android平台

下载AndroidStudio

下载AndroidSDK

在android studio的sdk manager中安装sdk

选择安装位置后一路下一步安装 

下载AndroidNDK

 配置SDK和NDK

sdk是开发包,ndk是编译包

 

下载C++库

Windows 下需要安装 Visual Studio 2017/2019 社区版。在安装 Visual Studio 时,请勾选 使用 C++ 的桌面开发 和 使用 C++ 的游戏开发 两个模块。注意修改安装位置到其它盘符。

 配置环境变量

配置jdk、android sdk、android ndk环境变量

 构建发布

项目名称游戏名称不能含有中文,否则可能会打包失败。配置参数参见cocos官网

 

  

  

七、其它

1.安装插件

2.设置浏览器或开发工具

3.Webstorm整合Cocos

ECMAScript 6配置,见下图:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/617853.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

echarts环形图 legend文字过长显示...鼠标移动上展示全称

legend: {type: scroll,orient: vertical,x: left,y: bottom,top: "42%",left: 13%,data: this.dutyNames,textStyle: { color: #fff },triggerEvent: true,tooltip: {show: true,trigger: item,//鼠标移动上去展示全称},formatter: function (params) {var val &qu…

【每日刷题】Day38

【每日刷题】Day38 🥕个人主页:开敲🍉 🔥所属专栏:每日刷题🍍 🌼文章目录🌼 1. 2696. 删除子串后的字符串最小长度 - 力扣(LeetCode) 2. LCR 123. 图书整理…

使用 Spring Boot 配合策略模式增强系统接口扩展能力

使用 Spring Boot 配合策略模式增强系统接口扩展能力 在软件开发中,系统的可扩展性是一个至关重要的方面。而策略模式是一种常见的设计模式,它可以帮助我们实现灵活的算法选择和系统功能扩展。结合 Spring Boot 框架,我们可以更加方便地利用策…

域控操作十四:统一修改域控内计算机用户头像

1,Windows默认头像存储路径,所以我们把这里面的图片都改成自己想要的头像,然后写策略强制使用默认头像就行了 此设置是替换默认头像使用 此设置是为设置默认头像

039——解决室内不能使用GPS问题

目录 引入 GUI整改 client添加GPS分析 完善服务器网络通讯部分代码 添加GPS的BSW层 GPS操作部分代码(相当于驱动) 效果展示 项目管理操作 引入 最近在写论文加上出去玩了一圈所以停更了一段时间。上次咱们GPS有个室内用不了的问题,咱…

本地vite启动的vue项目使用nginx代理

前提: 必须在同一网段或者相同的局域网!!! nginx下载通道: https://nginx.org/en/download.html 步骤: 1、最好下载稳定版本: 2、下载后直接解压(注意:解压后不要放…

C++入门系列-拷贝构造函数

🌈个人主页:羽晨同学 💫个人格言:“成为自己未来的主人~” 拷贝构造函数 概念 在创建对象的时候,能不能创建一个和已知已存在的对象一模一样的对象呢? 拷贝构造函数:只有单个形参,该形参…

【JavaWeb】Day74.Spring——AOP进阶(连接点)

连接点 连接点可以简单理解为可以被AOP控制的方法。我们目标对象当中所有的方法不是都是可以被AOP控制的方法。而在SpringAOP当中,连接点又特指方法的执行。 在Spring中用JoinPoint抽象了连接点,用它可以获得方法执行时的相关信息,如目标类名…

Mybatis操作数据库的两种方式:原生API

mybatis操作数据的两种方式:原生api和mapper代理对象 1.mybatis的api提供的方法 insert() 增加 delete() 删除 update() 更新 selectOne() 返回一个数据 selectList() 返回多个数据,结果类型为List selectMap() 返回多个数据&…

算法学习系列(六十):区间DP

目录 引言区间合并模板一、石子合并二、环形石子合并三、能量项链 引言 关于这个区间 D P DP DP ,其实是有套路和模板的,题型的话也是变化不多,感觉就那几种,只不过有些题会用到高精度或者是要记录方案,所以整体来说…

为什么你总是买不到心仪的房?可能是因为你忽略了这些!

​在人生的旅途中,过多的选择有时并无益处。当选择变得繁多,我们往往容易迷失方向,渴望拥有所有,但最终可能一无所获。 对于迫切需要购房的人来说,他们常常面临这样的困境:被各种声音和推荐所包围&#xf…

STM32窗口看门狗的操作

STM32的窗口看门狗的主要功能是,程序过早的喂狗还有太晚喂狗,都会触发单片机重启,就是有一个时间段,在这个时间段内喂狗才不会触发单片机重启。 下面我就总结一下窗口看门狗的设置过程: 第一步:开启窗口看…

搭建本地yum仓库

步骤 找个地方存你的rpm包 #我创建了一个rpm文件夹存放我的rpm包 makdir -p /opt/repo/rpmcreaterepo 这个很重要,一定要安装 # 我的能连外网,所以直接yum安装,你的自己想办法 yum install createrepo -y创建repodata 安装了createrepo后…

day001 ~如何修改主机名

命令行方式设置主机名 # 这个很重要!用命令改方便些 hostnamectl set-hostname ocloud-252 #查询,exit或logout重新登录后发现主机名换掉 hostname nmtui方式修改 nmtui 在工作中,如果机器很多,最好修改主机名做好标识不至于弄混,方便管理.

WEB后端复习——监听器、过滤器

Listener监听器 是Servlet规范中定义的一种特殊类,它用于监听web应用程序中的ServletContext, HttpSession和ServletRequest等域对象的创建与销毁事件,以及监听这些域对象中的属性发生修改的事件。 注解WebListener 1.ServletContextListener 监听Serv…

Windows使用cowaxess(goaccess)分析Nginx日志

原文网址:Windows使用cowaxess(goaccess)分析Nginx日志_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Windows安装cowaxess来分析Nginx的access.log日志的方法。 cowaxess是goaccess的Windows版本,cowaxess底层会调用goaccess。 GoAccess 是一个专门用来…

uniapp获取当前位置及检测授权状态——支持App、微信小程序

uniapp获取当前位置检测及定位权限——支持App、微信小程序 首先,祝天下母亲,节日快乐~ 文章目录 uniapp获取当前位置检测及定位权限——支持App、微信小程序效果图新增 兼容小程序方法manifest Tips: 上一篇介绍 App端 uniapp获取当前位置及…

# 电脑突然连接不上网络了,怎么办?

电脑突然连接不上网络了,怎么办? 一、原因分析: 1、IP 地址冲突 2、DNS 解析出现问题。 3、电脑网络设置是否打开了【移动热点】或【飞行模式】。 4、【WLAN AutoConfig】服务是否打开。 5、无线网卡驱动损坏。 6、检查 WIFI 开关是否…

新闻资讯微信小程序开发后端+php【附源码,文档说明】

博主介绍:✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…

1060: 无向图的最大度计算

解法&#xff1a; #include<iostream> #include<vector> using namespace std; int arr[100][100]; int main() {int n, max 0;cin >> n;vector<int> sum(n, 0);for (int i 0; i < n; i) {for (int j 0; j < n; j) {cin >> arr[i][j];…