内容简介:《HTML5游戏开发》系列文章的目的有:一、以最低的成本去入门egret小项目开发,官方的教程一直都是面向中重型;二、egret可以很轻量;三、egret相比PIXI.js和spritejs有他的优势所在;四、学习从0打造高效的开发工作流。接下来的几篇文章里,我们将会创建一个完整的飞机大战的游戏。 本文我们将会:游戏完整源码:
《HTML5游戏开发》系列文章的目的有:一、以最低的成本去入门egret小项目开发,官方的教程一直都是面向中重型;二、egret可以很轻量;三、egret相比PIXI.js和spritejs有他的优势所在;四、学习从0打造高效的开发工作流。
- HTML5游戏开发(一):3分钟创建一个hello world
- HTML5游戏开发(二):使用TypeScript编写代码
- HTML5游戏开发(三):使用webpack构建TypeScript应用
- HTML5游戏开发(四):飞机大战之显示场景和元素
接下来的几篇文章里,我们将会创建一个完整的飞机大战的游戏。 本文我们将会:
- 使用 工具 函数loadImage来快速实现图片载入。
- 显示游戏的背景、友机和敌机。
游戏完整源码: github.com/wildfirecod…
在线展示: wildfirecode.com/egret-plane…
配置游戏区域
在 index.html
的 <div>
上增加属性 data-content-width
和 data-content-height
来设置游戏区域的大小尺寸。
<div style="margin: auto;width: 100%;height: 100%;" class="egret-player" data-entry-class="Main" data-scale-mode="fixedWidth" data-content-width="720" data-content-height="1200"> </div> 复制代码
现在游戏的宽高为 720x1200
。
添加图片资源
将背景(background.png)、友机(hero.png)、敌机(enemy.png)图片添加到 assets
目录。
载入游戏的背景、友机和敌机
为了降低引擎的复杂度以及初学者的成本,我们把加载图片的逻辑做了封装,这就是loadImage函数。
//loadImage方法API const loadImage: (url: string | string[]) => Promise<egret.Bitmap> | Promise<egret.Bitmap[]> 复制代码
你可以用它来加载单独的一张图片,此时函数会返回单个 位图
。在egret中,位图对应的类是 egret.Bitmap
,它是一个 显示对象
,可以直接填充到 显示容器
Main
中。
const image = await loadImage('assets/background.png') as egret.Bitmap; 复制代码
也可以使用它来并行加载多张图片,它将按顺序返回每个 位图
。在本例中,我们会用它来并行加载游戏背景、友机和敌机三张图片。随后将它们按顺序直接添加到游戏场景当中
import { loadImage } from "./assetUtil"; const assets = ['assets/background.png', 'assets/hero.png', 'assets/enemy.png']; const images = await loadImage(assets) as egret.Bitmap[]; const [bg, hero, enemy] = images;//按顺序返回背景、友机、敌机的位图 //将背景添加到游戏场景的最底层 this.addChild(bg); //将飞机添加到游戏背景之上 this.addChild(hero); this.addChild(enemy); 复制代码
下图示意了图片的并行加载。
将图片的锚点居中
为了方便定位图片,我们将飞机的锚点同时在垂直和水平方向居中。
createGame() { ... //设置飞机的锚点为飞机中心点 this.centerAnchor(hero); this.centerAnchor(enemy); ... } centerAnchor(displayObject: egret.DisplayObject) { displayObject.anchorOffsetX = displayObject.width / 2; displayObject.anchorOffsetY = displayObject.height / 2; } 复制代码
给图片设定位置
我们将敌机在水平方向上居中,垂直方向上将其放置在距离顶部200像素的地方。
createGame() { ... enemy.x = this.stage.stageWidth / 2; enemy.y = 200; ... } 复制代码
我们将友机在水平方向上居中,垂直方向上将其放置在距离底部100像素的地方。
createGame() { ... hero.x = this.stage.stageWidth / 2; hero.y = this.stage.stageHeight - 100; ... } 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS 基础:块级元素、行内元素、替换元素、非替换元素
- CSS 技巧篇(六):display设置元素为行内元素时,元素之间存在间隙问题
- 探究行内元素和块级元素
- 重学前端:块级元素与内联元素
- 使CSS伪元素:在与主元素相同的高度之前
- 求非负元素数组所有元素能组合的最大字符串
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。