整理描边代码
This commit is contained in:
parent
b1d8f1fde3
commit
e45be41e29
@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"ver": "1.0.23",
|
|
||||||
"uuid": "559dcd1e-233b-4e1f-b1da-733c9232f06f",
|
|
||||||
"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 SHOW_OUT_LINE\n\nuniform vec4 outlineColor;\nuniform float outlineSize;\n\nfloat getBgAlpha() {\n vec4 color_up = texture2D(texture, v_uv0 + vec2(0, outlineSize)); \n vec4 color_down = texture2D(texture, v_uv0 - vec2(0, outlineSize)); \n vec4 color_left = texture2D(texture, v_uv0 - vec2(outlineSize, 0)); \n vec4 color_right = texture2D(texture, v_uv0 + vec2(outlineSize, 0)); \n vec4 color_up_left = texture2D(texture, v_uv0 + vec2(outlineSize, -outlineSize)); \n vec4 color_up_right = texture2D(texture, v_uv0 + vec2(outlineSize, outlineSize)); \n vec4 color_down_left = texture2D(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); \n vec4 color_down_right = texture2D(texture, v_uv0 + vec2(-outlineSize, outlineSize)); \n float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n return clamp(total, 0.0, 1.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\n #if SHOW_OUT_LINE\n\n vec4 color_dest = outlineColor * getBgAlpha();\n\n vec4 color_src = o;\n\n gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\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 SHOW_OUT_LINE\n\nuniform Outline {\n\n vec4 outlineColor;\n\n float outlineSize;\n\n};\n\nfloat getBgAlpha() {\n vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize)); \n vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize)); \n vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0)); \n vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0)); \n vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize)); \n vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize)); \n vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize)); \n vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize)); \n float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n return clamp(total, 0.0, 1.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\n #if SHOW_OUT_LINE\n\n vec4 color_dest = outlineColor * getBgAlpha();\n\n vec4 color_src = o;\n\n gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\n #endif\n}\n"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"subMetas": {}
|
|
||||||
}
|
|
@ -13,8 +13,24 @@ CCEffect %{
|
|||||||
properties:
|
properties:
|
||||||
texture: { value: white }
|
texture: { value: white }
|
||||||
alphaThreshold: { value: 0.5 }
|
alphaThreshold: { value: 0.5 }
|
||||||
outlineColor: { value: [1.0, 0.0, 0.0, 1.0], editor: { type: color } }
|
|
||||||
outlineSize: { value: 0.01 }
|
# 描边颜色
|
||||||
|
outlineColor: {
|
||||||
|
value: [1.0, 0.0, 0.0, 1.0],
|
||||||
|
inspector: {
|
||||||
|
type: color,
|
||||||
|
tooltip: "描边颜色",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# 描边宽度
|
||||||
|
outlineWidth: {
|
||||||
|
value: 0.002,
|
||||||
|
inspector: {
|
||||||
|
tooltip: "描边宽度",
|
||||||
|
range: [0.0, 1.0]
|
||||||
|
}
|
||||||
|
}
|
||||||
}%
|
}%
|
||||||
|
|
||||||
|
|
||||||
@ -71,23 +87,23 @@ CCProgram fs %{
|
|||||||
// 描边颜色
|
// 描边颜色
|
||||||
vec4 outlineColor;
|
vec4 outlineColor;
|
||||||
// 描边偏移大小
|
// 描边偏移大小
|
||||||
float outlineSize;
|
float outlineWidth;
|
||||||
// 特别地,必须是 vec4 先于 float 声明
|
// 特别地,必须是 vec4 先于 float 声明
|
||||||
};
|
};
|
||||||
|
|
||||||
// 将图像往8个方向偏移后,得到一个类放大效果,然后取放大后的图像的透明度,即可得到一个放大后的区域,可以很方便填充(描边)颜色
|
// 将图像往8个方向偏移后,得到一个类似放大的效果,然后取放大后的图像的透明度,即可得到一个放大后的区域,可以很方便填充(描边)颜色
|
||||||
// 取当前点上、下、左、右、上左、上右、下左、下右共计8个方向,距离为 outlineSize 的8个点,求他们的透明度之和
|
// 取当前点上、下、左、右、上左、上右、下左、下右共计8个方向,距离为 outlineWidth 的8个点,求他们的透明度之和
|
||||||
// 由此可以得到当前点是否属于图像往八个方向做偏移后得到的放大图区域,并且能得到该点最终透明度值
|
// 由此可以得到当前点是否属于图像往八个方向做偏移后得到的放大图区域,并且能得到该点最终透明度值
|
||||||
// 最终对应的为图像偏移/放大后的背景区域
|
// 最终对应的为图像偏移/放大后的背景区域
|
||||||
float getBgAlpha() {
|
float getBgAlpha() {
|
||||||
vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineSize));
|
vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineWidth));
|
||||||
vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineSize));
|
vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineWidth));
|
||||||
vec4 color_left = texture(texture, v_uv0 - vec2(outlineSize, 0));
|
vec4 color_left = texture(texture, v_uv0 - vec2(outlineWidth, 0));
|
||||||
vec4 color_right = texture(texture, v_uv0 + vec2(outlineSize, 0));
|
vec4 color_right = texture(texture, v_uv0 + vec2(outlineWidth, 0));
|
||||||
vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineSize, -outlineSize));
|
vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineWidth, -outlineWidth));
|
||||||
vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineSize, outlineSize));
|
vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineWidth, outlineWidth));
|
||||||
vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineSize, -outlineSize));
|
vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineWidth, -outlineWidth));
|
||||||
vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineSize, outlineSize));
|
vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineWidth, outlineWidth));
|
||||||
float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a;
|
float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a;
|
||||||
return clamp(total, 0.0, 1.0);
|
return clamp(total, 0.0, 1.0);
|
||||||
}
|
}
|
||||||
@ -111,6 +127,11 @@ CCProgram fs %{
|
|||||||
gl_FragColor = o;
|
gl_FragColor = o;
|
||||||
|
|
||||||
#if SHOW_OUT_LINE
|
#if SHOW_OUT_LINE
|
||||||
|
// 无描边宽度即结束
|
||||||
|
if (outlineWidth == 0.0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 先画背景色
|
// 先画背景色
|
||||||
vec4 color_dest = outlineColor * getBgAlpha();
|
vec4 color_dest = outlineColor * getBgAlpha();
|
||||||
|
|
17
assets/effects/sprite-outline.effect.meta
Normal file
17
assets/effects/sprite-outline.effect.meta
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"ver": "1.0.23",
|
||||||
|
"uuid": "559dcd1e-233b-4e1f-b1da-733c9232f06f",
|
||||||
|
"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 SHOW_OUT_LINE\n\nuniform vec4 outlineColor;\nuniform float outlineWidth;\n\nfloat getBgAlpha() {\n vec4 color_up = texture2D(texture, v_uv0 + vec2(0, outlineWidth)); \n vec4 color_down = texture2D(texture, v_uv0 - vec2(0, outlineWidth)); \n vec4 color_left = texture2D(texture, v_uv0 - vec2(outlineWidth, 0)); \n vec4 color_right = texture2D(texture, v_uv0 + vec2(outlineWidth, 0)); \n vec4 color_up_left = texture2D(texture, v_uv0 + vec2(outlineWidth, -outlineWidth)); \n vec4 color_up_right = texture2D(texture, v_uv0 + vec2(outlineWidth, outlineWidth)); \n vec4 color_down_left = texture2D(texture, v_uv0 + vec2(-outlineWidth, -outlineWidth)); \n vec4 color_down_right = texture2D(texture, v_uv0 + vec2(-outlineWidth, outlineWidth)); \n float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n return clamp(total, 0.0, 1.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\n #if SHOW_OUT_LINE\n\n if (outlineWidth == 0.0) {\n return;\n }\n\n vec4 color_dest = outlineColor * getBgAlpha();\n\n vec4 color_src = o;\n\n gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\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 SHOW_OUT_LINE\n\nuniform Outline {\n\n vec4 outlineColor;\n\n float outlineWidth;\n\n};\n\nfloat getBgAlpha() {\n vec4 color_up = texture(texture, v_uv0 + vec2(0, outlineWidth)); \n vec4 color_down = texture(texture, v_uv0 - vec2(0, outlineWidth)); \n vec4 color_left = texture(texture, v_uv0 - vec2(outlineWidth, 0)); \n vec4 color_right = texture(texture, v_uv0 + vec2(outlineWidth, 0)); \n vec4 color_up_left = texture(texture, v_uv0 + vec2(outlineWidth, -outlineWidth)); \n vec4 color_up_right = texture(texture, v_uv0 + vec2(outlineWidth, outlineWidth)); \n vec4 color_down_left = texture(texture, v_uv0 + vec2(-outlineWidth, -outlineWidth)); \n vec4 color_down_right = texture(texture, v_uv0 + vec2(-outlineWidth, outlineWidth)); \n float total = color_right.a + color_left.a + color_down.a + color_up.a + color_up_left.a + color_up_right.a + color_down_left.a + color_down_right.a; \n return clamp(total, 0.0, 1.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\n #if SHOW_OUT_LINE\n\n if (outlineWidth == 0.0) {\n return;\n }\n\n vec4 color_dest = outlineColor * getBgAlpha();\n\n vec4 color_src = o;\n\n gl_FragColor = color_src * color_src.a + color_dest * (1.0 - color_src.a);\n #endif\n}\n"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"subMetas": {}
|
||||||
|
}
|
@ -14,12 +14,12 @@
|
|||||||
"_props": {
|
"_props": {
|
||||||
"texture": null,
|
"texture": null,
|
||||||
"outlineColor": {
|
"outlineColor": {
|
||||||
"__type__": "cc.Vec4",
|
"__type__": "cc.Color",
|
||||||
"x": 1,
|
"r": 255,
|
||||||
"y": 0,
|
"g": 0,
|
||||||
"z": 0,
|
"b": 0,
|
||||||
"w": 1
|
"a": 255
|
||||||
},
|
},
|
||||||
"outlineSize": 0.01
|
"outlineWidth": 0.002
|
||||||
}
|
}
|
||||||
}
|
}
|
File diff suppressed because it is too large
Load Diff
2
assets/scenes/OutlineEffectScene.fire.meta
Executable file → Normal file
2
assets/scenes/OutlineEffectScene.fire.meta
Executable file → Normal file
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"ver": "1.2.5",
|
"ver": "1.2.5",
|
||||||
"uuid": "2d2f792f-a40c-49bb-a189-ed176a246e49",
|
"uuid": "dbecc9f5-b74f-4e1d-a024-bf3d5eac0847",
|
||||||
"asyncLoadAssets": false,
|
"asyncLoadAssets": false,
|
||||||
"autoReleaseAssets": false,
|
"autoReleaseAssets": false,
|
||||||
"subMetas": {}
|
"subMetas": {}
|
||||||
|
63
assets/scripts/OutlineEffectScene.ts
Normal file
63
assets/scripts/OutlineEffectScene.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
const { ccclass, property } = cc._decorator;
|
||||||
|
|
||||||
|
@ccclass
|
||||||
|
export default class OutlineEffectScene extends cc.Component {
|
||||||
|
private _widthSlider: cc.Slider = null;
|
||||||
|
private _widthSliderLabel: cc.Label = null;
|
||||||
|
|
||||||
|
private _examplesParentNode: cc.Node = null;
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
// 关闭动态合图
|
||||||
|
cc.dynamicAtlasManager.enabled = false;
|
||||||
|
|
||||||
|
this._widthSlider = cc.find("Canvas/Content/Sliders/WidthSlider/Slider").getComponent(cc.Slider);
|
||||||
|
this._widthSliderLabel = cc.find("Canvas/Content/Sliders/WidthSlider/ValueLabel").getComponent(cc.Label);
|
||||||
|
|
||||||
|
this._examplesParentNode = cc.find("Canvas/Content/Examples");
|
||||||
|
}
|
||||||
|
|
||||||
|
onEnable() {
|
||||||
|
this._widthSlider.node.on("slide", this._onSliderChanged, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDisable() {
|
||||||
|
this._widthSlider.node.off("slide", this._onSliderChanged, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
this._onSliderChanged();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _onSliderChanged() {
|
||||||
|
let outlineWidth = parseFloat((this._widthSlider.progress / 100).toFixed(4));
|
||||||
|
this._widthSliderLabel.string = `${outlineWidth}`;
|
||||||
|
|
||||||
|
// 更新材质
|
||||||
|
this._updateRenderComponentMaterial({
|
||||||
|
outlineWidth: outlineWidth
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新渲染组件的材质
|
||||||
|
*
|
||||||
|
* 1. 获取材质
|
||||||
|
* 2. 给材质的 unitform 变量赋值
|
||||||
|
* 3. 重新将材质赋值回去
|
||||||
|
*/
|
||||||
|
private _updateRenderComponentMaterial(param: {
|
||||||
|
/**
|
||||||
|
* 描边宽度 [0.0, 1.0],比如:0.5,那么就是宽*0.5 高*0.5
|
||||||
|
*/
|
||||||
|
outlineWidth: number;
|
||||||
|
}) {
|
||||||
|
this._examplesParentNode.children.forEach(childNode => {
|
||||||
|
childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
|
||||||
|
let material: cc.Material = renderComponent.getMaterial(0);
|
||||||
|
material.setProperty("outlineWidth", param.outlineWidth);
|
||||||
|
renderComponent.setMaterial(0, material);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"ver": "1.0.5",
|
"ver": "1.0.5",
|
||||||
"uuid": "e1b90feb-a217-4493-849d-9a611900d683",
|
"uuid": "7c634e1e-a19e-4498-9f51-a2e8d07e221d",
|
||||||
"isPlugin": false,
|
"isPlugin": false,
|
||||||
"loadPluginInWeb": true,
|
"loadPluginInWeb": true,
|
||||||
"loadPluginInNative": true,
|
"loadPluginInNative": true,
|
@ -1,41 +0,0 @@
|
|||||||
const { ccclass, property } = cc._decorator;
|
|
||||||
|
|
||||||
@ccclass
|
|
||||||
export default class MainSceneCtrl extends cc.Component {
|
|
||||||
@property(cc.Sprite)
|
|
||||||
exampleSprite: cc.Sprite = null;
|
|
||||||
|
|
||||||
@property(cc.Label)
|
|
||||||
exampleLabel: cc.Label = null;
|
|
||||||
|
|
||||||
start() {
|
|
||||||
this._updateSpriteOutlineWidth(0);
|
|
||||||
this._updateLabelOutlineWidth(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
onSideCallBack(slider: cc.Slider, customEventData: string) {
|
|
||||||
this._updateSpriteOutlineWidth(slider.progress / 100);
|
|
||||||
this._updateLabelOutlineWidth(slider.progress / 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 动态更新描边宽度
|
|
||||||
*
|
|
||||||
* 1. 获取材质
|
|
||||||
* 2. 给材质的自定义 unitform 变量赋值
|
|
||||||
* 3. 重新将材质赋值回去
|
|
||||||
*
|
|
||||||
* @property outlineSize 描边长度比例[0,1] 比如0.5,那么就是宽*0.5 高*0.5
|
|
||||||
*/
|
|
||||||
private _updateSpriteOutlineWidth(outlineSize: number) {
|
|
||||||
let spriteMaterial: cc.Material = this.exampleSprite.getMaterial(0);
|
|
||||||
spriteMaterial.setProperty("outlineSize", outlineSize);
|
|
||||||
this.exampleSprite.setMaterial(0, spriteMaterial);
|
|
||||||
}
|
|
||||||
|
|
||||||
private _updateLabelOutlineWidth(outlineSize: number) {
|
|
||||||
let labelMaterial: cc.Material = this.exampleLabel.getMaterial(0);
|
|
||||||
labelMaterial.setProperty("outlineSize", outlineSize);
|
|
||||||
this.exampleLabel.setMaterial(0, labelMaterial);
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user