How to attach scripts in the offline engine? Best way to manage entities using multiple files?

Help & Support
1

Hello, I’ve been trying the offline canvas without the editor and I’m wondering how to attach scripts and make entities on their respective files and instantiating them instead of having everything on one big file.
I’ve seen the engine examples but they also have everything in one file. How should I approach having a player.js, input.js, etc?
Sorry if I’m missing something obvious, I’m new to entity/component based programming

How would I create this entity from the main script/index.html? Or how do I code and attach a script component from another file, for example attaching bulletLogic.js to the entity bullet.

pc.script.create('player', function(context) {
    
    var Player = function(entity) {
        this.entity = entity;
    }

    Player.prototype = {
        initialize: function() {
            console.log('player');
        }
    }

    return Player;
})
2

You are referring to old system here. Which by default is off.

Check out User Manual on this: http://developer.playcanvas.com/en/user-manual/scripting/creating-new/
It has example how to define Script Type and how to attach it to the entity.

You can put them in same or different files as you wish. Just make sure you load engine first, then script files and then you start you application referencing scripts by names or their function handlers.

1 Like
3

Hello, that was very helpful
I was finally able to load scripts with this to pieces of code:

app.loader.load("src/rotate.js", "script", function(err, ScriptObject) {});

cube.addComponent("script");
        cube.script.create("rotate", {
        	name: "rotate",
        	attributes: [{
        		speed: 1,	
        	}],
        })

The only problem I’m dealing with now is that I can’t seem to use attributes.
I found this answer from some time ago but it’s not working anymore due to the way you attach scripts now:

I havent’t found anything about adding a name to a script in the documentation.
Adding name: “rotate” like in the previous code didn’t work.

This is my rotate script:

var Rotate = pc.createScript('rotate');

Rotate.attributes.add("speed", {type: "number", default: 10});
Rotate.name = "rotate";

Rotate.prototype.initialize = function() {
	console.log("initialize");
}

Rotate.prototype.update = function(dt) {
	this.entity.rotateLocal(0, this.speed * dt, 0);
	// this.entity.rotateLocal(0, 1, 0);
	// this.entity.translate(0.1, 0, 0);
}

Rotate.prototype.swap = function(old) {

}
2 Likes
4

I’ve made JSFiddle example, that defines script, and then uses attribute and slider to fiddle with attribute.
You can simply move script definition to another file, and load it later, just using script attribute, or using an asset.

https://jsfiddle.net/m1rha7wg/

Use debugging tools to identify your problems. Most of the time (90%+) it is own mistakes, with such attitude it will be easier to progress.

2 Likes
5

Amazing, thanks for your help. Sorry if it was something obvious, I’ll try to debug better next time. It’s finally working.

Merry Christmas!

1 Like
6

Can you refer me on where you found old scripting system code?

7

Here:
http://developer.playcanvas.com/en/user-manual/scripting/legacy/anatomy/

Here says that it is intended if you need an “offline workflow” so I thought that was the correct way:
http://developer.playcanvas.com/en/user-manual/scripting/legacy/

8

I see. Thank you for pointing it out, we can correct it to avoid confusion :slight_smile:

1 Like
9

While on the legacy docs - as this page is a high ranking search result, the following page has its images mislinked. Should add /legacy/ in the path.

https://developer.playcanvas.com/en/user-manual/scripting/legacy/script-priorities/