feat: 增加其他场景切换效果

This commit is contained in:
ifengzp
2024-09-23 09:08:09 +08:00
parent 1e5bcbe4fc
commit 340f65287e
126 changed files with 7938 additions and 21 deletions

View File

@@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "6b282196-e05b-44c8-8305-5bcbc06916fd",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

View File

@@ -0,0 +1,130 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
scale: { value: 20 }
smoothness: { value: 0.1 }
seed: { value: 12.9898 }
time: { value: 0 }
}%
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;
uniform sampler2D texture;
uniform sampler2D texture2;
uniform Perlin {
float scale;
float smoothness;
float seed;
float time;
};
float progress = time;
in mediump vec2 v_uv0;
in vec4 v_color;
// http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0/
float random(vec2 co) {
highp float a = seed;
highp float b = 78.233;
highp float c = 43758.5453;
highp float dt= dot(co.xy ,vec2(a,b));
highp float sn= mod(dt,3.14);
return fract(sin(sn) * c);
}
// 2D Noise based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
// Four corners in 2D of a tile
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));
// Cubic Hermine Curve. Same as SmoothStep
vec2 u = f*f*(3.0-2.0*f);
// Mix 4 coorners porcentages
return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}
vec4 getFromColor(vec2 uv) {
return texture(texture, uv);
}
vec4 getToColor(vec2 uv) {
return texture(texture2, uv);
}
vec4 transition (vec2 uv) {
vec4 from = getFromColor(uv);
vec4 to = getToColor(uv);
float n = noise(uv * scale);
float p = mix(-smoothness, 1.0 + smoothness, progress);
float lower = p - smoothness;
float higher = p + smoothness;
// 根据噪声值进行平滑插值
float q = smoothstep(lower, higher, n);
return mix(
from,
to,
1.0 - q
);
}
void main () {
gl_FragColor = v_color * transition(v_uv0);
}
}%

View File

@@ -0,0 +1,17 @@
{
"ver": "1.0.25",
"uuid": "3715350e-c25d-4afa-a06b-e4b480a6edef",
"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;\nuniform sampler2D texture;\nuniform sampler2D texture2;\nuniform float scale;\nuniform float smoothness;\nuniform float seed;\nuniform float time;\nfloat progress = time;\nvarying mediump vec2 v_uv0;\nvarying vec4 v_color;\nfloat random(vec2 co) {\n highp float a = seed;\n highp float b = 78.233;\n highp float c = 43758.5453;\n highp float dt= dot(co.xy ,vec2(a,b));\n highp float sn= mod(dt,3.14);\n return fract(sin(sn) * c);\n}\nfloat noise (in vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(i + vec2(1.0, 1.0));\n vec2 u = f*f*(3.0-2.0*f);\n return mix(a, b, u.x) +\n (c - a)* u.y * (1.0 - u.x) +\n (d - b) * u.x * u.y;\n}\nvec4 getFromColor(vec2 uv) {\n return texture2D(texture, uv);\n}\nvec4 getToColor(vec2 uv) {\n return texture2D(texture2, uv);\n}\nvec4 transition (vec2 uv) {\n vec4 from = getFromColor(uv);\n vec4 to = getToColor(uv);\n float n = noise(uv * scale);\n float p = mix(-smoothness, 1.0 + smoothness, progress);\n float lower = p - smoothness;\n float higher = p + smoothness;\n float q = smoothstep(lower, higher, n);\n return mix(\n from,\n to,\n 1.0 - q\n );\n}\nvoid main () {\n gl_FragColor = v_color * transition(v_uv0);\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;\nuniform sampler2D texture;\nuniform sampler2D texture2;\nuniform Perlin {\n float scale;\n float smoothness;\n float seed;\n float time;\n};\nfloat progress = time;\nin mediump vec2 v_uv0;\nin vec4 v_color;\nfloat random(vec2 co) {\n highp float a = seed;\n highp float b = 78.233;\n highp float c = 43758.5453;\n highp float dt= dot(co.xy ,vec2(a,b));\n highp float sn= mod(dt,3.14);\n return fract(sin(sn) * c);\n}\nfloat noise (in vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(i + vec2(1.0, 1.0));\n vec2 u = f*f*(3.0-2.0*f);\n return mix(a, b, u.x) +\n (c - a)* u.y * (1.0 - u.x) +\n (d - b) * u.x * u.y;\n}\nvec4 getFromColor(vec2 uv) {\n return texture(texture, uv);\n}\nvec4 getToColor(vec2 uv) {\n return texture(texture2, uv);\n}\nvec4 transition (vec2 uv) {\n vec4 from = getFromColor(uv);\n vec4 to = getToColor(uv);\n float n = noise(uv * scale);\n float p = mix(-smoothness, 1.0 + smoothness, progress);\n float lower = p - smoothness;\n float higher = p + smoothness;\n float q = smoothstep(lower, higher, n);\n return mix(\n from,\n to,\n 1.0 - q\n );\n}\nvoid main () {\n gl_FragColor = v_color * transition(v_uv0);\n}"
}
}
],
"subMetas": {}
}

View File

@@ -0,0 +1,22 @@
{
"__type__": "cc.Material",
"_name": "Perlin",
"_objFlags": 0,
"_native": "",
"_effectAsset": {
"__uuid__": "3715350e-c25d-4afa-a06b-e4b480a6edef"
},
"_techniqueIndex": 0,
"_techniqueData": {
"0": {
"props": {
"seed": 12.9898,
"scale": 30,
"smoothness": 0.05
},
"defines": {
"USE_TEXTURE": true
}
}
}
}

View File

@@ -0,0 +1,6 @@
{
"ver": "1.0.3",
"uuid": "dbf06bcd-8024-4f08-a535-08f7383edf00",
"dataAsSubAsset": null,
"subMetas": {}
}

View File

@@ -0,0 +1,740 @@
[
{
"__type__": "cc.SceneAsset",
"_name": "",
"_objFlags": 0,
"_native": "",
"scene": {
"__id__": 1
}
},
{
"__type__": "cc.Scene",
"_objFlags": 0,
"_parent": null,
"_children": [
{
"__id__": 2
},
{
"__id__": 11
},
{
"__id__": 13
},
{
"__id__": 8
}
],
"_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": "c255828f-28b6-421d-ab95-e56d8319a07c"
},
{
"__type__": "cc.Node",
"_name": "Canvas",
"_objFlags": 512,
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 3
}
],
"_active": true,
"_components": [
{
"__id__": 5
},
{
"__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": [
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.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__": "f73a82LpAxBmZwDm8dJO3Q+",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"separator": {
"__id__": 8
},
"spriteFrame1": {
"__uuid__": "8ef474f4-5038-4363-8a35-cd2c2df2d8d6"
},
"spriteFrame2": {
"__uuid__": "5ff63ec2-5294-40af-9a60-4f837d09d814"
},
"bgSprite": {
"__id__": 10
},
"material": {
"__uuid__": "dbf06bcd-8024-4f08-a535-08f7383edf00"
},
"_id": "b62auiatFL/Lu4KD6wNz14"
},
{
"__type__": "cc.Node",
"_name": "Separator",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 9
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 171,
"b": 23,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 10,
"height": 750
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
333,
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": "00zwOFnw9A9Y2jJcAfpxGt"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "5c3bb932-6c3c-468f-88a9-c8c61d458641"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "bfovdQprtLZrbQA9328iTr"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "b70P96s8FD1LitaZ7aobMA"
},
{
"__type__": "cc.Node",
"_name": "Bg",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 10
},
{
"__id__": 12
}
],
"_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": "34YKVYdF5MoYlFN+Zfb6wk"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
},
"_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": 1024,
"_originalHeight": 445,
"_id": "711M5JfuBPs5F7P5bDVb/1"
},
{
"__type__": "cc.Node",
"_name": "Btn",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 14
},
{
"__id__": 16
},
{
"__id__": 17
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1477,
"height": 118
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
667,
528.7,
0,
0,
0,
0,
1,
0.7,
0.7,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "bcVNNAEfFEJL7tftaCUB7n"
},
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 13
},
"_enabled": true,
"_normalMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [
{
"__id__": 15
}
],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$transition": 0,
"transition": 0,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_N$pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"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": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": {
"__id__": 13
},
"_id": "fdJg28i7pE6pi4D1ovRRp0"
},
{
"__type__": "cc.ClickEvent",
"target": {
"__id__": 2
},
"component": "",
"_componentId": "f73a82LpAxBmZwDm8dJO3Q+",
"handler": "switchSceneByTransition",
"customEventData": "3"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 13
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "86714285-13db-44f6-86aa-11838e0d4831"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "c1sR5klVZHraEr68/UTkLE"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 13
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 17,
"_left": 0,
"_right": 0,
"_top": 180,
"_bottom": 0,
"_verticalCenter": 157.942,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "a6rm0uXY9DlbNNnoWq9hN0"
}
]

View File

@@ -0,0 +1,7 @@
{
"ver": "1.2.6",
"uuid": "c255828f-28b6-421d-ab95-e56d8319a07c",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

View File

@@ -0,0 +1,88 @@
const { ccclass, property } = cc._decorator;
@ccclass
export default class SwitchScene extends cc.Component {
@property(cc.Node) separator = null;
@property(cc.SpriteFrame) spriteFrame1 = null;
@property(cc.SpriteFrame) spriteFrame2 = null;
@property(cc.Sprite) bgSprite = null;
@property(cc.Material) material = null;
private _spriteMaterial: cc.Material;
touchStartPos = cc.Vec2.ZERO;
separatorStartPos = cc.Vec2.ZERO;
start() {
this.bgSprite.spriteFrame.setTexture(this.spriteFrame1._texture);
this.initSpriteMaterial();
this.playTransitionAnimation();
}
onLoad() {
this.separatorStartPos = this.separator.getPosition();
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
}
switchSceneByTransition(event, value) {
cc.director.emit('setBackBtnVisibility', false);
cc.director.emit('switchSceneByTransition', value);
}
playTransitionAnimation() {
let progress = 0;
let targetProgress = cc.winSize.width;
let totalTime = 3;
let startTime = Date.now();
const loop = () => {
if (!this._spriteMaterial || !this.touchStartPos) return;
if (!this.touchStartPos.equals(cc.Vec2.ZERO)) return;
let currentTime = Date.now();
let elapsedTime = (currentTime - startTime) / 1000;
let _progress = (elapsedTime / totalTime) * targetProgress;
progress = Math.min(_progress, targetProgress);
this._spriteMaterial.setProperty('time', progress / cc.winSize.width);
this.separator.setPosition({ x: progress, y: 0 });
if (progress < targetProgress) {
requestAnimationFrame(loop.bind(this));
}
};
loop();
}
onTouchStart(event) {
this.separatorStartPos = this.separator.getPosition();
this.touchStartPos = this.node.convertToNodeSpaceAR(event.getLocation());
}
private onTouchMove(event) {
// 获取当前触摸点的位置
let touchPos = this.node.convertToNodeSpaceAR(event.getLocation());
// 计算触摸点相对于起始位置的偏移量
let offset = touchPos.sub(this.touchStartPos);
let targetPos = this.separatorStartPos.add(offset);
let targetX = Math.max(0, Math.min(targetPos.x, cc.winSize.width));
this.separator.setPosition({
x: targetX,
y: 0
});
this._spriteMaterial.setProperty('time', targetX / cc.winSize.width);
}
initSpriteMaterial() {
let newMaterial = cc.MaterialVariant.create(this.material, this.bgSprite);
newMaterial.setProperty('texture', this.spriteFrame1._texture);
newMaterial.setProperty('texture2', this.spriteFrame2._texture);
newMaterial.setProperty('time', 0.25);
this.spriteFrame1._texture.setFlipY(true);
this.spriteFrame2._texture.setFlipY(true);
this.bgSprite.setMaterial(0, newMaterial);
this._spriteMaterial = newMaterial;
}
}

View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "f73a8d8b-a40c-4199-9c03-9bc7493b743e",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

View File

@@ -0,0 +1,7 @@
{
"ver": "1.0.1",
"uuid": "2ed3b822-f01e-4df0-b9b7-9913abcd8a74",
"isSubpackage": false,
"subpackageName": "",
"subMetas": {}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

View File

@@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "7f5e5fa1-b48c-44e3-80f4-324d5286ac51",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1600,
"height": 1200,
"platformSettings": {},
"subMetas": {
"bg1": {
"ver": "1.0.4",
"uuid": "8ef474f4-5038-4363-8a35-cd2c2df2d8d6",
"rawTextureUuid": "7f5e5fa1-b48c-44e3-80f4-324d5286ac51",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1600,
"height": 1200,
"rawWidth": 1600,
"rawHeight": 1200,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 KiB

View File

@@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "ce5595f3-8df9-478a-9e41-4a165be77c71",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1600,
"height": 1200,
"platformSettings": {},
"subMetas": {
"bg2": {
"ver": "1.0.4",
"uuid": "5ff63ec2-5294-40af-9a60-4f837d09d814",
"rawTextureUuid": "ce5595f3-8df9-478a-9e41-4a165be77c71",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1600,
"height": 1200,
"rawWidth": 1600,
"rawHeight": 1200,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -0,0 +1,36 @@
{
"ver": "2.3.4",
"uuid": "7ef0dd99-bd4e-425f-ae16-e42c6f2c0a0b",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1477,
"height": 118,
"platformSettings": {},
"subMetas": {
"btn": {
"ver": "1.0.4",
"uuid": "2e5c2eba-5763-4675-9977-569657fff94e",
"rawTextureUuid": "7ef0dd99-bd4e-425f-ae16-e42c6f2c0a0b",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1477,
"height": 118,
"rawWidth": 1477,
"rawHeight": 118,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}