diff --git a/assets/effects/sprite-round-corner-crop.effect b/assets/effects/sprite-round-corner-crop.effect index b7e248a..672793d 100644 --- a/assets/effects/sprite-round-corner-crop.effect +++ b/assets/effects/sprite-round-corner-crop.effect @@ -1,9 +1,7 @@ // Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. -// 老照片特效 -// 原理： -// r = 0.393 * r + 0.769 * g + 0.189 * b; -// g = 0.349 * r + 0.686 * g + 0.168 * b; -// b = 0.272 * r + 0.534 * g + 0.131 * b; +// 圆角裁剪 +// 原理：https://www.cnblogs.com/jqm304775992/p/4987793.html +// 代码：复制 yanjifa/shaderDemor 的 https://github.com/yanjifa/shaderDemo/blob/master/assets/Effect/CircleAvatar.effect CCEffect %{ techniques: @@ -18,12 +16,12 @@ CCEffect %{ properties: texture: { value: white } alphaThreshold: { value: 0.5 } - # 老化程度 - oldLevel: { - value: 1.0, + # 圆角半径 + roundCornerRadius: { + value: 0.1, inspector: { - tooltip: "老化程度", - range: [0.0, 1.0] + tooltip: "圆角半径", + range: [0.0, 0.5] } } }% @@ -76,24 +74,10 @@ CCProgram fs %{ uniform sampler2D texture; #endif - #if USE_OLD_PHOTO - uniform OldPhoto { - // 老化程度 - float oldLevel; - } - - /** - * 获取老化颜色 - * - * @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); + #if ENABLE_ROUNDCORNER + uniform RoundCorner { + // 圆角半径 + float roundCornerRadius; } #endif @@ -111,11 +95,15 @@ CCProgram fs %{ ALPHA_TEST(o); - #if USE_OLD_PHOTO - vec4 srcColor = o; - vec4 oldColor = getOldPhotoColor(srcColor); - - o = srcColor + (oldColor - srcColor) * oldLevel; + #if ENABLE_ROUNDCORNER + vec2 uv = v_uv0.xy - vec2(0.5, 0.5); + float rx = abs(uv.x) - (0.5 - roundCornerRadius); + float ry = abs(uv.y) - (0.5 - roundCornerRadius); + 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 gl_FragColor = o; } diff --git a/assets/effects/sprite-round-corner-crop.effect.meta b/assets/effects/sprite-round-corner-crop.effect.meta index 93d25fe..eb8a892 100644 --- a/assets/effects/sprite-round-corner-crop.effect.meta +++ b/assets/effects/sprite-round-corner-crop.effect.meta @@ -5,11 +5,11 @@ { "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 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": { "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" } } ], diff --git a/assets/materials/sprite-round-corner-crop.mtl b/assets/materials/sprite-round-corner-crop.mtl index cf14024..a1346a7 100644 --- a/assets/materials/sprite-round-corner-crop.mtl +++ b/assets/materials/sprite-round-corner-crop.mtl @@ -8,7 +8,9 @@ }, "_defines": { "USE_TEXTURE": true, - "USE_OLD_PHOTO": true + "ENABLE_ROUNDCORNER": true }, - "_props": {} + "_props": { + "roundCornerRadius": 0.1 + } } \ No newline at end of file diff --git a/assets/scenes/RoundCornerCropEffectScene.fire b/assets/scenes/RoundCornerCropEffectScene.fire index e15bc6a..4f320fb 100755 --- a/assets/scenes/RoundCornerCropEffectScene.fire +++ b/assets/scenes/RoundCornerCropEffectScene.fire @@ -78,10 +78,10 @@ "_active": true, "_components": [ { - "__id__": 45 + "__id__": 47 }, { - "__id__": 46 + "__id__": 48 } ], "_prefab": null, @@ -251,7 +251,7 @@ "_active": true, "_components": [ { - "__id__": 44 + "__id__": 46 } ], "_prefab": null, @@ -646,8 +646,8 @@ } ], "_useOriginalSize": false, - "_string": "老化程度：", - "_N$string": "老化程度：", + "_string": "圆角半径：", + "_N$string": "圆角半径：", "_fontSize": 40, "_lineHeight": 40, "_enableWrapText": true, @@ -1341,15 +1341,18 @@ }, { "__id__": 40 + }, + { + "__id__": 42 } ], "_active": true, "_components": [ { - "__id__": 42 + "__id__": 44 }, { - "__id__": 43 + "__id__": 45 } ], "_prefab": null, @@ -1364,7 +1367,7 @@ "_contentSize": { "__type__": "cc.Size", "width": 384, - "height": 583.73 + "height": 629.73 }, "_anchorPoint": { "__type__": "cc.Vec2", @@ -1408,7 +1411,7 @@ "__id__": 29 }, "_children": [], - "_active": true, + "_active": false, "_components": [ { "__id__": 31 @@ -1496,7 +1499,7 @@ }, { "__type__": "cc.Node", - "_name": "cocos_logo", + "_name": "freedom", "_objFlags": 0, "_parent": { "__id__": 29 @@ -1517,6 +1520,100 @@ "b": 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": { "__type__": "cc.Size", "width": 195, @@ -1532,7 +1629,7 @@ "ctor": "Float64Array", "array": [ 0, - -207, + -387, 0, 0, 0, @@ -1561,7 +1658,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 32 + "__id__": 34 }, "_enabled": true, "_materials": [ @@ -1596,10 +1693,10 @@ "__id__": 29 }, "_children": [], - "_active": true, + "_active": false, "_components": [ { - "__id__": 35 + "__id__": 37 } ], "_prefab": null, @@ -1626,7 +1723,7 @@ "ctor": "Float64Array", "array": [ 0, - -384, + -564, 0, 0, 0, @@ -1655,7 +1752,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 34 + "__id__": 36 }, "_enabled": true, "_materials": [ @@ -1690,10 +1787,10 @@ "__id__": 29 }, "_children": [], - "_active": true, + "_active": false, "_components": [ { - "__id__": 37 + "__id__": 39 } ], "_prefab": null, @@ -1720,7 +1817,7 @@ "ctor": "Float64Array", "array": [ 0, - -451, + -631, 0, 0, 0, @@ -1749,7 +1846,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 36 + "__id__": 38 }, "_enabled": true, "_materials": [ @@ -1787,7 +1884,7 @@ "_active": true, "_components": [ { - "__id__": 39 + "__id__": 41 } ], "_prefab": null, @@ -1814,7 +1911,7 @@ "ctor": "Float64Array", "array": [ 0, - -513.2, + -559.2, 0, 0, 0, @@ -1843,7 +1940,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 38 + "__id__": 40 }, "_enabled": true, "_materials": [ @@ -1879,7 +1976,7 @@ "_active": true, "_components": [ { - "__id__": 41 + "__id__": 43 } ], "_prefab": null, @@ -1906,7 +2003,7 @@ "ctor": "Float64Array", "array": [ 0, - -567.065, + -613.065, 0, 0, 0, @@ -1935,7 +2032,7 @@ "_name": "", "_objFlags": 0, "node": { - "__id__": 40 + "__id__": 42 }, "_enabled": true, "_materials": [ @@ -2000,7 +2097,7 @@ "_layoutSize": { "__type__": "cc.Size", "width": 384, - "height": 583.73 + "height": 629.73 }, "_resize": 1, "_N$layoutType": 2, diff --git a/assets/scripts/RoundCornerCropEffectScene.ts b/assets/scripts/RoundCornerCropEffectScene.ts index 5d06f9b..c60452d 100644 --- a/assets/scripts/RoundCornerCropEffectScene.ts +++ b/assets/scripts/RoundCornerCropEffectScene.ts @@ -8,6 +8,9 @@ export default class RoundCornerCropEffectScene extends cc.Component { private _examplesParentNode: cc.Node = null; onLoad() { + // 关闭动态合图 + cc.dynamicAtlasManager.enabled = false; + this._roundCornerRadiuSlider = cc.find("Canvas/Content/Sliders/RoundCornerRadiusSlider/Slider").getComponent(cc.Slider); 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() { this._roundCornerRadiuLabel.string = `${this._roundCornerRadiuSlider.progress.toFixed(2)}`; - // // 更新材质 - // this._updateRenderComponentMaterial({ - // oldLevel: this._roundCornerRadiuSlider.progress - // }); + // 更新材质 + this._updateRenderComponentMaterial({ + roundCornerRadius: this._roundCornerRadiuSlider.progress + }); } - // /** - // * 更新渲染组件的材质 - // * - // * 1. 获取材质 - // * 2. 给材质的 unitform 变量赋值 - // * 3. 重新将材质赋值回去 - // */ - // private _updateRenderComponentMaterial(param: { - // /** - // * 老化程度 [0.0, 1.0] ，1.0 表示完全老化 - // */ - // oldLevel: number; - // }) { - // this._examplesParentNode.children.forEach(childNode => { - // childNode.getComponents(cc.RenderComponent).forEach(renderComponent => { - // let material: cc.Material = renderComponent.getMaterial(0); - // material.setProperty("oldLevel", param.oldLevel); - // renderComponent.setMaterial(0, material); - // }); - // }); - // } + /** + * 更新渲染组件的材质 + * + * 1. 获取材质 + * 2. 给材质的 unitform 变量赋值 + * 3. 重新将材质赋值回去 + */ + private _updateRenderComponentMaterial(param: { + /** + * 圆角半径 [0.0, 0.5] ，0.5 表示圆形裁剪 + */ + roundCornerRadius: number; + }) { + this._examplesParentNode.children.forEach(childNode => { + childNode.getComponents(cc.RenderComponent).forEach(renderComponent => { + let material: cc.Material = renderComponent.getMaterial(0); + material.setProperty("roundCornerRadius", param.roundCornerRadius); + renderComponent.setMaterial(0, material); + }); + }); + } } diff --git a/assets/textures/freedom.jpg b/assets/textures/freedom.jpg new file mode 100644 index 0000000..4d77422 Binary files /dev/null and b/assets/textures/freedom.jpg differ diff --git a/assets/textures/freedom.jpg.meta b/assets/textures/freedom.jpg.meta new file mode 100644 index 0000000..72280f7 --- /dev/null +++ b/assets/textures/freedom.jpg.meta @@ -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": {} + } + } +} \ No newline at end of file