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; 
}  

效果