Building up a basic demo with PlayCanvas

PlayCanvas is a popular 3D WebGL game engine, originally created by Will Eastcott and Dave Evans. It is open sourced on GitHub, with an editor available online and good documentation. The online editor is free for public projects with up to two team members, but there are also paid plans if you'd like to run a commercial private project with more developers.

PlayCanvas website.

Games and demos

PlayCanvas has a few well-known demos published that showcase its possibilities.

  • Tanx is a multiplayer tank game where you can drive your tank around, shooting at other players as you go.
  • Swooop is a flying game where you pilot your plane around a magical island, collecting jewels and fuel as you go.
  • Visualizations like the Star Lord and BMW i8 also take advantage of the engine and showcase what's possible.

A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8.

Note: Check out the list of featured demos to find more examples.

Engine vs editor

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 regarding achieving end goals.

PlayCanvas engine

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 ammo.js), 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 Building up a basic demo with PlayCanvas engine for details.

PlayCanvas editor

Instead of coding everything from the beginning you can also use the online editor. This can be a more pleasant working environment if you are not someone who likes to code. See the Building up a basic demo with PlayCanvas editor for details.

Summary

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 suit you best.

相关主题
  1. Introduction
    1. Introduction
    2. Anatomy
    3. Examples
  2. APIs for game development
    1. Canvas
    2. CSS
    3. Full screen
    4. Gamepad
    5. IndexedDB
    6. JavaScript
    7. Pointer Lock
    8. SVG
    9. Typed Arrays
    10. Web Audio
    11. WebGL
    12. WebRTC
    13. WebSockets
    14. WebVR
    15. Web Workers
    16. XMLHttpRequest
  3. Techniques
    1. Using async scripts for asm.js
    2. Optimizing startup performance
    3. Using WebRTC peer-to-peer data channels
    4. Efficient animation for web games
    5. Audio for Web Games
    6. 2D collision detection
    7. Tiles and tilemaps overview
  4. 3D games on the Web
    1. 3D games on the Web overview
    2. Explaining basic 3D theory
    3. Building up a basic demo with A-Frame
    4. Building up a basic demo with Babylon.js
    5. Building up a basic demo with PlayCanvas
    6. Building up a basic demo with Three.js
    7. WebVR
    8. 3D collision detection
    9. Bounding volume collision detection with THREE.js
  5. Implementing game control mechanisms
    1. Control mechanisms
    2. Mobile touch
    3. Desktop with mouse and keyboard
    4. Desktop with gamepad
    5. Other
  6. Tutorials
    1. 2D breakout game using pure JavaScript
    2. 2D breakout game using Phaser
    3. 2D maze_game with device orientation
    4. 2D platform game using Phaser
  7. Publishing games
    1. Publishing games overview
    2. Game distribution
    3. Game promotion
    4. Game monetization