[SOLVED] How to inherit from a class in another script/file

Help & Support
#1

I can inherit from another class but only if it’s in the same file which isn’t the best option. Is there any way to import a class from another file and inherit from it ? Or a better way to inherit from another class?

class Input extends pc.ScriptType
{
	testFunction()
	{
		console.log("testing works");
	}
}

class KeyboardInput extends Input {

	
	initialize() {
		console.log("Initializing Keyboard Input");
		this.testFunction();
    }

}

// register the class as a script
pc.registerScript(KeyboardInput,'keyboardInput');
#2

Hi and welcome to PlayCanvas!

The way you do it is fine, except you need to pc.registerScript() both classes, Input and KeyboardInput.

class Input extends pc.ScriptType { }
pc.registerScript(Input, 'input');

class KeyboardInput extends Input { }
pc.registerScript(KeyboardInput, 'keyboardInput');

Also make sure that both are added to a script component of some entity in the scene.

2 Likes
#3

Thank you for your answer (and also for the heads up), but I meant importing a class from another file. Right now, I need both classes to be in the same file which is what I’m trying to avoid.

#4

They can be in separate files, no need to keep them together. Just make sure that the base class loads first, before the inherited ones. You can adjust the scripts loading order in the Project Settings, or simply make the base script higher in the scene hierarchy, so it gets parsed first at runtime.

1 Like
#5

@LeXXik I’m also interested about inheritance and trying the example above is not working as expected.

File: PixiInput.js:

class PixiInput extends pc.ScriptType { 
    ....
}
pc.registerScript(PixiInput, 'pixiInput');

File: KeyboardInput .js:

class KeyboardInput extends PixiInput { 
    ....
}
pc.registerScript(KeyboardInput, 'keyboardInput');

Loading order:
image

Hierarchy:
image

Still, I have this error in the console:
image

And I verify and the PixiInput is initialize before any other classes in my project (when I don’t have inheritance):
image

So the question is now: How can we ensure that the reference is known when our classes are parsed with Playcanvas?

#6

From the screenshots you posted it should work correctly, unless on line 13 of keyboardInput.js you have something like

var input = new PixiInput();  // error

Keep in mind that your base class inherits pc.ScriptType. That is how you can access this.app or this.entity inside the scripts. You don’t use new keyword to instantiate them - the engine will do it for you. You would then access that instance the engine created via the entity’s script component. You know, the usual entity.script.pixiInput.

I made a little example on how to use the script inheritance:
https://playcanvas.com/project/790424/overview/script-inheritance

2 Likes
#7

Thank you very much for your help! By testing with your small demo, I found why it was not working on my side.

My problem was simple. :man_facepalming: I changed the loading order in the editor but when I downloaded and did the test locally, I forgot to update the __settings__.js file, which is the one that contains the script order.

image
image1106×69 3.59 KB

At least, this post may help further readers to avoid this problem. :wink:

2 Likes