[SOLVED] Tutorial for writing a PlayCanvas Editor Extension

[Patrick_Munster]

I’ve seen that there are a couple of extension out there for the PlayCanvas Editor.
Some of them are free and some of them are payed extensions.
But where to get started when you want to write your own extension for the editor.
Is there a tutorial somewhere? @whydoidoit

[vaios]

Hi,

Various users have created extensions however we do not officially support extensions yet. Our API might change without notice. If you are fine with that maybe @Leonidas can point you to the right direction as he’s created a lot of them.

[Leonidas]

Hi @Patrick_Munster, indeed it is relatively easy to start extending the PlayCanvas editor. Even though there isn’t any documentation right now and as @vaios said the API is prone to change, you can get started now.

The PlayCanvas editor source code is not minified on purpose:
https://playcanvas.com/editor/scene/js/editor.js

You can open up the browser console and type in Javascript that will directly run in the context of the editor. Try this, a simple script that will return a list of all children entities to your Root element:

var itemRoot = editor.call("entities:root"); 

itemRoot.entity.children;

And this will give you access to the pc.Application instance running in the editor:

var pcApp = editor.call("viewport:app");

Here are a couple of useful threads to find more info:

Scripting the PlayCanvas Editor

Do you have any plans for allowing a user to write logic for the PlayCanvas designer? For example: Creating procedural levels that add entities directly in the Designer Extending its functionality e.g. creating a path tool for navigation (camera, entities etc.) Something like maxscript only you already have javascript and a scripting system in place. Thanks for the great work!

And some example scripts you can find here:

Setting an assets material using an editor script

Here is a simple script that given a material assetID and your desired slot, it will loop through all of your selected assets and update the mesh instance material. Indeed a handy thing to do since that batch action isn’t allowed when selecting more than one model assets. assetModelSetMaterial(15412718, 0); function assetModelSetMaterial(assetId, slot) { const type = editor.call("selector:type"); if (type !== "asset") { return false; } const items = editor.call("selector:items")…

[Leonidas]

This script will return the selected item (editor entity) and change its name:

var item = editor.call('entities:selectedFirst');

item.set('name', 'Camera Selected');

The following will return the position of the selected item:

var item = editor.call('entities:selectedFirst');

item.get('position');