1

resource/res.json

@@ -37,7 +37,7 @@
 			"name": "FreePowerPanel"
 		},
 		{
-			"keys": "bg_loading_back.jpg",
+			"keys": "img_line1.png,img_line2.png,img_line3.png,img_line4.png,img_line5.png,loadingBg.jpg,loadingBg2.png,loadingPro0.png,loadingPro1.png,loadingPro10.png,loadingPro11.png,loadingPro2.png,loadingPro3.png,loadingPro4.png,loadingPro5.png,loadingPro6.png,loadingPro7.png,loadingPro8.png,loadingPro9.png,loadingTitle.png,proDown.png,wheel.png",
 			"name": "loadingScene"
 		},
 		{

src/Main.ts

@@ -10,6 +10,7 @@ import { SkinJson } from "./SkinJson";
 import { G_EVENT } from "./common/G_EVENT";
 import { MapScene } from "./scene/map/MapScene";
 import { PlayScene } from "./scene/PlayScene";
+import { LoadingScene } from "./scene/LoadingScene";
 
 /**
  * 全局事件，为了和小程序交互
@@ -78,8 +79,8 @@ export class Main {
         //隐藏加载中
         // if (document.getElementById("__loading__")) document.getElementById("__loading__").style.display = "none";
         //打开开始场景
-        changeScene(MapScene);
-        // changeScene(PlayScene);
+        // changeScene(MapScene);
+        changeScene(LoadingScene);
         // changeScene(SStartScene);
         // changeScene(StoryScene);
         // changeScene(AdoptScene);

src/ResJson.ts

@@ -37,7 +37,7 @@ export const ResJson = {
 			"name": "FreePowerPanel"
 		},
 		{
-			"keys": "bg_loading_back.jpg",
+			"keys": "img_line1.png,img_line2.png,img_line3.png,img_line4.png,img_line5.png,loadingBg.jpg,loadingBg2.png,loadingPro0.png,loadingPro1.png,loadingPro10.png,loadingPro11.png,loadingPro2.png,loadingPro3.png,loadingPro4.png,loadingPro5.png,loadingPro6.png,loadingPro7.png,loadingPro8.png,loadingPro9.png,loadingTitle.png,proDown.png,wheel.png",
 			"name": "loadingScene"
 		},
 		{

src/Tools.ts

@@ -57,7 +57,7 @@ export class Tools {
     /**
      * 首页数据，loading页面执行一次
      */
-    public static getIndex() {
+    public static getIndex(): Promise<boolean> {
         return new Promise((r) => {
             sendTbNet(TbNetName.getIndex, {
                 userNick: this.globalData.nickName,

src/common/ProgressBarS.ts

@@ -16,17 +16,28 @@ export class ProgressBarS {
     private progressTxt: FYGE.TextField;
     private maxLength: number;
     private oriX: number
-    constructor(upImage: FYGE.Sprite, txt: FYGE.TextField) {
+    constructor(upImage: FYGE.Sprite, txt?: FYGE.TextField) {
         this.maxLength = upImage.width;//最大长度，直接取图片宽度
 
         this.upImage = upImage;
-        this.oriX = upImage.x;
+
         this.progressTxt = txt;
 
+
+        this.oriX = upImage.x;
+        var delta = 0
+        //传入的也可能是帧动画，这样原点就有问题了
+        if (upImage instanceof FYGE.FrameAni) delta = 0.5
         //给图片加个矩形遮罩
         this.upImage.mask = this.upImage.parent.addChild(new FYGE.Graphics())
             .beginFill(0xf8c862)
-            .drawRoundedRect(upImage.x + 2, upImage.y + 2, upImage.width - 4, upImage.height - 6, 111)
+            .drawRoundedRect(
+                upImage.x - upImage.width * delta,
+                upImage.y - upImage.height * delta,
+                upImage.width,
+                upImage.height,
+                111
+            )
             .endFill();
 
 
@@ -40,7 +51,7 @@ export class ProgressBarS {
         if (v < 0) v = 0;
         if (v > 1) v = 1;
         this._value = v;
-        this.progressTxt.text = ((v * 100) >> 0) + "%";
+        if (this.progressTxt) this.progressTxt.text = ((v * 100) >> 0) + "%";
         this.upImage.x = this.oriX - (1 - this._value) * this.maxLength
     }
 }

src/scene/LoadingScene.ts

+import { Scene } from "../../module/views/Scene";
+import { Tools } from "../Tools";
+import { ProgressBarS } from "../common/ProgressBarS";
+import { RES } from "../../module/RES";
+import { GDispatcher } from "../Main";
+import { sendTbNet, TbNetName } from "../TaoBaoNet";
+import { changeScene } from "../../module/ctrls";
+import { MapScene } from "./map/MapScene";
+import { layers } from "../../module/views/layers";
+import { GTool } from "../../module/tools/GTool";
+
+
+
+export class LoadingScene extends Scene {
+    get groupNames() {
+        return ["loadingScene"]
+    }
+
+    progressBar: ProgressBarS;
+
+    initUi() {
+        //适配
+        this.y = -layers.stageOffsetY
+        //背景
+        this.addChild(FYGE.Sprite.fromFrame("loadingBg.jpg"))
+        //摩天轮
+        var wheel = this.addChild(FYGE.Sprite.fromFrame("wheel.png"))
+            .addEventListener(FYGE.Event.ENTER_FRAME, () => {
+                wheel.rotation += 0.3
+            })
+        wheel.anchorTexture.set(0.5, 0.5);
+        wheel.position.set(50, 780)
+        wheel.alpha = 0.3;
+        //背景2
+        this.addChild(FYGE.Sprite.fromFrame("loadingBg2.png"))
+        //进度条底图
+        this.addChild(FYGE.Sprite.fromFrame("proDown.png"))
+            .position.set((750 - 577) / 2, 1288 - 24)
+        //进度条帧动画
+        var arr = [];
+        for (var i = 0; i <= 11; i++)arr.push(RES.getRes("loadingPro" + i + ".png"))
+        var pro = this.addChild(new FYGE.FrameAni(arr));
+        pro.play(0)
+        pro.position.set(375, 1288)//位置按正常满条的位置
+        //@ts-ignore 进度条托管
+        this.progressBar = new ProgressBarS(pro);
+
+        //标题
+        this.addChild(new Title())
+        //提示文案，随机文案待定
+        this.addChild(Tools.getText(
+            GTool.randomT([
+                "提示：固定关卡可抽取通关奖励哟！",
+                "开心趣消消，烦恼全抛掉！",
+                "解锁120关，最高可得TF彩妆礼盒、\nDyson吹风机！"
+            ]),
+            28,
+            "#ae3830",
+            FYGE.TEXT_ALIGN.CENTER,
+            500,
+            (750 - 500) / 2,
+            1288 - 24 + 18 + 48
+        ))
+    }
+
+    async start() {
+        super.start()
+        GDispatcher.addEventListener(FYGE.Event.PROGRESS, this.progressEvent, this)
+        //首次进度一点
+        GDispatcher.dispatchEvent(FYGE.Event.PROGRESS, 0.2)
+        //获取app数据
+        const { data } = await sendTbNet(TbNetName.getAppData);
+        Tools.globalData = data;
+        GDispatcher.dispatchEvent(FYGE.Event.PROGRESS, 0.3)
+        //询问读取权限，不阻止进程
+        Tools.checkPermission();
+        //获取首页数据
+        var getIndexSuccesss = await Tools.getIndex()
+        //失败不进入
+        if (!getIndexSuccesss) return;
+        GDispatcher.dispatchEvent(FYGE.Event.PROGRESS, 0.5);
+        //首次进入，地图页面需要引导
+        // if (Tools.gameData.isFristLogin) {
+
+        // }
+        //加载地图资源
+        await Promise.all([
+            'map',
+            'mapCrabEffect',
+            'mapOwlEffect',
+            'mapWhaleEffect',
+            'mapCheckPrizeEffect'
+        ].map((e) => { return RES.loadGroup(e) }))
+
+        GDispatcher.dispatchEvent(FYGE.Event.PROGRESS, 1);
+    }
+
+    // private lastP=0
+    progressEvent(e: FYGE.Event) {
+        FYGE.Tween.get(this.progressBar, null, null, true)
+            .to({ value: e.data }, 2000/**(p-this.lastP)*/)
+            .call(() => {
+                if (e.data >= 1) {
+                    GDispatcher.removeEventListener(FYGE.Event.PROGRESS, this.progressEvent, this);
+                    changeScene(MapScene, { from: "loading" })
+                }
+            })
+        // this.lastP=p
+    }
+
+    destroy() {
+        //动效要去掉
+        // FYGE.Tween.removeTweens()
+        super.destroy()
+        //到时如果内存炸了，考虑销毁用过的贴图缓存，待测试，在RES里写个根据销毁组内贴图的方法
+    }
+}
+
+const lingConfig = [
+    {
+        "name": "img_line1",
+        "x": 0,
+        "y": 70,
+    },
+    {
+        "name": "img_line2",
+        "x": 85,
+        "y": 50,
+    },
+    {
+        "name": "img_line3",
+        "x": 195,
+        "y": 0,
+    },
+    {
+        "name": "img_line4",
+        "x": 322,
+        "y": 50,
+    },
+    {
+        "name": "img_line5",
+        "x": 402,
+        "y": 70,
+    }
+]
+
+class Title extends FYGE.Container {
+    constructor() {
+        super();
+        //线
+        var line = this.addChild(new FYGE.Container());
+        for (var i = 0; i < lingConfig.length; i++) {
+            var c = lingConfig[i]
+            line.addChild(FYGE.Sprite.fromFrame(c.name + ".png"))
+                .position.set(c.x, c.y);
+        }
+        line.anchor.set(433 / 2, 0);
+        line.scaleY = 0.18
+        //标题
+        var title = line.addChild(FYGE.Sprite.fromFrame("loadingTitle.png"))
+        title.position.set(-33, 313)
+        title.anchor.set(494 / 2, 40);
+        this.x = 160//待调整
+        var targetY = -80
+        this.y = -560;//待调整
+        //新建就动画出现吧，
+        FYGE.Tween.get(this)
+            .to({ y: targetY + 25 }, 300)
+            .to({ y: targetY - 30 }, 100)
+            .to({ y: targetY }, 100);
+        [line, title].forEach((e) => {
+            FYGE.Tween.get(e)
+                .to({ rotation: 1.5 }, 300)
+                .to({ rotation: -0.5 }, 100)
+                .to({ rotation: 0 }, 100)
+            if (e === line) {
+                FYGE.Tween.get(e)
+                    .to({ scaleY: 1.05 }, 300)
+                    .to({ scaleY: 0.96 }, 100)
+                    .to({ scaleY: 1 }, 100)
+            }
+        })
+
+    }
+}
+
+