Skip to main content

6 posts tagged with "scripting"

View All Tags

Using Visual Studio Code with PlayCanvas

· 2 min read

Visual Studio Code is massively popular. In the Stack Overflow 2023 Developer Survey, Visual Studio Code was ranked the most popular developer environment tool among 86,544 respondents, with 73.71% reporting that they use it.

Any PlayCanvas developer building directly on top of the Engine will very likely opt to use VS Code. But if you use the PlayCanvas Editor, you will normally rely on the built-in, browser-based Code Editor. Today, we're excited to give you another option by launching an open-source Visual Studio Code Extension for PlayCanvas.

VS Code Extension


The PlayCanvas Code Editor is actually built on the Monaco Editor, the beating heart of VS Code. So why use VS Code instead of the PlayCanvas Code Editor?

  • GitHub Copilot - leverage AI to help you write PlayCanvas code faster.
  • Powerful IntelliSense tools (code completion, parameter info, quick info, and member lists).
  • Leverage a huge library of other extensions to accelerate your development.

We ❤️ Open Source

As you might expect, we have open sourced the VS Code extension under a liberal MIT license!

So if you find a bug or have a suggestion, please do log an issue. And for the more adventurous, consider making a code contribution!

We want you to feel empowered to make these tools your own. Let's make them awesome together! 🙌

Get Started Now

If this all sounds great to you, why not give it a try? Head over to the User Manual for instructions on how to get started:


Upcoming Code Editor Upgrade to Monaco!

· One min read
Steven Yau
Partner Relations Manager

We are nearing completion on transitioning our Code Editor from CodeMirror to Monaco, the powerhouse behind the immensely popular Visual Studio Code.

Look familiar? 👀

This upgrade will provide developers with:

  • Significantly improved performance, especially when working with large text files.
  • Enhanced editing features through the command palette.
  • Advanced mouse-driven functionalities, such as Cmd/Ctrl + Click to jump to definition, hover for documentation, and a context menu.

There will be a few minor differences, including:

  • Syntax color changes, as we are adopting Monaco's default theme, which will be familiar to users of VS Code.
  • Some adjustments to hotkeys/shortcuts, such as moving lines up or down.

When can we use it?

We are finalizing a few remaining issues but plan to release the upgraded Editor as early as next week. Keep your eyes peeled!

Introducing JSON Script Attributes

· 2 min read
Steven Yau
Partner Relations Manager

JSON Script Attributes Preview

We have levelled up the Script Attributes that makes it much easier to organize and group related attributes together.

Using JSON, developers are able to define a schema for a data object that has multiple attributes and have them grouped together in the Inspector.

In the example below, we have created a JSON schema with the name ‘settings’ and has the attributes ‘gravity’, ‘startingHealth’ and ‘godMode’.

GameManager.attributes.add('settings', {
type: 'json',
schema: [{
name: 'gravity',
type: 'number',
default: -9.8
}, {
name: 'startingHealth',
type: 'number',
default: 20
}, {
name: 'godMode',
type: 'boolean',
default: false

In the Inspector, the data object is shown as a collapsible section:

Collapsible script settings

Even better, these data objects can made into an array! This is a huge improvement over having to organize multiple attribute arrays that was difficult to update and error prone to maintain.

Example JSON schema for an array of enemies:

GameManager.attributes.add('enemies', {
type: 'json',
schema: [{
name: 'health',
type: 'number',
default: 10
}, {
name: 'type',
type: 'number',
enum: [
{ 'Close Combat': 1 },
{ 'Range': 2 },
{ 'Both': 3 }
}, {
name: 'templateAsset',
type: 'asset',
assetType: 'template'
array: true

Becomes the following in the inspector which is so much cleaner!

Arrays of JSON objects

Read more in the documentation and let us hear your feedback in the forums!

Introducing the new Code Editor

· One min read

New Code Editor

Today we're excited to unveil the new code editor for all our PlayCanvas users. We've been taking your feedback since we launched Scripts 2.0 last year and we've updated the code editor to make working on scripts in PlayCanvas much easier.

Some of the new features introduced by the new editor:

File view & tabs

The most obvious difference is now we let you browse all your text files in the code editor and open multiple files in the same window. No more hunting through browser tabs to find that file you were editing.

Goto Anything

Editor Goto File

Goto Anything (Ctrl/Cmd+P) is the power users dream option. Jump to any text file in your project with a few keystrokes.

Enhanced keyboard shortcuts

We've had a complete overhaul of the keyboard shortcuts. All your standard text editor shortcuts are there. Including using multiple cursors and expanding selections.

Better find & replace

Editor Find

We've beefed up the find and replace with a new interface and easy to use extras like case-sensitive and regular expressions.

We hope you enjoy using the new code editor as much as we do!

PlayCanvas Scripts 2.0

· 2 min read

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.

Try it Now

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:


Autocomplete and Realtime API Reference added to Code Editor

· One min read

PlayCanvas scripters rejoice! The Code Editor has just received a major upgrade. We have just deployed two new related features:

  1. Autocompletion
  2. Realtime API reference documentation

So what does this look like? An animated GIF is worth 1000 words, so behold:


As you can see, the Code Editor now displays the properties of a variable and can list them in a popup for quick selection. But even cooler is that the API reference description for the selected property is shown to the right of this. So what does this all mean? Fewer visits to the full API Reference Manual on the developer site, that's what? So nice.

Let us know what you think. Anything else you would like us to add?

That's all for now folks. Over and out.