feat: 增加转场

assets/Scene/Home/BackHomeBtn.ts

@@ -8,6 +8,7 @@ export default class BackHomeBtn extends cc.Component {
     cc.game.addPersistRootNode(this.node);
     BackHomeBtn.instance = this;
     this.toggleActive(false);
+    cc.director.on('setBackBtnVisibility', this.toggleActive.bind(this));
   }
 
   toggleActive(flag: boolean) {

assets/Scene/Home/Home.fire

@@ -18,6 +18,9 @@
       },
       {
         "__id__": 48
+      },
+      {
+        "__id__": 54
       }
     ],
     "_active": true,
@@ -189,7 +192,7 @@
       "array": [
         0,
         0,
-        452.93128617926146,
+        769.0305585605815,
         0,
         0,
         0,
@@ -1210,8 +1213,8 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 168,
-      "height": 90.4
+      "width": 335.99,
+      "height": 63.28
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",
@@ -1222,8 +1225,8 @@
       "__type__": "TypedArray",
       "ctor": "Float64Array",
       "array": [
-        -462.767,
-        -88.825,
+        -466.456,
+        -85.319,
         0,
         0,
         0,
@@ -1261,10 +1264,10 @@
       }
     ],
     "_useOriginalSize": false,
-    "_string": "我是 异名\n用代码实现想法",
-    "_N$string": "我是 异名\n用代码实现想法",
-    "_fontSize": 24,
-    "_lineHeight": 40,
+    "_string": "写作对我来说是一种特殊的行动\n是对”我“的存在的理解，消化和修正的过程",
+    "_N$string": "写作对我来说是一种特殊的行动\n是对”我“的存在的理解，消化和修正的过程",
+    "_fontSize": 18,
+    "_lineHeight": 28,
     "_enableWrapText": true,
     "_N$file": null,
     "_isSystemFontUsed": true,
@@ -1294,8 +1297,8 @@
     "_right": 0,
     "_top": 0,
     "_bottom": 0,
-    "_verticalCenter": -88.825,
-    "_horizontalCenter": -462.767,
+    "_verticalCenter": -85.319,
+    "_horizontalCenter": -466.456,
     "_isAbsLeft": true,
     "_isAbsRight": true,
     "_isAbsTop": true,
@@ -1998,7 +2001,7 @@
   },
   {
     "__type__": "cc.Node",
-    "_name": "back_home_btn",
+    "_name": "BackHomeBtnFreeze",
     "_objFlags": 0,
     "_parent": {
       "__id__": 1
@@ -2219,5 +2222,83 @@
     },
     "_enabled": true,
     "_id": "f1IGHg+lpP16AlzNEKM60q"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "SceneTransition",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 55
+      }
+    ],
+    "_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.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": "eeaY/+TfZLz4P/SykmO5T3"
+  },
+  {
+    "__type__": "1cd9dHF3nRI24w/zAzyk3Q3",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 54
+    },
+    "_enabled": true,
+    "time": 0,
+    "materials": [
+      {
+        "__uuid__": "a869ac13-ffed-4334-b5df-1251273f2b07"
+      }
+    ],
+    "_id": "606YRpjk1JGqOLoeXBmJQ3"
   }
 ]

assets/Scene/Home/Home.ts

@@ -2,25 +2,26 @@ import BackHomeBtn from './BackHomeBtn';
 const { ccclass, property } = cc._decorator;
 const LOAD_SCENE_MIN_SEC: number = 1.2;
 enum sceneList {
-  'Water_spread' = '水波扩散效果（shader）',
-  'Specular_gloss' = '镜面光泽效果（shader）',
-  'Dissolve_color' = '溶解效果（shader）',
-  'Follow_spot' = '追光效果（shader）',
-  'Metaball' = '融球效果（shader）',
-  'Circle_avatar' = '圆形头像（shader）',
-  'Scratch_ticket' = '刮刮卡实现',
-  'Coin_fly_to_wallet' = '金币落袋效果',
-  'Moving_ghost' = '移动残影效果',
   'Magnifying_mirror' = '放大镜效果',
+  'Scratch_ticket' = '刮刮卡实现',
+  'Moving_ghost' = '移动残影效果',
+  'Water_spread' = '水波扩散效果（shader）',
+  'Follow_spot' = '追光效果（shader）',
+  'Mosaic' = '马赛克/像素风（shader）',
+  'Dissolve_color' = '溶解效果（shader）',
   'Typer' = '打字机效果',
+  'Specular_gloss' = '镜面光泽效果（shader）',
+  'Metaball' = '融球效果（shader）',
   'Bullet_Tracking' = '子弹跟踪效果',
+  'SwitchScene__SquaresWire' = '场景切换（Squares Wire）',
+  'Circle_avatar' = '圆形头像（shader）',
+  'Coin_fly_to_wallet' = '金币落袋效果',
   'Infinite_bg_scroll' = '背景无限滚动',
   'Change_clothes' = '换装',
   'Screen_vibrating' = '震屏效果+动画恢复第一帧',
   'Joystick' = '遥控杆',
   'Filter' = '颜色滤镜',
-  'Mosaic' = '马赛克/像素风（shader）',
-  'Photo_gallery' = '渐变过渡的相册（shader）'
+  'Photo_gallery' = '渐变过渡的相册（shader）',
 }
 
 @ccclass
@@ -68,10 +69,7 @@ export default class Home extends cc.Component {
       scrollItem.on(
         cc.Node.EventType.TOUCH_END,
         () => {
-          cc.tween(scrollItem)
-            .to(0.1, { scale: 1.05 })
-            .to(0.1, { scale: 1 })
-            .start();
+          cc.tween(scrollItem).to(0.1, { scale: 1.05 }).to(0.1, { scale: 1 }).start();
           this.loadScene(key);
         },
         this

assets/Scene/Home/Transition.ts

@@ -0,0 +1,180 @@
+const { ccclass, property } = cc._decorator;
+
+const TRANSITION_TIME = 2;
+
+@ccclass
+export default class Transition extends cc.Component {
+  @property() time: number = 0;
+  @property(cc.Material) materials = [];
+
+  private _inited = false;
+  private _texture1: cc.Texture2D;
+  private _texture2: cc.Texture2D;
+  private _sprite: cc.Sprite;
+  private _spriteNode: cc.Node;
+  private _camera: cc.Camera;
+  private _cameraNode: cc.Node;
+  private _spriteMaterial: cc.Material;
+  private _onLoadFinished = () => {};
+
+  loading = false;
+
+  private materialIndex = 0;
+
+  onLoad() {
+    cc.game.addPersistRootNode(this.node);
+  }
+
+  start() {
+    this.init();
+    cc.director.on(cc.Director.EVENT_AFTER_SCENE_LAUNCH, this._onLoadFinished, this);
+    cc.director.on('switchSceneByTransition', this.switchSceneByTransition.bind(this));
+  }
+
+  switchSceneByTransition() {
+    this.materialIndex = this.materialIndex + 1 > this.materials.length ? 0 : this.materialIndex + 1;
+    this.loadScene('Scene/Home/Home', 'Canvas/Main Camera', 'Canvas/Main Camera');
+  }
+
+  init() {
+    if (this._inited) return;
+    this._inited = true;
+
+    this.time = 0;
+
+    this._texture1 = this.createTexture();
+    this._texture2 = this.createTexture();
+
+    let spriteNode = cc.find('TRANSITION_SPRITE', this.node);
+    if (!spriteNode) {
+      spriteNode = new cc.Node('TRANSITION_SPRITE');
+      this._sprite = spriteNode.addComponent(cc.Sprite);
+      spriteNode.parent = this.node;
+    } else {
+      this._sprite = spriteNode.getComponent(cc.Sprite);
+    }
+    let spriteFrame = new cc.SpriteFrame();
+    spriteFrame.setTexture(this._texture1);
+    this._sprite.spriteFrame = spriteFrame;
+
+    spriteNode.active = false;
+    spriteNode.scaleY = -1;
+    this._spriteNode = spriteNode;
+
+    let cameraNode = cc.find('TRANSITION_CAMERA', this.node);
+    if (!cameraNode) {
+      cameraNode = new cc.Node('TRANSITION_CAMERA');
+      this._camera = cameraNode.addComponent(cc.Camera);
+      cameraNode.parent = this.node;
+    } else {
+      this._camera = cameraNode.getComponent(cc.Camera);
+    }
+    cameraNode.active = false;
+    this._cameraNode = cameraNode;
+
+    // @ts-ignore
+    this.node.groupIndex = cc.Node.BuiltinGroupIndex.DEBUG - 1;
+    this._camera.cullingMask = 1 << this.node.groupIndex;
+
+    this.updateSpriteMaterial();
+  }
+
+  updateSpriteMaterial() {
+    if (!this._sprite) return;
+
+    let newMaterial = cc.MaterialVariant.create(this.materials[this.materialIndex], this._sprite);
+    newMaterial.setProperty('texture', this._texture1);
+    newMaterial.setProperty('texture2', this._texture2);
+    newMaterial.setProperty('screenSize', new Float32Array([this._texture2.width, this._texture2.height]));
+
+    this._sprite.setMaterial(0, newMaterial);
+    this._spriteMaterial = newMaterial;
+  }
+
+  _onSceneLaunched() {
+    window['camera'] = cc.Camera.cameras;
+  }
+
+  loadScene(sceneUrl, fromCameraPath, toCameraPath) {
+    this.scheduleOnce(() => {
+      cc.director.preloadScene(sceneUrl, null, () => {
+        this._loadScene(
+          sceneUrl,
+          fromCameraPath,
+          toCameraPath,
+          () => {},
+          () => {}
+        );
+      });
+    });
+    return true;
+  }
+
+  createTexture() {
+    let texture = new cc.RenderTexture();
+    // @ts-ignore
+    texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height, cc.gfx.RB_FMT_D24S8);
+    return texture;
+  }
+
+  _loadScene(sceneUrl, fromCameraPath, toCameraPath, onSceneLoaded, onTransitionFinished) {
+    this.init();
+    this._spriteNode.active = true;
+    this._cameraNode.active = true;
+    let fromCameraNode = cc.find(fromCameraPath);
+    let fromCamera = fromCameraNode && (fromCameraNode.getComponent(cc.Camera) as any);
+    if (!fromCamera) {
+      cc.warn(`Can not find fromCamera with path ${fromCameraPath}`);
+      return;
+    }
+    let originTargetTexture1 = fromCamera.targetTexture;
+    fromCamera.cullingMask &= ~this._camera.cullingMask;
+    fromCamera.targetTexture = this._texture1;
+    fromCamera.render(cc.director.getScene());
+    fromCamera.targetTexture = originTargetTexture1;
+
+    return cc.director.loadScene(sceneUrl, (arg) => {
+      onSceneLoaded && onSceneLoaded(...arg);
+
+      let toCameraNode = cc.find(toCameraPath);
+      let toCamera = toCameraNode && (toCameraNode.getComponent(cc.Camera) as any);
+
+      if (!toCamera) {
+        cc.warn(`Can not find toCamera with path ${toCameraPath}`);
+        return;
+      }
+      toCamera.cullingMask &= ~this._camera.cullingMask;
+      let originTargetTexture2 = toCamera.targetTexture;
+      toCamera.targetTexture = this._texture2;
+      toCamera.render(cc.director.getScene());
+
+      this._camera.depth = toCamera.depth;
+      this._camera.clearFlags = toCamera.clearFlags;
+
+      this._onLoadFinished = () => {
+        toCamera.targetTexture = originTargetTexture2;
+
+        this._spriteNode.active = false;
+        this._cameraNode.active = false;
+        onTransitionFinished && onTransitionFinished();
+      };
+
+      this.time = 0;
+      this.loading = true;
+    });
+  }
+
+  update(dt) {
+    if (this.loading) {
+      this.time += dt;
+      if (this.time >= TRANSITION_TIME) {
+        this.time = TRANSITION_TIME;
+        this.loading = false;
+
+        this._onLoadFinished && this._onLoadFinished();
+        this._onLoadFinished = null;
+      }
+      this._spriteMaterial.setProperty('time', this.time / TRANSITION_TIME);
+    }
+  }
+}

assets/Scene/Home/Transition.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "1cd9d1c5-de74-48db-8c3f-cc0cf2937437",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}