diff --git a/CHANGELOG.md b/CHANGELOG.md index e59a6c4..415b9dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # ChangeLog +## 0.7.0 (2020-02-07) + +- 加入高斯模糊V1版本（纯原理篇） + ## 0.6.0 (2020-01-17) - 加入新的圆角裁剪特效 v2 ，支持任意宽高纹理圆角裁剪 diff --git a/README.md b/README.md index b850447..0239e8b 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Cocos Creator Shader Effect Demo -[![](https://img.shields.io/badge/Release-0.6.0-green.svg)](CHANGELOG.md) +[![](https://img.shields.io/badge/Release-0.7.0-green.svg)](CHANGELOG.md) [![](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE) [![](https://img.shields.io/badge/Support-Cocos%20Creator%20v2.2.1-orange.svg)](http://www.cocos.com/creator) @@ -20,6 +20,7 @@ * [Cocos Creator Shader Effect 系列 - 5 - 马赛克/像素化特效](https://www.jianshu.com/p/40e72ab76afd) * [Cocos Creator Shader Effect 系列 - 6 - 内发光特效](https://www.jianshu.com/p/326b73f86ecc) * [Cocos Creator Shader Effect 系列 - 7 - 点光/扫光特效](https://www.jianshu.com/p/8ff03b34b0bd) +* [Cocos Creator Shader Effect 系列 - 8 - 高斯模糊](https://www.jianshu.com/p/9e42cbb1d4a8) * 编写中... @@ -69,12 +70,15 @@ ### 圆角裁剪-v2（2020.01.17更新） -在 **圆角裁剪-v1** 的原理基础上，新增支持任意纹理的圆角裁剪 +在 **圆角裁剪-v1** 的原理基础上，新增支持任意宽高纹理的圆角裁剪 如：下面Gif中第3到5秒演示所示，黄色和红色的非正方形纹理也能裁剪出圆角效果 ![](static/effects/2d-sprite-round-corner-crop-v2.gif) +### 高斯模糊-V1（[实现原理](https://www.jianshu.com/p/9e42cbb1d4a8)）2020.02.07更新） + +![](static/effects/2d-sprite-gaussian-blur-v1.png) ### 外发光（完善中...） diff --git a/assets/effects/sprite-gaussian-blur-v1.effect b/assets/effects/sprite-gaussian-blur-v1.effect new file mode 100644 index 0000000..2df18ef --- /dev/null +++ b/assets/effects/sprite-gaussian-blur-v1.effect @@ -0,0 +1,196 @@ +// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. +// 高斯模糊 +// +// 参考资料（必读） +// * http://www.ruanyifeng.com/blog/2012/11/gaussian_blur.html +// * https://zh.wikipedia.org/wiki/%E9%AB%98%E6%96%AF%E6%A8%A1%E7%B3%8A + + +CCEffect %{ + techniques: + - passes: + - vert: vs + frag: fs + blendState: + targets: + - blend: true + rasterizerState: + cullMode: none + properties: + texture: { value: white } + alphaThreshold: { value: 0.5 } + # # 标准方差值 + # stDev: { + # value: 0.84089642, + # inspector: { + # tooltip: "标准方差值" + # } + # } + + # 纹理尺寸 + textureSize: { + value: [100.0, 100.0], + inspector: { + tooltip: "纹理尺寸px（宽 x 高）" + } + } +}% + + +CCProgram vs %{ + precision highp float; + + #include + #include + + 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 + + in vec4 v_color; + + #if USE_TEXTURE + in vec2 v_uv0; + uniform sampler2D texture; + #endif + + #if ENABLE_GAUSSIAN_BLUR + + // 定义无理数 + #define e 2.718281828459045 + + // 定义标准方差值（方差值越大，越模糊，但是需要计算的高斯矩阵范围会变大，从而带来巨大的计算量） + // #define stDev 0.84089642 + #define stDev 1.5 + // #define stDev 5.0 + // #define stDev 10.0 + + // 定义π + #define pi 3.141592653589793 + + // 接收外部变量 + uniform GaussianBlur { + // 纹理尺寸（宽 x 高）（px） + vec2 textureSize; + + // // 标准方差值 + // float stDev; + } + + /** + * 获取权重(对应二维高斯函数公式，见 https://zh.wikipedia.org/wiki/%E9%AB%98%E6%96%AF%E6%A8%A1%E7%B3%8A ) + */ + float getWeight(float x, float y) { + return (1.0 / (2.0 * pi * pow(stDev, 2.0))) * pow(1.0 / e, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(stDev, 2.0))); + } + + #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 ENABLE_GAUSSIAN_BLUR + + // 根据高斯分布（也叫正态分布），在3个标准差范围内的分布比例占到99%的权重，因此我们只需要计算矩阵范围 [6 * stDev + 1, 6 * stDev +1] 上的权重 + const float size = floor(stDev * 6.0 + 1.0); + const float halfSize = floor(size / 2.0); + + // 步骤一：计算高斯矩阵上所有权重的和 + + // // v1：遍历所有点，每个点都计算权重 + // float totalWeight = 0.0; + // for(float x = -halfSize; x<= halfSize; x++) { + // for (float y = -halfSize; y<= halfSize; y++) { + // totalWeight += getWeight(x, y); + // } + // } + + // v2：因为高斯分布是对称的，所以只计算原点、X轴正方向 * 2 、Y轴正方向 * 2 、第一象限的权重 * 4即可求出所有权重之和，相比起v1版本，减少很多循环计算 + + // 原点 + float totalWeight = getWeight(0.0, 0.0); + + // X轴正方向上的权重 * 2.0 就是整个X轴上的权重 + for(float x = 1.0; x <= halfSize; x++) { + totalWeight += getWeight(x, 0.0) * 2.0; + } + // Y轴正方向上的权重 * 2.0 就是整个Y轴上的权重 + for(float y = 1.0; y <= halfSize; y++) { + totalWeight += getWeight(0.0, y) * 2.0; + } + // 第一象限的权重 * 4.0 就是4个象限的权重 + for(float x = 1.0; x <= halfSize; x++) { + for (float y = 1.0; y<= halfSize; y++) { + totalWeight += getWeight(x, y) * 4.0; + } + } + + // TODO: + // + // 因为权重矩阵是一次性计算即可不断应用，因此可以将权重矩阵的计算放到CPU计算，并传入到Shader直接渲染，因此有以下优化方案 + // + // v3：原始权重矩阵在CPU计算并传入到Shader + // v4：加权平均后的权重矩阵在CPU计算并传入Shader + + + // 步骤二：采样周边像素并应用加权平均值，得出最终像素值 + vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0); + // float divider = 0.01; + float onePxWidth = 1.0 / textureSize.x; + float onePxHeight = 1.0 / textureSize.y; + for(float x = -halfSize; x<= halfSize; x++) { + for (float y = -halfSize; y<= halfSize; y++) { + // 求出对应坐标的真正权重（对应权重矩阵） + float weight = getWeight(x, y) / totalWeight; + + // 求出对应坐标像素颜色值的加权值 + // finalColor += texture(texture, v_uv0 + vec2(divider * x, divider * y)) * weight; + finalColor += texture(texture, v_uv0 + vec2(onePxWidth * x, onePxHeight * y)) * weight; + } + } + gl_FragColor = finalColor; + #endif + } +}% diff --git a/assets/effects/sprite-gaussian-blur-v1.effect.meta b/assets/effects/sprite-gaussian-blur-v1.effect.meta new file mode 100644 index 0000000..fd00a2d --- /dev/null +++ b/assets/effects/sprite-gaussian-blur-v1.effect.meta @@ -0,0 +1,17 @@ +{ + "ver": "1.0.23", + "uuid": "41f4d474-d707-45bb-af93-637573f92d54", + "compiledShaders": [ + { + "glsl1": { + "vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\n\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n", + "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\nuniform vec2 textureSize;\n/**\n * 获取权重(对应二维高斯函数公式，见 https:\n\n */\nfloat getWeight(float x, float y) {\n return (1.0 / (2.0 * 3.141592653589793 * pow(1.5, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(1.5, 2.0)));\n}\n\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\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\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n #if ENABLE_GAUSSIAN_BLUR\n\n const float size = floor(1.5 * 6.0 + 1.0);\n const float halfSize = floor(size / 2.0);\n\n float totalWeight = getWeight(0.0, 0.0);\n\n for(float x = 1.0; x <= halfSize; x++) {\n totalWeight += getWeight(x, 0.0) * 2.0;\n }\n\n for(float y = 1.0; y <= halfSize; y++) {\n totalWeight += getWeight(0.0, y) * 2.0;\n }\n\n for(float x = 1.0; x <= halfSize; x++) {\n for (float y = 1.0; y<= halfSize; y++) {\n totalWeight += getWeight(x, y) * 4.0;\n }\n }\n\n vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n\n float onePxWidth = 1.0 / textureSize.x;\n float onePxHeight = 1.0 / textureSize.y;\n for(float x = -halfSize; x<= halfSize; x++) {\n for (float y = -halfSize; y<= halfSize; y++) {\n\n float weight = getWeight(x, y) / totalWeight;\n\n finalColor += texture2D(texture, v_uv0 + vec2(onePxWidth * x, onePxHeight * y)) * weight;\n }\n }\n gl_FragColor = finalColor;\n #endif\n}\n" + }, + "glsl3": { + "vert": "\nprecision highp float;\nuniform CCGlobal {\n vec4 cc_time;\n\n vec4 cc_screenSize;\n\n vec4 cc_screenScale;\n\n vec4 cc_nativeSize;\n\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\n vec4 cc_exposure;\n\n vec4 cc_mainLitDir;\n\n vec4 cc_mainLitColor;\n\n vec4 cc_ambientSky;\n vec4 cc_ambientGround;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\n\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n", + "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform ALPHA_TEST {\n float alphaThreshold;\n }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_GAUSSIAN_BLUR\n\nuniform GaussianBlur {\n\n vec2 textureSize;\n\n}\n\n/**\n * 获取权重(对应二维高斯函数公式，见 https:\n\n */\nfloat getWeight(float x, float y) {\n return (1.0 / (2.0 * 3.141592653589793 * pow(1.5, 2.0))) * pow(1.0 / 2.718281828459045, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(1.5, 2.0)));\n}\n\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\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\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n #if ENABLE_GAUSSIAN_BLUR\n\n const float size = floor(1.5 * 6.0 + 1.0);\n const float halfSize = floor(size / 2.0);\n\n float totalWeight = getWeight(0.0, 0.0);\n\n for(float x = 1.0; x <= halfSize; x++) {\n totalWeight += getWeight(x, 0.0) * 2.0;\n }\n\n for(float y = 1.0; y <= halfSize; y++) {\n totalWeight += getWeight(0.0, y) * 2.0;\n }\n\n for(float x = 1.0; x <= halfSize; x++) {\n for (float y = 1.0; y<= halfSize; y++) {\n totalWeight += getWeight(x, y) * 4.0;\n }\n }\n\n vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);\n\n float onePxWidth = 1.0 / textureSize.x;\n float onePxHeight = 1.0 / textureSize.y;\n for(float x = -halfSize; x<= halfSize; x++) {\n for (float y = -halfSize; y<= halfSize; y++) {\n\n float weight = getWeight(x, y) / totalWeight;\n\n finalColor += texture(texture, v_uv0 + vec2(onePxWidth * x, onePxHeight * y)) * weight;\n }\n }\n gl_FragColor = finalColor;\n #endif\n}\n" + } + } + ], + "subMetas": {} +} \ No newline at end of file diff --git a/assets/materials/sprite-gaussian-blur-v1.mtl b/assets/materials/sprite-gaussian-blur-v1.mtl new file mode 100644 index 0000000..7ffa495 --- /dev/null +++ b/assets/materials/sprite-gaussian-blur-v1.mtl @@ -0,0 +1,14 @@ +{ + "__type__": "cc.Material", + "_name": "", + "_objFlags": 0, + "_native": "", + "_effectAsset": { + "__uuid__": "41f4d474-d707-45bb-af93-637573f92d54" + }, + "_defines": { + "USE_TEXTURE": true, + "ENABLE_GAUSSIAN_BLUR": true + }, + "_props": {} +} \ No newline at end of file diff --git a/assets/materials/sprite-gaussian-blur-v1.mtl.meta b/assets/materials/sprite-gaussian-blur-v1.mtl.meta new file mode 100644 index 0000000..62f0cc0 --- /dev/null +++ b/assets/materials/sprite-gaussian-blur-v1.mtl.meta @@ -0,0 +1,6 @@ +{ + "ver": "1.0.2", + "uuid": "dd3d8f78-9b79-4ca7-9bf7-7a09f7b34108", + "dataAsSubAsset": null, + "subMetas": {} +} \ No newline at end of file diff --git a/assets/scenes/GaussianBlurV1EffectScene.fire b/assets/scenes/GaussianBlurV1EffectScene.fire new file mode 100755 index 0000000..b71595d --- /dev/null +++ b/assets/scenes/GaussianBlurV1EffectScene.fire @@ -0,0 +1,2159 @@ +[ + { + "__type__": "cc.SceneAsset", + "_name": "", + "_objFlags": 0, + "_native": "", + "scene": { + "__id__": 1 + } + }, + { + "__type__": "cc.Scene", + "_objFlags": 0, + "_parent": null, + "_children": [ + { + "__id__": 2 + } + ], + "_active": false, + "_components": [], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 0, + "height": 0 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 1, + 1, + 1 + ] + }, + "_is3DNode": true, + "_groupIndex": 0, + "groupIndex": 0, + "autoReleaseAssets": false, + "_id": "147d5b9f-b769-4112-9daf-2e28236161fa" + }, + { + "__type__": "cc.Node", + "_name": "Canvas", + "_objFlags": 0, + "_parent": { + "__id__": 1 + }, + "_children": [ + { + "__id__": 3 + }, + { + "__id__": 5 + } + ], + "_active": true, + "_components": [ + { + "__id__": 47 + }, + { + "__id__": 48 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 252, + "g": 252, + "b": 252, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 960, + "height": 640 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 480, + 320, + 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": "a286bbGknJLZpRpxROV6M94" + }, + { + "__type__": "cc.Node", + "_name": "Main Camera", + "_objFlags": 0, + "_parent": { + "__id__": 2 + }, + "_children": [], + "_active": true, + "_components": [ + { + "__id__": 4 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 0, + "height": 0 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 0, + 0, + 491.9024293495612, + 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": "fbL5wf1mhFa6PPZbeZvnZ9" + }, + { + "__type__": "cc.Camera", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 3 + }, + "_enabled": true, + "_cullingMask": 4294967295, + "_clearFlags": 7, + "_backgroundColor": { + "__type__": "cc.Color", + "r": 0, + "g": 0, + "b": 0, + "a": 255 + }, + "_depth": -1, + "_zoomRatio": 1, + "_targetTexture": null, + "_fov": 60, + "_orthoSize": 10, + "_nearClip": 1, + "_farClip": 4096, + "_ortho": true, + "_rect": { + "__type__": "cc.Rect", + "x": 0, + "y": 0, + "width": 1, + "height": 1 + }, + "_renderStages": 1, + "_alignWithScreen": true, + "_id": "adItdqNzZHbYUhDAmfCr9b" + }, + { + "__type__": "cc.Node", + "_name": "Content", + "_objFlags": 0, + "_parent": { + "__id__": 2 + }, + "_children": [ + { + "__id__": 6 + }, + { + "__id__": 9 + }, + { + "__id__": 29 + } + ], + "_active": true, + "_components": [ + { + "__id__": 46 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 960, + "height": 640 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_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": "faqYlnbttBCaJJgkn4Ntv/" + }, + { + "__type__": "cc.Node", + "_name": "Bg", + "_objFlags": 0, + "_parent": { + "__id__": 5 + }, + "_children": [], + "_active": true, + "_components": [ + { + "__id__": 7 + }, + { + "__id__": 8 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 27, + "g": 38, + "b": 46, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 960, + "height": 640 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_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": "e2e0crkOLxGrpMxpbC4iQg1" + }, + { + "__type__": "cc.Widget", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 6 + }, + "_enabled": true, + "alignMode": 0, + "_target": null, + "_alignFlags": 45, + "_left": 0, + "_right": 0, + "_top": 0, + "_bottom": 0, + "_verticalCenter": 0, + "_horizontalCenter": 0, + "_isAbsLeft": true, + "_isAbsRight": true, + "_isAbsTop": true, + "_isAbsBottom": true, + "_isAbsHorizontalCenter": true, + "_isAbsVerticalCenter": true, + "_originalWidth": 200, + "_originalHeight": 150, + "_id": "89IA6P0/5JEZERosKJJo6k" + }, + { + "__type__": "cc.Sprite", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 6 + }, + "_enabled": true, + "_materials": [ + { + "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432" + } + ], + "_srcBlendFactor": 770, + "_dstBlendFactor": 771, + "_spriteFrame": { + "__uuid__": "410fb916-8721-4663-bab8-34397391ace7" + }, + "_type": 1, + "_sizeMode": 0, + "_fillType": 0, + "_fillCenter": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_fillStart": 0, + "_fillRange": 0, + "_isTrimmedMode": true, + "_atlas": null, + "_id": "2azjUbJNxALLAfDZrJ8TV0" + }, + { + "__type__": "cc.Node", + "_name": "Controller", + "_objFlags": 0, + "_parent": { + "__id__": 5 + }, + "_children": [ + { + "__id__": 10 + } + ], + "_active": true, + "_components": [ + { + "__id__": 27 + }, + { + "__id__": 28 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 576, + "height": -36 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 1 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + -192, + 320, + 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": "d0PWmVX95D3LEcvBQBPDr+" + }, + { + "__type__": "cc.Node", + "_name": "BlurSlider", + "_objFlags": 0, + "_parent": { + "__id__": 9 + }, + "_children": [ + { + "__id__": 11 + }, + { + "__id__": 14 + }, + { + "__id__": 23 + } + ], + "_active": false, + "_components": [ + { + "__id__": 26 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 576, + "height": 60 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 0, + -30, + 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": "669o93+gJMWJFGUDKSDUJ7" + }, + { + "__type__": "cc.Node", + "_name": "SliderDescLabel", + "_objFlags": 0, + "_parent": { + "__id__": 10 + }, + "_children": [], + "_active": true, + "_components": [ + { + "__id__": 12 + }, + { + "__id__": 13 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 144, + "height": 40 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 1, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + -144, + 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": "d9MLgZpaFCEZu70E0LAUbn" + }, + { + "__type__": "cc.Label", + "_name": "SliderDescLabel