白鹭小游戏-成语挑战-加载页面

白鹭小游戏-成语挑战-整体项目结构

新建 进度条组件

新建Eui组件

在 src/game 文件夹 右键 新建模版文件 新建EUI组件 press

构建皮肤文件

打开 皮肤文件 press.exml
设置 整体大小 点击框外面

进度条组成 id
拖拽 rect EUI组件 设置属性

进度条背景 id
拖拽 rect EUI组件 设置属性

百分比文字 id

皮肤文件源码

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="pressSkin" width="400" height="40" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" >
	<w:Config id="16e7e152ceb" ></w:Config>
	<e:Rect id="rect" width="400" height="15" x="0" y="0" ellipseWidth="15" ellipseHeight="15" fillColor="0xffffff" locked="true"/>
	<e:Rect id="press_val" width="40" height="15" x="0" y="0" fillColor="0x13cadb" scaleX="1" ellipseWidth="15" ellipseHeight="15"/>
	<e:Group width="220" height="23" x="87" y="15.5" anchorOffsetX="0" anchorOffsetY="0">
		<e:Label id="lab_text" text="进度" x="86" size="18" y="6"/>
	</e:Group>
</e:Skin>

press.ts

点击
粘贴

public press_val:eui.Rect;
public rect:eui.Rect;
public lab_text:eui.Label;

press.ts源码

class press extends eui.Component implements  eui.UIComponent {
	public constructor() {
		super();
	}
	public press_val:eui.Rect;
	public rect:eui.Rect;
	public lab_text:eui.Label;
	public basew:number

	protected partAdded(partName:string,instance:any):void
	{
		super.partAdded(partName,instance);
	}


	protected childrenCreated():void
	{
		super.childrenCreated();
		this.basew = this.rect.width/100
	}

	// 设置背景宽度
	public set pressw(val:number){
		this.press_val.width = val*this.basew;
	}

	// 设置百分比文字
	public preetext(start:number,end:number,type:string){
		if(type == '%'){
			this.lab_text.text = (start/end*100).toFixed(2) +'%'
		}else{
			this.lab_text.text = start +'/'+ end
		}
	}
	
}

新建加载页面皮肤loading.exml

在 resource/game 右键 新建模版文件 下架EXML文件
整体 设置大小 640 1136
设置一张背景图片 设置大小 640 1136 位置

皮肤文件源码

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="loadingSkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" >
	<w:Config id="16e7df692c8" ></w:Config>
	<e:Image source="bg_jpg" x="0" y="0"/>
</e:Skin>

LoadingUI.ts 修改

//
//
//  Copyright (c) 2014-present, Egret Technology.
//  All rights reserved.
//  Redistribution and use in source and binary forms, with or without
//  modification, are permitted provided that the following conditions are met:
//
//     * Redistributions of source code must retain the above copyright
//       notice, this list of conditions and the following disclaimer.
//     * Redistributions in binary form must reproduce the above copyright
//       notice, this list of conditions and the following disclaimer in the
//       documentation and/or other materials provided with the distribution.
//     * Neither the name of the Egret nor the
//       names of its contributors may be used to endorse or promote products
//       derived from this software without specific prior written permission.
//
//  THIS SOFTWARE IS PROVIDED BY EGRET AND CONTRIBUTORS "AS IS" AND ANY EXPRESS
//  OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
//  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
//  IN NO EVENT SHALL EGRET AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
//  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
//  LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;LOSS OF USE, DATA,
//  OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
//  LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
//  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
//  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
//


// 修改继承 EUI组件 类 才可以添加 皮肤
// class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {
class LoadingUI extends eui.Component implements RES.PromiseTaskReporter {

    public constructor() {
        super();
        // 添加皮肤
        this.skinName = "resource/game/loading.exml";
        this.createView();
    }

    private press:any

    private textField: egret.TextField;

    private createView(): void {

        this.textField = new egret.TextField();
        this.addChild(this.textField);
        this.textField.y = 300;
        this.textField.width = 480;
        this.textField.height = 100;
        this.textField.textAlign = "center";

        // 添加进度条组件
        this.press = new press();
        this.press.x = 120
        this.press.y = 1028
        this.press.width = 400
        this.press.height = 15
        this.addChild(this.press)
    }

    public onProgress(current: number, total: number): void {
        // this.textField.text = `Loading...${current}/${total}`;
       
        var fill = (current/total);//0,1之间
        this.press.pressw = fill*100;
        this.press.preetext(current,total,"%")
    }

}

load 资源设置

Main.ts 入口文件设置加载

private async loadResource() {
     try {
         // const loadingView = new LoadingUI();
         // this.stage.addChild(loadingView);
         // await RES.loadConfig("resource/default.res.json", "resource/");
         // await this.loadTheme();
         // await RES.loadGroup("preload", 0, loadingView);
         // this.stage.removeChild(loadingView);
		
		 // 加载longing页面资源
         await RES.loadConfig("resource/default.res.json", "resource/");
         await RES.loadGroup("load");
         await this.loadTheme();
		 
		 // 加载longing页面
         const loadingView = new LoadingUI();
         this.stage.addChild(loadingView);
         await RES.loadGroup("preload", 0, loadingView);
         // 移除longing页面
         this.stage.removeChild(loadingView);
     }
     catch (e) {
         console.error(e);
     }
 }

效果

终端 egret run -a 在浏览器运行