小编第一次接触游戏引擎 准备入白鹭的坑 看了看文档 发现根本看不懂
只好找各种书和教程 然而由于版本更新很多代码已经执行不出来
在此一点一点记录学习心得 第一篇我们就从熟悉项目目录和给项目添加资源开始
首先我们应该下载好白鹭引擎和编辑器 然后我们新建一个项目
点击 文件 选择 新建项目 然后选择 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;
}
}