diff --git a/assets/Scene/Dissolve_color.meta b/assets/Scene/Dissolve_color.meta new file mode 100644 index 0000000..f5a135b --- /dev/null +++ b/assets/Scene/Dissolve_color.meta @@ -0,0 +1,7 @@ +{ + "ver": "1.0.1", + "uuid": "9ac455c6-8cbe-4f0c-9cad-762448ba9a98", + "isSubpackage": false, + "subpackageName": "", + "subMetas": {} +} \ No newline at end of file diff --git a/assets/Scene/Dissolve_color/Dissolve_color.fire b/assets/Scene/Dissolve_color/Dissolve_color.fire new file mode 100644 index 0000000..5df399c --- /dev/null +++ b/assets/Scene/Dissolve_color/Dissolve_color.fire @@ -0,0 +1,1095 @@ +[ + { + "__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": "22cbd783-dfc9-4daa-bd69-2ef24d6b787b" + }, + { + "__type__": "cc.Node", + "_name": "Canvas", + "_objFlags": 0, + "_parent": { + "__id__": 1 + }, + "_children": [ + { + "__id__": 3 + }, + { + "__id__": 5 + }, + { + "__id__": 8 + }, + { + "__id__": 10 + }, + { + "__id__": 12 + }, + { + "__id__": 14 + } + ], + "_active": true, + "_components": [ + { + "__id__": 22 + }, + { + "__id__": 23 + }, + { + "__id__": 24 + } + ], + "_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, + 443.4050067376326, + 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": 27, + "g": 38, + "b": 46, + "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": "702sTNK7pFlqZsE1qCJRDb" + }, + { + "__type__": "cc.Sprite", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 5 + }, + "_enabled": true, + "_materials": [ + { + "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432" + } + ], + "_srcBlendFactor": 770, + "_dstBlendFactor": 771, + "_spriteFrame": { + "__uuid__": "f356aba1-884e-4022-abc4-c90c2a285f56" + }, + "_type": 0, + "_sizeMode": 0, + "_fillType": 0, + "_fillCenter": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_fillStart": 0, + "_fillRange": 0, + "_isTrimmedMode": true, + "_atlas": null, + "_id": "dcMok7LUJI77itj2DpigUL" + }, + { + "__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": "07uTGo8+JGYq0F/v0GoNpZ" + }, + { + "__type__": "cc.Node", + "_name": "ghost", + "_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": 101, + "height": 190 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + -250, + 0, + 0, + 0, + 0, + 0, + 1, + 2.5, + 2.5, + 1 + ] + }, + "_eulerAngles": { + "__type__": "cc.Vec3", + "x": 0, + "y": 0, + "z": 0 + }, + "_skewX": 0, + "_skewY": 0, + "_is3DNode": false, + "_groupIndex": 0, + "groupIndex": 0, + "_id": "45zIgmlyZMD4zKs+6NJUEe" + }, + { + "__type__": "cc.Sprite", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 8 + }, + "_enabled": true, + "_materials": [ + { + "__uuid__": "fa6f370c-414d-468b-ad8b-7ac31ff369d5" + } + ], + "_srcBlendFactor": 770, + "_dstBlendFactor": 771, + "_spriteFrame": { + "__uuid__": "218c096b-8d5f-4f9f-b4e8-d27fda083dba" + }, + "_type": 0, + "_sizeMode": 1, + "_fillType": 0, + "_fillCenter": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_fillStart": 0, + "_fillRange": 0, + "_isTrimmedMode": true, + "_atlas": null, + "_id": "b7e1ZdSuJELJKsqML4WBLt" + }, + { + "__type__": "cc.Node", + "_name": "man", + "_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": 328, + "height": 512 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 298, + 19.867, + 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": "a2m+dKaq5KK5DGBu5L1luM" + }, + { + "__type__": "cc.Sprite", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 10 + }, + "_enabled": true, + "_materials": [ + { + "__uuid__": "fa6f370c-414d-468b-ad8b-7ac31ff369d5" + } + ], + "_srcBlendFactor": 770, + "_dstBlendFactor": 771, + "_spriteFrame": { + "__uuid__": "f04700ab-da53-4639-98a2-d8eefffe7c15" + }, + "_type": 0, + "_sizeMode": 1, + "_fillType": 0, + "_fillCenter": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_fillStart": 0, + "_fillRange": 0, + "_isTrimmedMode": true, + "_atlas": null, + "_id": "feX/AsUfBPa6076lB8dJZw" + }, + { + "__type__": "cc.Node", + "_name": "tip", + "_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": 0, + "height": 35.28 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 0, + -187.603, + 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": "39ycK2VpRFyJXPCdY/FkBJ" + }, + { + "__type__": "cc.Label", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 12 + }, + "_enabled": true, + "_materials": [ + { + "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432" + } + ], + "_useOriginalSize": false, + "_string": "", + "_N$string": "", + "_fontSize": 28, + "_lineHeight": 28, + "_enableWrapText": true, + "_N$file": null, + "_isSystemFontUsed": true, + "_spacingX": 0, + "_batchAsBitmap": false, + "_styleFlags": 0, + "_underlineHeight": 0, + "_N$horizontalAlign": 1, + "_N$verticalAlign": 1, + "_N$fontFamily": "Arial", + "_N$overflow": 0, + "_N$cacheMode": 0, + "_id": "ebpp+raOZIlqkY7Xyg73UM" + }, + { + "__type__": "cc.Node", + "_name": "button", + "_objFlags": 0, + "_parent": { + "__id__": 2 + }, + "_children": [ + { + "__id__": 15 + } + ], + "_active": true, + "_components": [ + { + "__id__": 20 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 100, + "height": 40 + }, + "_anchorPoint": { + "__type__": "cc.Vec2", + "x": 0.5, + "y": 0.5 + }, + "_trs": { + "__type__": "TypedArray", + "ctor": "Float64Array", + "array": [ + 0, + -273.148, + 0, + 0, + 0, + 0, + 1, + 1.5, + 1.5, + 1 + ] + }, + "_eulerAngles": { + "__type__": "cc.Vec3", + "x": 0, + "y": 0, + "z": 0 + }, + "_skewX": 0, + "_skewY": 0, + "_is3DNode": false, + "_groupIndex": 0, + "groupIndex": 0, + "_id": "5f/3hzeGlEDr9p6t+Lebay" + }, + { + "__type__": "cc.Node", + "_name": "Background", + "_objFlags": 0, + "_parent": { + "__id__": 14 + }, + "_children": [ + { + "__id__": 16 + } + ], + "_active": true, + "_components": [ + { + "__id__": 18 + }, + { + "__id__": 19 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 100, + "height": 40 + }, + "_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": "95MfWaU7VOrb5tMcB1kFVx" + }, + { + "__type__": "cc.Node", + "_name": "Label", + "_objFlags": 0, + "_parent": { + "__id__": 15 + }, + "_children": [], + "_active": true, + "_components": [ + { + "__id__": 17 + } + ], + "_prefab": null, + "_opacity": 255, + "_color": { + "__type__": "cc.Color", + "r": 0, + "g": 0, + "b": 0, + "a": 255 + }, + "_contentSize": { + "__type__": "cc.Size", + "width": 100, + "height": 40 + }, + "_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": "8dGrCfoCFJeYrwIAl2rLq3" + }, + { + "__type__": "cc.Label", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 16 + }, + "_enabled": true, + "_materials": [ + { + "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432" + } + ], + "_useOriginalSize": false, + "_string": "Toggle", + "_N$string": "Toggle", + "_fontSize": 20, + "_lineHeight": 40, + "_enableWrapText": false, + "_N$file": null, + "_isSystemFontUsed": true, + "_spacingX": 0, + "_batchAsBitmap": false, + "_styleFlags": 0, + "_underlineHeight": 0, + "_N$horizontalAlign": 1, + "_N$verticalAlign": 1, + "_N$fontFamily": "Arial", + "_N$overflow": 1, + "_N$cacheMode": 1, + "_id": "88UXGpEp5KkrrbygAKEwgy" + }, + { + "__type__": "cc.Sprite", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 15 + }, + "_enabled": true, + "_materials": [ + { + "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432" + } + ], + "_srcBlendFactor": 770, + "_dstBlendFactor": 771, + "_spriteFrame": { + "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952" + }, + "_type": 1, + "_sizeMode": 0, + "_fillType": 0, + "_fillCenter": { + "__type__": "cc.Vec2", + "x": 0, + "y": 0 + }, + "_fillStart": 0, + "_fillRange": 0, + "_isTrimmedMode": true, + "_atlas": null, + "_id": "d04GUjXrJIdK8DC2elzsP6" + }, + { + "__type__": "cc.Widget", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 15 + }, + "_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": 100, + "_originalHeight": 40, + "_id": "75qEkgduZHOL3bWiv6w3Ov" + }, + { + "__type__": "cc.Button", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 14 + }, + "_enabled": true, + "_normalMaterial": null, + "_grayMaterial": null, + "duration": 0.1, + "zoomScale": 1.2, + "clickEvents": [ + { + "__id__": 21 + } + ], + "_N$interactable": true, + "_N$enableAutoGrayEffect": false, + "_N$transition": 2, + "transition": 2, + "_N$normalColor": { + "__type__": "cc.Color", + "r": 230, + "g": 230, + "b": 230, + "a": 255 + }, + "_N$pressedColor": { + "__type__": "cc.Color", + "r": 200, + "g": 200, + "b": 200, + "a": 255 + }, + "pressedColor": { + "__type__": "cc.Color", + "r": 200, + "g": 200, + "b": 200, + "a": 255 + }, + "_N$hoverColor": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "hoverColor": { + "__type__": "cc.Color", + "r": 255, + "g": 255, + "b": 255, + "a": 255 + }, + "_N$disabledColor": { + "__type__": "cc.Color", + "r": 120, + "g": 120, + "b": 120, + "a": 200 + }, + "_N$normalSprite": { + "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952" + }, + "_N$pressedSprite": { + "__uuid__": "e9ec654c-97a2-4787-9325-e6a10375219a" + }, + "pressedSprite": { + "__uuid__": "e9ec654c-97a2-4787-9325-e6a10375219a" + }, + "_N$hoverSprite": { + "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952" + }, + "hoverSprite": { + "__uuid__": "f0048c10-f03e-4c97-b9d3-3506e1d58952" + }, + "_N$disabledSprite": { + "__uuid__": "29158224-f8dd-4661-a796-1ffab537140e" + }, + "_N$target": { + "__id__": 15 + }, + "_id": "93IM9XqEVEX6o9EwIy8leE" + }, + { + "__type__": "cc.ClickEvent", + "target": { + "__id__": 2 + }, + "component": "", + "_componentId": "184ab+BIeVCTLvd8FH6B+h3", + "handler": "toggle", + "customEventData": "" + }, + { + "__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" + }, + { + "__type__": "184ab+BIeVCTLvd8FH6B+h3", + "_name": "", + "_objFlags": 0, + "node": { + "__id__": 2 + }, + "_enabled": true, + "tip": { + "__id__": 13 + }, + "_id": "bdLVspJXVNKbIoxbl/rphd" + } +] \ No newline at end of file diff --git a/assets/Scene/Dissolve_color/Dissolve_color.fire.meta b/assets/Scene/Dissolve_color/Dissolve_color.fire.meta new file mode 100644 index 0000000..6a244ec --- /dev/null +++ b/assets/Scene/Dissolve_color/Dissolve_color.fire.meta @@ -0,0 +1,7 @@ +{ + "ver": "1.2.6", + "uuid": "22cbd783-dfc9-4daa-bd69-2ef24d6b787b", + "asyncLoadAssets": false, + "autoReleaseAssets": false, + "subMetas": {} +} \ No newline at end of file diff --git a/assets/Scene/Dissolve_color/Dissolve_color.ts b/assets/Scene/Dissolve_color/Dissolve_color.ts new file mode 100644 index 0000000..5a543d0 --- /dev/null +++ b/assets/Scene/Dissolve_color/Dissolve_color.ts @@ -0,0 +1,38 @@ +const { ccclass, property } = cc._decorator; + +@ccclass +export default class Dissolve_color extends cc.Component { + @property(cc.Label) + tip: cc.Label = null; + materialList: cc.Material[] = []; + fadePct: number = 0; // 溶解百分比 + activeFlag: boolean = false; // 溶解进行中 + symbol: number = 1; // 色彩叠加的正负 + speed: number = 0.5; // 色彩叠加的速度 + + start() { + this.materialList.push( + this.node.getChildByName('ghost').getComponent(cc.Sprite).getMaterial(0), + this.node.getChildByName('man').getComponent(cc.Sprite).getMaterial(0) + ); + } + + toggle() { + if (this.activeFlag) return; + this.activeFlag = true; + } + + update(dt) { + if (!this.activeFlag) return; + this.materialList.forEach((material) => material.setProperty('fade_pct', this.fadePct)); + + if (this.fadePct >= 0 && this.fadePct <= 1) { + this.fadePct += this.symbol * dt * this.speed; + this.tip.string = "溶解程度 " + this.fadePct.toFixed(1); + } else { + this.fadePct = this.fadePct > 1 ? 1 : 0; + this.symbol = -this.symbol; + this.activeFlag = false; + } + } +} diff --git a/assets/Scene/Dissolve_color/Dissolve_color.ts.meta b/assets/Scene/Dissolve_color/Dissolve_color.ts.meta new file mode 100644 index 0000000..c13e9a7 --- /dev/null +++ b/assets/Scene/Dissolve_color/Dissolve_color.ts.meta @@ -0,0 +1,9 @@ +{ + "ver": "1.0.5", + "uuid": "184abf81-21e5-424c-bbdd-f051fa07e877", + "isPlugin": false, + "loadPluginInWeb": true, + "loadPluginInNative": true, + "loadPluginInEditor": false, + "subMetas": {} +} \ No newline at end of file diff --git a/assets/Scene/Dissolve_color/Texture.meta b/assets/Scene/Dissolve_color/Texture.meta new file mode 100644 index 0000000..d2cbcd1 --- /dev/null +++ b/assets/Scene/Dissolve_color/Texture.meta @@ -0,0 +1,7 @@ +{ + "ver": "1.0.1", + "uuid": "b30bb05b-8aa6-491f-bbcf-66092cfa0534", + "isSubpackage": false, + "subpackageName": "", + "subMetas": {} +} \ No newline at end of file diff --git a/assets/Scene/Dissolve_color/Texture/ghost.png b/assets/Scene/Dissolve_color/Texture/ghost.png new file mode 100644 index 0000000..7e312f3 Binary files /dev/null and b/assets/Scene/Dissolve_color/Texture/ghost.png differ diff --git a/assets/Scene/Dissolve_color/Texture/ghost.png.meta b/assets/Scene/Dissolve_color/Texture/ghost.png.meta new file mode 100644 index 0000000..37b56e0 --- /dev/null +++ b/assets/Scene/Dissolve_color/Texture/ghost.png.meta @@ -0,0 +1,36 @@ +{ + "ver": "2.3.4", + "uuid": "32148d04-fd60-44fe-a08c-d8b34fd2c8cb", + "type": "sprite", + "wrapMode": "clamp", + "filterMode": "bilinear", + "premultiplyAlpha": false, + "genMipmaps": false, + "packable": true, + "width": 115, + "height": 192, + "platformSettings": {}, + "subMetas": { + "ghost": { + "ver": "1.0.4", + "uuid": "218c096b-8d5f-4f9f-b4e8-d27fda083dba", + "rawTextureUuid": "32148d04-fd60-44fe-a08c-d8b34fd2c8cb", + "trimType": "auto", + "trimThreshold": 1, + "rotated": false, + "offsetX": 7, + "offsetY": 0, + "trimX": 14, + "trimY": 1, + "width": 101, + "height": 190, + "rawWidth": 115, + "rawHeight": 192, + "borderTop": 0, + "borderBottom": 0, + "borderLeft": 0, + "borderRight": 0, + "subMetas": {} + } + } +} \ No newline at end of file diff --git a/assets/Scene/Dissolve_color/Texture/man.png b/assets/Scene/Dissolve_color/Texture/man.png new file mode 100644 index 0000000..dd408f2 Binary files /dev/null and b/assets/Scene/Dissolve_color/Texture/man.png differ diff --git a/assets/Scene/Dissolve_color/Texture/man.png.meta b/assets/Scene/Dissolve_color/Texture/man.png.meta new file mode 100644 index 0000000..eb3482a --- /dev/null +++ b/assets/Scene/Dissolve_color/Texture/man.png.meta @@ -0,0 +1,36 @@ +{ + "ver": "2.3.4", + "uuid": "7c6bb59a-7592-48e1-8d5c-6b19fcd2ea48", + "type": "sprite", + "wrapMode": "clamp", + "filterMode": "bilinear", + "premultiplyAlpha": false, + "genMipmaps": false, + "packable": true, + "width": 570, + "height": 640, + "platformSettings": {}, + "subMetas": { + "man": { + "ver": "1.0.4", + "uuid": "f04700ab-da53-4639-98a2-d8eefffe7c15", + "rawTextureUuid": "7c6bb59a-7592-48e1-8d5c-6b19fcd2ea48", + "trimType": "auto", + "trimThreshold": 1, + "rotated": false, + "offsetX": -1, + "offsetY": -24, + "trimX": 120, + "trimY": 88, + "width": 328, + "height": 512, + "rawWidth": 570, + "rawHeight": 640, + "borderTop": 0, + "borderBottom": 0, + "borderLeft": 0, + "borderRight": 0, + "subMetas": {} + } + } +} \ No newline at end of file diff --git a/assets/Scene/Dissolve_color/Texture/single_color.png b/assets/Scene/Dissolve_color/Texture/single_color.png new file mode 100644 index 0000000..fa6376e Binary files /dev/null and b/assets/Scene/Dissolve_color/Texture/single_color.png differ diff --git a/assets/Scene/Dissolve_color/Texture/single_color.png.meta b/assets/Scene/Dissolve_color/Texture/single_color.png.meta new file mode 100644 index 0000000..811dcc7 --- /dev/null +++ b/assets/Scene/Dissolve_color/Texture/single_color.png.meta @@ -0,0 +1,36 @@ +{ + "ver": "2.3.4", + "uuid": "ff5737ae-78d9-472c-8223-3f96d686720c", + "type": "sprite", + "wrapMode": "clamp", + "filterMode": "bilinear", + "premultiplyAlpha": false, + "genMipmaps": false, + "packable": true, + "width": 2, + "height": 2, + "platformSettings": {}, + "subMetas": { + "single_color": { + "ver": "1.0.4", + "uuid": "f356aba1-884e-4022-abc4-c90c2a285f56", + "rawTextureUuid": "ff5737ae-78d9-472c-8223-3f96d686720c", + "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": {} + } + } +} \ No newline at end of file diff --git a/assets/Scene/Dissolve_color/dissolve_color.effect b/assets/Scene/Dissolve_color/dissolve_color.effect new file mode 100644 index 0000000..b5fc45c --- /dev/null +++ b/assets/Scene/Dissolve_color/dissolve_color.effect @@ -0,0 +1,86 @@ +// 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 } + fade_pct: { value: 1.0 } +}% + + +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 + + #if USE_TEXTURE + in vec2 v_uv0; + uniform sampler2D texture; + uniform ARGS { + float fade_pct; + }; + #endif + + void main () { + vec4 color = vec4(1, 1, 1, 1); + + #if USE_TEXTURE + color *= texture(texture, v_uv0); + #if CC_USE_ALPHA_ATLAS_TEXTURE + color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r; + #endif + #endif + + // 当颜色小于溶解的程度，则直接抛弃 + if(color.b < fade_pct) discard; + if(color.b < fade_pct + 0.1) { + // 对溶解的边缘做处理，变色或者改透明度等等 + color = color * vec4(0.92, 0.8, 0.95, color.a); + } + + gl_FragColor = color; + } +}% diff --git a/assets/Scene/Dissolve_color/dissolve_color.effect.meta b/assets/Scene/Dissolve_color/dissolve_color.effect.meta new file mode 100644 index 0000000..090dc82 --- /dev/null +++ b/assets/Scene/Dissolve_color/dissolve_color.effect.meta @@ -0,0 +1,17 @@ +{ + "ver": "1.0.25", + "uuid": "8f11426c-8971-4082-b9b9-56ab5fb4bc9a", + "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\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\nuniform float fade_pct;\n#endif\nvoid main () {\n vec4 color = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n color *= texture2D(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n if(color.b < fade_pct) discard;\n if(color.b < fade_pct + 0.1) {\n color = color * vec4(0.92, 0.8, 0.95, color.a);\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\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\nuniform ARGS {\n float fade_pct;\n};\n#endif\nvoid main () {\n vec4 color = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n color *= texture(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n if(color.b < fade_pct) discard;\n if(color.b < fade_pct + 0.1) {\n color = color * vec4(0.92, 0.8, 0.95, color.a);\n }\n gl_FragColor = color;\n}" + } + } + ], + "subMetas": {} +} \ No newline at end of file diff --git a/assets/Scene/Dissolve_color/dissolve_color.mtl b/assets/Scene/Dissolve_color/dissolve_color.mtl new file mode 100644 index 0000000..66205eb --- /dev/null +++ b/assets/Scene/Dissolve_color/dissolve_color.mtl @@ -0,0 +1,20 @@ +{ + "__type__": "cc.Material", + "_name": "dissolve_color", + "_objFlags": 0, + "_native": "", + "_effectAsset": { + "__uuid__": "8f11426c-8971-4082-b9b9-56ab5fb4bc9a" + }, + "_techniqueIndex": 0, + "_techniqueData": { + "0": { + "defines": { + "USE_TEXTURE": true + }, + "props": { + "fade_pct": 0 + } + } + } +} diff --git a/assets/Scene/Dissolve_color/dissolve_color.mtl.meta b/assets/Scene/Dissolve_color/dissolve_color.mtl.meta new file mode 100644 index 0000000..458aea5 --- /dev/null +++ b/assets/Scene/Dissolve_color/dissolve_color.mtl.meta @@ -0,0 +1,6 @@ +{ + "ver": "1.0.3", + "uuid": "fa6f370c-414d-468b-ad8b-7ac31ff369d5", + "dataAsSubAsset": null, + "subMetas": {} +} \ No newline at end of file diff --git a/assets/Scene/Home/Home.ts b/assets/Scene/Home/Home.ts index a836fc4..8279a6e 100644 --- a/assets/Scene/Home/Home.ts +++ b/assets/Scene/Home/Home.ts @@ -11,7 +11,8 @@ enum sceneList { 'Typer' = '打字机效果', 'Moving_ghost' = '移动残影效果', 'Screen_vibrating' = '震屏效果+动画恢复第一帧', - 'Bullet_Tracking' = '子弹跟踪效果' + 'Bullet_Tracking' = '子弹跟踪效果', + 'Dissolve_color' = 'shader 溶解效果', } @ccclass diff --git a/doc/Dissolve_color/resources/demo.gif b/doc/Dissolve_color/resources/demo.gif new file mode 100644 index 0000000..b294fdd Binary files /dev/null and b/doc/Dissolve_color/resources/demo.gif differ diff --git a/doc/Dissolve_color/resources/ewm.png b/doc/Dissolve_color/resources/ewm.png new file mode 100644 index 0000000..c206aa0 Binary files /dev/null and b/doc/Dissolve_color/resources/ewm.png differ diff --git a/doc/Dissolve_color/shader 溶解效果.md b/doc/Dissolve_color/shader 溶解效果.md new file mode 100644 index 0000000..8a6bc73 --- /dev/null +++ b/doc/Dissolve_color/shader 溶解效果.md @@ -0,0 +1,58 @@ +# 效果演示 + +物体的淡入淡出是游戏当中很常见的一种状态切换效果，但是有时候我们希望`fade`切换的时候，物体能够能更有色彩层次感或者其他一些特殊的中间状态，这个时候就得自己去写着色器，这种区别于单纯的淡入和淡出的效果可以形象地叫做溶解。 + +![demo](./resources/demo.gif) + +# 实现思路 + +溶解效果的思路很简单，先获取到当前贴图的色彩，然后定义一个对照维度，大部分情况下就取rgb的某一色彩通道就可以了，比如异名demo中的色调偏蓝色调，异名的对比值就取rgb中的blue，然后动态去改变该维度的参考值，当纹理贴图的色块blue值小于该参考值的时候就去色。当参考值变为0的时候，我们的色彩也就完全溶解掉了。`effect`代码如下： + +```c++ +void main () { + vec4 color = vec4(1, 1, 1, 1); + + #if USE_TEXTURE + color *= texture(texture, v_uv0); + #if CC_USE_ALPHA_ATLAS_TEXTURE + color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r; + #endif + #endif + + // 当颜色小于溶解的程度，则直接抛弃 + if(color.b < fade_pct) discard; + gl_FragColor = color; +} + +``` + +如果我们希望溶解更加有层次变化，我们还可以对溶解的边缘做一些处理，比如透明度改变，色彩改变等，这就需要代入我们自己的使用场景中，根据实际的需要去调整，比如异名的demo中，希望溶解的边缘有一些蓝色调的变化： + +```js +if(color.b < fade_pct + 0.1) { + color = vec4(0.92, 0.8, 0.95, color.a); +} +``` + +然后我们需要在`update`的时候去动态更新并设置`fade_pct`，以达到纹理的溶解效果动态变化： + +```js +update(dt) { + this.fadePct += dt * this.speed; + this.material.setProperty('fade_pct', this.fadePct)); +} +``` + +以上就是溶解效果的核心思路，完整的代码请通过源码查看。通过demo我们可以看出，不同的贴图的溶解效果和我们的溶解条件是直接关联的，左侧的死神色彩单一，蓝色通道较窄，它的变化过程就比较集中而且快，同时用蓝色调处理溶解的边缘效果的过渡也比较融洽。右边的骑士，色彩比较丰富，用单一的蓝色通道当成溶解条件和过渡就相对来说比较生硬，我们需要视项目的实际情况动态调整。 + +# 效果预览 + +源码获取请点击**查看原文**，长按二维码查看效果👇 + +![ewm](./resources/ewm.png) + +我是异名，你的阅读是我的动力 + + + +