1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
---
title: 游戏引擎和工具
slug: Games/Tools/引擎和工具
translation_of: Games/Tools/Engines_and_tools
---
<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
<h2 id="HTML5_游戏引擎">HTML5 游戏引擎</h2>
<p>下面是用HTML5和JavaScript实现的游戏引擎：</p>
<ul>
<li><a href="https://aframe.io">A-Frame</a>: 一个用于构建3D和虚拟现实体验的web框架。使用HTML和实体组件生态系统。HTC Vive、Oculus Rift、桌面端和移动平台都可以使用。来自Mozilla虚拟现实团队。</li>
<li><a class="external" href="http://www.canvace.com/">Canvace</a>: 一个用于创建2D和2.5 D游戏的HTML5游戏平台。</li>
<li><a class="external" href="http://craftyjs.com/">Crafty</a>: 一个基于javascript的2D游戏框架。</li>
<li><a class="external" href="http://cocos2d-x.org/wiki/Cocos2d-js">Cocos2D JS</a>: 为您想要发布的任何平台提供一致的开发经验，无论是web还是本地平台。“一套代码，可在任何地方运行”在Cocos2D JS中是非常容易和自然的。用一个独立的JavaScript代码库，你就可以在web浏览器和本地平台上运行你的游戏，包括Mac OS X、Windows、iOS和Android。你的游戏可以在所有主流应用商店和其他分销渠道上发布。</li>
<li><a class="external" href="http://www.scirra.com/">Construct 2</a>: 它是第一个支持HTML5的HTML5游戏引擎，它只支持HTML5和JavaScript。只使用Canvas，并且通过JavaScript插件可扩展。</li>
<li><a class="external" href="http://www.divgo.net/">Div GO</a>: 基于Div游戏工作室开发的2D和3D游戏的开发引擎。它包含了新的函数和变量来增强HTML5和canvas。Div GO还提供了一个集成开发环境，其中包括代码编辑器、进程和函数列表、图形编辑器、运行过程列表、编译器和生成器/包装器项目。</li>
<li><a class="external" href="http://enchantjs.com/">EnchantJS</a>: 一个简单的用于创建2D和3D HTML5游戏的JavaScript框架。它有良好的文档和易于遵循的入门教程。</li>
<li><a class="external" href="http://www.compilgames.net">GDevelop</a>: 一个面向本地和HTML5的游戏开发平台。它用基于WebGL/canvas的Pixi.js渲染项目。</li>
<li><a class="external" href="http://www.isogenicengine.com/">Isogenic Engine</a>: 目前最有前途的游戏引擎之一。内置大规模的多人联网，在服务器端使用Node.js和MongoDB，并且可以输出canvas或dom节点的图形。</li>
<li><a class="external" href="http://impactjs.com/">Impact</a>: 一个带有编辑器和其他工具的JavaScript游戏引擎，会产生各种各样的游戏风格(例如2D和3D)，并且可以发布到web、Android和iOS。</li>
<li><a href="http://jawa.games">Jawa</a> : A browser based point'n'click adventure game engine, with a built-in very easy to use authoring tool. Games are exportable as HTML5 objects. Free for personal and educational purposes</li>
<li><a href="http://Lance.gg">Lance.gg</a>: A game engine suitable for multiplayer games. Handles networking code (authoritative server), implements real-time extrapolation of game object positions, a.k.a. client-side prediction. Supports 2D and 3D game worlds. Works with either simplified physics or full-featured physics engine <a href="http://www.cannonjs.org/">cannon.js</a>. Supported renderers: <a href="http://www.pixijs.com/">PIXI.js</a>, plain HTML, canvas / Three.js, and <a href="https://aframe.io">A-Frame</a>.</li>
<li><a class="external" href="http://melonjs.org/">melonJS</a>: A fresh and lightweight 2D sprite–based engine with WebGL and Tiled map support.</li>
<li><a class="external" href="http://mightyfingers.com/">MightyEngine</a>: 2D game engine supporting Web, Android, and iOS platforms. It includes a built in editor to manage projects, assets, and maps.</li>
<li><a class="external" href="http://phaser.io">Phaser</a>: A 2D game engine supporting Web, Android, and IOS platforms.</li>
<li><a class="external" href="http://playcanvas.com/">PlayCanvas</a>: A collaborative, cloud–hosted game engine with a visual editor, in-browser code editing and one–click publishing.</li>
<li><a class="external" href="http://piqnt.com/stage.js/">Stage.js</a>: A Lightweight and fast HTML5 2D rendering engine for cross-platform game development.</li>
<li><a class="external" href="http://superpowers-html5.com/index.en.html">Superpowers</a>: A 2D and 3D collaborative, open-source, HTML5 game dev environment using TypeScript.</li>
<li><a class="external" href="http://www.wimi5.com">WiMi5</a>: An online framework to create, publish and monetize HTML5 games. It includes a visual scripting editor so programming is not required. One-click publishing for several Web Market Places. You can also download your game as a zip and publish it where ever you want, including native desktop and mobile platforms. Easy in-app purchases integration. </li>
<li><a class="external" href="http://www.rpgmakerweb.com/products/programs/rpg-maker-mv">RPG Maker MV: </a>This particular version from the "RPG Maker" series is built on JavaScript. You can add custom code or addons, and deploy projects as Windows, Mac and web application. In addition, anime and manga–style models are included to make use of.</li>
<li><a href="https://bitbucket.org/nikola_l/visual-js/">visual-js</a>: This is JavaScript game engine canvas 2d (native js) / 3d( three.js) . Server part works on node.js. Windows users can use GUI editor (game instance creator) with gui tools (encript , multilanguage , build engine library , build resourse). Try <a href="https://jsfiddle.net/user/zlatnaspirala/fiddles/">Api examples on jsfiddle</a>. You can create game objects direct on web page (editor mode). Build images resource object with node.js tool. Any app created in this game engine works on all modern browsers. </li>
</ul>
<h2 id="HTML5_game_tools">HTML5 game tools</h2>
<ul>
<li><a class="external" href="http://clay.io/development-tools">Clay.io</a>: Distribution, Retention, Social and Monetization tools. Easy integration of user accounts, high scores, achievements, cross promotion, in-game payments, analytics etc.</li>
<li><a class="external" href="https://github.com/mrdoob/stats.js">stat.js</a>: Simple JavaScript performance monitor.</li>
<li><a href="http://phasereditor.boniatillo.com">Phaser Editor</a>: an IDE to build Phaser based games. Provides several built-in tools like a scene builder, texture packer, asset manager and an improved JavaScript editor.</li>
<li><a href="https://github.com/shakiba/planck.js">Planck.js</a>: 2D JavaScript physics engine for cross-platform game development, rewrite of Box2D.</li>
</ul>
<h2 id="Useful_technologies">Useful technologies</h2>
<p>The following can be useful when developing games based on Web technologies.</p>
<ul>
<li><a href="/en-US/docs/Web/HTML/Element/canvas">Canvas</a>: 2D graphics.</li>
<li><a href="/en-US/docs/Web/WebGL">WebGL</a>: 3D graphics.</li>
<li>Audio: {{htmlelement("audio")}} element, <a href="/en-US/docs/Web_Audio_API">Web Audio API.</a></li>
<li><a href="/en-US/docs/WebSockets">WebSockets</a>: Can be used for real-time communication between a player and the game server, to support multi-player games.</li>
<li><a class="external" href="http://nodejs.org/">Node.js</a>: Node is often used as a multiplayer game server, controlling the logic and handling the WebSockets connections to the players. It can be used for player authentication and the storage of data so gameplay can persist over multiple game sessions. This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets, and others that handle Redis and MongoDB for storage.</li>
<li><a href="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage</a>: Great for storing data locally on the player's device. This way you can cache game data and allow the game to continue where the player left off.</li>
<li><a href="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode">Full Screen API</a> : Allows you to expand any HTML element to fill the user's screen, even if the browser isn’t running full-screen itself.</li>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>: Traditionally one of the main differences between Web apps and native apps was that unlike web apps, native apps could be run offline. This has changed — technologies such as Service Workers allow for a website or web app to cache necessary assets so it can still run while offline. This includes things like JavaScript files, CSS and images. Combining this technique with intelligent use of things like localStorage will allow your game to continue working even if the Internet connection goes down. You just need to sync up all the changes when it gets connected again.</li>
<li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>: Allows you to control web–based games via a gamepad. This might be just what finally justifies HTML5 gaming on a TV or console. Who wants to use a keyboard and mouse while sitting on the sofa?</li>
<li><a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>: An attempt to improve the mouse as an input device, in situations such as games and 3D visualizations where the mouse position rotates or moves you around a 3D space. As it stands, there would still be a cursor moving around the screen causing all sorts of trouble when you want to click on something in your game. With this API, you can lock your mouse position, or even hide it altogether, using the mouse movement to move the game world instead.</li>
</ul>
<div class="note">
<p><strong>Note</strong>: Not every browser supports every part of HTML5. For example, Canvas isn’t supported out of the box by any Internet Explorer version below 9. However, you can use Explorer Canvas to replicate canvas functionality (but that is not ideal and does not perform as well). WebSockets is supported by IE only in IE 10, and it isn’t supported in the stock browser of Android. But again, you can fake this by using Flash for the sockets, such as with Socket.IO. While supported in the latest versions of every other browser, WebGL in Internet Explorer requires at least version 11.</p>
</div>
<h2 id="Game_template">Game template</h2>
<p>You can use the <a href="https://github.com/mozilla/mortar-game-stub">Mortar Game Stub</a> template to get a quick start on an HTML5 game, or you can use it to get ideas on best practices.</p>
|
