Uranus Editor Extension - most methods not working

Hello! I’m posting this here for public visibility.

Shout out to @Leonidas and the Pirron One / PIC / Playing in Canvas team! Phenomenal work, I am loving the ability to do editor scripting.

I integrated this repo for executing code live in editor: GitHub - leonidaspir/uranus-editor-scripting. Instructions for integration are on the main page. I used the “PIC Chrome extension” for integration and verified that Uranus does show up in the editor as expected.

However, only the “editorInitialize” function works. “editorScriptPanelRender” and “editorAttrChange” did not work for me. Here is a video demo:

Did I miss something? How can I get these other functions to work? Thanks in advance!

Charlie

Hi @Charlie_Van_Norman ,

Thank you for your kind words.

The Uranus Editor Scripting SDK is possible thanks to an unofficial API exposed in the PlayCanvas editor. Hence it may be the case the PlayCanvas editor API changed overnight and we need to update it. If that’s the case and it’s not a user error, make sure to submit an issue about it in our Uranus repo so we investigate at some point.

I can’t fully see the code in your video, but I think that’s not a bug there only a missing step that we need to document better on our README. Can you try reloading your PlayCanvas editor and select the entity that holds your editor script only after the Uranus SDK boots (you will know since you will see a list of messages printed out).

image

Sometimes there is a conflict in the order editor scripts execute in relation to the editor UI and the editorScriptPanelRender and editorAttrChange methods miss their handlers. A full editor refresh, although inconvenient, usually fixes that.

Hope that fixes it for you.

@Leonidas - it works! Thank you.

For any thread observers looking for the Hello World of Uranus:

  1. Put this script on an object in your scene
var Test = pc.createScript('test');
Test.attributes.add('movementSpeed', {
    type: 'number',
    default: 0.025
});


Test.attributes.add("inEditor", {
  type: "boolean",
  default: true,
  title: "In Editor",
});

Test.prototype.editorInitialize = function () {
   console.log('%c editor init','color: #bada55');
};

Test.prototype.editorAttrChange = function (property, value) {
   if( property === 'movementSpeed' ){
       console.log('%c num changed: '+value, 'color:red');
       // the speed attribute got updated
   }
}; 
  1. Install the Playing in Canvas extension: PlayingInCanvas - Chrome Web Store

  2. Enable the Uranus Editor in the extension: Overview — Playing In Canvas 1.0.0 documentation (NOTE: the circle turns green when the extension is “enabled”. The default off color is black.)

  3. Test the functionality in editor.

  • reload the editor once
  • click your object
  • change the value, and notice the console log output in Chrome console

Charlie

2 Likes

Additional tutorial (sorry this should really be in the Readme on the Github lol!)
To create a primitive using Uranus

NOTE: I’m using a jenky “on value changed” to init the call. If you have better ways plz advise ;-]
NOTE: I’m reproducing functionality from playcanvas editor.js (unminified), not sure how to access these methods without reproducing them

var EditorUtils = pc.createScript('editorUtils');
EditorUtils.attributes.add('movementSpeed', {
    type: 'number',
    default: 0.025
});


EditorUtils.attributes.add("inEditor", {
  type: "boolean",
  default: true,
  title: "In Editor",
});

EditorUtils.prototype.editorInitialize = function () {
   console.log('%c editor init','color: #bada55');
};

EditorUtils.prototype.editorAttrChange = function (property, value) {
   if( property === 'movementSpeed' ){
       console.log('%c num changed: '+value, 'color:red');

        var data = this.createPrimitiveEntityData('box', {
                name: 'Box',
                parent: this.entity
            });
            editor.call('entities:new', data);
        console.log('created primitive entity: '+JSON.stringify(data));
       
   }
};

/* ********
 COPIED these "primitive funcs" from https://playcanvas.com/editor/scene/js/editor.js 
 NOTE: These should be accessible without reproducing them, but I can't figure it out?
 ******** */

 EditorUtils.prototype.createPrimitiveEntityData = function (type, additions) {
        var data = {
            components: {}
        };

        var component = 'render';
        data.components[component] = editor.call('components:getDefault', component);
        data.components[component].type = type;
        data.components.render.materialAssets = [null];

        this.applyAdditions(data, additions);

        return data;
    };

EditorUtils.prototype.applyAdditions = function (object, additions) {
        if (additions) {
            Object.keys(additions).forEach(function (name) {
                object[name] = additions[name];
            });
        }
    };

/* END COPY */

EditorUtils.prototype.initialize = function() {

};
// update code called every frame
EditorUtils.prototype.update = function(dt) {

};
1 Like

Nice, many thanks for sharing!

Good idea for adding some tutorials on the repository, noting this down.