playcanvas

Fast and lightweight JavaScript game engine built on WebGL and glTF

Showing:

Popularity

Downloads/wk

1.6K

GitHub Stars

6.7K

Maintenance

Last Commit

2d ago

Contributors

104

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Reviews

Average Rating

5.0/511
Read All Reviews
Kulodo
LeXXik
StrikerZBE
leonidaspir
saadhaider78
gabdob
albertvanveen

Top Feedback

8Responsive Maintainers
7Great Documentation
7Easy to Use
7Performant
7Highly Customizable
5Bleeding Edge

Readme

PlayCanvas WebGL Game Engine

Docs | Examples | Forum | Blog

PlayCanvas is an open-source game engine. It uses HTML5 and WebGL to run games and other interactive 3D content in any mobile or desktop browser.

NPM version Minzipped size Average time to resolve an issue Percentage of issues still open Twitter

English 中文 日本語

Project Showcase

Many games and apps have been published using the PlayCanvas engine. Here is a small selection:

Seemore After The Flood Casino
Swooop Master Archer Flappy Bird
Car Star-Lord Global Illumination

You can see more games on the PlayCanvas website.

Users

PlayCanvas is used by leading companies in video games, advertising and visualization such as:
Animech, Arm, BMW, Disney, Facebook, Famobi, Funday Factory, IGT, King, Miniclip, Leapfrog, Mojiworks, Mozilla, Nickelodeon, Nordeus, NOWWA, PikPok, PlaySide Studios, Polaris, Product Madness, Samsung, Snap, Spry Fox, Zeptolab, Zynga

Features

PlayCanvas is a fully featured game engine.

  • 🧊 Graphics - Advanced 2D + 3D graphics engine built on WebGL 1 & 2.
  • 🏃 Animation - Powerful state-based animations for characters and arbitrary scene properties
  • ⚛️ Physics - Full integration with 3D rigid-body physics engine ammo.js
  • 🎮 Input - Mouse, keyboard, touch, gamepad and VR controller APIs
  • 🔊 Sound - 3D positional sounds built on the Web Audio API
  • 📦 Assets - Asynchronous streaming system built on glTF 2.0, Draco and Basis compression
  • 📜 Scripts - Write game behaviors in Typescript or JavaScript

Usage

Here's a super-simple Hello World example - a spinning cube!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayCanvas Hello Cube</title>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src='https://code.playcanvas.com/playcanvas-stable.min.js'></script>
</head>
<body>
    <canvas id='application'></canvas>
    <script>
        // create a PlayCanvas application
        const canvas = document.getElementById('application');
        const app = new pc.Application(canvas);

        // fill the available space at full resolution
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        // ensure canvas is resized when window changes size
        window.addEventListener('resize', () => app.resizeCanvas());

        // create box entity
        const box = new pc.Entity('cube');
        box.addComponent('model', {
            type: 'box'
        });
        app.root.addChild(box);

        // create camera entity
        const camera = new pc.Entity('camera');
        camera.addComponent('camera', {
            clearColor: new pc.Color(0.1, 0.1, 0.1)
        });
        app.root.addChild(camera);
        camera.setPosition(0, 0, 3);

        // create directional light entity
        const light = new pc.Entity('light');
        light.addComponent('light');
        app.root.addChild(light);
        light.setEulerAngles(45, 0, 0);

        // rotate the box according to the delta time since the last frame
        app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

        app.start();
    </script>
</body>
</html>

Want to play with the code yourself? Edit it on CodePen.

How to build

Ensure you have Node.js installed. Then, install all of the required Node.js dependencies:

npm install

Now you can run various build options:

CommandDescriptionOutputs
npm run buildBuild release, debug and profiler enginesbuild\playcanvas[.dbg/.prf].js
npm run tsdBuild engine Typescript bindingsbuild\playcanvas.d.ts
npm run docsBuild engine API reference docsdocs

Pre-built versions of the engine are also available.

Latest development release (head revision of master branch):

Latest stable release:

Specific engine versions:

Generate Source Maps

To build the source map to allow for easier engine debugging, you can add -- -m to any engine build command. For example:

npm run build -- -m

This will output to build/output/playcanvas.js.map

Note: The preprocessor is ignored when generating the source map as it breaks the mapping. This means that all debug and profiling code is included in the engine build when generating the source map.

How to run tests

PlayCanvas uses of Karma for unit testing. There are two ways of running the tests:

CommandDescription
npm run testRuns unit tests on a built playcanvas.js
npm run test:watchRe-runs unit tests when changes are detected - open http://localhost:9876/debug.html

PlayCanvas Editor

The PlayCanvas Engine is an open source engine which you can use to create HTML5 apps/games. In addition to the engine, we also make the PlayCanvas Editor:

Editor

For Editor related bugs and issues, please refer to the Editor's repo.

Rate & Review

Great Documentation7
Easy to Use7
Performant7
Highly Customizable7
Bleeding Edge5
Responsive Maintainers8
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
KulodoLondon1 Rating1 Review
8 months ago
Great Documentation
Easy to Use
Performant
Responsive Maintainers
Highly Customizable
Bleeding Edge

Playcanvas is hugely impressive! The tools, documentation, the super fast access to the Playcanvas team through the forums, the highly maintained engine, the ease of team working between creatives and coders, are all excellent.


1
willeastcott
Alex3 Ratings1 Review
IT enthusiast. In love with Playcanvas. Grab me a coffee: ko-fi.com/lexxik
8 months ago
Easy to Use
Highly Customizable
Performant
Responsive Maintainers

The best JavaScript development environment for teams! Features a full-fledged online Editor that allows mutiple users to work on the same scene at once. Very active core maintainers and great forums support.


1
willeastcott
StrikerZBE1 Rating1 Review
2 months ago
Great Documentation
Easy to Use
Performant
Highly Customizable
Bleeding Edge
Responsive Maintainers

Since I met the PlayCanvas engine I was absolutely amazed. I took the trouble to read other opinions, and I do not want to be redundant but I agree with them; PlayCanvas is simply sublime and I invite any web or video game developer to try it, I can assure you that they will not regret it. PlayCanvas offers a warm community, attentive and efficient staff, doubt that appears ... doubt that is resolved; and I can't help but mention its excellent user manual and api reference both of which are quite comprehensive. Without further ado, I am very satisfied with PlayCanvas.


0
Leonidas1 Rating1 Review
8 months ago

We've been developing commercial and in-house projects in PlayCanvas for several years. We are very happy to see it grow in a powerful platform that can serve 2D and 3D content in almost any device connected to the internet. Our company's ability to deliver complex HTML5 projects grows by the day as the PlayCanvas team adds more features and extends the already powerful editor. Together with the friendly and ever growing community, you can find a very responsive development team. What else can you ask?


0
Saad HaiderLahore3 Ratings1 Review
8 months ago
Great Documentation
Easy to Use
Performant
Highly Customizable
Bleeding Edge
Responsive Maintainers

Using Playcanvas for 2 years now, makes developing HTML5 games so much easy with its editor and the community is very good and welcoming.


1
willeastcott

Alternatives

No alternatives found