标签：文字 Egret tx 适配 egret 引擎 TextField
HTML5游戏引擎（二）02-egret引擎之hello world——快速上手-清理项目 & 程序入口 & 绘制单色背景 & 调整屏幕的适配模式 & 添加文字 & 响应用户操作-让文字变色
快速上手
清理项目
打开Main.ts文件，将createGameScene中的内容全部删除，并将createGameScene方法后边的所有方法删除。
也可以执行egret run -a
程序入口
像所有的开发语言一样，总有一个入口，整个程序都从这里开始启动。熟悉类C系语言的开发者，如C++和Java都了解这些语言会从一个静态的main函数入口。
文档类是可以配置的，每个Egret项目都有一个index.html文件,可以在Egret项目的根目录找到这个文件，后边我们称之为index文件。
index.html可以打开直接编辑。打开该文件，找到div标签可以看到一些配置属性，**其中的data-entry-class，其值默认为Main，就是指Main.ts中所定义的类Main。**当然这只是个默认值，我们可以根据自己的喜好随意修改，只要确保项目设定文件中的index.html属性值所指定的类名在项目中有其类定义即可。
<!--大家注意： data-entry-class是js的入口类 而不是css里面的class-->
绘制单色背景
通常游戏的画面都需要一个背景，让我们就从这最基本的显示开始着手！ 背景可以是一张图片，这需要将图片作为资源载入，后边我们会学习这种方式。
在src/main.ts中
protected createGameScene(): void {
// 添加一个背景 1. 创建背景实例 2. 配置 3. 添加到场景
}
实例
protected createGameScene(): void {
var bg:egret.Shape = new egret.Shape();
bg.graphics.beginFill( 0x336699 );
bg.graphics.drawRect( 0, 0, this.stage.stageWidth, this.stage.stageHeight );
bg.graphics.endFill();
this.addChild(bg);
}
调整屏幕的适配模式
虽然显示出来了，但我们会发现一个现象，就是显示区域在浏览器中并没有占满。这是由于Egret项目建立后，默认的屏幕适配模式是不进行缩放的。
而Egret目前应用最广泛的是移动设备，通常需要的屏幕适配模式是整体显示。
Egret提供了几种常规的适配模式，刚才所说的不进行缩放是一种，在Egret中表示为showAll。占满屏幕是另一种，为fixedWidth。fixedWidth模式下会保持原始宽高比缩放内容，缩放后应用程序内容在水平和垂直方向都填满播放器窗口，但只保持应用程序内容的原始宽度不变，高度可能会改变。 我们可以在index.html中修改适配模式，打开项目根目录下的index.html文件，找到data-scale-mode开始的代码行，将等号右边的内容修改为fixedWidth刷新页面，会发现，蓝色背景已经占满浏览器屏幕。
index.html文件
<!--大家注意： data-entry-class是js的入口类 而不是css里面的class-->
<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
data-entry-class="Main"
data-orientation="auto"
data-scale-mode="showAll"
data-frame-rate="30"
data-content-width="640"
data-content-height="1136"
data-multi-fingered="2"
data-show-fps="false" data-show-log="false"
data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
</div>
添加文字
src/main.ts
protected createGameScene(): void {
// 1. 创建文字实例 2. 配置 3. 添加到场景
var tx:egret.TextField = new egret.TextField();
tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!";
tx.size = 32;
this.addChild( tx );
}
格式有些乱，我们稍微调整一下。紧接着加入如下代码：
tx.x = 20;
tx.y = 20;
tx.width = this.stage.stageWidth - 40;
实例
protected createGameScene(): void {
// 1. 创建文字实例 2. 配置 3. 添加到场景
var tx:egret.TextField = new egret.TextField();
tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!";
tx.size = 32;
this.addChild( tx );
tx.width = this.stage.stageWidth - 40;
tx.x = 20;
tx.y = 20;
}
响应用户操作
不管我们制作游戏还是某种应用，用户的交互都是必备的。 在前一节的基础上，我们就对这段文字添加一些响应操作。比如，改变文字颜色：
// 让文字点击之后变色
// 1. 打开实例的事件绑定开关 2. 进行事件绑定
tx.touchEnabled = true; // 可以提升性能
// 1. 事件对象 2. 处理函数 3.this
tx.addEventListener( egret.TouchEvent.TOUCH_TAP, this.touchHandler, this );
注意，第一行设置touchEnabled为true，意即允许该显示对象响应Touch事件，这是Egret中特别需要注意的问题。因为所有的显示对象，默认都是不响应Touch事件的，这是基于性能考虑，因为打开对这种事件的响应，是对性能有不可忽略的影响的。 其中第二行代码新增一个方法的引用，这就是事件处理函数，我们需要事件处理函数中对用户操作做出对应的反应。 在Main类中，加入如下代码：
src/main.ts
//定义方法-文字变绿色 private和protected 同层级
private touchHandler( evt:egret.TouchEvent ):void{
var tx:egret.TextField = evt.currentTarget;
tx.textColor = 0x00ff00;
}
实例-详细版
src/main.ts
protected createGameScene(): void {
// 1. 创建文字实例 2. 配置 3. 添加到场景
var tx:egret.TextField = new egret.TextField();
tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!";
tx.size = 32;
this.addChild( tx );
tx.width = this.stage.stageWidth - 40;
tx.x = 20;
tx.y = 20;
// 让文字点击之后变色
// 1. 打开实例的事件绑定开关 2. 进行事件绑定
tx.touchEnabled = true; // 可以提升性能
// 1. 事件对象 2. 处理函数 3.this
tx.addEventListener( egret.TouchEvent.TOUCH_TAP, this.touchHandler, this );
}
//定义方法-文字变绿色 private和protected 同层级
private touchHandler( evt:egret.TouchEvent ):void{
var tx:egret.TextField = evt.currentTarget;
tx.textColor = 0x00ff00;
}
效果
标签：文字,Egret,tx,适配,egret,引擎,TextField 来源： https://blog.csdn.net/weixin_44867717/article/details/121550456
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。