Skip to main content

51 posts tagged with "editor"

View All Tags

Introducing ESM Scripts in PlayCanvas

· 3 min read
Mark Lundin
Software Engineer

We’re excited to announce a major step forward for PlayCanvas: ESM Scripts are now supported — and officially the recommended way to write scripts in your PlayCanvas projects.

Back in 2016, we introduced what we now call Classic Scripts. At the time, this represented the state of the art in JavaScript. But things have evolved rapidly since then, and developers today expect modern tooling, clearer patterns, and better integration with the broader JavaScript ecosystem.

If you’ve ever struggled with managing classic scripts, wondered why your auto-complete didn’t work, or wished you could reuse code across projects more easily — this is for you.

ESM (ECMAScript Modules) brings modern JavaScript development to the heart of PlayCanvas. It’s faster to get started, easier to scale your project, and way more fun to work with. No more hidden globals. No more messy script loading order. Just well-structured, maintainable, and modular code — exactly how modern web development should be.


Why use ESM Scripts?

ESM Scripts offer major improvements across the board:

💡 Modern JavaScript — use import, export class based module syntax
🧠 Smarter Editor — better auto-complete and inline docs
🧱 Modular Codebase — structure large projects cleanly with reusable modules
⚙️ No Global Scope Issues — each script has its own context
📦 Import Maps — define aliases and pull in libraries from CDNs
🚀 Optimized for Production — static imports enable bundling and future support for tree-shaking

What it looks like

Instead of attaching scripts to an entity and hoping things load in the right order, you now write self-contained, class-based modules like this:

import { Script } from 'playcanvas';

export class Rotator extends Script {
static scriptName = 'rotator';

/**
* @attribute
* @range [0, 10]
*/
speed = 5;

update(dt) {
this.entity.rotateLocal(0, this.speed * dt, 0);
}
}

The Editor picks up your scriptName, exposes your attributes automatically, and everything behaves as expected — no magic, no legacy syntax.


Real benefits for real projects

We didn’t just add ESM support because it was shiny. We added it because it solves real problems PlayCanvas developers have told us about for years.

  • You get stronger editor feedback while writing code.
  • You can reuse logic cleanly across multiple scripts.
  • You can share modules between projects or publish them as libraries.
  • You’ll write fewer bugs — and spend less time wrestling with script order or context issues.

Plus, by adopting a standard that the rest of the JS world already embraces, it’s easier than ever to onboard new developers and bring in existing tools and libraries.


Seamless integration without disruption

Don’t worry — classic .js scripts aren’t going anywhere. If you have an existing project using them, everything still works. You can even mix classic and ESM scripts in the same project.

But going forward, ESM Scripts are the best choice for all new projects — and we think once you try them, you won’t want to go back.


Try It Today

You can start using ESM Scripts right now — just create a script with a .mjs extension and enjoy everything modern JavaScript has to offer.

Check out the user manual for examples, or drop into the PlayCanvas Forum to share your thoughts.

We can’t wait to see what you build.

Announcing the New PlayCanvas Asset Store

· 4 min read

The PlayCanvas Asset Store is the first place that users tend to go to find content for their projects. This is especially true for new users who want to get started as quickly as possible. Up until now, the Store has not been particularly easy to use and the content has not changed in quite a long time. In short, a complete overhaul and refresh has been long overdue. So today, we are incredibly excited to announce a major upgrade for the PlayCanvas Asset Store!

First up, check out a little example of building a city scene using content taken from the Asset Store. A skybox, a pack of 3D city block meshes and a camera control script are imported and the city is built via drag and drop. And not one single line of code is needed!

Now, let's examine some of the key highlights that make the new Asset Store so special.

glTF 2.0 Import Arrives in the PlayCanvas Editor

· 4 min read

We are excited to announce a major update for the PlayCanvas Editor: glTF 2.0 import. This new feature allows users to easily import and use 3D models created in other applications such as Blender and SketchUp, as well as from digital asset stores like Sketchfab, directly into the PlayCanvas Editor.

Model by Loïc Norgeot and mosquito scan by Geoffrey Marchal for Sketchfab licensed under CC BY 4.0
Author: Sketchfab License: CC-BY-4.0 Source: Mosquito in Amber

Upcoming UI changes to Dashboard and Editor - PlayCanvas Bytes

· One min read
Steven Yau
Partner Relations Manager

PlayCanvas Bytes is where we talk about upcoming work with PlayCanvas and related topics.

We are trialing a new format to better communicate some of the work that is going on with the PlayCanvas team.

Today we have our UX designer, Jasper who will take us through some exciting plans to the new project dashboard and Editor View!

Editor API Beta Release

· 2 min read
Steven Yau
Partner Relations Manager

Over the past few months, we have been developing an Editor API that allows users to automate tedious tasks and enhance the base functionality.

We are excited to announce the beta release of the API today and are eager to see how the PlayCanvas community will leverage it to enhance their workflows!

Anim Layer Masks and Blending

· 4 min read
Elliott Thompson
Software Engineer


RUN DEMO

Today, we are releasing the latest anim component feature: the masking and blending of anim layers.

This is a versatile feature that has been hotly requested by PlayCanvas developers that wish to get even more creative with their animations. We’re excited to be able to share how it works in this blog.