Test_Project_Cocos/CocosCreator-Shader-Effect-Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善圆角裁剪

Browse Source
This commit is contained in:
caizhitao 2020-01-09 10:01:28 +08:00
parent 9e3ca8fce6
commit 7380cf3292
7 changed files with 213 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
assets/effects/sprite-round-corner-crop.effect
View File

@ -1,9 +1,7 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. // Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
// 老照片特效 // 圆角裁剪
// 原理： // 原理：https://www.cnblogs.com/jqm304775992/p/4987793.html
// r = 0.393 * r + 0.769 * g + 0.189 * b; // 代码：复制 yanjifa/shaderDemor 的 https://github.com/yanjifa/shaderDemo/blob/master/assets/Effect/CircleAvatar.effect
// g = 0.349 * r + 0.686 * g + 0.168 * b;
// b = 0.272 * r + 0.534 * g + 0.131 * b;
CCEffect %{ CCEffect %{
techniques: techniques:
@ -18,12 +16,12 @@ CCEffect %{
properties: properties:
texture: { value: white } texture: { value: white }
alphaThreshold: { value: 0.5 } alphaThreshold: { value: 0.5 }
# 老化程度 # 圆角半径
oldLevel: { roundCornerRadius: {
value: 1.0, value: 0.1,
inspector: { inspector: {
tooltip: "老化程度", tooltip: "圆角半径",
range: [0.0, 1.0] range: [0.0, 0.5]
} }
} }
}% }%
@ -76,24 +74,10 @@ CCProgram fs %{
uniform sampler2D texture; uniform sampler2D texture;
#endif #endif
#if USE_OLD_PHOTO #if ENABLE_ROUNDCORNER
uniform OldPhoto { uniform RoundCorner {
// 老化程度 // 圆角半径
float oldLevel; float roundCornerRadius;
}
/**
* 获取老化颜色
*
* @param color 原始颜色
*
* @return 老化后的颜色
*/
vec4 getOldPhotoColor(vec4 color) {
float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b;
float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b;
float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;
return vec4(r, g, b, color.a);
} }
#endif #endif
@ -111,11 +95,15 @@ CCProgram fs %{
ALPHA_TEST(o); ALPHA_TEST(o);
#if USE_OLD_PHOTO #if ENABLE_ROUNDCORNER
vec4 srcColor = o; vec2 uv = v_uv0.xy - vec2(0.5, 0.5);
vec4 oldColor = getOldPhotoColor(srcColor); float rx = abs(uv.x) - (0.5 - roundCornerRadius);
float ry = abs(uv.y) - (0.5 - roundCornerRadius);
o = srcColor + (oldColor - srcColor) * oldLevel; float mx = step(0.5 - roundCornerRadius, abs(uv.x));
float my = step(0.5 - roundCornerRadius, abs(uv.y));
float radius = length(vec2(rx, ry));
float a = 1.0 - mx * my * step(roundCornerRadius, radius) * smoothstep(0., roundCornerRadius * 0.01, radius - roundCornerRadius);
o = vec4(o.rgb, o.a * a);
#endif #endif
gl_FragColor = o; gl_FragColor = o;
} }

4
assets/effects/sprite-round-corner-crop.effect.meta
View File

@ -5,11 +5,11 @@
{ {
"glsl1": { "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", "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 USE_OLD_PHOTO\nuniform float oldLevel;\n/**\n * 获取老化颜色\n * \n * @param color 原始颜色 \n *\n * @return 老化后的颜色\n */\nvec4 getOldPhotoColor(vec4 color) {\n float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n return vec4(r, g, b, color.a);\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 #if USE_OLD_PHOTO\n vec4 srcColor = o;\n vec4 oldColor = getOldPhotoColor(srcColor);\n\n o = srcColor + (oldColor - srcColor) * oldLevel;\n #endif\n gl_FragColor = o;\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_ROUNDCORNER\nuniform float roundCornerRadius;\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 #if ENABLE_ROUNDCORNER\n vec2 uv = v_uv0.xy - vec2(0.5, 0.5);\n float rx = abs(uv.x) - (0.5 - roundCornerRadius);\n float ry = abs(uv.y) - (0.5 - roundCornerRadius);\n float mx = step(0.5 - roundCornerRadius, abs(uv.x));\n float my = step(0.5 - roundCornerRadius, abs(uv.y));\n float radius = length(vec2(rx, ry));\n float a = 1.0 - mx * my * step(roundCornerRadius, radius) * smoothstep(0., roundCornerRadius * 0.01, radius - roundCornerRadius);\n o = vec4(o.rgb, o.a * a);\n #endif\n gl_FragColor = o;\n}\n"
}, },
"glsl3": { "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", "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 USE_OLD_PHOTO\nuniform OldPhoto {\n\n float oldLevel;\n}\n\n/**\n * 获取老化颜色\n * \n * @param color 原始颜色 \n *\n * @return 老化后的颜色\n */\nvec4 getOldPhotoColor(vec4 color) {\n float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b; \n float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b; \n float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;\n return vec4(r, g, b, color.a);\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 #if USE_OLD_PHOTO\n vec4 srcColor = o;\n vec4 oldColor = getOldPhotoColor(srcColor);\n\n o = srcColor + (oldColor - srcColor) * oldLevel;\n #endif\n gl_FragColor = o;\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_ROUNDCORNER\nuniform RoundCorner {\n\n float roundCornerRadius;\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 #if ENABLE_ROUNDCORNER\n vec2 uv = v_uv0.xy - vec2(0.5, 0.5);\n float rx = abs(uv.x) - (0.5 - roundCornerRadius);\n float ry = abs(uv.y) - (0.5 - roundCornerRadius);\n float mx = step(0.5 - roundCornerRadius, abs(uv.x));\n float my = step(0.5 - roundCornerRadius, abs(uv.y));\n float radius = length(vec2(rx, ry));\n float a = 1.0 - mx * my * step(roundCornerRadius, radius) * smoothstep(0., roundCornerRadius * 0.01, radius - roundCornerRadius);\n o = vec4(o.rgb, o.a * a);\n #endif\n gl_FragColor = o;\n}\n"
} }
} }
], ],

6
assets/materials/sprite-round-corner-crop.mtl
View File

@ -8,7 +8,9 @@
}, },
"_defines": { "_defines": {
"USE_TEXTURE": true, "USE_TEXTURE": true,
"USE_OLD_PHOTO": true "ENABLE_ROUNDCORNER": true
}, },
"_props": {} "_props": {
"roundCornerRadius": 0.1
}
} }

151
assets/scenes/RoundCornerCropEffectScene.fire
View File

@ -78,10 +78,10 @@
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 45 "__id__": 47
}, },
{ {
"__id__": 46 "__id__": 48
} }
], ],
"_prefab": null, "_prefab": null,
@ -251,7 +251,7 @@
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 44 "__id__": 46
} }
], ],
"_prefab": null, "_prefab": null,
@ -646,8 +646,8 @@
} }
], ],
"_useOriginalSize": false, "_useOriginalSize": false,
"_string": "老化程度：", "_string": "圆角半径：",
"_N$string": "老化程度：", "_N$string": "圆角半径：",
"_fontSize": 40, "_fontSize": 40,
"_lineHeight": 40, "_lineHeight": 40,
"_enableWrapText": true, "_enableWrapText": true,
@ -1341,15 +1341,18 @@
}, },
{ {
"__id__": 40 "__id__": 40
},
{
"__id__": 42
} }
], ],
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 42 "__id__": 44
}, },
{ {
"__id__": 43 "__id__": 45
} }
], ],
"_prefab": null, "_prefab": null,
@ -1364,7 +1367,7 @@
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 384, "width": 384,
"height": 583.73 "height": 629.73
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
@ -1408,7 +1411,7 @@
"__id__": 29 "__id__": 29
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 31 "__id__": 31
@ -1496,7 +1499,7 @@
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "cocos_logo", "_name": "freedom",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 29 "__id__": 29
@ -1517,6 +1520,100 @@
"b": 255, "b": 255,
"a": 255 "a": 255
}, },
"_contentSize": {
"__type__": "cc.Size",
"width": 240,
"height": 240
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
-120,
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": "47hFX2oHFLvrpZ4r0ouXPs"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 32
},
"_enabled": true,
"_materials": [
{
"__uuid__": "642c2d0e-7eb6-4d65-96f2-d6e0d0305310"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "dbc8f785-d78b-4179-bfce-ffbf69396712"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "f61+UyKJdOyIJQABsng1SX"
},
{
"__type__": "cc.Node",
"_name": "cocos_logo",
"_objFlags": 0,
"_parent": {
"__id__": 29
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 35
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 195, "width": 195,
@ -1532,7 +1629,7 @@
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, 0,
-207, -387,
0, 0,
0, 0,
0, 0,
@ -1561,7 +1658,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 32 "__id__": 34
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -1596,10 +1693,10 @@
"__id__": 29 "__id__": 29
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 35 "__id__": 37
} }
], ],
"_prefab": null, "_prefab": null,
@ -1626,7 +1723,7 @@
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, 0,
-384, -564,
0, 0,
0, 0,
0, 0,
@ -1655,7 +1752,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 34 "__id__": 36
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -1690,10 +1787,10 @@
"__id__": 29 "__id__": 29
}, },
"_children": [], "_children": [],
"_active": true, "_active": false,
"_components": [ "_components": [
{ {
"__id__": 37 "__id__": 39
} }
], ],
"_prefab": null, "_prefab": null,
@ -1720,7 +1817,7 @@
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, 0,
-451, -631,
0, 0,
0, 0,
0, 0,
@ -1749,7 +1846,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 36 "__id__": 38
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -1787,7 +1884,7 @@
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 39 "__id__": 41
} }
], ],
"_prefab": null, "_prefab": null,
@ -1814,7 +1911,7 @@
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, 0,
-513.2, -559.2,
0, 0,
0, 0,
0, 0,
@ -1843,7 +1940,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 38 "__id__": 40
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -1879,7 +1976,7 @@
"_active": true, "_active": true,
"_components": [ "_components": [
{ {
"__id__": 41 "__id__": 43
} }
], ],
"_prefab": null, "_prefab": null,
@ -1906,7 +2003,7 @@
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, 0,
-567.065, -613.065,
0, 0,
0, 0,
0, 0,
@ -1935,7 +2032,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 40 "__id__": 42
}, },
"_enabled": true, "_enabled": true,
"_materials": [ "_materials": [
@ -2000,7 +2097,7 @@
"_layoutSize": { "_layoutSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 384, "width": 384,
"height": 583.73 "height": 629.73
}, },
"_resize": 1, "_resize": 1,
"_N$layoutType": 2, "_N$layoutType": 2,

53
assets/scripts/RoundCornerCropEffectScene.ts
View File

@ -8,6 +8,9 @@ export default class RoundCornerCropEffectScene extends cc.Component {
private _examplesParentNode: cc.Node = null; private _examplesParentNode: cc.Node = null;
onLoad() { onLoad() {
// 关闭动态合图
cc.dynamicAtlasManager.enabled = false;
this._roundCornerRadiuSlider = cc.find("Canvas/Content/Sliders/RoundCornerRadiusSlider/Slider").getComponent(cc.Slider); this._roundCornerRadiuSlider = cc.find("Canvas/Content/Sliders/RoundCornerRadiusSlider/Slider").getComponent(cc.Slider);
this._roundCornerRadiuLabel = cc.find("Canvas/Content/Sliders/RoundCornerRadiusSlider/ValueLabel").getComponent(cc.Label); this._roundCornerRadiuLabel = cc.find("Canvas/Content/Sliders/RoundCornerRadiusSlider/ValueLabel").getComponent(cc.Label);
@ -29,31 +32,31 @@ export default class RoundCornerCropEffectScene extends cc.Component {
private _onSliderChanged() { private _onSliderChanged() {
this._roundCornerRadiuLabel.string = `${this._roundCornerRadiuSlider.progress.toFixed(2)}`; this._roundCornerRadiuLabel.string = `${this._roundCornerRadiuSlider.progress.toFixed(2)}`;
// // 更新材质 // 更新材质
// this._updateRenderComponentMaterial({ this._updateRenderComponentMaterial({
// oldLevel: this._roundCornerRadiuSlider.progress roundCornerRadius: this._roundCornerRadiuSlider.progress
// }); });
} }
// /** /**
// * 更新渲染组件的材质 * 更新渲染组件的材质
// * *
// * 1. 获取材质 * 1. 获取材质
// * 2. 给材质的 unitform 变量赋值 * 2. 给材质的 unitform 变量赋值
// * 3. 重新将材质赋值回去 * 3. 重新将材质赋值回去
// */ */
// private _updateRenderComponentMaterial(param: { private _updateRenderComponentMaterial(param: {
// /** /**
// * 老化程度 [0.0, 1.0] ，1.0 表示完全老化 * 圆角半径 [0.0, 0.5] ，0.5 表示圆形裁剪
// */ */
// oldLevel: number; roundCornerRadius: number;
// }) { }) {
// this._examplesParentNode.children.forEach(childNode => { this._examplesParentNode.children.forEach(childNode => {
// childNode.getComponents(cc.RenderComponent).forEach(renderComponent => { childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
// let material: cc.Material = renderComponent.getMaterial(0); let material: cc.Material = renderComponent.getMaterial(0);
// material.setProperty("oldLevel", param.oldLevel); material.setProperty("roundCornerRadius", param.roundCornerRadius);
// renderComponent.setMaterial(0, material); renderComponent.setMaterial(0, material);
// }); });
// }); });
// } }
} }

BIN
assets/textures/freedom.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

34
assets/textures/freedom.jpg.meta Normal file
View File

@ -0,0 +1,34 @@
{
"ver": "2.3.3",
"uuid": "caf42253-1569-497e-83da-2d1696f5866b",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"platformSettings": {},
"subMetas": {
"freedom": {
"ver": "1.0.4",
"uuid": "dbc8f785-d78b-4179-bfce-ffbf69396712",
"rawTextureUuid": "caf42253-1569-497e-83da-2d1696f5866b",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 755,
"height": 755,
"rawWidth": 755,
"rawHeight": 755,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}