阿里开源HTML5小游戏开发框架Hilo实战教程

言

开发基于Html5的小游戏并不困难，基本思路就是使用Html5的canvas进行游戏图像绘制，通过监听Dom元素的touch事件并触发相应的动画，来实现游戏的交互。难在于解决开发后面临的不同设备游戏画面、音效等兼容性问题。

使用Hilo可以帮助我们解决开发过程遇到的一些常见的坑。在Hilo中，所有元素包括舞台、舞台里的人物物品都是一个对象，有着一些相似的属性，如宽度、高度等。一个对象可以包括另一个子对象，如舞台对象可以有人物等子对象。所有元素类对象都是Hilo.View类的子类。

下面通过一个手指触摸抛球动画的例子为大家介绍一下怎么使用Hilo来开发一个H5小游戏。

一、安装

引入Hilo类库。

<script type="javascript" src="hilo-standalone.js" ></script>

二、资源预加载

预先加载各种图片资源，提升用户体验。

//这里可以加开始显示loading动画的逻辑
var queue=new Hilo.LoadQueue();
var resources=[
 {id:'ball',type:'png',src:_ball,noCache:false,crossOrigin:'anonymous'},
 {id:'ball2',type:'png',src:_ball2,noCache:false,crossOrigin:'anonymous'},
];
queue.add(resources);
queue.on('complete',function(e) {
 //资源加载完成后的逻辑，比如隐藏loading
});
queue.start();

三、创建舞台

舞台是一个各种图形、精灵动画等的总载体。所有用Hilo创建的可见的对象都必须添加到舞台或其子容器后，才会被渲染和显示出来。舞台实质上也是一个容器Container，不过它是一个顶级容器。它除开拥有普通容器的功能，它还拥有一些特殊属性和方法。

html代码

<div id="game-container"></div>

js代码

var stage=new Hilo.Stage({
 renderType:'canvas',
 container: document.getElementById('game-container'),
 width: 480,
 height: 320
});

四、启用事件交互

Hilo对象默认不允许触发点击等事件，需要先给舞台对象启用。下面这段代码表示启用对用户手指开始触摸、移动、停止触摸等事件的事件监听。

stage.enableDOMEvent(Hilo.event.POINTER_START, true);
stage.enableDOMEvent(Hilo.event.POINTER_MOVE, true);
stage.enableDOMEvent(Hilo.event.POINTER_END, true);

五、创建定时器

用于不断刷新渲染页面动画

var ticker=new Hilo.Ticker(100);
ticker.addTick(stage);
ticker.addTick(Hilo.Tween);
ticker.start();

六、添加舞台元素

给舞台添加一个元素“球”。image是资源对象，可以从预加载队列中获取，x是球的起始横坐标，y是球的起始纵坐标，width、height分别是宽度和高度。

var ballImg=queue.getContent('ball');
ball=new Hilo.Bitmap({
 image:ballImg,
 x:ballX,
 y:ballY,
 width:trueBallWidth,
 height:trueBallHeight
});
stage.addChild(ball);

七、监听触摸事件

用户开始触摸舞台时记录一下触摸点的坐标，触摸结束后再记录一下此时触摸点的坐标，通过这两个坐标计算出手指滑动的方向，从而控制球往哪个方向抛出。

stage.on(Hilo.event.POINTER_START,function(e)
 e.preventDefault();
 currentEvent=e.changedTouches[0].identifier;
 startTouchXList[currentEvent]=e.changedTouches[0].clientX;
 startTouchYList[currentEvent]=e.changedTouches[0].clientY;
 endTouchXList[currentEvent]=e.changedTouches[0].clientX;
 endTouchYList[currentEvent]=e.changedTouches[0].clientY;
});
stage.on(Hilo.event.POINTER_MOVE,function(e)
 e.preventDefault();
 currentEvent=e.changedTouches[0].identifier;
 endTouchXList[currentEvent]=e.changedTouches[0].clientX;
 endTouchYList[currentEvent]=e.changedTouches[0].clientY;
});
stage.on(Hilo.event.POINTER_END,function(e)
 e.preventDefault();
 endTouchXList[currentEvent]=e.changedTouches[0].clientX;
 endTouchYList[currentEvent]=e.changedTouches[0].clientY;
 //抛球
 throwBall(startTouchXList[currentEvent],startTouchYList[currentEvent],endTouchXList[currentEvent],endTouchYList[currentEvent]);
})

八、动画实现

实现球飞出的动画，用Hilo.Tween.to方法来控制tmpBall对象移动。

var tmpBall=new Hilo.Bitmap({
 image:ballImg,
 x:ballX,
 y:ballY-5,
 width:trueBallWidth,
 height:trueBallHeight
});
stage.addChild(tmpBall);
//球飞出
Hilo.Tween.to(tmpBall,{
 x:endPoint.x,
 y:endPoint.y,
 width:trueBallWidth/percent,
 height:trueBallWidth/percent
},{
 duration:ballSpeed,
 delay:0,
 ease:Hilo.Ease.Linear.EaseNone,
 onComplete:function() {
 });

参考文档

官网：http://hiloteam.github.io/index.html
官方演示：http://hiloteam.github.io/examples/index.html

关注微信公众号“全栈社区”，可获取更多站长、开发者必备的前端、后端、运维技术干货。
18元美国VPS、建站主机：https://www.salasolo.com

家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser 是一个快速、免费且有趣的开源 HTML5 游戏框架，可跨桌面和移动 Web 浏览器提供 WebGL 和 Canvas 渲染，也可以使用第 3 方工具将游戏编译为 iOS、Android 和本机应用程序。开发者可以使用 JavaScript 或 TypeScript 进行开发。

Phaser 3.80 的发布带来了一系列新功能和改进，丰富了开发人员的体验，亮点包括：

WebGL 上下文丢失处理：一个强大的解决方案，即使在 WebGL 上下文丢失的情况下也能保持游戏平稳运行，从而确保游戏不间断
压缩纹理改进：添加了对 BPTC 和 RGTC 文件格式、sRGB 色彩空间的支持以及围绕 Mipmap 级别的大量更新。
Base64 加载器集成：允许加载 Base64 编码资源，促进需要嵌入式资源（例如：可播放广告）的环境的开发流程更加顺畅。
缩放管理器捕捉模式：一项新功能允许开发人员为游戏尺寸设置 “捕捉” 值，非常适合像素艺术游戏和需要精确缩放控制的游戏。
图块地图增强功能：修复和更新了图块碰撞和渲染、增强了图块到精灵创建属性以及对基于图块的游戏元素的更多控制。

目前，Phaser 由 Phaser Studio Inc 积极开发和维护，由于快速支持和开发人员友好的 API，Phaser 目前是 GitHub 上最受好评的游戏框架之一。

目前 Phaser 在 Github 通过 MIT 协议开源，有超过 36.3k 的 star、7.1k 的 fork、33.4k 的项目依赖量，是一个值得关注的前端开源项目。

如何使用 Phaser

开发者可以通过 NPM 安装，也可以通过 CDN 引入：

npm install phaser
// npm 安装
<script src="//cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
// cdn 引入

如果开发者熟悉 Web 开发和打包程序，Phaser 已经发布了一系列项目模板来帮助快速开始游戏，比如：Vite、Webpack、Esbuild、Rollup、Parcel 等等。

下面是 Phaser 官方的基础示例：

const config={
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    // 画布大小
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {y: 200}
        }
    },
    scene: Example
    // 场景就是下面的 Example
};
const game=new Phaser.Game(config);

config 是一个非常标准的 Phaser 3 游戏配置对象，其表明使用 WebGL 渲染器，将画布的大小设置为 800 x 600 像素，启用 Arcade 物理。

class Example extends Phaser.Scene
    constructor (){
        super();
    }
    preload (){
        this.load.setBaseURL('https://labs.phaser.io');
        // 将 Base URL 设置为 Phaser 服务器并加载 3 个 PNG 文件
        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    } 
    create (){
        this.add.image(400, 300, 'sky');
        const particles=this.add.particles(0, 0, 'red', {
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        const logo=this.physics.add.image(400, 100, 'logo');
        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);
        particles.startFollow(logo);
    }
}

关于每一句代码的含义可以参考文末资料，本文不再过多赘述。

参考资料

https://github.com/phaserjs/phaser

https://newdocs.phaser.io/docs/3.80.0

TML5技术的兴起有多方面的原因，其中比较重要的一点就是，越来越多的开发者选择以网页的形式来制作应用软件与游戏。本文通过设计一款卷轴类游戏，介绍了如何利用lufylegend游戏引擎来开发基于HTML5的Web游戏。

1、HTML5技术特点

HTML5是HTML的最新规则版本，它有很多优点，其中比较重要的一点是具有强大的跨平台特性。HTML5增加了很多新的元素，其中包括与Web游戏设计紧密相关的Canvas元素。

从文字处理到电子游戏，它们所需的全部图形功能，Canvas元素都会提供。尽管它在各个平台中的性能有所差异，不过总的来说，Canvas的运行速度还是很快的。浏览器厂商们在遵循HTML5规范方面做得都相当好，所以，编码良好的Canvas应用程序无需修改即可在兼容HTML5的浏览器中运行。

2、lufylegend开发框架

现在的游戏开发变得越来越复杂，需要制作各种炫丽的效果，还要制作各种基于2D或者3D的场景。为了节省游戏开发者的时间，让开发者集中精力在游戏的创新上，出现了许许多多的游戏引擎。

lufylegend是一个HTML5开源引擎，它实现了利用仿ActionScript3.0的语法进行HTML5的开发，包含了LSprite，LBitmapData，LBitmap等多个AS开发人员熟悉的类，支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多种热门环境。

3、利用HTML5技术来设计卷轴类游戏

在本游戏制作中，可以将游戏层次划分为：进度条显示层、背景层、人物层、障碍层。进度条显示层用来显示图片读取时的进度，背景层用来显示不断卷动的背景图片，人物层用来显示游戏中的主角，障碍层用来显示不断出现的各种地板。

本游戏利用HTML5的跨平台特点，分别给游戏添加键盘事件和触屏事件，以使游戏在电脑上和智能手机上都能运行。

3.1、游戏初始化

先利用LSprite对象的graphics属性和LTextField对象制作游戏标题和游戏说明文字，然后定义一个进度条，利用LLoadManager来显示进度条，最后给背景层backLayer增加鼠标点击事件。主要代码如下：

　　loadingLayer=new LoadingSample2（50）； 
　　backLayer.addChild（loadingLayer）； 
　　LLoadManager.load（imgData，function（progress）{ 
　　loadingLayer.setProgress（progress）； 
　　}，gameInit）；

当点击游戏画面的时候，首先要将背景层清空，然后添加背景图片。LSprite的die函数表示移除所有的事件监听，removeAllChild函数表示移除所有子对象。主要代码如下：

　　backLayer.addEventListener（LMouseEvent，MOUSE_UP，gameStart）； 
　　function gameStart{ 
　　backLayer.die； 
　　backLayer.removeAllChild；}

3.2、显示卷轴背景

新建一个Background类，在其构造器内建立3个LBitmap对象，并依次显示。因为背景图片是可以无缝衔接的，所以显示到画面上就好像一张图片一样。

Background类的run函数是将Background对象中的3个子图片向上移动一个STAGE_STEP步长，这个步长会在定义部分提前定义好相应的值，待第一个LBitmap对象移出屏幕后，就会把第二个LBitmap对象的坐标赋值给第一个LBitmap对象，然后再重新计算其他两个LBitmap对象的坐标。相关代码如下：

　　Background.prototype.run=function{
　　var self=this；
　　self.bitmap1.y-=STAGE_STEP；
　　self.bitmap2.y-=STAGE_STEP；
　　self.bitmap3.y-=STAGE_STEP；
　　if（self.bitmap1.y<-self.bitmap1.getHeight）{
　　self.bitmap1.y=self.bitmap2.y；
　　self.bitmap2.y=self.bitmap1.y+self.bitmap1.getHeight；
　　self.bitmap3.y=self.bitmap1.y+self.bitmap1.getHeight*2；}}

在循环播放监听函数onframe中不断调用Background类的run函数，就可以达到背景卷动的效果。

3.3 添加地板

在这个游戏中，有各种各样的地板，这些地板有一些共同的属性，比如它们都在不停地向上移动。为了实现这些共同的属性，先建立一个Floor类，作为所有地板的父类，这个父类里包含了所有地板的公共部分。Floor类的定义如下：

　　function Floor{ 
　　base（this，LSprite，[]）； 
　　var self=this； 
　　self.hy=0；

　　self.setView； 
　　} 
　　Floor.prototype.setView=function{} 
　　Floor.prototype.onframe=function{ 
　　var self=this； 
　　self.y-=STAGE_STEP； 
　　}； 
　　Floor.prototype.hitRun=function{}

其中，hy属性是用来控制游戏主角相对于地板的位置，setView函数用于给地板设定皮肤，每调用一次onframe函数，地板就向上移动一个STAGE_STEP长度。当游戏主角落到每个地板上，会根据地板的不同而有不同的表现，比如强制左移，强制右移，或者向上跳起等，hitRun函数就是为了实现这些不同的表现而建立的。

有了公共类Floor，各种各样的地板子类都必须继承自Floor，并重写相应的setView、onframe和hitRun函数。

3.4、添加游戏主角

主角类Chara继承自LSprite，其主要属性有：moveType用来控制游戏主角是左移还是右移，hp表示当前血量，mapHp表示最大血量，hpCtrl用来控制血量恢复的速度，isJump用来表示游戏主角的当前状态是否处于跳跃状态，index用来控制动作变换的快慢，speed表示下落的速度，_charOld用来记录游戏主角每次下落之前的y坐标。

Chara类的changeAction函数用于控制游戏主角的动作，定义如下：

　　Chara.prototype.changeAction=function{ 
　　var self=this； 
　　if（self.moveType=="left"）{hero.anime.setAction（3）；} 
　　else if（self.moveType=="right"）{hero.anime.setAction（2）；} 
　　else if（hero.isJump）{hero.anime.setAction（1，0）；} 
　　else{hero.anime.setAction（0，0）；} }

changeAction函数的原理是根据moveType来设定游戏主角的动作是左移还是右移，当既不是左移也不是右移的时候，则判断其状态是不是跳跃，是则设定动作为跳跃，否则设定动作为站立。

3.5、游戏数据显示

游戏的数据包括游戏主角的血量和总共下降的层数，首先建立几个变量来表示这些数：layers表示下降的层数，初始值为0；layersText用来将层数的数值显示到画面上；hpText用来将血量显示到画面上。然后建立showInit函数来进行文字显示的初始化，主要代码如下：

　　function showInit{ 
　　layersText=new LTextField； 
　　layersText.x=10； 
　　layersText.y=20； 
　　layersText.size=20； 
　　layersText.weight="bolder"； 
　　layersText.color="#ffff00"； 
　　backLayer.addChild（layersText）； 
　　}

完成以上的工作，游戏制作完成，在浏览器中运行。

4、结束语

本文介绍了如何在游戏中实现卷轴滚动效果，游戏虽然简单，但是里面有弹跳、坠落、重力等内容，这些同时也是一般横版过关游戏的组成部分，相信会对想制作横版过关游戏的朋友起到一定的借鉴作用。

在线咨询

上一篇：jQuery知识一览
下一篇：国有银行校招正式启动，2020邮储先行，广东有22个

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商