一, 官网下载白鹭引擎:
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 热更新命令
点击按钮后可以看效果了
项目构建与底层代码搭建到这里了.. 这个基类是我用过最好的一套
来源: http://www.bubuko.com/infodetail-3353430.html