Hi. I prepared a small solution for using TypeScript in Playcanvas projects.
Github repo: GitHub - querielo/playcanvas-typescript-template
Playcanvas Editor project: PlayCanvas | HTML5 Game Engine
Note: you don’t have to fork the project. Just create a new one or follow the instruction: GitHub - querielo/playcanvas-typescript-template
This template allows for the use of TypeScript in ScriptComponents and provides a one-way pipeline from Git to the Playcanvas Editor. With this template, you can overcome the limitations of the Playcanvas Editor, including the lack of offline coding, limited use of your preferred IDE, and limited support for TypeScript. Additionally, the template provides a MR pipeline, which means that you can have code reviews, avoid unexpected code overwriting, and prevent conflicts. Furthermore, it provides modules or require/import/export statements, so you can use the NPM ecosystem or ScriptComponents written by the Playcanvas team. Finally, it also provides unit tests and linting.
Hope, it’ll improve your Playcanvas Experience.
TODO: add decorators for createScript, attributes.add.
Here is an example with TypeScript:
class MyAwesomeScript extends pc.ScriptType {
public entityAttribute?: pc.Entity;
public numberAttribute: number;
public booleanAttribute: boolean;
public stringAttribute: string:
public initialize() {}
public postInitialize(): void {}
public update(dt: number) {}
public postUpdate(): void {}
public swap(): void {}
}
pc.registerScript(MyAwesomeScript, "MyAwesomeScript");
// declare script attributes (Must be after pc.registerScript())
MyAwesomeScript.attributes.add("entityAttribute", {type: "entity" });
MyAwesomeScript.attributes.add("stringAttribute", {type: "string", default: "" });
MyAwesomeScript.attributes.add("numberAttribute", {type: "number", default: 0 });
MyAwesomeScript.attributes.add("booleanAttribute", {type: "boolean", default: false });