Revision 1015589 of Building up a basic demo with PlayCanvas

<p class="summary"><span class="seoSummary"><strong>PlayCanvas</strong> is a popular 3D WebGL game engine, originally created by Will Eastcott and Dave Evans. It is <a href="https://github.com/playcanvas/engine">open sourced on GitHub</a>, with an <a href="https://developer.playcanvas.com/en/user-manual/designer/">editor</a> available online and good <a href="https://developer.playcanvas.com/en/">documentation</a>.</span> The online editor is free for public projects with up to two team members, but there are also <a href="https://playcanvas.com/plans">paid plans</a> if you'd like to run a commercial private project with more developers.</p>

<p><img alt="PlayCanvas website." src="https://mdn.mozillademos.org/files/12251/playcanvas-cover.png" style="display:block; height:242px; margin:0px auto; width:600px" /></p>

<h2 id="Games_and_demos">Games and demos</h2>

<p>PlayCanvas has a few well-known demos published that showcase its possibilities.</p>

<ul>
 <li><a href="https://playcanv.as/p/aP0oxhUr">Tanx</a> is a multiplayer tank game where you can drive your tank around, shooting at other players as you go.</li>
 <li><a href="https://playcanv.as/p/JtL2iqIH">Swooop</a> is a flying game where you pilot your plane around a magical island, collecting jewels and fuel as you go.</li>
 <li>Visualizations like the <a href="https://playcanv.as/b/FQbBsJTd">Star Lord</a> and <a href="https://playcanv.as/p/RqJJ9oU9">BMW i8</a> also take advantage of the engine and showcase what's possible.</li>
</ul>

<p><img alt="A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8." src="https://mdn.mozillademos.org/files/12253/playcanvas-demos.png" style="display:block; height:400px; margin:0px auto; width:600px" /></p>

<div class="note">
<p><strong>Note</strong>: Check out the list of <a href="https://playcanvas.com/explore">featured demos</a> to find more examples.</p>
</div>

<h2 id="Engine_vs_editor">Engine vs editor</h2>

<p>The engine itself can be used as a standard library by including its JavaScript file directly in your HTML, so you can start coding right away; in addition the PlayCanvas toolset comes with an online editor that you can use to drag and drop components onto the scene — a great way to create games and other apps requiring scenes if you're more of a designer than a coder. Those approaches are different, but work equally well in terms of achieving end goals.</p>

<h2 id="PlayCanvas_engine">PlayCanvas engine</h2>

<p>Built for modern browsers, PlayCanvas is a fully-featured 3D game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with <a href="https://github.com/kripken/ammo.js/">ammo.js</a>), audio, and facilities to handle control inputs from various devices (including gamepads). That's quite an impressive list of features — let's see some in action, check out the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine">Building up a basic demo with PlayCanvas engine</a> for details.</p>

<h2 id="PlayCanvas_editor">PlayCanvas editor</h2>

<p>Instead of coding everything from scratch you can also use the online editor. This can be a more pleasent working environment if you are not someone who likes to code. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor">Building up a basic demo with PlayCanvas editor</a> for details.</p>

<h2 id="Summary">Summary</h2>

<p>Of course it depends on your approach — designers may favor the online editor while programmers will prefer having the full control over the coding environment and will probably use the engine's source files. The good thing is that you have a choice and can pick whatever tools suits you best.</p>