我最近玩JavaScript,我正在创建一个网页游戏(纯HTML + CSS + JS,没有服务器后端)。这个游戏的主要目的是在2D地图上行走。 (类似于https://alexnisnevich.github.io/untrusted/)。
我目前的筹码是:
我创建了一些基本功能,现在我将地图大小从10x10(100个DOM元素)增加到100x100(10 000个DOM元素)。这是Angular遭受的地方。 ng-repeat
指令需要大约5秒来渲染这么多元素(100x100对我来说是小地图,我想要一些更大的环境让用户进入)
问题:
我写了十几个HTML5游戏。为了获得最佳结果,请不要使用框架/库。与通常以十分之一速度运行的本机应用程序相比,Javascript很慢。由于游戏需要大量重复渲染操作,因此任何额外开销都会对性能产生负面影响。
JavaScript和HTML5已经提供了出色的内置API,用于渲染,音频,视频,用户输入(键盘,鼠标,触摸等)和资源管理。框架和库只是添加了另一层抽象,通常这个抽象层旨在提供一系列功能,而大多数游戏或游戏的特定部分不需要或使用大部分功能。每个不需要的条件,函数调用和内存分配都会对性能产生负面影响。
这表示框架仍有空间。但这应该只用于设置和浏览器兼容性。 JQuery专为此而设计(不是为了速度)。使用JQuery加载和设置页面,然后使用游戏循环不要使用jquery。仅将其用于游戏的非性能部分。
为获得最佳性能,您的目标是每秒60帧。
更新2018以下几点仍然部分适用,但在写入和此更新之间的时间内,ES6功能已有一些改进。虽然仍然没有达到速度,但它们不再是速度慢的数量级。
for
从不Array.forEach
,Array.map
等.for循环比内置迭代器快100倍。对于块范围接缝来说,“让”是一个好主意但没有浏览器对此进行优化。使用let声明的变量同样快。它是块作用域的开始,需要解释器分配内存,并且作用域结束时它取消引用并引发GC。所以现在我已经让你远离你看IDE的框架,并想知道我从哪里开始。从这里开始MDN并学习如何使用现有的API而不是一些框架,它需要相同的努力才能学习,但最终你将更接近硬件编码并生成更快的游戏。
那么物理,复杂的分层动画,多人状态管理和通信呢? Github是一个很好的起点,小型目标API是最好的。不要只是下载一个git并将其添加到你的游戏中。下载并撕开它,删除任何你不想要的东西,只需要你需要的东西,重新编写它以满足你的需要和你的需要。
所以你还想要一个框架?好吧,我不怪你,我有40年的时间来编写游戏,很容易说你自己做。
我推荐Phaser我已经仔细研究了它,虽然没有完全优化,它有良好的社区支持,编写得很好,易于理解,并提供最接近我见过的游戏框架的硬件解决方案。
最后一件事。不要写一个会在阳光下的每个设备上运行的游戏,手机游戏永远不会在PC上运行,反之亦然。响应式设计适用于网页“页面”,不适合高性能游戏,除非您有多年的编码经验,或者您只是在日常工作之间填写时间。
并且记住程序员写游戏,游戏设计师的梦想。