游戏引导添加

resource/res.json

@@ -5,7 +5,7 @@
 			"name": "GameEle"
 		},
 		{
-			"keys": "GameScene-back.png,extra_scene.png,mission-goal.png,title-back.png",
+			"keys": "GameScene-back.png,extra_scene.png,guidance4-1.png,guidance4-2.png,guidance4-3.png,guidance5-0.png,guidance5-1.png,guidance5-2.png,guidance5-3.png,guidance5-t.png,mission-goal.png,title-back.png",
 			"name": "GameScene"
 		},
 		{

src/ResJson.ts

@@ -5,7 +5,7 @@ export const ResJson = {
 			"name": "GameEle"
 		},
 		{
-			"keys": "GameScene-back.png,extra_scene.png,mission-goal.png,title-back.png",
+			"keys": "GameScene-back.png,extra_scene.png,guidance4-1.png,guidance4-2.png,guidance4-3.png,guidance5-0.png,guidance5-1.png,guidance5-2.png,guidance5-3.png,guidance5-t.png,mission-goal.png,title-back.png",
 			"name": "GameScene"
 		},
 		{

src/Tools.ts

@@ -319,9 +319,14 @@ export class Tools {
      * 位图字每次都写太烦了
      * @param name
      */
-    public static getNumTextures(name: string): { [key: number]: FYGE.Texture } {
+    public static getNumTextures(name: string, extrakv): { [key: number]: FYGE.Texture } {
         var arr = {}
         for (var i = 0; i <= 9; i++) arr[i] = RES.getRes(name + i + ".png")
+        if (extrakv) {
+            for(var k in extrakv) {
+                arr[k] = RES.getRes(extrakv[k])
+            }
+        }
         return arr
     }
 

src/UI.ts

@@ -4,6 +4,7 @@
  * Copyright © 2021 haiyoucuv. All rights reserved.
  */
 import { RES } from "../module/RES";
+import { Tools } from "./Tools";
 import Container = FYGE.Container;
 import Button = FYGE.Button;
 import MouseEvent = FYGE.MouseEvent;
@@ -160,4 +161,12 @@ export default class UI {
         parent && parent.addChild(lottie);
         return lottie;
     }
+
+    public static BitmapText(parent: Container, name: string, extra: any, text: string, x: number = 0, y: number = 0) {
+        var arrTextures = Tools.getNumTextures(name, extra)
+        const bitText = new FYGE.BitmapText(arrTextures)
+        bitText.text = text
+        bitText.x = x
+        bitText.y = y
+    }
 }

src/scenes/GameScene/GameScene.ts

@@ -8,6 +8,7 @@ import CountDownComp from "../../components/CountDownComp";
 import MoonCake from "../../components/MoonCake";
 import { randomNum, throttle } from "../../utils/utils";
 import Blade from "../../components/Blade";
+import { RES } from "../../../module/RES";
 const MouseEvent = FYGE.MouseEvent
 
 const { Engine, Render, Runner, Composite, Bodies, World, Composites } = Matter
@@ -58,10 +59,6 @@ export default class GameScene extends Scene {
     // 初始化分数
     this.score = 0
     
-    var sceneTitle = UI.Ctn(sceneContainer, layers.stageWidth / 2 - 120, 30)
-    UI.Sp(sceneTitle, 'title-back.png')
-    UI.Txt(sceneTitle, '本关目标: 100', 26, '#ffe8af', FYGE.TEXT_ALIGN.CENTER, 240, 0, 22)
-    
     // var t = UI.Txt(this, '123123', 28)
     // t.x = layers.stageOffsetX
     // t.y = 0
@@ -92,7 +89,118 @@ export default class GameScene extends Scene {
     this.initGame()
   }
 
-  initGame() {
+  // 引导文案
+  onShowGuidance4() {
+    return new Promise((resolve) => {
+      var cnt = UI.Ctn(this.sceneContainer)
+
+      var t1 = UI.Sp(cnt, 'guidance4-1.png', layers.stageWidth / 2, 200)
+      t1.anchorTexture.set(0.5, 0.5)
+      t1.alpha = 0
+
+      var t2 = UI.Sp(cnt, 'guidance4-2.png', layers.stageWidth / 2, 300)
+      t2.anchorTexture.set(0.5, 0.5)
+      t2.alpha = 0
+
+      var t3 = UI.Sp(cnt, 'guidance4-3.png', layers.stageWidth / 2, 400)
+      t3.anchorTexture.set(0.5, 0.5)
+      t3.alpha = 0
+      FYGE.Tween.get(t1)
+        .to({alpha: 1}, 600)
+        .wait(400)
+        .call(() => {
+          FYGE.Tween.get(t2)
+            .set({ scaleX: 1.4, scaleY: 1.4 })
+            .to({ scaleX: 1, scaleY: 1, alpha: 1 }, 500)
+            .to({ scaleX: .9, scaleY: .9 }, 200)
+            .to({ scaleX: 1, scaleY: 1 }, 100)
+            .call(() => {
+              FYGE.Tween.get(t3)
+                .to({ alpha: 1 }, 500)
+                .wait(1000)
+                .call(() => {
+                  FYGE.Tween.get(cnt)
+                    .to({ alpha: 0}, 500)
+                    .call(() => {
+                      cnt.destroy()
+                      resolve(null)
+                    })
+                })
+            })
+        })
+    })
+  }
+
+  onShowGuidance5() {
+    return new Promise((r) => {
+      var sceneTitle = UI.Ctn(this.sceneContainer, layers.stageWidth / 2 - 120, 30)
+      UI.Sp(sceneTitle, 'title-back.png')
+      UI.Txt(sceneTitle, '本关目标: 100', 26, '#ffe8af', FYGE.TEXT_ALIGN.CENTER, 240, 0, 22)
+      sceneTitle.anchorY = sceneTitle.height / 2
+      sceneTitle.anchorX = sceneTitle.width / 2
+      sceneTitle.alpha = 0
+
+      var cnt = UI.Ctn(this.scoreContainer, -170)
+      var t = UI.Sp(cnt, 'guidance5-t.png', layers.stageWidth / 2, 150)
+      t.anchorTexture.set(.5, .5)
+      t.alpha = 0
+
+      var number = UI.Sp(cnt, 'guidance5-3.png', layers.stageWidth / 2, 320)
+      number.anchorTexture.set(.5, .5)
+      number.alpha = 0
+      var _y = number.y
+
+      FYGE.Tween.get(sceneTitle)
+        .set({ scaleX: .4, scaleY: .4 })
+        .to({ scaleX: 1, scaleY: 1, alpha: 1 }, 500)
+        .call(() => {
+          FYGE.Tween.get(t)
+            .set({ scaleX: 1.4, scaleY: 1.4 })
+            .to({ scaleX: 1, scaleY: 1, alpha: 1}, 600)
+            .wait(300)
+            .call(() => {
+              FYGE.Tween.get(number)
+                .set({ y: _y + 150 })
+                .to({ y: _y, alpha: 1 }, 300, FYGE.Ease.quadInOut)
+                .wait(600)
+                .to({ alpha: 0 }, 100)
+                .call(() => {
+                  number.texture = RES.getRes('guidance5-2.png')
+                  FYGE.Tween.get(number)
+                    .set({ y: _y + 150, alpha: 0 })
+                    .to({ y: _y, alpha: 1 }, 300, FYGE.Ease.quadInOut)
+                    .wait(600)
+                    .to({ alpha: 0 }, 100)
+                    .call(() => {
+                      number.texture = RES.getRes('guidance5-1.png')
+                      FYGE.Tween.get(number)
+                        .set({ y: _y + 150, alpha: 0 })
+                        .to({ y: _y, alpha: 1 }, 300, FYGE.Ease.quadInOut)
+                        .wait(600)
+                        .to({ alpha: 0 }, 100)
+                        .call(() => {
+                          number.texture = RES.getRes('guidance5-0.png')
+                          FYGE.Tween.get(number)
+                            .set({ scaleX: .3, scaleY: .3, alpha: 1 })
+                            .to({ scaleX: 1.2, scaleY: 1.2 }, 500, FYGE.Ease.quadInOut)
+                            .to({ scaleX: 1, scaleY: 1 }, 200, FYGE.Ease.quadInOut)
+                            .wait(500)
+                            .to({ alpha: 0 }, 100)
+                            .call(() => {
+                              cnt.destroy()
+                              r(null)
+                            })
+                        })
+                    })
+                })
+            })
+        })
+    })
+  }
+
+  async initGame() {
+    // await this.onShowGuidance4()
+    await this.onShowGuidance5()
     this.blade = this.addChild(new Blade());
 
     this.gennerateMoonCakes()