《白鹭引擎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;
    }
}


发布了3 篇原创文章 · 获赞 1 · 访问量 1925
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览