Typescript template for PlayCanvas using Browserify and Gulp.js

Useful Resources
,
1

Hi, I created my own solution for using TypeScript with PlayCanvas. I am actively using it for ten months or so now, and decided to share.

Github repo: matgawin/playcanvas-typescript-template
Example: TestTypescript

It compiles and bundles all scripts using Browserify and gulp.js.
It uses playcanvas-sync to automatically synchronize with your project, but it also uses dotenv, so there is no need to copy any files anywhere, just copy your API key and project_id to .env.
Not only that, but it also uses decorators to simplify creating scripts. This solution was inspired by: Ciberusps - playcanvas-typescript-example.
I also created some quality of life scripts for automatic branch id checking, downloading builds, and starting local server with said build.

Just follow the steps in readme file.

In my own setup, I also use my own fork of playcanvas-sync that allows to skip branch check, so it works inside CI. I would recommend doing the same.

I hope it helps.

2 Likes
2 
@attribute({ type: 'entity' }) public someEntity?: pc.Entity;

why i can’t set any to this attribute?
when click and select an entity, nothing happened.

3

This is due an issue with the Editor that we will be fixing soon:

4

Nice decorators. What license does your project hold? Do the decorators written by you? Can I take them?

5

I added license file. Feel free to use what you need.

6

I load the tween.js in the editor, and i can use it

this.entity.tween(....)

but in typescript and vscode , i can’t call the tween function.
how to resovle it?

7

If you added tween.js to playcanvas project, then typescript has no information about type definitions.
You can install this library through npm: playcanvas-tween, or add your own definition.
Alternatively, you can just add this comment before lines where you use tween:

//@ts-expect-error Using external library
8

tween is not declared in pc.Entity. You have to do it yourself.

You can try to add something like this

import { Tween } from "tween.js"
interface TweenedEntity extends pc.Entity {
    tween: Tween
}

class YourScriptComponent extends pc.ScriptType {
    public entity: TweenedEntity

   // PLACE YOUR CODE HERE
}

And run the next command in your repo npm i @tweenjs/tween.js @types/tweenjs (install types and optionally tween.js).

NOTE: I have not tested it.

9

thanks.
maybe i should change the lib to typescript…

10

I experimented with the decorators. The main issue with them is they bring into a bundle another instance
of Playcanvas.

Tried to fix it in my template.

1 Like
11

I use Playcanvas in all my scripts this way, and then get rid of it during build step.
Here: /gulp.js#L28

If you have different build process, then it will add pc to your bundle.

1 Like
12

When I use the command “pnpm run download”, I receive an error message: “error: ‘scenes: should not be empty’”.

push to playcanvas and run it on editor is fine.

13

In tools/download.js you have scenes array which by default is empty. You have to add to it ids of scenes that you want to include in the build. First id will be default scene.

You can get the id of current scene from the url of open project. For example:
https://playcanvas.com/editor/scene/1272532 - the last part is the id of currently open scene.

And here is how to get list of the scenes with Rest API:
https://developer.playcanvas.com/en/user-manual/api/scene-list/