一、官网下载白鹭引擎:
https://www.egret.com/products/engine.html
二、安装后打开 并下载最新版引擎
三、创建项目
四、打开项目 我用的是WebStrom开发
AssetAdapter类主要是项目内解析资源。
LoadingUI类是初次进入时加载的等待界面。
Main类是游戏的主入口。。一切逻辑都从此类开始。
Platform类游戏发布需要接入的平台类,官方封装,可以忽略。
ThemeAdapter类是解析EUI制作的皮肤资源管理类。
egretProperties.json是管理引擎版本,引入的库等等。
manifest.json 游戏项目需要用TypeScript语法写逻辑。游览器不支持ts语法。只支持js语法。所以这个是每个类压缩后的js文件。包括eui制作的游戏界面也会压缩在这里。
tsconfig.json 是项目所支持的语法。默认为es5,部分游览器内核不兼容es6语法。所以项目内所编译的都会转化为es5,如果项目所需,可以将es5改为es6,然后编译一下就可以支持es6语法。
wingProperties.json 是管理eui所需的资源。都压缩在一个default.thm,json。
index.html内属性介绍:
- data-entry-class:文件类名称。
- data-orientation:旋转模式。
- data-scale-mode:适配模式。
- data-frame-rate:帧频数。
- data-content-width:游戏内舞台的宽。
- data-content-height:游戏内舞台的高。
- data-multi-fingered:多指最大数量。
- data-show-fps:是否显示 fps 帧频信息。
- data-show-log:是否显示 egret.log 的输出信息。
- data-show-fps-style:fps面板的样式。支持5种属性,x:0, y:0, size:30, textColor:0xffffff, bgAlpha:0.9
五、打开Main类 内部已有详细注释。。敢于删除代码运行。这样才学的快
1、createChildren函数 是皮肤初次创建时调用
2、异步函数runGame 此函数主要加载资源与主入口函数同步进行
3、异步函数loadResource 次函数主要加载eui内的皮肤与资源
4、createGameScene 此函数为主入口。可以将函数里的内容全部删除。并将相关的也删除
六、开始创建底层代码 创建一个文件夹 common。创建2个基类分别为BaseEuiComp视图基类、EventProxy发布事件基类、
1、BaseEuiComp视图基类
/**
* eui组件基类,需要设置皮肤才用到
* @author DuckKing
*/
class BaseEuiComp extends eui.Component
{
/** 是否监听舞台变更,监听的话会设置自身宽度 **/
protected _listenResize:boolean = false;
/** 用于自动判断添加还是移除监听 **/
protected _onStage: boolean;
public dispose():void
{
if(this.parent)
this.parent.removeChild(this);
}
public move(x: number, y: number): void
{
this.x = x;
this.y = y;
}
/**
* 设置监听(建议在onStageChanged方法内使用)
* @param {string} type
* @param {egret.IEventDispatcher} target
* @param {Function} listener
* @param {boolean} useCapture
* @param {number} priority
*/
protected listen(type: string, target: egret.IEventDispatcher, listener: Function, useCapture?: boolean, priority?: number): void {
if (this._onStage)
target.addEventListener(type, listener, this, useCapture, priority);
else
target.removeEventListener(type, listener, this, useCapture);
}
/**
* 设置触碰监听(建议在onStageChanged方法内使用)
* @param {egret.IEventDispatcher} target
* @param {Function} listener
* @param {boolean} useCapture
* @param {number} priority
*/
protected listenTouch(target: egret.IEventDispatcher, listener: Function, useCapture?: boolean, priority?: number): void {
if (this._onStage)
target.addEventListener(egret.TouchEvent.TOUCH_TAP, listener, this, useCapture, priority);
else
target.removeEventListener(egret.TouchEvent.TOUCH_TAP, listener, this);
}
/**
* 设置EventProxy的监听(建议在onStageChanged方法内使用)
* @param {Function} type
* @param {Function} func
*/
protected listenEvent(type: string, func: Function): void {
if (this._onStage)
EventProxy.add(type, func, this);
else
EventProxy.remove(type, func, this);
}
/**
* 舞台变更
* @param {boolean} inStage
*/
protected onStageChanged(inStage: boolean): void {
if(this._listenResize)
{
if(inStage)
{
}
}
}
/**
* 当界面添加到舞台时
* @param stage
* @param nestLevel
*/
$onAddToStage(stage: egret.Stage, nestLevel: number): void
{
this._onStage = true;
super.$onAddToStage(stage, nestLevel);
this.onStageChanged(true);
}
/**
* 当界面离开舞台时
*/
$onRemoveFromStage(): void
{
super.$onRemoveFromStage();
this._onStage = false;
this.onStageChanged(false);
}
}
2、EventProxy发布事件基类
/**
* 事件代理器,用于全局收发事件
* @author DuckKing
*/
class EventProxy
{
private static dispatcher: egret.EventDispatcher = new egret.EventDispatcher();
/**
* 监听事件
* @param type 定义一个标识字符串
* @param listener 调用的函数
* @param thisObject 调用者本身
* @param useCapture 设置为 true, 则侦听器只在捕获阶段处理事件,而不在冒泡阶段处理事件
*/
public static add(type: string, listener: Function, thisObject: any, useCapture: boolean = false): void
{
this.dispatcher.addEventListener(type, listener, thisObject, useCapture);
}
/**
* 移除事件
* @param type 移除的事件标识
* @param listener 移除的监听函数
* @param thisObject 移除监听对象
* @param useCapture
*/
public static remove(type: string, listener: Function, thisObject: any, useCapture: boolean = false): void
{
this.dispatcher.removeEventListener(type, listener, thisObject, useCapture);
}
/** 事件的对象池*/
private static _eventPool:Object = {};
/**
* 发布一个事件
* @param type 事件标识
* @param data 是否带参数
*/
public static disWith(type:string, data:any = null): Boolean
{
if(data)
{
if (this.dispatcher.hasEventListener(type))
{
let event = this._eventPool[type];
if(!event)
{
event = new egret.Event(type);
this._eventPool[type] = event;
}
event.data = data;
return this.dispatcher.dispatchEvent(event);
}
}
return this.dispatcher.dispatchEventWith(type,false,data);
}
}
3、开始上手写代码 创建一个GameScene类
/**
* 游戏主界面类
* @author DuckKing
*/
class GameScene extends BaseEuiComp
{
/** 如果在皮肤里面制作过按钮 并赋予id(即btn_Level)可以直接在此声明调用public btn_Level: eui.Button*/
/** 我目前并没有做eui界面 所以可以在代码里创建*/
public btn_Level: eui.Button;
public txt_name: eui.Label;
public constructor()
{
super();
//皮肤名 若在Eui里创造过皮肤 直接将皮肤名写入下面字符串处 以下我所创建的组件均可以在eui里制作。
this.skinName = "";
//创造一个按钮 用代码实现
this.btn_Level = new eui.Button();
this.btn_Level.width = 100;
this.btn_Level.height = 100;
this.btn_Level.icon = ""; //按钮皮肤
this.btn_Level.label = "按钮";
this.addChild(this.btn_Level);
//创建一个文本
this.txt_name = new eui.Label();
this.txt_name.x = 200;
this.txt_name.y = 300;
this.txt_name.text = "HelloWorld";
this.addChild(this.txt_name);
}
/**
* 皮肤第一次创建时调用
*/
protected childrenCreated(): void
{
super.childrenCreated();
}
/**
* 监听函数都在此进行
* @param inStage
*/
protected onStageChanged(inStage: boolean): void
{
super.onStageChanged(inStage);
//假设我要监听一个按钮的点击
this.listenTouch(this.btn_Level, this.onTouch);
//此处监听一个事件
this.listenEvent("changeText", this.changeText);
if(inStage)
{
//此处可以写 当舞台存在时的逻辑
}
}
private onTouch(event: egret.Event): void
{
console.log("被点击了");
//发布一个事件改变文本的内容
EventProxy.disWith("changeText");
}
private changeText(): void
{
this.txt_name.text = "哇哇哇,我被改变了"
}
}
在Main类里面的createGameScene函数里面添加到舞台
好了 可以用Egret Wing编辑器编译运行 也可以在webStrom里面的命令行输入 egret run -a 热更新命令
点击按钮后可以看效果了
项目构建与底层代码搭建到这里了。。这个基类是我用过最好的一套