构建跨平台的HTML5游戏

这篇文章首次出现在问题230.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

HTML5游戏开发不是一门直接的科学。让您的游戏在不同平台上运行需要一些黑魔法。不同类型的游戏需要不同的技术。在开发方面,例如,基于区块的游戏与缩放和缩放游戏完全不同。但是,在本教程中,我们将重点关注开发任何类型的基于2D JavaScript的游戏的基本元素。

我们将专注于基于JavaScript Canvas的游戏。这意味着渲染将依赖于新的HTML5标记对象 - 画布。画布非常容易定义:


var canvas = document.createElement(“canvas”); //或文件
GetElementBy ###引用已定义的一个。
Canvas.width = 800; //定义画布大小,以像素为单位
Canvas.height = 600;
Document.body.appendChild(帆布);
var ctx = canvas.getContext(“2d”); //获取绘图上下文
Ctx.fillStyle =“#f00'; //设置红色填充样式。
Ctx.fillRect(10,10,50,50); //画一个红色的矩形。

步骤01.加载资产

JavaScript是一种单线程的函数式语言。这意味着资产加载将是一个异步任务,通过回调函数通知。推出一个完整的资产加载器是一个简单的操作。对于单个图像,过程可以是:

var image = new Image(); //或document.createElement(“img”);
Image.onload = Function(){//在图片被加载时调用}
image.src =“a_valid_url / uri value”;

您可以为N个图像推广此代码,您的资产预加载器将像魅力一样工作。您还可以找到完整的资产预加载器这里

步骤02.动画循环

加载一些资产/图像后,我们需要一些动画循环,这将产生连续屏幕更新的错觉。在托管JavaScript环境中,如常规浏览器,我们可以使用现成的内置函数调用的setInterval。此函数接受回调函数,以及您希望调用该函数的毫秒速率。以下是一个基于画布的示例,它播放一个非常简单的动画,一个蓝色方块每秒遍历一行50次:




简单的动画




这种定义动画循环的方式有两个主要缺点。首先,如果绘图函数花费太长时间,动画将发生冲突并开始排队。其次,即使在游戏运行的选项卡被隐藏时,此功能也会消耗系统资源,甚至更糟糕的是,当浏览器窗口最小化时。更好的解决方案是打电话RequestAnimationFramework功能,如描述在这篇文章中

第03步。输入

现在我们有了图像和一个体面的动画循环,我们需要一些游戏中的互动。根据您关注的平台,您可以使用不同的输入子系统。虽然键和鼠标是桌面系统上的主要输入系统,但触摸事件和加速度计通常仅限于移动。

HTML games aren’t restricted to desktop browsers, the capabilities of smartphones are constantly increasing making them a viable platform for browser games

HTML游戏不仅限于桌面浏览器,智能手机的功能也在不断增加,使其成为浏览器游戏的可行平台

尽管现代浏览器正在推动游戏的发展,但直到最新的主流浏览器(现在支持鼠标锁定,全屏等API)之后,浏览器才开始考虑游戏。

在移动设备上,不会出现问题,因为我们将游戏优化为全屏。但是在常规浏览器上,画布可以是DOM层次结构中的任何位置,因为没有交叉浏览器直接机制来获取与我们的画布对象相关的鼠标/触摸事件坐标,所以事情会变得更加复杂。因此,最佳做法是尽可能简化我们的画布游戏周围的标记。这是我们的程序CAAT,我们的动画库

鼠标输入系统的另一个缺点是缺少“mouseDrag”事件,您必须自己模拟。

最终的输入代码抽象意味着识别每个输入源并将它们绑定到一些可重用的代码,例如:

加速度计 - 稀 - 左=触摸 - 左侧 - 屏幕=按键左键。

第04步。移动演员

在屏幕上移动actor基本上意味着将输入事件绑定到更改屏幕上的位置变量。

更复杂的操作可能需要复杂的路径遍历,通过时间或外部事件等方式将缓动函数应用于遍历,链接动画。在这个例子中,我们绑定光标键以在屏幕上移动旋转矩形。




简单的动画




第05步。声音

声音是任何游戏最重要的反馈功能。背景音乐和特效使平均游戏和精彩游戏之间产生差异。

对于我们HTML5游戏开发者来说,音频API并不是个好消息。音频API有点破碎。首先,不同的浏览器播放不同的音频格式,因此最好使用尽可能多的音频格式的音频文件。其次,音频标签有点儿麻烦。循环不适用于某些浏览器,几乎所有浏览器都无法同时播放相同的声音。

There are many pitfalls when it comes to audio in HTML5 games, but one API that could help is SoundManager2

HTML5游戏中的音频有很多陷阱,但有一个API可以帮助SoundManager2

为了解决这个问题,最新的主流浏览器版本附带了非常强大的音频API,例如Google的Web Audio API或Mozilla的Audio Data API。坏消息是API声音碎片。这就是为什么有时Flash音频回退可能是一个好主意。但正如通常用JavaScript一样,这种语言非常强大,它允许您通过一些代码来解决大多数平台陷阱。

我们自己的Audio API解决方法可以在这里找到:netm.ag/audioapi-230。我们也建议使用SoundManager2。基本上,要以编程方式播放声音,这些是可以执行的步骤:

1创建一个音频对象:

var channel = document.createElement('audio');

2设置音频数据:

channel.src =“valid_url / uri to a audio file”;
Channel.preload =“auto”; //使音频文件静默加载
Channel.volume = 10; //改变音量
Channel.currentTime = 5; //从5秒钟开始播放
Channel.load();

3播放声音:

Channel.play();

4您可以选择将回调函数附加到事件,例如音频结束等等:

Channel.addEventListener(
“结束”,
//在声音结束时,将频道设置为可用频道列表。
Function(audioEvent){
},
错误的);

步骤06.扩展游戏

当专注于多平台或跨浏览器HTML5游戏开发时,需要特别注意的一件事,特别是在移动设备上,是屏幕分辨率碎片。有许多不同的屏幕分辨率可以应对,将所有游戏内资产与这些不同的分辨率相符合可能是一种真正的痛苦。

Games are now played on a wider range of screens than ever before so making sure they scale correctly is important

游戏现在在比以往更广泛的屏幕上播放,因此确保它们正确缩放非常重要

幸运的是,canvas API,甚至是DOM / CSS,足够灵活,允许我们应用仿射变换,这样我们就可以在几乎没有开发成本的情况下优雅地升级或缩小游戏。这意味着一个屏幕像素与一个世界坐标之间的关系不得与1:1的比例相关联。此过程的唯一约束是使画布占据整个窗口区域。因此,设置它是好的body style =“margin:0; padding:0;”没有标记。使用HTML5画布对象的方法非常简单:

1创建一个画布对象,或从标记中选择它并设置所需的大小;这个尺寸将是我们的游戏空间大小。

2为'resize'添加一个窗口事件监听器,您将在其中计算当前窗口大小与原始画布对象大小之间的比率值:

Var ScaleFactor = 1;
Window.addEventListener( '调整',
Function(evt){
//计算比例因子以保持正确的宽高比。
scaleFactor = Math.min(window.innerWidth / W,window.innerHeight / H);
//使画布符合新的缩放尺寸。
canvas.width = W * scaleFactor;
canvas.height = H * scaleFactor;
//获取缩放的画布上下文。
ctx = canvas.getContext('2d');
},
假);

3修改绘图例程以使用前一个应用比例比例因子

SetInterval(function(){
//绘图程序
// ...
Ctx.save();
ctx.scale(scaleFactor,scaleFactor);
//常规绘图代码,无需担心新的画布大小。
// ...
Ctx.restore();
},20);

步骤07.结论

尽管看起来如此,但我们确信HTML5是针对网页游戏开发的方式。目前,该技术仍处于早期阶段,但每天都在改进,并且正在添加功能强大的API。

If you’re having difficulty finding an engine for your HTML5 game, head here

如果您在为HTML5游戏找到引擎时遇到困难,请前往此处

我们建议任何想要开始HTML5游戏开发的人都要依赖任何已经存在的游戏框架。它们可以帮助您避免一些常见的HTML5陷阱,并为您提供不同的渲染技术,以针对不同的部署设备。我们开发了自己的游戏框架:CAAT,根据麻省理工学院许可证免费提供。

我们还制作了一款游戏,作为其功能的演示,可以下载200行代码这里。您可以使用输入抽象,动画,声音和屏幕分辨率独立性来玩完整的益智游戏。

看看其他编码项目有助于我们学到很多东西,并能够为复杂的问题提供简单的解决方案。选择最适合您需求的框架这里

单词:Iker Jamardo Zugaza和Ibon Tolosana:Www.ludei.com

喜欢这个?阅读这些!



翻译字数超限