我们用技术领先者来解决
对于俄罗斯银行的教育项目，我们制作了引人注目的网页游戏“迷失的存钱罐的秘密”。她提请学童注意金融知识，介绍相关术语，教他们如何明智地管理资金。该游戏不仅受到儿童的喜爱，还受到俄罗斯不同城市的成年人的喜爱-超过30,000人参与了该游戏。
长期以来，我们一直在要求技术负责人来介绍网络游戏的发展。他不仅讲述而且还写了一篇关于我们在该项目中的经验，遇到的困难的热烈文章，还分享了浏览器游戏开发中的生活技巧。结果是一种有用的材料。继续阅读。
网页游戏从根本上不同于常规的计算机游戏和浏览器中的常规网站。在常规游戏中，所有游戏资源都可以脱机使用，游戏引擎知道有关计算机的处理器，内存和视频卡的信息。常规站点需要的计算机资源很少，如果出现问题，您只需重新加载页面即可。
我们对浏览器游戏的功能有一些假设-显着限制了RAM的可用和使用大小（例如，在TOR中指出，移动设备1 GB的RAM应该足够），游戏资源（图像，纹理，小精灵，声音，视频）及其下载速度。
除此之外，还有客户端的要求-游戏必须以最低的硬件特性在所有声明的移动和桌面浏览器（包括IE 11）中运行和运行。这些要求源于以下事实：应该在任何方便的机会，使用任何可用的设备（例如在学校）中展示游戏。
引擎的选择方式
我们已经在游戏开发方面拥有经验，因此会立即指出选择引擎的方向：
- Phaser游戏引擎-我们已经在其上实现了Eldorado / Microsoft的游戏。
- 具有将游戏导出到Web的功能的统一性-我们使用此引擎制作了游戏项目。
- 我们还考虑了鲜为人知的引擎LibGDX，Godot，PlayCanvas。
未知选项的消失有一个明显的原因-它们必须被掌握和研究，尽管似乎并非不可能，但它们在某种程度上受到了威胁。由于引擎和导出限制不允许，例如，在IE 11中使用音频，因此Unity选项失败了。此外，由于从Unity导出的Javascript非常大，并且IE 11的解析和代码执行速度比现代的慢得多浏览器。
因此，决定采用新版本的Phaser引擎（在开发时为Phaser 3.11版本）。我们之所以选择该引擎，还因为所有逻辑和渲染都是软件，这意味着我们可以在代码中完全控制未来游戏的任何方面。
正如他们写的
刚开始时，我们没有任何复杂的机制，但是我们知道它肯定是平台游戏。因此，我们决定至少组装一些原型，以刷新我们对引擎的了解，并对消耗的资源和浏览器上的负载进行近似测量。
我们从文档中准备的“角色移动”和“平铺地图”示例中提取，组装，发布-它的工作原理是：角色在平台上行走，跳跃，移动。已在所有可用设备中启动-仍然有效。从“虚拟按钮”示例中添加了虚拟控制按钮，并在移动设备上启动-仍然有效。添加一个小机械师-击中，敌人，造成和受到伤害，收集硬币-对于原型来说就足够了。
在原型中，甚至还有一些多余的东西。例如，实现了控制两个角色的机制，您可以随时在两个角色之间进行切换。
在成功完成原型之后，我们对如何实现体系结构和组织代码有了了解。如果我们谈论基础架构部分，那么这与引擎一起使用，包括加载资源，创建游戏对象，切换屏幕。至于游戏逻辑本身，这是角色的实现，是与战利品，陷阱，敌人互动的机制的实现。
对于类似的项目-webpack，webpack-dev-server，babel，babel / preset-typescript，开发堆栈非常典型。
有什么困难
在满足绩效要求和团队沟通方面遇到困难。我必须使用新工具，并以新格式相互传送资料，因此，第一次并不是一切都顺利进行。
例如，在TOR中规定，游戏会尝试确定设备在启动时的性能，如果性能低下，则会显示相应的通知。在这个阶段，我们面临两个问题。首先，浏览器实际上没有提供有关此问题的任何信息。其次，特定浏览器选项卡在特定时间的性能在很大程度上取决于外部因素-打开了多少个选项卡，其他选项卡中是否有繁重的站点，浏览器是否最小化。
测试了几种理论和实践假设，由此得出了最终的解决方案。解决方法如下：
- 在游戏的加载屏幕上，进度是从0到100％，资源的实际加载以92％结束。
- 之后，在屏幕外部创建一个场景，在该场景上放置大量动画和一些物理效果。
- 然后，在5秒钟内，测量一帧的平均渲染时间。
- 之后，决定设备的性能，进度达到100％。
要求游戏在IE 11中完全运行的要求非常重要，这也带来了不便。事实证明，运行开发人员工具后，此浏览器中本已很慢的Javascript执行速度进一步放缓。
也就是说，您面临游戏中的刹车，打开开发人员工具以查找原因，游戏速度甚至会进一步降低。
游戏机制
游戏机制本身并不复杂，很大程度上受现有游戏的启发。
例如，主要角色是一件带武器的动画精灵。选择该解决方案是为了避免挥杆和武器动画不同步。因此，按以下方式检查造成的损坏-在碰撞动画的某些帧（大约从第三个帧开始）的那一刻，我们计算出交集区域，该交集区域对于另外几个动画帧有效。这就是我们设法实现武器现实操作的方式。
在主角的动画中做出此决定的缺点是，对于每个级别的每个性别，您都需要自己准备的一套单独的带武器的动画。在第二层，还需要另外一套-信用运动鞋。总共，每个角色有四个完整的动画集。
另一个有趣的事情是，当您选择用于最终战斗的武器时，实际上您是从相应级别中选择整个角色。因此，所有持剑的英雄都会穿着普通运动鞋。
从胸部抓钥匙的机制很有趣。对于需要捕捉的钥匙，使触发区域小于钥匙的外观，并且随机地将其稍微移到侧面。这导致了预期的效果``我的钥匙不会在第一次组装''-有时您需要尝试几次收集钥匙才能到达其启动区域。否则，这太容易了，尽管在最终版本中，触发区域还是略有增加，以减少失败尝试的百分比。
所有其他机制实际上都是相同的-在特定的时间点和动画触发角色和游戏对象的接近和交集。
保险之龙的机械师，穿越峡谷的飞行以及最后的战斗有些复杂。技术是相同的，但是另外还精心设计了暂停和静止状态，以便此时再现其他角色的动画。
结论和建议
尽早决定类型。
网络游戏是一种真实的现象，拥有自己的受众和规则。这样的游戏不需要安装，它们允许您安排简短的游戏会话，它们吸引的不仅仅是外观。
提示-将网络游戏开发视为真实游戏，而不仅仅是另一个“页面上的脚本”。测试，分析并避免内存泄漏和CPU开销。玩家及其设备电池会很高兴。