CocosCreator 2.1.2 Shader组件
本篇文章相关导读:
01 基本用法
在中秋节的三天假期里,Shawn 终于将 ShaderHelper2 的组件 接口完全还原到旧版本 ShaderHelper 一样了,看下图:
同时新版 ShaderHelper 支持在组件上传递参数到片元着色器中,如下效果:
需要注意 ShaderHelper 的 props 参数只是用来设置片元代码中变量的初值。当你在编辑器中实时调节 props 中的参数值时,可以在场景编辑器中实时看到参数变化后的效果。
02 动态效果
要让Shader运行起来具有动态效果,我这里参考了前面一篇文章《一起来看,社区大佬揭开 Creator 2.1.2 材质系统的神秘面纱!》中「lxb229」大佬的作法,增加了一个 ShaderTime 的组件专用于更新 Shader 代码中的 time 参数,看下图:
ShaderTime 组件是在 update 回调中不停地更新 Shader 中的 time 参数值,从 0 累加到 65535 再回到 0。我在「lxb229」大佬的基础上,稍微增强了一点点,将 max 属性保留成了组件属性,同时当你在调节 max 属性时也能在场景编辑中做实时预览。
为什么想到这这样一个功能了,主要是有几个 Shader 效果参数在0~1之间才有效,超过这个值就看不到效果或者是什么都不显示,还以为出问题了呢?还有一点是,我录的视频,大家看不效果!
03
我们自己要添加新的 Shader,并能被 ShaderHelper 的 program 属性所检索到,只需要将 Cocos Creator 生成的 Effect 文件保存到resources/effects目录下,请看下图:
其中关于圆形头像的Shader,我们需要在代码中关闭引擎的动态图集的功能:
cc.dynamicAtlasManager.enabled = false;
04
Shawn 最近也开始学习使用 TypeScript 啦!因此新版 ShaderHelper2 中的组件脚本全部采用 TypeScript 语言来编写。使用 TypeScript 的优点我这里不用多说,请看 KUOKUO 大佬的文章《为什么要选择使用TypeScript》。
而且 Shawn 还向 Cocos Creator 引擎组打听到,他们内部还对是否支持 JavaScript 做过投票,由于 JavaScript 的用户基数特别大,因此被保留了下来。因此建议初学者直接使用 TypeScript 作为 Creator 游戏开发的首先语言!
不过这里稍微吐糟一下 Creator 提供的 creator.t.ds,因为 Shawn 在使用 TypeScript 编写 ShaderHelper2 的过程中也遇到不少坑。其中一个就是引擎提供的 creator.t.ds 居然没有 cc.Effect 的数据类型定义,以及 cc.Material 对象中的属性、方法都是空的… 编写的组件代码在 IDE 中出现烦人的红线提示,我这里就强行修改了 creator.t.ds,增加需要用到的属性和函数。
export class Material extends Asset {
effectAsset: Asset;
define(name: string, val: any): void;
setProperty(name:string, val: any);
}
export class EffectAsset extends Asset {
}
还有种是使用了引擎内部的接口,在 creator.t.ds 中也没有定义,因此只能用硬来了将红线直接干掉,下面是具体做法:
//@ts-ignore
cc.Class.Attr.setClassAttr(...);
如果你也遇到类似的问题,这里提供三种解决方法:
手动修改 creator.t.ds 文件;
使用 “//@ts-ignore” 屏蔽下一行的语法检查(仅一行);
向 Cocos Creator 提供源码注释。
其中第3项,是最彻底的解决方法,因为引擎组的大佬们实在是太忙了,有时会忘记为源码添加注释,因此在 creator.t.ds 没有留下定义。这是一个很好的向引擎提交源码的机会,具体的方法可以参考这里:
https://docs.cocos.com/creator/manual/zh/submit-pr/submit-pr.html
ShaderHelper2最新源码,请在公众号回复【ShaderHelper2】获取,感谢你的阅读,愿前进的道路上我们一起砥砺前行,共同成长!
CocosCreator 2.1.2 Shader组件的更多相关文章
- Creator 2.2.0 终于等来了这款Shader组件神器!一招搞定Effect特效
先看下视频演示: ShaderHelper2支持Creator 2.2.0 视频录完后才想起,还没在微信小游戏中测试,赶紧试试,下面是在微信开发者工具中的截图. 径向模糊 探照灯 提供了一个Shade ...
- 新版Shader组件更新啦,支持 Creator2.3.x 外,还有新特性...
B站视频 https://www.bilibili.com/video/BV1j7411X7mG/ 新版 ShaderHelper 组件更新啦,这个版本主要更新了三个功能: Cocos Creator ...
- PaperRead - A Shader Framework for Rapid Prototyping of GPU-Based Volume Rendering
PaperRead - A Shader Framework for Rapid Prototyping of GPU-Based Volume Rendering 目录 PaperRead - A ...
- Unity ShaderLab学习总结
http://www.jianshu.com/p/7b9498e58659 Unity ShaderLab学习总结 Why Bothers? 为什么已经有ShaderForge这种可视化Shader编 ...
- ShaderLab学习总结
转载 Unity ShaderLab学习总结 Why Bothers? 为什么已经有ShaderForge这种可视化Shader编辑器.为什么Asset Store已经有那么多炫酷的Shader组件可 ...
- 盘点一下Creator星球上的开源工具包!
晓衡开始写公众号,最早是从上架 Cocos 商店的 pbkiller 插件开始的,到至今有2年2个月了.在这期间,又陆续在公众号上分享了多个实用工具包,在这里统一盘点一下,方便与大家交流学习. 一.u ...
- Unity项目 - MissionDemolition 愤怒的小鸟核心机制
目录 游戏原型 项目演示 绘图资源 代码实现 注意事项 技术探讨 参考来源 游戏原型 爆破任务 MissionDemolition 是一款核心机制类似于愤怒的小鸟的游戏,玩家将用弹弓发射炮弹,摧毁城堡 ...
- CocosCreator的ToggleGroup组件使用
用了CocosCreator也有一段时间,对ToggleGroup始终没有仔细的学习过,只停留在用过的水平.所以因为认识有限,所以以为ToggleGroup对自定义支持得没那么好,这两天因为项目,再学 ...
- CocosCreator脚本中向依赖的组件赋值后, 被依赖的组件没有取到值的问题!
问题描述: 两个节点parent&child(其中都包含脚本组件), parent脚本组件依赖了child组件, 节点关系如下图: parent脚本内容如下: child脚本内容如下: 预览时 ...
随机推荐
- JAVA中为什么要配置环境变量?怎么配置环境变量?
1.为什么要配置环境变量? 答:为了让javac命令(编译命令)和Java命令(运行命令)能在任何文件夹都能运行. 2.怎么配置环境变量? JAVA_HOME : D:\develop\Java\jd ...
- docker仓库资源的地址修改
docker仓库资源的地址修改 1.新增或者修改/etc/docker目录下的daemon.json文件 样例文件如下 { "registry-mirrors": ["h ...
- dga model train and test code
# _*_coding:UTF-8_*_ import operator import tldextract import random import pickle import os import ...
- Maven 生命周期的阶段与插件的目标之间的绑定关系
clean 生命周期 clean 生命周期的阶段 插件的目标 pre-clean clean maven-clean-plugin:clean post-clean default 生命周期的内置插件 ...
- 怎么安装python3
解压 这个压缩包 2.把解压后的python文件夹所在的路径配置到环境变量 3.鼠标移动到计算机上---右键---属性----高级系统设置---环境变量,打开如下界面 4.在系统变量里选择pa ...
- Vi编辑网卡
Vi /etc/sysconfig/network-scripts/ifcfg-ens33 1.光标定位到BOOTPROTO=后面 2.然后按x键进行删除 3.按i键打开编辑模式,输入BOOTPRO ...
- Appium+python自动化(二)- 环境搭建—下(超详解)
简介 宏哥的人品还算说得过去,虽然很久没有搭建环境了,但是换了新电脑设备,一气呵成,将android的测试开发环境已经搭建准备完毕.上一篇android测试开发环境已经准备好, 那么接下来就是appi ...
- Window包管理工具scoop
自定义安装路径安装 scoop安装应用路径 目标目录是D:\Program Files\Scoop,在PowerShell命令控制台中运行: [environment]::setEnvironment ...
- USACO Stamps
洛谷 P2725 邮票 Stamps https://www.luogu.org/problem/P2725 JDOJ 1797: Stamps 邮票 https://neooj.com:8082/o ...
- es启动失败
Aug 09 21:43:23 10921114-elklogserver elasticsearch[30152]: 2018-08-09 21:43:23,068 main ERROR Null ...