Learn the PlayCanvas API with the Engine Examples Browser

PlayCanvas has a rich JavaScript API that allows you to build just about any type of interactive content imaginable – games, playable ads, product configurators, AR, VR and more! But learning a new API can be tough. Reading API reference documentation is all well and good, but many people prefer to learn by experimentation. And by examining the code of real world examples. This led the PlayCanvas team to build a new application: the Engine Examples Browser.

Starting exploring the Examples Browser now:


The browser is written entirely in Typescript and uses a Webpack build process. Naturally, it is 100% open source (MIT license) and the source can be found here.

The Examples Browser has some pretty cool features:

  • Gallery panel. Select any of the 86 examples from the (filterable) list on the left, either by name or thumbnail.
  • Inspect Source. Expand the source panel (built on the awesome Monaco code editor) on the right to inspect any example’s source code.
  • Edit and hot reload. Edit any example and hit the Play button to refresh the running example. Monaco uses PlayCanvas’ Typescript definitions to provide inline API hints.
  • Embed links. Want to embed PlayCanvas examples in your own site? Simply hit the embed icon and copy the URL!
  • Share to Twitter. Want to share a specific example with the world? Just hit the Twitter icon!

If you would like to request an example to be added to the browser, submit an issue here. Or if you’re feeling creative, submit a pull request of your own to the repo! Stay tuned for newly added examples in the coming months. Enjoy!

Plan Updates: More Storage, More Features, Same Price

Creativity makes our world a better place. PlayCanvas unlocks creativity through collaborative, frictionless tools that enable everybody to build, share and play together.

With PlayCanvas, getting started with game development is as simple as clicking on a hyperlink. No installation, available wherever you have access to a browser and easily shareable for a real-time collaborative workspace.

Super Snappy Bowling from NOWWA

Until today, some aspects of the platform have been limited or restricted. This just holds back the creativity of our community. So today, we have some incredibly exciting news. We have updated our plans to make our tools even more accessible for everyone at all levels!

We are now giving everyone:

Best of all, this comes at no extra cost! 🎉🎉🎉

If you’re new to PlayCanvas, now is the perfect time to get started! We hope you enjoy these new features and updates.

One last thing! We are super-excited to spread the word – can you help us with a retweet?

TANX lives! Popular WebGL online game returns

In the early days of PlayCanvas, we published a game called TANX, an online multiplayer tank battle game.

To us, it was the perfect illustration of why the web makes such a great platform for gaming.

  • Bite-sized fun with drop-in/drop-out gameplay.
  • Nothing to download – just follow a hyperlink to stream the game in a couple of seconds.
  • True device independence – play on your phone, tablet or desktop.
  • Easy social sharing – get your friends into matches by posting your personal game URL to Twitter in real-time!

So we decided to keep developing the game. The first iteration above just had primitive tanks driving around an empty environment. v2.0 brought upgraded tank models, a new UI and a proper level:

And the game’s popularity continued to grow. It even hit #1 on Hacker News one lazy Friday afternoon!

By now, the PlayCanvas engine was rapidly evolving and had recently gained support for physically based rendering (PBR). We were desperate to upgrade the game to show off these new capabilities. So not long afterwards, we developed v3.0:

The game also leveraged PlayCanvas’ run-time lightmapper to generate the level’s shadows.

Not long after the upgrade, we decided to focus all of our resources on developing the core PlayCanvas engine. In the end, we didn’t have enough time to maintain the game and so, with heavy hearts, we took it offline.

Until today.

We’re really excited to announce that TANX is back! You can play it at:


Or alternatively, you can find the game hosted on Miniclip and Itch.io.

Keep your eyes peeled for a follow up article outlining how we rebuilt and deployed the game’s back-end!

A New UI for the PlayCanvas Editor

The PlayCanvas Editor has been around since 2011. Way back then, it was called the PlayCanvas Designer. It was built on Sencha’s ExtJS front end framework and looked like this:

As you can see, it sort of looks like a Windows XP application. If you think it looks retro now, it actually looked retro then! But you can more or less recognize it as PlayCanvas. The Pack Explorer is now the Hierarchy panel on the left. The Attribute Editor is now the Inspector. You can even see the ‘Who’s Online’ bar to the bottom right, which is still around today. We decided quite quickly to drop the WinXP aesthetic by adopting a darker theme in September 2013:

This refresh was definitely an improvement and it was the start of the Designer finding a personality of its own. But after this, the team was struggling to iterate quickly. We took the very difficult decision to throw away the entire ExtJS-based Designer application and rewrite it from scratch using the incredible Vanilla JS framework. And thus, by early 2015, the PlayCanvas Editor was born:

This initial version of the Editor should be much more recognizable. The toolbar and panels are all still in the same location. But today, the Editor packs in far more functionality and is much more powerful.

It was originally written in ES5 and a subset of CSS that would enable the Editor to work in browsers all the way back to IE11. Late last year, we embarked on the next major overhaul for the Editor, with the following goals:

  • Create a clean, structured underlying Editor API (more on this later)
  • Adopt ES6 (let’s get with the times!)
  • Adopt CSS grid to make managing the Editor’s layout easier
  • Refresh and refine the front-end design

We’ve slowly been phasing in the new front-end over the last several months, first deploying an updated Hierarchy Panel and then a new Inspector Panel. Today, we’re proud to announce the final step in the rollout – the new Asset Panel:

To the end user, the most obvious change is the addition of the Asset Panel’s Details View. As an alternative to thumbnails, you can now see a linear list of assets and even sort them on size and type.

We expect that this will rapidly become the default view for most PlayCanvas developers. No more mouse hovering to read long filenames!

So what’s next? Earlier, I mentioned that this completely rebuilt Editor front-end is built on a new, clean, object-oriented API. It is our plan to release this API publicly, once it is ready. This will enable you to write extensions and customizations to the Editor that will culminate in a full plugin system. Stay tuned for further details of that. But in the meantime, let us know what you think by joining the conversation on the forum!

Introducing the PlayCanvas Localization System

Are you shipping your PlayCanvas app or game in just one language? You may be preventing international users from enjoying it! Today, we are happy to announce the arrival of a localization system built right into the PlayCanvas Editor!

PlayCanvas-powered Bitmoji Party localized into English, Spanish and French

The system works in tandem with PlayCanvas’ text element component and it’s super-easy to use. The text element interface now provides a ‘Localized’ property and when checked, you can enter a Key instead of a Text string.

New text element properties for enabling localized text

The Key is the string used to look up a localized string based on the user’s currently selected locale. The localized string data is stored in JSON assets and is documented, along with the rest of the system, here. You can even preview your localized User Interface by choosing a locale in the Editor Settings panel:

Locale setting in the Scene Settings panel

We look forward to playing your newly localized games!

PlayCanvas Scripts 2.0

We’ve just launched “Scripts 2.0”, a complete re-design and re-implementation of the scripting system for PlayCanvas applications. Our goals were to fix an array of small irritations that had built up over using the PlayCanvas scripting for the last few years and take the opportunity to clean up the interface and simplify the creation and usage of scripts.

Here’s a list of the improvements you can enjoy with the new script system:

  • rapid iteration by hot-swapping code at run-time
  • real-time collaborative code editing
  • script concatenation and minification for publishing
  • better error handling and fault tolerance
  • full folder support for script assets
  • multiple script definitions in a single file
  • simpler interface and boilerplate

Live hot-swapping

If you choose to, you can now allow your scripts to update all running instances of your application. We dynamically reload scripts after they change. By implementing a single swap() function, you can transfer state into your new script instance and carry on as if nothing had happen. Except you’ve got all your new code!

Real-time collaborative code editing

Now that scripts are first-class assets, we now support real-time collaboration in the Code Editor. This means you’re no longer in danger overwriting other people’s code. In fact, you can see it appear as they type.

To help support this, we’ve also improved the error handling and fault tolerance of scripts while they’re running. This means bad scripts won’t bring your game screeching to a halt, preventing everyone from working.

Script Concatenation

With the new script format we now support multiple script definitions in a single JavaScript file. We’ve added the option to concatenate and minify all your scripts into one file when you publish. This will save you many HTTP requests and reduces the size of your application, making for a much quicker start up time.

How do you find these new scripts?

Scripts 2.0 is live right now and any new projects you create will have the new script system enabled. However, if you’re not quite ready to move to the new system or you need some of the features that are currently only available with the old system, you can still create projects using the “Legacy Script System”. Look for the option in the new project dialog.

If you haven’t tried PlayCanvas before:


Moving playcanv.as to HTTPS


TANX running on HTTPS

From today we now support HTTPS URLs on all published applications. So anytime you see a link to something on http://playcanv.as you can also use https://playcanv.as. After a short period of testing we’ll be changing all default links to point to the HTTPS versions of the applications, though we will keep support for non-secure HTTP versions for the short term to ensure compatibility for applications that require a non-secure page.

There are many reasons to use a secure HTTPS page, especially if you are doing transactions or taking money. But primarily for you as a PlayCanvas developer we’re supporting HTTPS for two reasons.


With an HTTPS page you can now embed the your PlayCanvas applications in any other page that requires a secure URL. Of note, this includes Facebook Canvas games, so you can now publish your PlayCanvas game directly to Facebook.

Secure Powerful Features

Major browsers such as Chrome and Firefox are currently in the process of securing all “powerful features”. Which means only allowing access to these features on secure pages. These features include:

  • Device Motion
  • Device Orientation
  • Encrypted Media Extensions
  • Fullscreen API (including pointer lock)
  • Geolocation
  • getUserMedia (webcam access)

Soon it won’t be possible to access these Javascript APIs without using a secure HTTPS page. In advance of this time, we want to make sure your hosted PlayCanvas applications can support all these features.

What this means for you

As a developer our transition to HTTPS should be seamless and you shouldn’t notice. Though one area to watch out for is that an HTTPS page is not able to load resources from a non-secure page. So if you are loading fonts or images from other servers that are insecure they may be blocked (depending on exactly how you load them) when running your PlayCanvas application from HTTPS. The solution is to make sure all external resources are loaded via HTTPS.


Development Update: Tags, New Script Attributes

Hi everyone! It’s time for another Development Update. So without further ado…

Editor Tags and Engine Tag API

The feedback we’ve been getting is that your projects are continuing to grow. More assets, more entities, more complexity. It makes it hard to find and organize things, right? To help you out, we’ve introduced Tags to the Editor interface. We’re starting out with Assets. Check out how you tag your assets:


To search for Assets, we have introduced a new pc.Tags API. Let’s quickly look at some examples:

// Return all assets tagged by 'level-1'
var assets = app.assets.findByTag("level-1");

// Return all assets tagged by 'level-1' OR 'level-2' 
var assets = app.assets.findByTag("level-1", "level-2");

// Return all assets tagged by 'level-1' AND 'monster' 
var assets = app.assets.findByTag(["level-1", "monster"]);

// Return all assets tagged by ('level-1' AND 'monster') OR ('level-2' AND 'monster')
var assets = app.assets.findByTag(["level-1", "monster"], ["level-2", "monster"]);

Next up is to support tagging of entities. Look out for this feature landing sometime soon.

Curve and Entity Script Attributes

We have added a couple of new script attribute types for you to expose to the Editor UI: curves and entities.

Curve attributes can be used to define how a value or values change over time. Consider it a simple keyframing tool. To define a curve script attribute, use the following notation:

// Specify a single curve
pc.script.attribute('singleCurve', 'curve');

// Specify a set of 3 curves labelled x, y, z
pc.script.attribute('xyzCurve', 'curve', null, {
    curves: ['x', 'y', 'z']

// Specify a set of 3 curves labelled r, g, b with a color preview
pc.script.attribute('rgbCurve', 'colorcurve');

// Specify a set of 4 curves labelled r, g, b, a with a color preview 
pc.script.attribute('rgbaCurve', 'colorcurve', null, {
    curves: ['r', 'g', 'b', 'a'],
    type: 'rgba'

Check out the colorcurve control’s functionality below:


To define an entity script attribute, use the following notation:

pc.script.attribute('target', 'entity');

This exposes an entity picker to your script UI. Even cooler is that you can drag entities from the Hierarchy panel directly onto the picker, as shown below:


That’s it for this update, friends. Now get back to making cool stuff! 😀

PlayCanvas pioneers 3D rich media ad format for Facebook and Twitter

PlayCanvas, the leading tool for creating interactive 3D content for the web, today announced that it is powering the launch of the first interactive 3D social media campaign for Hutch Games’s smash hit mobile game MMX Racing featuring WWE.

PlayCanvas and Hutch Games have collaborated to create a set of 3D interactive experiences for monster truck and wrestling fans on Twitter and Facebook. Players get a taste of the latest MMX Racing update right in their feed before going on to install the game.

tripleh interactive ad

Try the Triple H rich media ad

Currently interactive 3D content, including games, has always been locked up inside app stores and browser plugins. This means that on mobile devices, users have to suffer through the download and install process just to experience a bit of fun. PlayCanvas is the only engine technology that can bring these experiences to life on the web or in social networking apps.

PlayCanvas co-founder and CEO Will Eastcott said today “User acquisition is the biggest problem facing mobile game developers today. By using their existing assets in exciting, shareable and viral ways game developers can attract engaged players who have already demonstrated an interest in their game.

“This is changing the way developers think about promoting their games. PlayCanvas has unlocked the ability to make beautiful and exciting visuals available directly to players, in their browser and in their social network feeds. We know that interactive content can convert users as much as 50% more than static images and we expect PlayCanvas-powered interactive campaigns to become the standard way to promote mobile games.”