CocosPlugin/cocos-awesome
1
0
Fork 0
mirror of https://github.com/ifengzp/cocos-awesome.git synced 2024-12-25 03:09:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

镜面光泽

Browse Source
This commit is contained in:
ifengzp 2020-05-02 16:35:13 +08:00
parent f3bceea936
commit bc84c3c025
22 changed files with 1080 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/Scene/Home/Home.ts
View File

@ -2,6 +2,7 @@ import BackHomeBtn from './BackHomeBtn';
const { ccclass, property } = cc._decorator;
const LOAD_SCENE_MIN_SEC: number = 1.2;
enum sceneList {
'Specular_gloss' = '镜面光泽效果（shader）',
'Dissolve_color' = '溶解效果（shader）',
'Scratch_ticket' = '刮刮卡实现',
'Coin_fly_to_wallet' = '金币落袋效果',

7
assets/Scene/Specular_gloss.meta Normal file
View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "a5a5ca37-a492-455b-bde6-431d44ccc81f",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

87
assets/Scene/Specular_gloss/Specular_gloss.effect Normal file
View File

@ -0,0 +1,87 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
width: { value: 0.1 }
strength: { value: 1.2 }
}%
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>
#include <cc-global>
in vec4 v_color;
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
uniform ARGS{
float width;
float strength;
};
void main () {
vec4 color = vec4(1, 1, 1, 1);
color *= texture(texture, v_uv0);
float k = 0.2;
float time_step = -width;
time_step += mod(cc_time.x, 1.0 + 2.0 * width);
if (v_uv0.x >= -v_uv0.y * k + time_step && v_uv0.x <= -v_uv0.y * k + width + time_step ) {
color *= strength;
}
gl_FragColor = color;
}
}%

17
assets/Scene/Specular_gloss/Specular_gloss.effect.meta Normal file
View File

@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "807726aa-682d-4fdc-9ed9-4ee789999ce3",
"compiledShaders": [
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mediump 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#endif\nuniform highp vec4 cc_time;\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform float width;\nuniform float strength;\nvoid main () {\n vec4 color = vec4(1, 1, 1, 1);\n color *= texture2D(texture, v_uv0);\n float k = 0.2;\n float time_step = -width;\n time_step += mod(cc_time.x, 1.0 + 2.0 * width);\n if (v_uv0.x >= -v_uv0.y * k + time_step && v_uv0.x <= -v_uv0.y * k + width + time_step ) {\n color *= strength;\n }\n gl_FragColor = color;\n}"
},
"glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n highp vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n mediump vec4 cc_nativeSize;\n highp mat4 cc_matView;\n mediump mat4 cc_matViewInv;\n mediump mat4 cc_matProj;\n mediump mat4 cc_matProjInv;\n mediump mat4 cc_matViewProj;\n mediump mat4 cc_matViewProjInv;\n mediump vec4 cc_cameraPos;\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\nuniform CCGlobal {\n highp vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n mediump vec4 cc_nativeSize;\n highp mat4 cc_matView;\n mediump mat4 cc_matViewInv;\n mediump mat4 cc_matProj;\n mediump mat4 cc_matProjInv;\n mediump mat4 cc_matViewProj;\n mediump mat4 cc_matViewProjInv;\n mediump vec4 cc_cameraPos;\n};\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\nuniform ARGS{\n float width;\n float strength;\n};\nvoid main () {\n vec4 color = vec4(1, 1, 1, 1);\n color *= texture(texture, v_uv0);\n float k = 0.2;\n float time_step = -width;\n time_step += mod(cc_time.x, 1.0 + 2.0 * width);\n if (v_uv0.x >= -v_uv0.y * k + time_step && v_uv0.x <= -v_uv0.y * k + width + time_step ) {\n color *= strength;\n }\n gl_FragColor = color;\n}"
}
}
],
"subMetas": {}
}

692
assets/Scene/Specular_gloss/Specular_gloss.fire Normal file
View File

@ -0,0 +1,692 @@
[
{
"__type__": "cc.SceneAsset",
"_name": "",
"_objFlags": 0,
"_native": "",
"scene": {
"__id__": 1
}
},
{
"__type__": "cc.Scene",
"_objFlags": 0,
"_parent": null,
"_children": [
{
"__id__": 2
}
],
"_active": true,
"_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": "15cf35af-8745-417d-9bce-0bc6e241685a"
},
{
"__type__": "cc.Node",
"_name": "Canvas",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 3
},
{
"__id__": 5
},
{
"__id__": 8
},
{
"__id__": 10
},
{
"__id__": 12
}
],
"_active": true,
"_components": [
{
"__id__": 14
},
{
"__id__": 15
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1334,
"height": 750
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
667,
375,
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": "a5esZu+45LA5mBpvttspPD"
},
{
"__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": 960,
"height": 640
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
452.93128617926146,
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": "e1WoFrQ79G7r4ZuQE3HlNb"
},
{
"__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": "81GN3uXINKVLeW4+iKSlim"
},
{
"__type__": "cc.Node",
"_name": "bg",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 6
},
{
"__id__": 7
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1334,
"height": 750
},
"_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": "30GshaGddJw6j4XTw++mTw"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "24f522e1-68bb-40b8-97d8-4cdc577b9971"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "a1AUKthshBDrsOmCGzc04M"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"alignMode": 1,
"_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": 2,
"_originalHeight": 2,
"_id": "5b6vvtWVFMsJJkyT5E9Jtn"
},
{
"__type__": "cc.Node",
"_name": "card",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 9
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 497,
"height": 585
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
225.699,
7.947,
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": "c1Jnx6bPNFJ5O9V1td/Y6+"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_materials": [
{
"__uuid__": "85c9a175-66e5-4f98-ad19-5491574b6502"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "657154e1-24cf-4530-a4ce-2fc011959ad1"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "b0Ij4LXi5OVrnTA6PBHuMz"
},
{
"__type__": "cc.Node",
"_name": "icon",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 11
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 88,
"height": 88
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-303.182,
128.469,
0,
0,
0,
0,
1,
2,
2,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "c9JZfUNolGGZa8DogKLp2u"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 10
},
"_enabled": true,
"_materials": [
{
"__uuid__": "85c9a175-66e5-4f98-ad19-5491574b6502"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "8081cea0-fa89-4659-99a7-170b17183dfc"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "f9T8qwHrVPPrjT2jxegDVv"
},
{
"__type__": "cc.Node",
"_name": "btn",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 13
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 240,
"height": 88
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-296.142,
-129.18,
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": "1bsmjJ92hOUqu0W7bAhS15"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 12
},
"_enabled": true,
"_materials": [
{
"__uuid__": "85c9a175-66e5-4f98-ad19-5491574b6502"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "9568b105-4f55-42de-bf64-9a0b8aae546c"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "73tsc2uwpGx6xA+BDfyUed"
},
{
"__type__": "cc.Canvas",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_designResolution": {
"__type__": "cc.Size",
"width": 1334,
"height": 750
},
"_fitWidth": false,
"_fitHeight": true,
"_id": "59Cd0ovbdF4byw5sbjJDx7"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"alignMode": 1,
"_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": 0,
"_originalHeight": 0,
"_id": "29zXboiXFBKoIV4PQ2liTe"
}
]

7
assets/Scene/Specular_gloss/Specular_gloss.fire.meta Normal file
View File

@ -0,0 +1,7 @@
{
"ver": "1.2.6",
"uuid": "15cf35af-8745-417d-9bce-0bc6e241685a",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

21
assets/Scene/Specular_gloss/Specular_gloss.mtl Normal file
View File

@ -0,0 +1,21 @@
{
"__type__": "cc.Material",
"_name": "Specular_gloss",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "807726aa-682d-4fdc-9ed9-4ee789999ce3"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"defines": {
"USE_TEXTURE": true
},
"props": {
"strength": 1.3,
"width": 0.2
}
}
}
}

6
assets/Scene/Specular_gloss/Specular_gloss.mtl.meta Normal file
View File

@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "85c9a175-66e5-4f98-ad19-5491574b6502",
"dataAsSubAsset": null,
"subMetas": {}
}

28
assets/Scene/Specular_gloss/Specular_gloss.ts Normal file
View File

@ -0,0 +1,28 @@
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Label)
label: cc.Label = null;
@property
text: string = 'hello';
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
start () {
}
// update (dt) {}
}

9
assets/Scene/Specular_gloss/Specular_gloss.ts.meta Normal file
View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "2bb9d214-78c4-4354-8e80-b637d55874a6",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

7
assets/Scene/Specular_gloss/Texture.meta Normal file
View File

@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "705c3332-97d6-467f-a20a-8c08934e3d8a",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

BIN
assets/Scene/Specular_gloss/Texture/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 B

36
assets/Scene/Specular_gloss/Texture/bg.png.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "68647222-f64d-49a2-8e46-faf168aadf5c",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 2,
"height": 2,
"platformSettings": {},
"subMetas": {
"bg": {
"ver": "1.0.4",
"uuid": "24f522e1-68bb-40b8-97d8-4cdc577b9971",
"rawTextureUuid": "68647222-f64d-49a2-8e46-faf168aadf5c",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 2,
"height": 2,
"rawWidth": 2,
"rawHeight": 2,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
assets/Scene/Specular_gloss/Texture/btn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

36
assets/Scene/Specular_gloss/Texture/btn.png.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "d3d1b6f6-da09-4b6f-acc4-acc28832ed18",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": false,
"width": 240,
"height": 88,
"platformSettings": {},
"subMetas": {
"btn": {
"ver": "1.0.4",
"uuid": "9568b105-4f55-42de-bf64-9a0b8aae546c",
"rawTextureUuid": "d3d1b6f6-da09-4b6f-acc4-acc28832ed18",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 240,
"height": 88,
"rawWidth": 240,
"rawHeight": 88,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
assets/Scene/Specular_gloss/Texture/card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

36
assets/Scene/Specular_gloss/Texture/card.png.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "8ab0a271-c74d-4aad-865c-fd43166655a5",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": false,
"width": 570,
"height": 640,
"platformSettings": {},
"subMetas": {
"card": {
"ver": "1.0.4",
"uuid": "657154e1-24cf-4530-a4ce-2fc011959ad1",
"rawTextureUuid": "8ab0a271-c74d-4aad-865c-fd43166655a5",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 8.5,
"offsetY": 4.5,
"trimX": 45,
"trimY": 23,
"width": 497,
"height": 585,
"rawWidth": 570,
"rawHeight": 640,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
assets/Scene/Specular_gloss/Texture/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

36
assets/Scene/Specular_gloss/Texture/icon.png.meta Normal file
View File

@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "74490132-2297-4033-b930-9093f8ddb8ae",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": false,
"width": 88,
"height": 88,
"platformSettings": {},
"subMetas": {
"icon": {
"ver": "1.0.4",
"uuid": "8081cea0-fa89-4659-99a7-170b17183dfc",
"rawTextureUuid": "74490132-2297-4033-b930-9093f8ddb8ae",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 88,
"height": 88,
"rawWidth": 88,
"rawHeight": 88,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

BIN
doc/Specular_gloss/resources/demo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

BIN
doc/Specular_gloss/resources/ewm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

54
doc/Specular_gloss/镜面光泽.md Normal file
View File

@ -0,0 +1,54 @@
# 效果演示
镜面上扫过一道光泽是UI里面很常用的一种特效，通常用来强调某个物体或者凸显物体的“稀有”价值，比如卡片中扫过一道光芒等
![demo](./resources/demo.gif)
# 实现思路
根据这个效果的实际需求，可以提取到两个关键点，一个是光路的生成，一个是光路随着时间进行偏移。直观可以看出光路由两根斜率一样的直线组成，其中一根在x轴上偏移一定的距离，两根斜线就能够组成一个倾斜的区域，这个区域用数学来表达就是：两根斜线形成的不等式组。直线的斜截式方程是`y = kx + b`，假设斜率k为1，那光路的区域就可以表示为：`x >= -y` 和 `x <= -y + width`，其中`width`就是我们定义的光路的宽度，有了区域之后我们只需要让符合该区域的像素点色彩叠加点变化就可以实现光路的效果。
```c++
void main () {
vec4 color = vec4(1, 1, 1, 1);
color *= texture(texture, v_uv0);
if (v_uv0.x >= -v_uv0.y && v_uv0.x <= -v_uv0.y + width) {
color *= strength;
}
gl_FragColor = color;
}
```
光路随着时间的偏移效果，其实就是让光路的斜距随着时间的变化增加就可以了。这里可以通过脚本的方式在每帧的回调中把偏移的距离动态传进来，但是这种传递其实挺耗性能的，还有一种方式就是我们可以引入`cc-global`，然后通过`cc_time.x`拿到累积的时间参数，然后加上我们的偏移限制来实现光路的循环播放。其中我们光路的起点应该是`0.0 - width`，光路的偏移长度应该是`width + 1.0 + width`：
```c++
#include <cc-global>
void main () {
vec4 color = vec4(1, 1, 1, 1);
color *= texture(texture, v_uv0);
float time_step = -width;
time_step += mod(cc_time.x, 1.0 + 2.0 * width);
if (v_uv0.x >= -v_uv0.y + time_step && v_uv0.x <= -v_uv0.y + width + time_step) {
color *= strength;
}
gl_FragColor = color;
}
为了让效果呈现更加完美，我们还可以去调整一下光路的斜率，如果需要多条光路的话，也可以多复制几个不等式组加上不同的偏移距离和宽度就可以了。另外引擎是默认启用了动态合图，它会自动将合适的贴图动态合并到一张大图上来减少drawcall，这样子就会导致我们在effect中拿到的uv坐标不准确，我们可以通过 `cc.dynamicAtlasManager.enabled = false` 把合图给关掉，但是这是个全局开关，所以更好的方法是在资源管理面板中把该资源的`packable`勾选掉，这样子它就不会被打包到合图中了。
# 效果预览
**源码**获取请点击**查看原文**，长按二维码**查看效果👇**
![ewm](./resources/ewm.png)
我是异名，你的阅读是我的动力