HTML5游戏引擎(二)02-egret引擎之hello world——快速上手-清理项目 & 程序入口 & 绘制单色背景 & 调整屏幕的适配模式 & 添加文字 & 响应用户操作-让文字变色
作者:互联网
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