HTML5游戏开发(四):飞机大战之显示场景和元素
《HTML5游戏开发》系列文章的目的有:一、以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型;二、egret可以非常轻量;三、egret相比PIXI.js和spritejs文档更成熟、友好;四、学习从0打造高效的开发工作流。
- HTML5游戏开发(一):3分钟创建一个hello world
- HTML5游戏开发(二):使用TypeScript编写代码
- HTML5游戏开发(三):使用webpack构建TypeScript应用
- HTML5游戏开发(四):飞机大战之显示场景和元素
- 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;...
}
复制代码
运行结果
HTML5游戏开发(四):飞机大战之显示场景和元素相关推荐
- HTML5游戏开发(四)
HTML5游戏开发(四) 一.线段 (一)网格绘制 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
- [Unity3D]Unity3D游戏开发之飞机大战项目讲解
大家好,我是秦元培,欢迎大家继续关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei. 首先感谢大家对我博客的关注,今天我想和大家分享的是一个飞机大战的项目.这是一个比较综合的 ...
- Java窗口游戏开发,飞机大战,打飞机,打大飞机,打无敌飞机妙啊!!!!————————香啊~~~~~~~~~~~~~~~~~
身无分文宅家,细发日渐稀疏. 双亲日益劳累,奈何无心寻工. 复试遥遥无期,心情惨惨戚戚. 若问此时作甚?抽烟喝酒扣叮.---杂记2020/3/25-2020/4/12 矫情下,莫认真 接下来奉上近日学 ...
- HTML5游戏开发(三):使用webpack构建TypeScript应用
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
- html5游戏开发-零基础开发RPG游戏-开源讲座(四)
了解上三篇的内容请点击: html5[color=rgb(68, 68, 68) !important]游戏开发-零基础开发RPG游戏-开源讲座(一) http://www.html5cn.org/a ...
- html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化地图跳转
首先,本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇,来实现游戏的脚本化,和利用游戏脚本实现地图场景的切换,离上次更新貌似很长时间了,你在看下面的文字之前,需要先了解前三篇在下啰嗦了些什么东 ...
- Html5游戏开发-145行代码完成一个RPG小Demo
lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...
- HTML5游戏开发–第10课
HTML5 Game Development – Lesson 10 Finally we can continue the series of articles on game developmen ...
- html5游戏开发_HTML5游戏开发–第10课
html5游戏开发 HTML5 Game Development – Lesson 10 Finally we can continue the series of articles on game ...
最新文章
- 不可错过!普渡大学最新《机器学习》课程
- 你大爷还是你大爷!三星震撼首发折叠屏智能手机Galaxy Fold
- 数据分析学习笔记——Pandas库思维导图
- 文本属性之文本颜色(CSS、HTML)
- 2020-9测试通过:eclipse安装svn插件
- 验证性因子分析中有哪些指标?
- Win10 - 打开资源管理器显示的不是磁盘
- 泰坦尼克号数据的分析研究
- 0xFFFF的Debug
- 程序员深度体验一周ChatGPT发现竟然....
- PowerDC进行电源DC仿真
- window10 更新提示 0x80073712错误
- 系统性思考-思考习惯的养成
- 《Unity5.x从入门到精通》读书笔记(二)
- 如何向开源社区贡献代码
- 如何给自己的网站接入谷歌联盟
- STC89C52RC - 12 - 静、动数码管显示
- 前端 html 的使用手册
- 在小程序里如何让用户快速选择到所在的小区
- AirDIsk产品第三方Samba同步工具