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

2021/11/26 1:10:18

本文主要是介绍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。占满屏幕是另一种,为fixedWidthfixedWidth模式下会保持原始宽高比缩放内容,缩放后应用程序内容在水平和垂直方向都填满播放器窗口,但只保持应用程序内容的原始宽度不变,高度可能会改变。 我们可以在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; 
}  

效果

在这里插入图片描述



这篇关于HTML5游戏引擎(二)02-egret引擎之hello world——快速上手-清理项目 & 程序入口 & 绘制单色背景 & 调整屏幕的适配模式 & 添加文字 & 响应用户操作-让文字变色的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程