《白鹭引擎01》场景中添加图片

小编第一次接触游戏引擎 准备入白鹭的坑 看了看文档 发现根本看不懂

只好找各种书和教程  然而由于版本更新很多代码已经执行不出来 

在此一点一点记录学习心得  第一篇我们就从熟悉项目目录和给项目添加资源开始

首先我们应该下载好白鹭引擎和编辑器  然后我们新建一个项目

点击 文件  选择 新建项目 然后选择 Egret 游戏项目

选择Egret游戏项目   然后给项目取个名字  这样就ok了 点击创建我们的项目就创建完了 

其中resource就是我们存放资源的文件夹  

点开default.res.json 出现资源管理器

在assets下添加图片 编辑器会给出提示

点击保存 会自动把图片加到资源管理器里的preload组里 

preload 组是项目预加载的资源 如果不需要预加载的资源 我们点击添加组 输入组名称 然后放到组里 

在资源管理器左边选中文件  然后拖动到其他组里 然后回到preload组里选中这张图片 右键单击一下选 移除资源

这样我们的图片就添加好了  那么我们怎么使用图片呢 

我们打开项目入口文件  main.ts

找到 createGameScene 函数

其中前几行  就是为项目添加图片

调用createBitmaoByName()方法  再里面传入资源管理器中对应图片的名字 注意是资源管理器中对应图片的名称  不是图片的名字  然后添加，设置宽高  位置 就完成了一张图片的添加 我们自己动手试验一下

把默认的设置背景图片和文字的函数删除掉  自己写一个函数 init 再函数里添加一张图片

然后点击  项目 调试  图片就出来了 代码如下 ：

class Main extends egret.DisplayObjectContainer {






    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }


    private onAddToStage(event: egret.Event) {


        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin


            context.onUpdate = () => {


            }
        })


        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }


        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }


        this.runGame().catch(e => {
            console.log(e);
        })






    }


    private async runGame() {
        await this.loadResource()
        this.init();
    }


    private async loadResource() {
        try {
            const loadingView = new LoadingUI();
            this.stage.addChild(loadingView);
            await RES.loadConfig("resource/default.res.json", "resource/");
            await RES.loadGroup("preload", 0, loadingView);
            this.stage.removeChild(loadingView);
        }
        catch (e) {
            console.error(e);
        }
    }




    private boy: egret.Bitmap;
    /**
     * 初始化游戏
     */
    private init():void {
        this.boy = this.createBitmapByName("green_boy_png");
        this.addChild(this.boy);
        this.boy.x=200;
        this.boy.y=500;
    }


    /**
     * 根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。
     * Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
     */
    private createBitmapByName(name: string) {
        let result = new egret.Bitmap();
        let texture: egret.Texture = RES.getRes(name);
        result.texture = texture;
        return result;
    }
}