Egret Launcher 引擎入门教学笔记（三）

xihehua
325 阅读16分钟

一.创建项目

1.创建一个游戏项目

创建方法可以用 Egret Launcher 打开创建 或 打开 EgretWing 打开创建

游戏项目

2.打开src文件找到Main.tx 删除createGameScene() 方法中的我们暂时不需要的代码 如下

3.背景图片

  • 加入资源
  • 打开resource下的default.res.json 
  • 点击assels文件右键 然后看到‘在资源管理器中显示’ 

然后把图片复制进来

  •  注意:图片(资源添加之后.上方会有是否保存的提示，我们选择取消,然后ctrl/command+s手动保存即可). 

  • 修改代码,重新编译

    let sky = this.createBitmapByName("musicbg_png");

4.加载图片出来

  • 自己定义一个Bitmap 来放舞台上显示图片

  • 设置图片属性

        //定义一下bitmap
    var portrait: egret.Bitmap = new egret.Bitmap();
    //加载图片纹理
    portrait.texture = RES.getRes('bmg_jpg');
    //设置图片宽高 stageW舞台的宽
    portrait.width = stageW/2;
    portrait.height = stageW/2;
    //设置锚点的方式来实现水平居中
    portrait.anchorOffsetX = portrait.width/2;
    portrait.anchorOffsetY = portrait.height/2;
    portrait.x = stageW/2;
    portrait.y = portrait.height/2;
     //添加到显示列表中
    this.addChild(portrait);

  • 设置遮罩

        //设置遮罩
    var circle: egret.Shape = new egret.Shape();
    //绘制一个圆
    circle.graphics.beginFill(0xffff00); 
    circle.graphics.drawCircle(stageW/2,portrait.height/2,portrait.width/2);
    circle.graphics.endFill();
    //设置圆形遮罩，让图片变成圆
    portrait.mask = circle;
     //添加到舞台
    this.addChild(circle);

  • 定义文本

    //定义一个文本 var txt: egret.TextField = new egret.TextField(); //添加内容 // txt.text = '作曲 : handsome lau/HYPEEZY \n作词 : handsome lau/HYPEEZY // 多内容时和保留原来格式可用 反单引号 txt.text = 作曲 : handsome lau/HYPEEZY 作词 : handsome lau/HYPEEZY 演唱：HYPEEZY、冯泳、Handsome Lau 编曲：Raspo 和音：RSJ 后期母带：WinChan 陈建业 录音：LWL凌伟力 录音室：清远华创十四座 HYPEEZY： 承载几多人噶希翼 埋藏系尼座城 跌落人群中噶卑微 要学识自知之明 要分清 我必经 凌晨噶孤苦伶仃 似夜空划过噶流星 闪烁但无法聆听 我都 霖尽办法 要点做先算出格 每一次重新出发 快要分裂我噶人格 似皮条客 迈着步伐 愧对父母的白发 系坚持无须自责但我坚持到只剩300 当理想渐行渐远 但首歌我仲未写完 抑或唔应该再留恋 被匿迹没有根源 人生没有分段 但做人要有分寸 唔甘心 被清算 就等到水滴终会石穿 谁注定要平淡一世 何惧出身不够富贵 螳臂难阻我洪泥 似纯金令你着迷 你缺堤噶无为仲要我墨守成规 玩噶都系剩底 因为新噶等紧我发挥 HOOK 冯泳： 多少风急交与错 多少唏嘘跌与堕 如何可等到满座 在冷雨中走过 终归要梦醒 睁开眼 迷雾里一去不返 总归要算清 不轻弹 褪去美梦的空间 没有光的夜晚 Handsome Lau： 我曾经 满腔热情 让人记住我名称 认为努力就有回报 欲望刺激我神经 太多情境 太多人竟然 以为我想做明星 路人甲乙丙丁 我唔需要对你澄清 想做show 有难度 对我来讲太残酷 未到level 走去battle 结果对手太残暴 我想出歌 被警告 自知轻重 冇料到 周边充满歧视自傲 想进步 必须功课要做 写过 一只又一只字 一页又一页纸 一支又一支笔写落去 一次又一次 被拒绝说我天赋不够 抑或我资本不厚 我年少时看不透 太多建议我不接受 错与对既分别我有考虑过 我想像过 为生活屈膝变到不是我 我挣扎过 我冲动过 我克服过 我失望过 我所经历过 既事瞬间好似录像机在播放 欢笑既过往 失落编织既网 笑与泪既片段回望我一帧帧在看 回顾从前所付出既一切仿佛像是梦境 我选择不在淡定沉溺 因为我正在梦醒 HOOK 冯泳： 终归要梦醒 睁开眼 迷雾里一去不返 总归要算清 不轻弹 褪去美梦的空间 没有光的夜晚 //设置文本的宽 stageW舞台的宽 txt.width = stageW; //设置文本的背景色 txt.background = true; txt.backgroundColor = 0xe8fff5;

        //设置文本位置
    txt.y = portrait.height+10;
    //设置文本颜色
    txt.textColor = 0x000000;
    //设置文本水平居中
    txt.textAlign = egret.HorizontalAlign.CENTER;
    txt.verticalAlign = egret.VerticalAlign.MIDDLE;

    //直接添加到显示列表中
    this.addChild(txt);

  • 定义个滚动视图

         //定义滚动视图
    var scroll: egret.ScrollView = new egret.ScrollView();
    //设置可以滚动的范围
    scroll.width = stageW;
    scroll.height = stageH;
    //添加到舞台
    this.addChild(scroll);

  • 声明滚动容器

         //定义一个容器
    var content: egret.Sprite = new egret.Sprite();
    //设置容器可以滚动
    scroll.setContent(content);

  • 修改头像和文本让加载到conten可以滚动空器中

        this.addChild(portrait);  ==>  content.addChild(portrait);
    this.addChild(circle);  ==>  content.addChild(circle);
    this.addChild(txt);  ==>  content.addChild(txt);

注意用要用 ‘ Launch Wing Player ’ 运行 不要用 'Launch Chrome' 

  • 图片旋转

        //让图片转动 箭头函数
    var change = ()=>{
        //默认portrait的旋转角度为0;
        portrait.rotation = 0;
        //使用tween动画库来激活portrait
        egret.Tween.get(portrait).to({
            rotation : 360
        },60000).call(change,this)
    }
    change();

  • 全部代码

    private createGameScene() { let sky = this.createBitmapByName("musicbg_png"); this.addChild(sky); let stageW = this.stage.stageWidth; let stageH = this.stage.stageHeight; sky.width = stageW; sky.height = stageH;

        //定义滚动视图
    var scroll: egret.ScrollView = new egret.ScrollView();
    //设置可以滚动的范围
    scroll.width = stageW;
    scroll.height = stageH;
    //添加到舞台
    this.addChild(scroll);

    //定义一个容器
    var content: egret.Sprite = new egret.Sprite();
    //设置容器可以滚动
    scroll.setContent(content);

    //定义一下bitmap
    var portrait: egret.Bitmap = new egret.Bitmap();
    //加载图片纹理
    portrait.texture = RES.getRes('bmg_jpg');
    //设置图片宽高 stageW舞台的宽
    portrait.width = stageW/2;
    portrait.height = stageW/2;
    //设置锚点的方式来实现水平居中
    portrait.anchorOffsetX = portrait.width/2;
    portrait.anchorOffsetY = portrait.height/2;
    portrait.x = stageW/2;
    portrait.y = portrait.height/2;
     //添加到显示列表中
    content.addChild(portrait);

    //设置遮罩
    var circle: egret.Shape = new egret.Shape();
    //绘制一个圆
    circle.graphics.beginFill(0xffff00); 
    circle.graphics.drawCircle(stageW/2,portrait.height/2,portrait.width/2);
    circle.graphics.endFill();
    //设置圆形遮罩，让图片变成圆
    portrait.mask = circle;
     //添加到舞台
    content.addChild(circle);

    //定义一个文本
    var txt: egret.TextField = new egret.TextField();
    //添加内容
    // txt.text = '作曲 : handsome lau/HYPEEZY \n作词 : handsome lau/HYPEEZY '
    // 多内容时和保留原来格式可用 反单引号 
    txt.text = `作曲 : handsome lau/HYPEEZY

    作词 : handsome lau/HYPEEZY

    演唱：HYPEEZY、冯泳、Handsome Lau

    编曲：Raspo

    和音：RSJ

    后期母带：WinChan 陈建业

    录音：LWL凌伟力

    录音室：清远华创十四座

    HYPEEZY：

    承载几多人噶希翼 埋藏系尼座城

    跌落人群中噶卑微 要学识自知之明

    要分清 我必经 凌晨噶孤苦伶仃

    似夜空划过噶流星 闪烁但无法聆听

    我都 霖尽办法 要点做先算出格

    每一次重新出发 快要分裂我噶人格

    似皮条客 迈着步伐 愧对父母的白发

    系坚持无须自责但我坚持到只剩300

    当理想渐行渐远 但首歌我仲未写完

    抑或唔应该再留恋 被匿迹没有根源

    人生没有分段 但做人要有分寸

    唔甘心 被清算 就等到水滴终会石穿

    谁注定要平淡一世 何惧出身不够富贵

    螳臂难阻我洪泥 似纯金令你着迷

    你缺堤噶无为仲要我墨守成规

    玩噶都系剩底 因为新噶等紧我发挥

    HOOK

    冯泳：

    多少风急交与错 多少唏嘘跌与堕

    如何可等到满座 在冷雨中走过

    终归要梦醒 睁开眼 迷雾里一去不返

    总归要算清 不轻弹 褪去美梦的空间

    没有光的夜晚

    Handsome Lau：

    我曾经 满腔热情

    让人记住我名称

    认为努力就有回报 欲望刺激我神经

    太多情境 太多人竟然 以为我想做明星

    路人甲乙丙丁 我唔需要对你澄清

    想做show 有难度 对我来讲太残酷

    未到level 走去battle 结果对手太残暴

    我想出歌 被警告 自知轻重 冇料到

    周边充满歧视自傲

    想进步 必须功课要做

    写过

    一只又一只字

    一页又一页纸

    一支又一支笔写落去

    一次又一次

    被拒绝说我天赋不够

    抑或我资本不厚

    我年少时看不透

    太多建议我不接受

    错与对既分别我有考虑过

    我想像过

    为生活屈膝变到不是我

    我挣扎过

    我冲动过

    我克服过

    我失望过

    我所经历过 既事瞬间好似录像机在播放

    欢笑既过往 失落编织既网

    笑与泪既片段回望我一帧帧在看

    回顾从前所付出既一切仿佛像是梦境

    我选择不在淡定沉溺

    因为我正在梦醒

    HOOK

    冯泳：

    终归要梦醒 睁开眼 迷雾里一去不返

    总归要算清 不轻弹 褪去美梦的空间

    没有光的夜晚` //设置文本的宽 stageW舞台的宽 txt.width = stageW; //设置文本的背景色 txt.background = true; txt.backgroundColor = 0xe8fff5;

        //设置文本位置
    txt.y = portrait.height+10;
    //设置文本颜色
    txt.textColor = 0x000000;
    //设置文本水平居中
    txt.textAlign = egret.HorizontalAlign.CENTER;
    txt.verticalAlign = egret.VerticalAlign.MIDDLE;

    //直接添加到显示列表中
    content.addChild(txt);

    //添加音频 handsome_mp3
    var videos = RES.getRes("handsome_mp3");
    videos.play();

    //让图片转动 箭头函数
    var change = ()=>{
        //默认portrait的旋转角度为0;
        portrait.rotation = 0;
        //使用tween动画库来激活portrait
        egret.Tween.get(portrait).to({
            rotation : 360
        },60000).call(change,this)
    }
    change();

}

二.EUI高级制作

1.EUI简介

  •  EUI是一套基于Egret核心显示列表的UI扩展库,它封装带大量的UI常用组件,可以实现快速的开发需要.

2.创建EUI项目

  • 游戏项目选择：EUI项目

3.可视化编辑器（EXMl 文件）

  • Egret Wing里面提供了EXML可视化编辑器,可以针对EU项目中EXML皮肤进行拖拽等可视化操作,皮肤预览 

4.资源库面板

  • 资源库面板中展示了当前项目中所有可以被加载的资源，我们可以通过拖拽的方式将资源面板中的资源拖拽到文档去的设计视图中

5.组件面板

  •  组件面板包含当前项目所有可以使用的组件列表,其中包含控件',布局，自定义'三个种类，我们可以通过拖拽的方式在文档去的设计'视图中创建组件

6.创建自己的EUI组件 （右键src文件夹）

  • GameBegin

  • 打开GameBegin.exml （在resource文件 eui_skins下）

  • 可以修改成自己想显示的内容

  • 在Main.ts createGameScene方法下

    protected createGameScene(): void { this.addChild(new GameBegin()); }

运行结果

7.绑定按钮事件

  • 找张自己喜欢的图片 加到 default.res.json 中 可以直接拖到里面 然后有提示 点击关闭 之后手动保存（前面有说过，不记得可以回去看）

运行结果

  • 如果使用图片作为按钮,那么要删除按钮的标签内容
  •  在GameBegin.ts中拿到GameBegin.exml中的按钮(首先要给你想拿的按钮设置id)

  • GameBegin.ts 下写入

    public begin_btn:eui.Button;

  • 给begin_btn 这个按钮绑定事件

        protected childrenCreated():void
{
	super.childrenCreated();
	this.init();
}

//初始化操作
private init(){
	//给begin_btn 绑定事件
	this.begin_btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.tapHandler,this);
}

private tapHandler(e: egret.TouchEvent){
	alert('点了我')
}

三.布局

1.屏幕适配

  •  移动设备.上存在各种分辨率，如何能够使用一套代码写出适应各种分辨率的Ul界面,显得尤为重要.完美的屏幕适配分为两个步骤:

  • 舞台尺寸(Stage.stageWidth,Stage.stageHeight)

  • 内部UI界面与舞台尺寸的适配关系 

  • 通常所说的屏幕适配大多是做到了第一点,都是通过'scaleMode'来决定舞台尺寸

  • EUI,通过引入自适应流式布局(简称自动布局),能够解决第二步骤的屏幕适配问题.

  • 下图表示按钮离舞台上左 10 

上面图定义布局规则后,无论舞台的尺寸如何变化，最终的效果,都会自动适应.这样可以有效的解决移动开 发中各种屏幕分辨率的适配问题.

 2.布局类 

  • 基本布局

  • 水平布局: HorizontalLayout

  • 垂直布局 : VerticalLayout 

  • 网格布局: TileLayout 

 四.控件

  • 文本

  • 文件控件对应的类是eui.Label

  • eui.Labe是继承 自egret.TextField

  • 用代码显示内容（把Label的ID设置为txt）

  • 代码创建文本并且添加到Group容器中（记得要在GameBeginSkin.exml中加入Group ID 为 txtgroup）

                //代码创建文本
	var Label: eui.Label = new eui.Label();
	Label.text = '代码创建文本';	
	//把代码创建文本添加到Group中
	this.txtgroup.addChild(Label);

  •  图片

  • 图片控件对应的类是'eui.lmage'

  • eui.lmage继承 自egret.Bitmap 

注意:图片控件拖动到文档区域时,可是适当调整一下 大小

  • 九宫格 

  • 目的是为了防止图片形变过程中的拉伸变形. 

  • 如下图所示,A图为原图,B图为A图拉伸之后的图,原图划分成A1~A9,当原图拉伸的时候,B1是直接从A1直接拷贝而来,不拉伸.而B2则是有A2进行拉伸处理产生的.同样A3/A7/A9直接变成B3/B7/B9.

例 当你想改变图片长度时导致图片变形就可以使用九宫格（在特定图片下）看到下图中的图片已经是变形了那么可以使用九宫格来改变

  • 点下图片名称旁边可以看到下图

然后鼠标移动上去那线上 拖到你认为可以拉长也不会影响你图片的部位

结果 现在这个几个部位子就不会变形了

  • 按钮 。

  • 按钮控件对应的类是'eui.button'

  • eui.button 继承自'eui.Component' 

  • 按钮的皮肤通常需要有up/down/disabled三种状态 

  • 按钮可以设置禁用,禁用的按钮会进入disabled视图状态，且不再相应交互

    btn.enabled = false;//设置按钮不可用

五.容器

  • 简单容器(Group) 

  • 在EUI提供的容器中,Group是最轻量级的,它本身不可以设置皮肤,也不具备外观.它的呈现只取决于内部的 显示对象 。

  • Group操作内部对象的方法和Sprite基本一 致,只是增加了两个方法'getElementAt()和'numElements()' 

  • 注意: 

  •  调用'removeChildren('方 法可以删除所有的内部显示对象 

  • 如果内容超出了容器的尺寸,默认是全部显示的,可以设置'scrollEnabled=true'来隐藏超出部分. 

  •  滚动控制容器 

  • 滚动控制容器'eui.Scroller' 

  • eui.Scroller继承自egret.scrollViewl

结果

 六.场景切换

1.准备:

  • 需要两个场景

  • 开始页面

  • 游戏中页面

  • 需要一个场景管理者

  • 需要在两个场景中设置不同的显示内容

  • 两个场景可以来回切换 

 2.两个场景分别是

  • .GameBegin.ts(开始场景)

  •  begin_ btn

  • .GamePlay.ts(游戏场景)

  • back_ btn

注意修改 文件夹 （scene）[皮肤默认路径]

3.游戏场景管理者SceneManager.ts [在control]

4.对两个场景进行操作

GameBeginsSkin.exml

GamePlaySkin.exml

SceneManager.ts

class SceneManager extends egret.DisplayObjectContainer {
	//游戏开始场景
	public gameBegins: GameBegins;
	//游戏中场景
	public gamePlay: GamePlay;

	public constructor() {
		super();
		this.gameBegins = new GameBegins();
		this.gamePlay = new GamePlay();
		//显示默认场景
		this.addChild(this.gameBegins);
	}

	private static shared: SceneManager;
	public static Shared(): SceneManager {
		if (SceneManager.shared == null) {
			SceneManager.shared = new SceneManager();
		}
		return SceneManager.shared;
	}

	public chage(scene) {
		//点开始scene 是 begins
		//点返回scene 是 back
		this.removeChildren();
		if (scene == 'begins') {
			this.addChild(this.gamePlay);
		} else if (scene == 'back') {
			this.addChild(this.gameBegins);
		}
	}

}

GamePlay.ts

class GamePlay extends eui.Component implements  eui.UIComponent {

	public back_btn:eui.Button;

	public constructor() {
		super();
	}

	protected partAdded(partName:string,instance:any):void
	{
		super.partAdded(partName,instance);
	}


		protected childrenCreated():void
	{
		super.childrenCreated();
		this.back_btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.handle,this);
	}

	private handle(){
		SceneManager.Shared().chage('back');
	}
	
}

GameBegins.ts

class GameBegins extends eui.Component implements  eui.UIComponent {

	public begins_btn:eui.Button;

	public constructor() {
		super();
	}

	protected partAdded(partName:string,instance:any):void
	{
		super.partAdded(partName,instance);
	}


	protected childrenCreated():void
	{
		super.childrenCreated();
		this.begins_btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.handle,this);
	}

	private handle(){
		SceneManager.Shared().chage('begins');
	}
	
}
avatar
文章
阅读
粉丝