TEMPLATE: ES6 | Version Control | NPM | PlayCanvas

Showcase
21

Oh your url has two ? in it

You need the second to be an &

22

i may not be attaching the loading screen 2_0 script correctly.
Not sure if its even running, its currently just sitting in the project folder, and not in the scene. I had attached my test.js script to an entity so this explains why it was being loaded via pc.
Should putting its loading order before build.main.js be enough to load the changes?

23

Ok so thereā€™s a project setting for the loading screen. You need to set that to be your loading_screen.

And you definitely only want one ? in the url

24

I am on an Org account yes.
Ok i see the option is in settings. Now im getting a lot of HTTPS errors on the loading_Screen script refusing to connect to localhost:8081 over HTTP

=true&local=http://localhost:8081' was loaded over HTTPS, but requested an insecure script 'http://localhost:8081/main.build.js?id='. This request has been blocked; the content must be served over HTTPS.

25

Yes it needs to be HTTPS and you need to follow the instructions about allowing it from https (browser to the file, tell it to go to the site anyway - or make a proper localhost self signed cert).

26

Or I guess you can host playcanvas and it both on HTTP. Not sure if thatā€™s still supported on PC if you just change the url.

27

I was originally just running them both on http, and still getting a https error.

I now run npm run start https and still get a https error playcanvas-stable.dbg.js:29438 GET https://localhost:8081/main.build.js?id=9244058 net::ERR_CONNECTION_CLOSED

28

So what happens if you go to https://localhost:8081/main.build.js in your browser

29

You saw this right: https://github.com/whydoidoit/babel-playcanvas-template#https-serving

30

Your other choice is to rewrite the PLAYCANVAS url to start with http it will default to https when you press launch

31

Ok.

So running`` `npm run start``` again allows me to go to my launch window without any errors

http://launch.playcanvas.com/000000?debug=true&local=http://localhost:8081

and it all works. Changing some code in VSCode then has the app refreshing itself in the launch window. This is fantastic.

Thanks again Mike.

32

YAYYYYYY!!!

:innocent:
Go write some cool ES6

    let [{mike}] = await yqu.writingSomeCoolES6();
1 Like
33

Im going to take a look at learning some ES6 and take advantage of this fully.

34

Destructuring - so DAMN useful for readability - especially if you are reading from databases with complicated multi array responses (like the MySQL driver Iā€™m using). I hated how that code looked before lol.

But async/await will revolutionise how you think about asynchronous code - I just write loads now.

// A simple sequencing example with async
Game.prototype.initialize = async function() {
      do {
           showStartScreen();
           await Promise.delay(2000);
           await this.playFireWorks();
           await Promise.delay(1000):
           showLeaderboard();
           await Promise.delay(3000);
      } while(!this.playing)
}

This presumes youā€™ve installed Bluebird

npm install --save bluebird

Imported itā€™s advanced promises:

import Promise from 'bluebird'

1 Like
35

This is excellent. Is there any reason you are using MySQL and not NoSQL?

That is actually very useful. Installing now. What would for example,this.playFireWorks(); in ES6 look like?

36

Well Iā€™m using MySQL with innodb_memcached so lots of it is NoSQL. But yeah reporting mostly, and standard extracts. I fire all of it off to Elastic Search too lol. This isnā€™t in PC btw. This is day job stuff at the moment.

37

Well that whole pattern there is basically ā€œcoroutinesā€. Big thing in Unity. Very useful for sequencing and writing code that reads like a single flow, but which has things that wonā€™t happen for ages or until something responds.

But in that case I was showing await this.playFireWorks() because it too would just be async and doing something:

Game.prototype.playFireWorks = async function () {
   let fireworks = [], i
   for(i = 0; i < 10; i++) {
       fireworks.push(this.showFireWork(this.entity.getPosition(), RED))
   }
   await Promise.all(fireworks)
   fireworks = []
   for(i = 0; i < 20; i++) {
       fireworks.push(this.showFireWork(this.entity.getPosition(), WHITE))
   }
   await Promise.all(fireworks)
}

And again that assumes a firework piece of code that is async until the individual firework is done.

Notice how I fire them in parallel by pushing them into an array and then waiting for them all to finish with Promise.all.

38

I come from Unity Development so this stuff is quite familiar but wouldnā€™t say my web dev is as strong as I am still getting used to all of this.

So with this firework function, you are actually returning the promise once it is done within the individual this.showfirework(); function?

So your promise chain begins in initialize and works its way down to this.showFireworks() and is only complete after each function is done executing within the larger array? but initialize is just waiting a second and moving on?

So your iinitial promise is just time based, but the playFireworks is waiting on some function to complete before it can go on.

39

also - why is initialize an async function? do you have to label them as async because of the promises?

40

Yeah exactly, itā€™s basically waiting for the firework display to be done, and that happens because each firework promise ends up done.

Doing this:

    for(let i = 0; i < 10; i++) {
       await this.showFireWork(this.entity.getPosition(), RED);
    }

Would do each individual firework one by one. In my previous example pushing them into an array (which you can do in lots of shortcut ways) and then awaiting Promise.all allows them to go in parallel.