资讯专栏INFORMATION COLUMN

Egret制作Loading页面及分步加载资源教程

shiyang6017 / 2659人阅读

摘要:为避免加载资源时游戏黑屏,导致玩家误认为游戏非正常运行,界面起到至关重要的作用。今天就为大家带来用制作页面及分步加载资源的教程。在中测试分步加载资源,原有的页面上加上一个按钮,添加加载资源事件。

我们都知道,当游戏越做越大,资源越来越多的时候,加载资源会造成大量时间的浪费。为避免加载资源时游戏黑屏,导致玩家误认为游戏非正常运行,Loading界面起到至关重要的作用。今天就为大家带来用Egret制作Loading页面及分步加载资源的教程。

本文涉及以下内容:

· RES加载Loading界面所使用的资源
· 分步加载资源

加载LoadingUI所需要的资源

把LoadingUI所需要的资源配置到default.res.json的loading组中,组名任意。如下:

在Main.ts修改loadResource()函数资源的加载顺序,先把LoadingUI所需要的资源异步加载成功,再创建LoadingUI的实例。

 private async loadResource() {
        try {
            await RES.loadConfig("resource/default.res.json", "resource/");//加载配置表
            await RES.loadGroup("loading");//加载loading组
            const loadingView = new LoadingUI();//创建loadingUI实例
            this.stage.addChild(loadingView);
            await RES.loadGroup("preload", 0, loadingView);//加载默认preload组资源,并执行loadingView
            this.stage.removeChild(loadingView);
        }
        catch (e) {
            console.error(e);
        }
    }

如此,资源配置完毕之后就可以在LoaingUI中使用了,下面制作LoaingUI界面.

制作LoadingUI界面

本文事例中显示资源真实加载百分比和图片百分比,参照如下LoadingUI代码。

class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {

    public constructor() {
        super();
        this.createView();
    }
    /**百分比位图 */
    private textField: egret.BitmapText;
    /**loadicon */
    private load:egret.Bitmap;
    /**百分比图片 */
    private loadBar:egret.Bitmap;
    /**loadBar背景 */
    private loadBar2:egret.Bitmap;

    private createView(): void {
        this.textField = new egret.BitmapText();
        let fnt = RES.getRes("num_fnt");//加载字体位图
        this.textField.text = "0%";
        this.textField.font = fnt;
        this.textField.textAlign = "center",
        this.textField.x = 260,
        this.textField.y = 550,
        this.textField.width = 130,
        this.textField.height = 100;

        let bg:egret.Bitmap = new egret.Bitmap(RES.getRes("loadingBG_jpg"));
        this.addChild(bg);
        this.load = new egret.Bitmap(RES.getRes("loading_json.loading_icon_png"));
        this.load.anchorOffsetX = this.load.width / 2;
        this.load.anchorOffsetY = this.load.height / 2;
        this.load.x = 640 / 2;
        this.load.y = 1136 / 2;
        this.addChild(this.load);

        this.loadBar2 = new egret.Bitmap(RES.getRes("loading_json.loading_bar1_png"));
        this.loadBar2.x = (640 - this.loadBar2.width) / 2;
        this.loadBar2.y = (1136 - this.loadBar2.height) / 2;
        this.addChild(this.loadBar2);

        this.loadBar = new egret.Bitmap(RES.getRes("loading_json.loading_bar2_png"));
        this.loadBar.x = (640 - this.loadBar.width) / 2;
        this.loadBar.y = (1136 - this.loadBar.height) / 2;
        this.addChild(this.loadBar);
    }
    public onProgress(current: number, total: number): void {
        /**显示百分比 */
        this.textField.text = Math.ceil((current/total)*100).toString() + "%";
        //遮罩
        let mask = this.getSectorProgress(Math.ceil((current/total) * 360));
        this.addChild(mask)
        this.loadBar.mask = mask;
        this.addChild(this.textField);
    }
    /**loadBar遮罩 */
    private getSectorProgress(angle: number):egret.Shape {
            var self = this;
            var shape:egret.Shape = new egret.Shape();
            changeGraphics(angle);
        return shape;
        //绘制shape遮罩
        function changeGraphics(angle) {
            shape.graphics.clear();
            shape.graphics.beginFill(16711680);
            shape.graphics.moveTo(self.loadBar.x, self.loadBar.y);
            shape.graphics.lineTo(self.loadBar.x + self.loadBar.width /2 , self.loadBar.y + self.loadBar.height / 2);
            shape.graphics.drawArc(self.loadBar.x + self.loadBar.width /2, self.loadBar.y + self.loadBar.height / 2, self.loadBar.width / 2, 0, angle * Math.PI / 180);
            shape.graphics.lineTo(self.loadBar.x + self.loadBar.width /2, self.loadBar.y + self.loadBar.height / 2);
            shape.graphics.endFill();
        }
    }
}

LoadingUI制作完毕,现在运行,即可看到效果。

分步加载资源

分步加载资源和LoadingUI加载方式相同,也同样是为了避免一次性加载太多的资源而造成时间的浪费,加载的同时也可以运行LoadingUI。在资源配置表中继续增加资源组testRES,多加一些preload和loading之外的资源,效果更佳明显。

在Main.ts中测试分步加载资源,原有的页面上加上一个按钮,添加加载资源事件。

  //跳转场景加载资源测试
        let textBtn: egret.TextField = new egret.TextField();
        textBtn.text = "Click! 跳转场景";
        textBtn.touchEnabled = true;
        textBtn.x = 300;
        textBtn.y = 500;
        this.addChild(textBtn);
        textBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTextBtnClick, this);

    private async onTextBtnClick() {
        const loadingView = new LoadingUI();//创建loadingUI实例
        this.stage.addChild(loadingView);
        await RES.loadGroup("testRES", 0, loadingView);//加载默认preload组资源,并执行loadingView
        this.stage.removeChild(loadingView);
        this.addChild(new TestPanel());
    }

按钮方法关键词async,使用异步加载执行此事件。测试分步加载资源TestPanel类


class TestPanel extends egret.Sprite {
    public constructor() {
        super();
        this.init();
    }

    private init() {
        //原有资源
        let bg: egret.Bitmap = new egret.Bitmap( RES.getRes("loadingBG_jpg"));
        this.addChild(bg);
        //testRES组新的资源
        let icon_1: egret.Bitmap = new egret.Bitmap(RES.getRes("sjdj_bg2_png"));
        this.addChild(icon_1);
    }
}

小结:
通过本文您可以学到Loading页面制作方法以及资源分步加载思想,有任何技术问题或者认为这篇文章对您有所帮助,欢迎在评论区留言与我们交流互动!
本文源码素材链接:https://github.com/shenysun/L...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98902.html

相关文章

  • 纹理集打包和动画转换工具Texture Merge的使用教程

    摘要:对的要求基本没有,都能绘制出来,但是动画制作方式存在不同,可能某些帧不能完全绘制出来。目前对是有要求的本身必须是个多帧,如果只作为容器嵌套其他子项的做法将不会被绘制。点击播放按钮可以预览动画,默认帧率为。 Texture Merger 可将零散纹理拼合为整图,同时也可以解析SWF、GIF动画,制作Egret位图文本,导出可供Egret使用的配置文件,其纹理集制作功能在小游戏开发中可以起...

    robin 评论0 收藏0
  • 菜鸟| 微信小游戏好友排行榜教程

    摘要:今天我们分享的菜鸟文档将介绍微信小游戏好友排行榜的制作过程,包括创建项目并发布微信开发者平台添加小游戏打开开放域功能主域和开放域通讯,以及与原生的布局。 写在前面:随着越来越多的新人开始接触白鹭引擎,创作属于自己的游戏。考虑到初学者会遇到一些实际操作问题,我们近期整理推出菜鸟系列技术文档,以便更好的让这些开发者们快速上手,Egret大神们可以自动忽略此类内容。 今天我们分享的菜鸟文档将...

    libxd 评论0 收藏0

发表评论

0条评论

shiyang6017

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<