Merge branch 'release/0.11.0'
This commit is contained in:
caizhitao
commit
58d355f34b
@ -1,5 +1,10 @@
|
||||
# ChangeLog
|
||||
|
||||
## 0.11.0 (2020-06-23)
|
||||
|
||||
- 新增内发光v2
|
||||
- 此为另外一种内发光采样实现，正常情况下可能效果能和v1差不多，但是性能会好一点
|
||||
|
||||
## 0.10.0 (2020-04-10)
|
||||
|
||||
- 支持 Cocos Creator v2.3.3
|
||||
|
||||
12
README.md
12
README.md
@ -1,8 +1,8 @@
|
||||
# Cocos Creator Shader Effect Demo
|
||||
|
||||
[](CHANGELOG.md)
|
||||
[](CHANGELOG.md)
|
||||
[](LICENSE)
|
||||
[](http://www.cocos.com/creator)
|
||||
[](http://www.cocos.com/creator)
|
||||
[](http://www.cocos.com/creator)
|
||||
[](http://www.cocos.com/creator)
|
||||
|
||||
@ -12,9 +12,9 @@
|
||||
1. 此项目为我在学习过程中的一些分享和实现，因此项目名字以 **`Demo`** 为后缀。
|
||||
2. 项目重点在于 **「渔」**，不在于 **「鱼」** 。
|
||||
3. 如果你有意将此Demo中的效果加入到你的项目中，**请认真评估是否适合你的项目使用！**
|
||||
4. 本项目支持 Cocos Creator `v2.3.0` 、 ~~`v2.2.2`~~ 、 ~~`v2.2.1`~~
|
||||
1. 项目当前正在使用 v2.3.0 开发
|
||||
2. 由于2.3.0和2.2.2，2.2.1差别较大，因此，`master`分支的最新项目已经无法在2.2.1，2.2.2中重新打开，如果确实需要在 2.2.1，2.2.2 中打开，请先切换到旧版本的tag（`0.8.0`），才能用 2.2.1，2.2.2打开
|
||||
4. 本项目支持 Cocos Creator `v2.3.+` 、 ~~`v2.2.2`~~ 、 ~~`v2.2.1`~~
|
||||
1. 项目当前正在使用 v2.3.3 开发
|
||||
2. 由于2.3.+和2.2.2，2.2.1差别较大，因此，`master`分支的最新项目已经无法在2.2.1，2.2.2中重新打开，如果确实需要在 2.2.1，2.2.2 中打开，请先切换到旧版本的tag（`0.8.0`），才能用 2.2.1，2.2.2打开
|
||||
|
||||
## 二、系列文章
|
||||
|
||||
@ -37,6 +37,8 @@
|
||||
|
||||
### 内发光（[实现原理](https://www.jianshu.com/p/326b73f86ecc)）
|
||||
|
||||
*ps:此效果有两个版本实现，见对应effect源码，前几行内有版本差异说明*
|
||||
|
||||
|
||||
|
||||
### 马赛克/像素化（[实现原理](https://www.jianshu.com/p/40e72ab76afd)）
|
||||
|
||||
238
assets/effects/sprite-glow-inner-v2.effect
Normal file
238
assets/effects/sprite-glow-inner-v2.effect
Normal file
@ -0,0 +1,238 @@
|
||||
// 相比起 v1 版本的变更
|
||||
//
|
||||
// 1. 切换了采样算法，由原来圆采样，改为矩形采样，减少大量三角函数运算，在保持差不多效果的前提下，性能得到大幅提升
|
||||
|
||||
CCEffect %{
|
||||
techniques:
|
||||
- passes:
|
||||
- vert: vs
|
||||
frag: fs
|
||||
blendState:
|
||||
targets:
|
||||
- blend: true
|
||||
rasterizerState:
|
||||
cullMode: none
|
||||
properties:
|
||||
texture: { value: white }
|
||||
alphaThreshold: { value: 0.5 }
|
||||
# 自定义参数
|
||||
glowColor: {
|
||||
value: [1.0, 1.0, 0.0, 1.0],
|
||||
editor: {
|
||||
type: color,
|
||||
tooltip: "发光颜色（RGBA）"
|
||||
}
|
||||
}
|
||||
spriteWidth: {
|
||||
value: 500,
|
||||
editor: {
|
||||
tooltip: "纹理宽度（px）"
|
||||
}
|
||||
}
|
||||
spriteHeight: {
|
||||
value: 500,
|
||||
editor: {
|
||||
tooltip: "纹理高度（px）"
|
||||
}
|
||||
}
|
||||
glowRange: {
|
||||
value: 20,
|
||||
editor: {
|
||||
tooltip: "内发光范围（px）"
|
||||
}
|
||||
}
|
||||
# 发光透明度阈值
|
||||
# 只有超过这个透明度的点才会发光
|
||||
# 一般用于解决图像边缘存在渐变透明的时，决定超过这个透明度阈值的边缘点才点发光，具体可以操作一下
|
||||
glowThreshold: {
|
||||
value: 0.1,
|
||||
editor: {
|
||||
tooltip: "发光阈值（只有超过这个透明度的点才会发光）",
|
||||
range: [0.0, 1.0]
|
||||
}
|
||||
}
|
||||
}%
|
||||
|
||||
|
||||
CCProgram vs %{
|
||||
precision highp float;
|
||||
|
||||
#include <cc-global>
|
||||
#include <cc-local>
|
||||
|
||||
in vec3 a_position;
|
||||
in vec4 a_color;
|
||||
out vec4 v_color;
|
||||
|
||||
#if USE_TEXTURE
|
||||
in vec2 a_uv0;
|
||||
out vec2 v_uv0;
|
||||
#endif
|
||||
|
||||
void main () {
|
||||
vec4 pos = vec4(a_position, 1);
|
||||
|
||||
#if CC_USE_MODEL
|
||||
pos = cc_matViewProj * cc_matWorld * pos;
|
||||
#else
|
||||
pos = cc_matViewProj * pos;
|
||||
#endif
|
||||
|
||||
#if USE_TEXTURE
|
||||
v_uv0 = a_uv0;
|
||||
#endif
|
||||
|
||||
v_color = a_color;
|
||||
|
||||
gl_Position = pos;
|
||||
}
|
||||
}%
|
||||
|
||||
|
||||
CCProgram fs %{
|
||||
precision highp float;
|
||||
|
||||
#include <alpha-test>
|
||||
|
||||
in vec4 v_color;
|
||||
|
||||
#if USE_TEXTURE
|
||||
in vec2 v_uv0;
|
||||
uniform sampler2D texture;
|
||||
#endif
|
||||
|
||||
// 定义向周边搜索的圈数
|
||||
#define range 5.0
|
||||
|
||||
#if SHOW_INNER_GLOW
|
||||
|
||||
uniform glow {
|
||||
// 发光颜色
|
||||
vec4 glowColor;
|
||||
|
||||
// 纹理宽度（px）
|
||||
float spriteWidth;
|
||||
|
||||
// 纹理高度（px）
|
||||
float spriteHeight;
|
||||
|
||||
// 内发光范围（px）
|
||||
float glowRange;
|
||||
|
||||
// 发光阈值
|
||||
float glowThreshold;
|
||||
|
||||
// 特别地，必须是 vec4 先于 float 声明
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取纹理uv颜色
|
||||
*
|
||||
* 主要实现：超出边界的统一返回 vec4(0.0, 0.0, 0.0, 0.0)
|
||||
*
|
||||
* 在 Cocos Creator 2.2.1 的编辑器中，超出边界的uv并不是返回 vec4(0.0, 0.0, 0.0, 0.0)，实际返回为
|
||||
*
|
||||
* * 超出左边界的uv，返回 v_uv0.x = 0 的颜色
|
||||
* * 超出右边界的uv，返回 v_uv0.x = 1 的颜色
|
||||
* * 超出上边界的uv，返回 v_uv0.y = 1 的颜色
|
||||
* * 超出下边界的uv，返回 v_uv0.y = 0 的颜色
|
||||
*
|
||||
* 和实际在浏览器上显示（超出边界即为透明）的有区别，为了统一，这里适配一下，这样子，在编辑器上预览的效果就能和实际浏览器的保持一致
|
||||
*/
|
||||
vec4 getTextureColor(sampler2D texture, vec2 v_uv0) {
|
||||
if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {
|
||||
return vec4(0.0, 0.0, 0.0, 0.0);
|
||||
}
|
||||
return texture(texture, v_uv0);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取发光的透明度
|
||||
*/
|
||||
float getGlowAlpha() {
|
||||
// 如果发光宽度为0，直接返回0.0透明度，减少计算量
|
||||
if (glowRange == 0.0) {
|
||||
return 0.0;
|
||||
}
|
||||
|
||||
// 因为我们是要做内发光，所以如果点本来是透明的或者接近透明的
|
||||
// 那么就意味着这个点是图像外的透明点或者图像内透明点（如空洞）之类的
|
||||
// 内发光的话，这些透明点我们不用处理，让它保持原样，否则就是会有内描边或者一点扩边的效果
|
||||
// 同时也是提前直接结束，减少计算量
|
||||
vec4 srcColor = getTextureColor(texture, v_uv0);
|
||||
if (srcColor.a <= glowThreshold) {
|
||||
return srcColor.a;
|
||||
}
|
||||
|
||||
// 每一圈的对应的步长
|
||||
float per_step_x = (1.0 / spriteWidth) * (glowRange / range);
|
||||
float per_step_y = (1.0 / spriteHeight) * (glowRange / range);
|
||||
|
||||
// 取样周边一定范围透明度
|
||||
float totalAlpha = 0.0;
|
||||
for (float x = -range; x <= range; x++) {
|
||||
for (float y = -range; y <= range; y++) {
|
||||
totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;
|
||||
}
|
||||
}
|
||||
totalAlpha /= (range + range + 1.0) * (range + range + 1.0);
|
||||
return totalAlpha;
|
||||
}
|
||||
|
||||
#endif
|
||||
|
||||
void main () {
|
||||
vec4 o = vec4(1, 1, 1, 1);
|
||||
|
||||
#if USE_TEXTURE
|
||||
o *= texture(texture, v_uv0);
|
||||
#if CC_USE_ALPHA_ATLAS_TEXTURE
|
||||
o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
|
||||
#endif
|
||||
#endif
|
||||
|
||||
o *= v_color;
|
||||
|
||||
ALPHA_TEST(o);
|
||||
|
||||
gl_FragColor = o;
|
||||
|
||||
#if SHOW_INNER_GLOW
|
||||
// 目标颜色（图像）
|
||||
vec4 color_dest = o;
|
||||
|
||||
// 获取发光透明度
|
||||
// 此时我们得到的是内部透明度为1，靠近边缘的为接近0的透明度，其他位置为0的透明度
|
||||
float alpha = getGlowAlpha();
|
||||
|
||||
// 而内发光是从边缘开始的，那么什么算是边缘呢？
|
||||
// 如果图像边缘有大量渐变，那么如果我们取大于 0.0 点就算是图像内的话，那么可能边缘会出现锯齿
|
||||
// 因此为了确定边缘，引入了发光阈值，我们只需要比较一下发光阈值就可以，大于发光阈值的点都是（图像内）发光点
|
||||
if (alpha > glowThreshold) {
|
||||
|
||||
// 内发光是从边缘发光的，是需要内部透明度为0，靠近边缘的接近1的透明度
|
||||
// 因此我们需要翻转一下透明度
|
||||
alpha = 1.0 - alpha;
|
||||
|
||||
// 给点调料，让靠近边缘的更加亮
|
||||
alpha = -1.0 * pow((alpha - 1.0), 4.0) + 1.0;
|
||||
}
|
||||
// 源颜色（内发光）
|
||||
vec4 color_src = glowColor * alpha;
|
||||
|
||||
// 按照这个顺序，源颜色就是内发光颜色，目标颜色就是图案颜色色
|
||||
// 所以命名就是 color_src, color_dest
|
||||
|
||||
// 按照混合颜色规则 http://docs.cocos.com/creator/manual/zh/advanced-topics/ui-auto-batch.html#blend-%E6%A8%A1%E5%BC%8F
|
||||
// 要在图案上方，叠加一个内发光，将两者颜色混合起来，那么最终选择的混合模式如下：
|
||||
//
|
||||
// （内发光）color_src: GL_SRC_ALPHA
|
||||
// （原图像）color_dest: GL_ONE
|
||||
//
|
||||
// 即最终颜色如下：
|
||||
// color_src * GL_SRC_ALPHA + color_dest * GL_ONE
|
||||
|
||||
gl_FragColor = color_src * color_src.a + color_dest;
|
||||
#endif
|
||||
}
|
||||
}%
|
||||
17
assets/effects/sprite-glow-inner-v2.effect.meta
Normal file
17
assets/effects/sprite-glow-inner-v2.effect.meta
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"ver": "1.0.25",
|
||||
"uuid": "c49fbec9-7e8c-4114-a058-354eebd04446",
|
||||
"compiledShaders": [
|
||||
{
|
||||
"glsl1": {
|
||||
"vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
|
||||
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform float alphaThreshold;\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform vec4 glowColor;\nuniform float spriteWidth;\nuniform float spriteHeight;\nuniform float glowRange;\nuniform float glowThreshold;\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture2D(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n if (glowRange == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float per_step_x = (1.0 / spriteWidth) * (glowRange / 5.0);\n float per_step_y = (1.0 / spriteHeight) * (glowRange / 5.0);\n float totalAlpha = 0.0;\n for (float x = -5.0; x <= 5.0; x++) {\n for (float y = -5.0; y <= 5.0; y++) {\n totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n }\n }\n totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n return totalAlpha;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n o *= texture2D(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * pow((alpha - 1.0), 4.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}"
|
||||
},
|
||||
"glsl3": {
|
||||
"vert": "\nprecision highp float;\nuniform CCGlobal {\n mat4 cc_matView;\n mat4 cc_matViewInv;\n mat4 cc_matProj;\n mat4 cc_matProjInv;\n mat4 cc_matViewProj;\n mat4 cc_matViewProjInv;\n vec4 cc_cameraPos;\n vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
|
||||
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform glow {\n vec4 glowColor;\n float spriteWidth;\n float spriteHeight;\n float glowRange;\n float glowThreshold;\n};\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n if (glowRange == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float per_step_x = (1.0 / spriteWidth) * (glowRange / 5.0);\n float per_step_y = (1.0 / spriteHeight) * (glowRange / 5.0);\n float totalAlpha = 0.0;\n for (float x = -5.0; x <= 5.0; x++) {\n for (float y = -5.0; y <= 5.0; y++) {\n totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n }\n }\n totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n return totalAlpha;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n o *= texture(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * pow((alpha - 1.0), 4.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subMetas": {}
|
||||
}
|
||||
28
assets/materials/sprite-glow-inner-v2.mtl
Normal file
28
assets/materials/sprite-glow-inner-v2.mtl
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"__type__": "cc.Material",
|
||||
"_name": "sprite-glow-inner-v2",
|
||||
"_objFlags": 0,
|
||||
"_native": "",
|
||||
"_effectAsset": {
|
||||
"__uuid__": "c49fbec9-7e8c-4114-a058-354eebd04446"
|
||||
},
|
||||
"_techniqueIndex": 0,
|
||||
"_techniqueData": {
|
||||
"0": {
|
||||
"defines": {
|
||||
"USE_TEXTURE": true,
|
||||
"SHOW_INNER_GLOW": true
|
||||
},
|
||||
"props": {
|
||||
"glowColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 0,
|
||||
"a": 255
|
||||
},
|
||||
"glowRange": 60
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
assets/materials/sprite-glow-inner-v2.mtl.meta
Normal file
6
assets/materials/sprite-glow-inner-v2.mtl.meta
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"ver": "1.0.3",
|
||||
"uuid": "5e2baa0c-d8bf-493f-89f7-a11352092439",
|
||||
"dataAsSubAsset": null,
|
||||
"subMetas": {}
|
||||
}
|
||||
@ -58,7 +58,7 @@
|
||||
"_groupIndex": 0,
|
||||
"groupIndex": 0,
|
||||
"autoReleaseAssets": false,
|
||||
"_id": "69a920f1-0509-4d54-b033-5fb5b1283b72"
|
||||
"_id": "d9314270-2175-430f-9b5b-e4cef9314a76"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
@ -78,13 +78,13 @@
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 124
|
||||
"__id__": 132
|
||||
},
|
||||
{
|
||||
"__id__": 125
|
||||
"__id__": 133
|
||||
},
|
||||
{
|
||||
"__id__": 126
|
||||
"__id__": 134
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
@ -174,7 +174,7 @@
|
||||
"array": [
|
||||
0,
|
||||
0,
|
||||
324.7595264191645,
|
||||
416.8423838059318,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
@ -254,7 +254,7 @@
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 123
|
||||
"__id__": 131
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
@ -5145,7 +5145,6 @@
|
||||
},
|
||||
"_resize": 1,
|
||||
"_N$layoutType": 2,
|
||||
"_N$padding": 0,
|
||||
"_N$cellSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 40,
|
||||
@ -5165,7 +5164,7 @@
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "Examples",
|
||||
"_name": "ScrollView",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 5
|
||||
@ -5173,21 +5172,15 @@
|
||||
"_children": [
|
||||
{
|
||||
"__id__": 115
|
||||
},
|
||||
{
|
||||
"__id__": 117
|
||||
},
|
||||
{
|
||||
"__id__": 119
|
||||
}
|
||||
],
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 121
|
||||
"__id__": 129
|
||||
},
|
||||
{
|
||||
"__id__": 122
|
||||
"__id__": 130
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
@ -5202,7 +5195,7 @@
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 384,
|
||||
"height": 442
|
||||
"height": 640
|
||||
},
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
@ -5236,6 +5229,87 @@
|
||||
"_is3DNode": false,
|
||||
"_groupIndex": 0,
|
||||
"groupIndex": 0,
|
||||
"_id": "2d/atMp8dG4L16Rl7WrAM5"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "Examples",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 114
|
||||
},
|
||||
"_children": [
|
||||
{
|
||||
"__id__": 116
|
||||
},
|
||||
{
|
||||
"__id__": 118
|
||||
},
|
||||
{
|
||||
"__id__": 120
|
||||
},
|
||||
{
|
||||
"__id__": 122
|
||||
},
|
||||
{
|
||||
"__id__": 124
|
||||
},
|
||||
{
|
||||
"__id__": 126
|
||||
}
|
||||
],
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 128
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 0,
|
||||
"height": 1238.8
|
||||
},
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0.5,
|
||||
"y": 1
|
||||
},
|
||||
"_trs": {
|
||||
"__type__": "TypedArray",
|
||||
"ctor": "Float64Array",
|
||||
"array": [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
1,
|
||||
1,
|
||||
1
|
||||
]
|
||||
},
|
||||
"_eulerAngles": {
|
||||
"__type__": "cc.Vec3",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"z": 0
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_is3DNode": false,
|
||||
"_groupIndex": 0,
|
||||
"groupIndex": 0,
|
||||
"_id": "feymBChPxA1pr6+/rlPqey"
|
||||
},
|
||||
{
|
||||
@ -5243,13 +5317,13 @@
|
||||
"_name": "cocos_logo",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 114
|
||||
"__id__": 115
|
||||
},
|
||||
"_children": [],
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 116
|
||||
"__id__": 117
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
@ -5276,7 +5350,7 @@
|
||||
"ctor": "Float64Array",
|
||||
"array": [
|
||||
0,
|
||||
-135,
|
||||
-147,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
@ -5298,14 +5372,14 @@
|
||||
"_is3DNode": false,
|
||||
"_groupIndex": 0,
|
||||
"groupIndex": 0,
|
||||
"_id": "25JHa6EcNEBZ1hoesQM1Q4"
|
||||
"_id": "19I84S9glPKYKXBymxRb7M"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Sprite",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 115
|
||||
"__id__": 116
|
||||
},
|
||||
"_enabled": true,
|
||||
"_materials": [
|
||||
@ -5330,20 +5404,20 @@
|
||||
"_fillRange": 0,
|
||||
"_isTrimmedMode": true,
|
||||
"_atlas": null,
|
||||
"_id": "74+WCqN01NIbcSpr5gcxmE"
|
||||
"_id": "63wzO33IhIzYLBDumqR/qS"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "ball_1",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 114
|
||||
"__id__": 115
|
||||
},
|
||||
"_children": [],
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 118
|
||||
"__id__": 119
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
@ -5370,7 +5444,7 @@
|
||||
"ctor": "Float64Array",
|
||||
"array": [
|
||||
0,
|
||||
-336,
|
||||
-378,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
@ -5399,7 +5473,7 @@
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 117
|
||||
"__id__": 118
|
||||
},
|
||||
"_enabled": true,
|
||||
"_materials": [
|
||||
@ -5428,16 +5502,298 @@
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "BmFont",
|
||||
"_name": "shark_1",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 114
|
||||
"__id__": 115
|
||||
},
|
||||
"_children": [],
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 121
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 553,
|
||||
"height": 471
|
||||
},
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
},
|
||||
"_trs": {
|
||||
"__type__": "TypedArray",
|
||||
"ctor": "Float64Array",
|
||||
"array": [
|
||||
0,
|
||||
-544.65,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0.3,
|
||||
0.3,
|
||||
1
|
||||
]
|
||||
},
|
||||
"_eulerAngles": {
|
||||
"__type__": "cc.Vec3",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"z": 0
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_is3DNode": false,
|
||||
"_groupIndex": 0,
|
||||
"groupIndex": 0,
|
||||
"_id": "90jOWIi0BE+aHDVAvj/lOv"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Sprite",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 120
|
||||
},
|
||||
"_enabled": true,
|
||||
"_materials": [
|
||||
{
|
||||
"__uuid__": "647e873f-e0ed-4ce7-84cb-9e4d4f8a211f"
|
||||
}
|
||||
],
|
||||
"_srcBlendFactor": 770,
|
||||
"_dstBlendFactor": 771,
|
||||
"_spriteFrame": {
|
||||
"__uuid__": "0e41233e-c8d7-4f37-b2c2-60f41472887d"
|
||||
},
|
||||
"_type": 0,
|
||||
"_sizeMode": 1,
|
||||
"_fillType": 0,
|
||||
"_fillCenter": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_fillStart": 0,
|
||||
"_fillRange": 0,
|
||||
"_isTrimmedMode": true,
|
||||
"_atlas": null,
|
||||
"_id": "05uYrlNcNInp1I5l0tPn9S"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "sushi_1",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 115
|
||||
},
|
||||
"_children": [],
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 123
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 639,
|
||||
"height": 287
|
||||
},
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
},
|
||||
"_trs": {
|
||||
"__type__": "TypedArray",
|
||||
"ctor": "Float64Array",
|
||||
"array": [
|
||||
0,
|
||||
-723.05,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0.5,
|
||||
0.5,
|
||||
1
|
||||
]
|
||||
},
|
||||
"_eulerAngles": {
|
||||
"__type__": "cc.Vec3",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"z": 0
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_is3DNode": false,
|
||||
"_groupIndex": 0,
|
||||
"groupIndex": 0,
|
||||
"_id": "8a1dgfWGBBmIPp6Cvii1C6"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Sprite",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 122
|
||||
},
|
||||
"_enabled": true,
|
||||
"_materials": [
|
||||
{
|
||||
"__uuid__": "647e873f-e0ed-4ce7-84cb-9e4d4f8a211f"
|
||||
}
|
||||
],
|
||||
"_srcBlendFactor": 770,
|
||||
"_dstBlendFactor": 771,
|
||||
"_spriteFrame": {
|
||||
"__uuid__": "8eb18f86-2d97-4fbf-8d69-c5dd52df4a13"
|
||||
},
|
||||
"_type": 0,
|
||||
"_sizeMode": 1,
|
||||
"_fillType": 0,
|
||||
"_fillCenter": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_fillStart": 0,
|
||||
"_fillRange": 0,
|
||||
"_isTrimmedMode": true,
|
||||
"_atlas": null,
|
||||
"_id": "9b1oKjhJxMSrg6qauxRc5V"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "giraffe_1",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 115
|
||||
},
|
||||
"_children": [],
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 125
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 300,
|
||||
"height": 640
|
||||
},
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
},
|
||||
"_trs": {
|
||||
"__type__": "TypedArray",
|
||||
"ctor": "Float64Array",
|
||||
"array": [
|
||||
0,
|
||||
-990.8,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0.5,
|
||||
0.5,
|
||||
1
|
||||
]
|
||||
},
|
||||
"_eulerAngles": {
|
||||
"__type__": "cc.Vec3",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"z": 0
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"_is3DNode": false,
|
||||
"_groupIndex": 0,
|
||||
"groupIndex": 0,
|
||||
"_id": "7ditFS1Y9KmpSmca6NZFy3"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Sprite",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 124
|
||||
},
|
||||
"_enabled": true,
|
||||
"_materials": [
|
||||
{
|
||||
"__uuid__": "647e873f-e0ed-4ce7-84cb-9e4d4f8a211f"
|
||||
}
|
||||
],
|
||||
"_srcBlendFactor": 770,
|
||||
"_dstBlendFactor": 771,
|
||||
"_spriteFrame": {
|
||||
"__uuid__": "ca4c5d38-6446-45f6-88fc-2300852051f9"
|
||||
},
|
||||
"_type": 0,
|
||||
"_sizeMode": 1,
|
||||
"_fillType": 0,
|
||||
"_fillCenter": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"_fillStart": 0,
|
||||
"_fillRange": 0,
|
||||
"_isTrimmedMode": true,
|
||||
"_atlas": null,
|
||||
"_id": "1eCplTTO9BSJ6wePyWwtmu"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "BmFont",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 115
|
||||
},
|
||||
"_children": [],
|
||||
"_active": true,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 127
|
||||
}
|
||||
],
|
||||
"_prefab": null,
|
||||
@ -5464,7 +5820,7 @@
|
||||
"ctor": "Float64Array",
|
||||
"array": [
|
||||
0,
|
||||
-422,
|
||||
-1206.8,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
@ -5493,7 +5849,7 @@
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 119
|
||||
"__id__": 126
|
||||
},
|
||||
"_enabled": true,
|
||||
"_materials": [
|
||||
@ -5522,6 +5878,38 @@
|
||||
"_N$cacheMode": 0,
|
||||
"_id": "7cXLgoUJhDP7BPjr4yx+Ep"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Layout",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 115
|
||||
},
|
||||
"_enabled": true,
|
||||
"_layoutSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 0,
|
||||
"height": 1238.8
|
||||
},
|
||||
"_resize": 1,
|
||||
"_N$layoutType": 2,
|
||||
"_N$cellSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 40,
|
||||
"height": 40
|
||||
},
|
||||
"_N$startAxis": 0,
|
||||
"_N$paddingLeft": 0,
|
||||
"_N$paddingRight": 0,
|
||||
"_N$paddingTop": 12,
|
||||
"_N$paddingBottom": 12,
|
||||
"_N$spacingX": 48,
|
||||
"_N$spacingY": 36,
|
||||
"_N$verticalDirection": 1,
|
||||
"_N$horizontalDirection": 0,
|
||||
"_N$affectedByScale": true,
|
||||
"_id": "ff9z0nF9BGm5zFMuGhj1jt"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Widget",
|
||||
"_name": "",
|
||||
@ -5532,11 +5920,11 @@
|
||||
"_enabled": true,
|
||||
"alignMode": 1,
|
||||
"_target": null,
|
||||
"_alignFlags": 41,
|
||||
"_alignFlags": 45,
|
||||
"_left": 0.6,
|
||||
"_right": 0,
|
||||
"_top": 0,
|
||||
"_bottom": 48,
|
||||
"_bottom": 0,
|
||||
"_verticalCenter": 0,
|
||||
"_horizontalCenter": 0,
|
||||
"_isAbsLeft": false,
|
||||
@ -5545,42 +5933,33 @@
|
||||
"_isAbsBottom": true,
|
||||
"_isAbsHorizontalCenter": true,
|
||||
"_isAbsVerticalCenter": true,
|
||||
"_originalWidth": 509,
|
||||
"_originalWidth": 0,
|
||||
"_originalHeight": 0,
|
||||
"_id": "80mVZhmc1LHYCtsbpy1Jnu"
|
||||
"_id": "66DhDtyM5DXI4OitKADVOI"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Layout",
|
||||
"__type__": "cc.ScrollView",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 114
|
||||
},
|
||||
"_enabled": true,
|
||||
"_layoutSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 384,
|
||||
"height": 442
|
||||
"horizontal": false,
|
||||
"vertical": true,
|
||||
"inertia": true,
|
||||
"brake": 0.5,
|
||||
"elastic": true,
|
||||
"bounceDuration": 1,
|
||||
"scrollEvents": [],
|
||||
"cancelInnerEvents": true,
|
||||
"_N$content": {
|
||||
"__id__": 115
|
||||
},
|
||||
"_resize": 1,
|
||||
"_N$layoutType": 2,
|
||||
"_N$padding": 0,
|
||||
"_N$cellSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 40,
|
||||
"height": 40
|
||||
"content": {
|
||||
"__id__": 115
|
||||
},
|
||||
"_N$startAxis": 0,
|
||||
"_N$paddingLeft": 0,
|
||||
"_N$paddingRight": 0,
|
||||
"_N$paddingTop": 0,
|
||||
"_N$paddingBottom": 0,
|
||||
"_N$spacingX": 48,
|
||||
"_N$spacingY": 36,
|
||||
"_N$verticalDirection": 1,
|
||||
"_N$horizontalDirection": 0,
|
||||
"_N$affectedByScale": false,
|
||||
"_id": "ff9z0nF9BGm5zFMuGhj1jt"
|
||||
"_id": "6afSoDGrxMdbMz9CZsHCeI"
|
||||
},
|
||||
{
|
||||
"__type__": "68622NlRNJFN4QrXlFCQMe/",
|
||||
@ -5609,16 +5988,6 @@
|
||||
"_fitHeight": true,
|
||||
"_id": "4bz2+ak99DBYVlSVIMFGN0"
|
||||
},
|
||||
{
|
||||
"__type__": "eebe5Fr5bhMO7IsowoLW/Yp",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 2
|
||||
},
|
||||
"_enabled": true,
|
||||
"_id": "1a7ypfDW1DQqGMHUC5Sf0L"
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Widget",
|
||||
"_name": "",
|
||||
@ -5645,5 +6014,15 @@
|
||||
"_originalWidth": 0,
|
||||
"_originalHeight": 0,
|
||||
"_id": "314F24pJRBBZaYka0OCTsh"
|
||||
},
|
||||
{
|
||||
"__type__": "eebe5Fr5bhMO7IsowoLW/Yp",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 2
|
||||
},
|
||||
"_enabled": true,
|
||||
"_id": "68onf5NstN0Z3WZhqOSIoJ"
|
||||
}
|
||||
]
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"ver": "1.2.7",
|
||||
"uuid": "69a920f1-0509-4d54-b033-5fb5b1283b72",
|
||||
"uuid": "d9314270-2175-430f-9b5b-e4cef9314a76",
|
||||
"asyncLoadAssets": false,
|
||||
"autoReleaseAssets": false,
|
||||
"subMetas": {}
|
||||
6028
assets/scenes/GlowInnerV2EffectScene.fire
Executable file
6028
assets/scenes/GlowInnerV2EffectScene.fire
Executable file
File diff suppressed because it is too large
Load Diff
7
assets/scenes/GlowInnerV2EffectScene.fire.meta
Normal file
7
assets/scenes/GlowInnerV2EffectScene.fire.meta
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"ver": "1.2.7",
|
||||
"uuid": "6d781c30-9520-4a95-9e9d-eb99fb2bbded",
|
||||
"asyncLoadAssets": false,
|
||||
"autoReleaseAssets": false,
|
||||
"subMetas": {}
|
||||
}
|
||||
@ -20,9 +20,10 @@ export default class GlowInnerEffectScene extends cc.Component {
|
||||
private _glowThresholdSlider: cc.Slider = null;
|
||||
private _glowThresholdSliderLabel: cc.Label = null;
|
||||
|
||||
private _examplesParentNode: cc.Node = null;
|
||||
private _scrollView: cc.ScrollView = null;
|
||||
|
||||
onLoad() {
|
||||
cc.dynamicAtlasManager.enabled = false;
|
||||
this._redSlider = cc.find("Canvas/Content/Sliders/ColorRedSlider/Slider").getComponent(cc.Slider);
|
||||
this._redSliderLabel = cc.find("Canvas/Content/Sliders/ColorRedSlider/ValueLabel").getComponent(cc.Label);
|
||||
|
||||
@ -41,7 +42,7 @@ export default class GlowInnerEffectScene extends cc.Component {
|
||||
this._glowThresholdSlider = cc.find("Canvas/Content/Sliders/GlowThresholdSlider/Slider").getComponent(cc.Slider);
|
||||
this._glowThresholdSliderLabel = cc.find("Canvas/Content/Sliders/GlowThresholdSlider/ValueLabel").getComponent(cc.Label);
|
||||
|
||||
this._examplesParentNode = cc.find("Canvas/Content/Examples");
|
||||
this._scrollView = cc.find("Canvas/Content/ScrollView").getComponent(cc.ScrollView);
|
||||
}
|
||||
|
||||
onEnable() {
|
||||
@ -74,7 +75,7 @@ export default class GlowInnerEffectScene extends cc.Component {
|
||||
this._alphaSliderLabel.string = `${this._alphaSlider.progress.toFixed(2)} | ${Math.round(255 * this._alphaSlider.progress)}`;
|
||||
|
||||
// 这里为约束一下值发光宽度值在 [0.0, 0.1] 因为 0.1+ 之后的效果可能不明显，也可以自己尝试修改
|
||||
let realGlowWidthProgress = this._glowWidthSlider.progress * 0.1;
|
||||
let realGlowWidthProgress = this._glowWidthSlider.progress * 0.2;
|
||||
this._glowWidthSliderLabel.string = `${realGlowWidthProgress.toFixed(2)}`;
|
||||
|
||||
// 这里为约束一下值发光阈值值在 [0.0, 0.5] 因为 0.5+ 之后的效果可能就是其他效果，也可以自己修改这里
|
||||
@ -86,7 +87,7 @@ export default class GlowInnerEffectScene extends cc.Component {
|
||||
this._updateRenderComponentMaterial({
|
||||
glowColor: cc.v4(this._redSlider.progress, this._greenSlider.progress, this._blueSlider.progress, this._alphaSlider.progress),
|
||||
glowColorSize: realGlowWidthProgress,
|
||||
glowThreshold: realGlowThresholdProgress
|
||||
glowThreshold: realGlowThresholdProgress,
|
||||
});
|
||||
}
|
||||
|
||||
@ -113,8 +114,8 @@ export default class GlowInnerEffectScene extends cc.Component {
|
||||
*/
|
||||
glowThreshold: number;
|
||||
}) {
|
||||
this._examplesParentNode.children.forEach(childNode => {
|
||||
childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
|
||||
this._scrollView.content.children.forEach((childNode) => {
|
||||
childNode.getComponents(cc.RenderComponent).forEach((renderComponent) => {
|
||||
let material: cc.Material = renderComponent.getMaterial(0);
|
||||
material.setProperty("glowColorSize", param.glowColorSize);
|
||||
material.setProperty("glowColor", param.glowColor);
|
||||
139
assets/scripts/GlowInnerV2EffectScene.ts
Normal file
139
assets/scripts/GlowInnerV2EffectScene.ts
Normal file
@ -0,0 +1,139 @@
|
||||
const { ccclass, property } = cc._decorator;
|
||||
|
||||
@ccclass
|
||||
export default class GlowInnerV2EffectScene extends cc.Component {
|
||||
private _redSlider: cc.Slider = null;
|
||||
private _redSliderLabel: cc.Label = null;
|
||||
|
||||
private _greenSlider: cc.Slider = null;
|
||||
private _greenSliderLabel: cc.Label = null;
|
||||
|
||||
private _blueSlider: cc.Slider = null;
|
||||
private _blueSliderLabel: cc.Label = null;
|
||||
|
||||
private _alphaSlider: cc.Slider = null;
|
||||
private _alphaSliderLabel: cc.Label = null;
|
||||
|
||||
private _glowWidthSlider: cc.Slider = null;
|
||||
private _glowWidthSliderLabel: cc.Label = null;
|
||||
|
||||
private _glowThresholdSlider: cc.Slider = null;
|
||||
private _glowThresholdSliderLabel: cc.Label = null;
|
||||
|
||||
private _scrollView: cc.ScrollView = null;
|
||||
|
||||
onLoad() {
|
||||
cc.dynamicAtlasManager.enabled = false;
|
||||
this._redSlider = cc.find("Canvas/Content/Sliders/ColorRedSlider/Slider").getComponent(cc.Slider);
|
||||
this._redSliderLabel = cc.find("Canvas/Content/Sliders/ColorRedSlider/ValueLabel").getComponent(cc.Label);
|
||||
|
||||
this._greenSlider = cc.find("Canvas/Content/Sliders/ColorGreenSlider/Slider").getComponent(cc.Slider);
|
||||
this._greenSliderLabel = cc.find("Canvas/Content/Sliders/ColorGreenSlider/ValueLabel").getComponent(cc.Label);
|
||||
|
||||
this._blueSlider = cc.find("Canvas/Content/Sliders/ColorBlueSlider/Slider").getComponent(cc.Slider);
|
||||
this._blueSliderLabel = cc.find("Canvas/Content/Sliders/ColorBlueSlider/ValueLabel").getComponent(cc.Label);
|
||||
|
||||
this._alphaSlider = cc.find("Canvas/Content/Sliders/ColorAlphaSlider/Slider").getComponent(cc.Slider);
|
||||
this._alphaSliderLabel = cc.find("Canvas/Content/Sliders/ColorAlphaSlider/ValueLabel").getComponent(cc.Label);
|
||||
|
||||
this._glowWidthSlider = cc.find("Canvas/Content/Sliders/GlowWidthSlider/Slider").getComponent(cc.Slider);
|
||||
this._glowWidthSliderLabel = cc.find("Canvas/Content/Sliders/GlowWidthSlider/ValueLabel").getComponent(cc.Label);
|
||||
|
||||
this._glowThresholdSlider = cc.find("Canvas/Content/Sliders/GlowThresholdSlider/Slider").getComponent(cc.Slider);
|
||||
this._glowThresholdSliderLabel = cc.find("Canvas/Content/Sliders/GlowThresholdSlider/ValueLabel").getComponent(cc.Label);
|
||||
|
||||
this._scrollView = cc.find("Canvas/Content/ScrollView").getComponent(cc.ScrollView);
|
||||
}
|
||||
|
||||
onEnable() {
|
||||
this._redSlider.node.on("slide", this._onSliderChanged, this);
|
||||
this._greenSlider.node.on("slide", this._onSliderChanged, this);
|
||||
this._blueSlider.node.on("slide", this._onSliderChanged, this);
|
||||
this._alphaSlider.node.on("slide", this._onSliderChanged, this);
|
||||
this._glowWidthSlider.node.on("slide", this._onSliderChanged, this);
|
||||
this._glowThresholdSlider.node.on("slide", this._onSliderChanged, this);
|
||||
}
|
||||
|
||||
onDisable() {
|
||||
this._redSlider.node.off("slide", this._onSliderChanged, this);
|
||||
this._greenSlider.node.off("slide", this._onSliderChanged, this);
|
||||
this._blueSlider.node.off("slide", this._onSliderChanged, this);
|
||||
this._alphaSlider.node.off("slide", this._onSliderChanged, this);
|
||||
this._glowWidthSlider.node.off("slide", this._onSliderChanged, this);
|
||||
this._glowThresholdSlider.node.off("slide", this._onSliderChanged, this);
|
||||
}
|
||||
|
||||
start() {
|
||||
this._onSliderChanged();
|
||||
}
|
||||
|
||||
private _onSliderChanged() {
|
||||
// 更新进度条值 Label 文本
|
||||
this._redSliderLabel.string = `${this._redSlider.progress.toFixed(2)} | ${Math.round(255 * this._redSlider.progress)}`;
|
||||
this._greenSliderLabel.string = `${this._greenSlider.progress.toFixed(2)} | ${Math.round(255 * this._greenSlider.progress)}`;
|
||||
this._blueSliderLabel.string = `${this._blueSlider.progress.toFixed(2)} | ${Math.round(255 * this._blueSlider.progress)}`;
|
||||
this._alphaSliderLabel.string = `${this._alphaSlider.progress.toFixed(2)} | ${Math.round(255 * this._alphaSlider.progress)}`;
|
||||
|
||||
let realGlowWidthProgress = this._glowWidthSlider.progress * 200;
|
||||
this._glowWidthSliderLabel.string = `${realGlowWidthProgress.toFixed(0)}`;
|
||||
|
||||
// 这里为约束一下值发光阈值值在 [0.0, 0.5] 因为 0.5+ 之后的效果可能就是其他效果，也可以自己修改这里
|
||||
// let realGlowThresholdProgress = this._glowThresholdSlider.progress * 0.5;
|
||||
let realGlowThresholdProgress = this._glowThresholdSlider.progress;
|
||||
this._glowThresholdSliderLabel.string = `${realGlowThresholdProgress.toFixed(2)}`;
|
||||
|
||||
// 更新材质
|
||||
this._updateRenderComponentMaterial({
|
||||
glowColor: cc.v4(this._redSlider.progress, this._greenSlider.progress, this._blueSlider.progress, this._alphaSlider.progress),
|
||||
glowRange: realGlowWidthProgress,
|
||||
glowThreshold: realGlowThresholdProgress,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新渲染组件的材质
|
||||
*
|
||||
* 1. 获取材质
|
||||
* 2. 给材质的 unitform 变量赋值
|
||||
* 3. 重新将材质赋值回去
|
||||
*/
|
||||
private _updateRenderComponentMaterial(param: {
|
||||
/**
|
||||
* 发光宽度（px）
|
||||
*/
|
||||
glowRange: number;
|
||||
|
||||
/**
|
||||
* 发光颜色 [0.0, 1.0]
|
||||
*/
|
||||
glowColor: cc.Vec4;
|
||||
|
||||
/**
|
||||
* 发光阈值 [0.0, 1.0]
|
||||
*/
|
||||
glowThreshold: number;
|
||||
}) {
|
||||
this._scrollView.content.children.forEach((childNode) => {
|
||||
childNode.getComponents(cc.RenderComponent).forEach((renderComponent) => {
|
||||
if (renderComponent instanceof cc.Sprite) {
|
||||
let spriteFrameRect = (<cc.Sprite>renderComponent).spriteFrame.getRect();
|
||||
let material: cc.Material = renderComponent.getMaterial(0);
|
||||
material.setProperty("spriteWidth", spriteFrameRect.width);
|
||||
material.setProperty("spriteHeight", spriteFrameRect.height);
|
||||
material.setProperty("glowRange", param.glowRange);
|
||||
material.setProperty("glowColor", param.glowColor);
|
||||
material.setProperty("glowThreshold", param.glowThreshold);
|
||||
renderComponent.setMaterial(0, material);
|
||||
} else {
|
||||
let material: cc.Material = renderComponent.getMaterial(0);
|
||||
material.setProperty("spriteWidth", childNode.width);
|
||||
material.setProperty("spriteHeight", childNode.height);
|
||||
material.setProperty("glowRange", param.glowRange);
|
||||
material.setProperty("glowColor", param.glowColor);
|
||||
material.setProperty("glowThreshold", param.glowThreshold);
|
||||
renderComponent.setMaterial(0, material);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
9
assets/scripts/GlowInnerV2EffectScene.ts.meta
Normal file
9
assets/scripts/GlowInnerV2EffectScene.ts.meta
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"ver": "1.0.8",
|
||||
"uuid": "1c87571b-ed1c-476d-afc7-917037e08f5a",
|
||||
"isPlugin": false,
|
||||
"loadPluginInWeb": true,
|
||||
"loadPluginInNative": true,
|
||||
"loadPluginInEditor": false,
|
||||
"subMetas": {}
|
||||
}
|
||||
BIN
assets/textures/giraffe_1.png
Normal file
BIN
assets/textures/giraffe_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
36
assets/textures/giraffe_1.png.meta
Normal file
36
assets/textures/giraffe_1.png.meta
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"ver": "2.3.4",
|
||||
"uuid": "a4aa4d0b-7260-4512-928b-2e21a404fa74",
|
||||
"type": "sprite",
|
||||
"wrapMode": "clamp",
|
||||
"filterMode": "bilinear",
|
||||
"premultiplyAlpha": false,
|
||||
"genMipmaps": false,
|
||||
"packable": true,
|
||||
"width": 320,
|
||||
"height": 640,
|
||||
"platformSettings": {},
|
||||
"subMetas": {
|
||||
"giraffe_1": {
|
||||
"ver": "1.0.4",
|
||||
"uuid": "ca4c5d38-6446-45f6-88fc-2300852051f9",
|
||||
"rawTextureUuid": "a4aa4d0b-7260-4512-928b-2e21a404fa74",
|
||||
"trimType": "auto",
|
||||
"trimThreshold": 1,
|
||||
"rotated": false,
|
||||
"offsetX": 0,
|
||||
"offsetY": 0,
|
||||
"trimX": 10,
|
||||
"trimY": 0,
|
||||
"width": 300,
|
||||
"height": 640,
|
||||
"rawWidth": 320,
|
||||
"rawHeight": 640,
|
||||
"borderTop": 0,
|
||||
"borderBottom": 0,
|
||||
"borderLeft": 0,
|
||||
"borderRight": 0,
|
||||
"subMetas": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
assets/textures/shark_1.png
Normal file
BIN
assets/textures/shark_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
36
assets/textures/shark_1.png.meta
Normal file
36
assets/textures/shark_1.png.meta
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"ver": "2.3.4",
|
||||
"uuid": "027e7b96-1718-4e86-b330-a631dc3eaa0c",
|
||||
"type": "sprite",
|
||||
"wrapMode": "clamp",
|
||||
"filterMode": "bilinear",
|
||||
"premultiplyAlpha": false,
|
||||
"genMipmaps": false,
|
||||
"packable": true,
|
||||
"width": 640,
|
||||
"height": 480,
|
||||
"platformSettings": {},
|
||||
"subMetas": {
|
||||
"shark_1": {
|
||||
"ver": "1.0.4",
|
||||
"uuid": "0e41233e-c8d7-4f37-b2c2-60f41472887d",
|
||||
"rawTextureUuid": "027e7b96-1718-4e86-b330-a631dc3eaa0c",
|
||||
"trimType": "auto",
|
||||
"trimThreshold": 1,
|
||||
"rotated": false,
|
||||
"offsetX": 5.5,
|
||||
"offsetY": 0.5,
|
||||
"trimX": 49,
|
||||
"trimY": 4,
|
||||
"width": 553,
|
||||
"height": 471,
|
||||
"rawWidth": 640,
|
||||
"rawHeight": 480,
|
||||
"borderTop": 0,
|
||||
"borderBottom": 0,
|
||||
"borderLeft": 0,
|
||||
"borderRight": 0,
|
||||
"subMetas": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
assets/textures/sushi_1.png
Normal file
BIN
assets/textures/sushi_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
36
assets/textures/sushi_1.png.meta
Normal file
36
assets/textures/sushi_1.png.meta
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"ver": "2.3.4",
|
||||
"uuid": "83e0e28c-7599-4754-a59f-a169cbd5cbcd",
|
||||
"type": "sprite",
|
||||
"wrapMode": "clamp",
|
||||
"filterMode": "bilinear",
|
||||
"premultiplyAlpha": false,
|
||||
"genMipmaps": false,
|
||||
"packable": true,
|
||||
"width": 640,
|
||||
"height": 320,
|
||||
"platformSettings": {},
|
||||
"subMetas": {
|
||||
"sushi_1": {
|
||||
"ver": "1.0.4",
|
||||
"uuid": "8eb18f86-2d97-4fbf-8d69-c5dd52df4a13",
|
||||
"rawTextureUuid": "83e0e28c-7599-4754-a59f-a169cbd5cbcd",
|
||||
"trimType": "auto",
|
||||
"trimThreshold": 1,
|
||||
"rotated": false,
|
||||
"offsetX": 0.5,
|
||||
"offsetY": -3.5,
|
||||
"trimX": 1,
|
||||
"trimY": 20,
|
||||
"width": 639,
|
||||
"height": 287,
|
||||
"rawWidth": 640,
|
||||
"rawHeight": 320,
|
||||
"borderTop": 0,
|
||||
"borderBottom": 0,
|
||||
"borderLeft": 0,
|
||||
"borderRight": 0,
|
||||
"subMetas": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user