TEMPLATE: Typescript | Version Control | NPM | PlayCanvas


#1

Today, I published my first package to NPM:

It allows the use of TypeScript with PlayCanvas. It is a total rip-off of @whydoidoit’s babel-playcanvas-template. If you don’t care about TypeScript but would still like to get ES6 and NPM working on all browsers with PlayCanvas as well as develop locally and still integrate with the Editor, you should definitely check out his project.

My project comes with a full set of documented TypeScript declaration files allowing your IDE of choice to work its magic. Here is a screen cap of me coding in Visual Studio Code:

I’ve worked hard to create good quality declaration files but I have no doubt that I might have missed a few things here and there. Your help in finding bugs will be appreciated. So give it a try and tell me what your think.


[WIP] Writing playcanvas.d.ts for the community
#2

Hi, @neoflash, do you write a playcanvas.d.ts ?


#3

Yeah, I just finished writing TypeScript declaration files for the entire engine. Instead of writing one gigantic monolithic file, I wrote a bunch of files and actually organized them to mimic the engine’s source code file and folder architecture. Take a look in the Types folder in my project.


#4

Wow, great ! It seems that I dont neet to hand writing another one. :smile:


#5

I think it would be nice if you separate types to another repository. :laughing:

I notice createScript can receive pc.Application as parameter, how can you pass app into createScript ?

@createScript(pc.app)
class xxx ...

Maybe like this ?

I ask this because I am not a editor user, I am an engine user. I create playcanvas app by code. And I need to create script after app.start :smile:


#6

Yes, I agree. I will do that.[quote=“scarlex, post:5, topic:5635”]
I notice createScript can receive pc.Application as parameter, how can you pass app into createScript ?

@createScript(pc.app)
class xxx …

Maybe like this ?
[/quote]

Exactly like this.


#7

Done. npm i @types/playcanvas


#8

Hey,

So I started using your template (thanks a lot btw I can’t live without types :grin:), but I had some trouble.

I uploaded and placed exerpt.js before main.js, then I opened the launch window and changed the protocol to http, added ?local=http://localhost:8081 to end of the url, and typed npm start. Every time I saved, the terminal showed compilation successful, but the code didn’t update in the launch window. I checked localhost:8081, but the code seemed to be updating fine there. Can you tell me what I’m doing wrong?

Thanks!


#9

Humm… @whydoidoit, any idea?


#10

the page should reload on compilation successful, does this happen?


#11

The page doesn’t refresh automatically, and even when I refresh manually the code doesn’t update. I tried using the loading screen script and the exerpt.js script in my project, but neither seemed to do the trick. Here’s the output from my console if it helps:

log

Here’s a link to my project: https://playcanvas.com/editor/scene/583056


#12

im not seeing the loading screen script set in the settings.

Did you also get your bearer key / and asset id for main. js and add it to your config.json in vscode?


#13

Ah, apologies, I forgot to mention I don’t have an org account so I can’t modify the loading screen script. I used method 2, and placed exerpt.js before main.js in the script loading order.


#14

okay i see. I am not seeing main.build.js within your project:

Finally if you haven’t already done it, drag main.build.js and drop it in the PlayCanvas assets window.

When it’s imported click on it and in the properties window on the right, take it’s ID and put that in config.json as your assetId.

Now every time you run npm run build it will upload the result to PlayCanvas for you.

I suspect this may be part of the issue. If you are building and it shows your built code as main.build.js then all your code should be refreshed and retrieved from this file and added to your entities as scripts etc.


#15

Ok, I tried it. Now npm run build works (hooray!), and the code updates fine. However, when I type npm start and save a change, it looks like main.build.js updates locally, but not in the editor’s launch window. I think the hot reload is somehow not being called…


#16

if you type launch.playcanvas.com/projectid?local=http://localhost:8081

and your game loads and you can execute some X function you added in the last change, then you are connected to the correct build, and should be able to save a change. If it is wrong then your game will not load and your scripts will not be found( at the very least this is my experience every time ).

Also if you make big changes like adding script attributes or even adding scripts, you need to refresh your main.build.js in playcanvas editor to get the latest and also execute npm run start again.
Anything new you import in main.js in vscode also counts as having to rebuild all over again using npm run start.

Can you confirm this?

As an aside ; if you dont like npm, try yarn as it is much better in my op and you can just run yarn start or yarn build


#17

Unfortunately it does not seem to work, and I think this is because as a non-organization account I cannot access the loading screen scripts, so I think I’ll just have to stick with normal JS for now. Thanks anyway!


#18

So it turns out that by commenting out the following lines in playcanvas-webpack-plugin:

// if (options.skipUpload) {
//     console.log("Skipping Upload")
//     callback()
//     return
// }

and thereby forcing a re-upload of the code every time it’s saved, the hot refresh works :smile:


#19

Hi there!

I’m trying really hard to make it work, but being new to npm/webpack world it’s not going very well.

Basically I can’t figure out how should my webpack.config.js (or webpack.production.config.js) look like - I assume I must create it myself, as it’s not included in the package content, but no idea how to configure it. Could anyone guide me through this step?


#20

Hey Sabikku. That’s strange because the package does come with a webpack.config.js, webpack.development.config.js and webpack.production.config.js file. How did you install the package?