HTML5游戏开发(四):飞机大战之显示场景和元素

栏目: Html5 · 发布时间: 6年前

内容简介:《HTML5游戏开发》系列文章的目的有:一、以最低的成本去入门egret小项目开发,官方的教程一直都是面向中重型;二、egret可以很轻量;三、egret相比PIXI.js和spritejs有他的优势所在;四、学习从0打造高效的开发工作流。接下来的几篇文章里,我们将会创建一个完整的飞机大战的游戏。 本文我们将会:游戏完整源码:

《HTML5游戏开发》系列文章的目的有:一、以最低的成本去入门egret小项目开发,官方的教程一直都是面向中重型;二、egret可以很轻量;三、egret相比PIXI.js和spritejs有他的优势所在;四、学习从0打造高效的开发工作流。

接下来的几篇文章里,我们将会创建一个完整的飞机大战的游戏。 本文我们将会:

  • 使用 工具 函数loadImage来快速实现图片载入。
  • 显示游戏的背景、友机和敌机。

游戏完整源码: github.com/wildfirecod…

在线展示: wildfirecode.com/egret-plane…

配置游戏区域

index.html<div> 上增加属性 data-content-widthdata-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);
复制代码

下图示意了图片的并行加载。

HTML5游戏开发(四):飞机大战之显示场景和元素

将图片的锚点居中

为了方便定位图片,我们将飞机的锚点同时在垂直和水平方向居中。

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;
    ...
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

平台转型

平台转型

陈威如、王诗一、余卓轩(统筹) / 中信出版社 / 2016-1-10 / 58

《平台战略》续篇,陈威如等关于企业平台转型最新力作! 平台带来的商业革命已改写了现在及未来的企业生存规则,而这股浪潮已经从互联网行业漫延到了其他多种行业之中!如果说,过去10 年是平台商业模式在互联网行业的爆发期,那未来10 年,将是平台商业模式在传统行业转型应用上的黄金时代。 平台思维不再是互联网行业的专用词,它可以用来解构价值链,可以被运用到组织架构的设计中,更能够帮助企业升级竞争......一起来看看 《平台转型》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具