Repository files navigation

|User Manual |API Reference |Examples |Blog |Forum |

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.

English中文日本語한글

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

You can see more games on thePlayCanvas website.

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

PlayCanvas is a fully-featured game engine.

• 🧊Graphics - Advanced 2D + 3D graphics engine built on WebGL2 & WebGPU
• 🏃Animation - Powerful state-based animations for characters and arbitrary scene properties
• ⚛️Physics - Full integration with 3D rigid-body physics engineammo.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 onglTF 2.0,Draco andBasis compression
• 📜Scripts - Write game behaviors in Typescript or JavaScript

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

import*aspcfrom'playcanvas';constcanvas=document.createElement('canvas');document.body.appendChild(canvas);constapp=newpc.Application(canvas);// fill the available space at full resolutionapp.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);app.setCanvasResolution(pc.RESOLUTION_AUTO);// ensure canvas is resized when window changes sizewindow.addEventListener('resize',()=>app.resizeCanvas());// create box entityconstbox=newpc.Entity('cube');box.addComponent('model',{type:'box'});app.root.addChild(box);// create camera entityconstcamera=newpc.Entity('camera');camera.addComponent('camera',{clearColor:newpc.Color(0.1,0.2,0.3)});app.root.addChild(camera);camera.setPosition(0,0,3);// create directional light entityconstlight=newpc.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 frameapp.on('update',dt=>box.rotate(10*dt,20*dt,30*dt));app.start();

Want to play with the code yourself? Edit it onCodePen.

A full guide to setting up a local development environment based on the PlayCanvas Engine can be foundhere.

Ensure you haveNode.js 18+ installed. Then, install all of the required Node.js dependencies:

npm install

Now you can run various build options:

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

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