TEMPLATE: ES6 | Version Control | NPM | PlayCanvas

Showcase
51

I signed up to the forum just to say this:

Your work addresses every single reservation I had with playcanvas (which I find otherwise to be an amazing toolbox).

I hope your solution still works, will know more tonight.

Please keep it alive!

53

Do you get any errors in the Developer Console of the browser?

56

I’ve been following your great work since the times of Unity (3?) and your level serializer.
Here you are again, solving the same issues i encounter, yet again. :smiley:
Great job, works great and fully enables the npm ecosystem, which as a node and hybrid app developer i’ve been wanting to achieve for quite some time with PlayCanvas.

Thanks for your contributions!

57

Are you by any chance using the loading screen way of doing this?

I’m doing it with a separate file and I’m suspecting that may be my problem.

58

(I have deleted my previous posts because they were getting more confusing than useful)

I am using the PC script way of redirecting to localhost and I can’t get it to work.

browser.png1913×1123 126 KB

No error messages in console (I have commented out the console.log on update in example.js to reduce noise).

local.png962×1139 38.9 KB

The script I’m loading to redirect to localhost.

scripts_load_order.png520×1125 17.2 KB

The script load order, with local.js first.

script_request_details2.png1919×1131 113 KB

But still no request to localhost…

What am I doing wrong?

59

It seems you are using Scripts 2.0 where that workflow won’t work. The local query parameter is only used using the legacy script system.

60

Had the exact same issue. Solved it by using a browser plugin to redirect the script request to the local server (Redirector for firefox, i think Switcheroo redirector should work for chrome).

61

@vaios Makes total sense now.
Seeing as how recent this solution was I thought patching the loader was a workaround for this.

Is there any real disadvantage to using the old script method?
The ES6 stubs don’t look any more noisy than the Script2.0 stubs.

@FREEZX Thanks a ton, I’ll check it right out as soon as I get a spare minute :slight_smile:

Thanks everyone for the kind and helpful welcome, you’re awesome!

62

Sorry all, been away.

So local does work with scripts 2.0 if you use my thing to insert into the loading screen a thing that handles that.

1 Like
63

@whydoidoit I don’t have the loading screen method available, so I tried your script method (from exerpt.js, see the screenshots I attached), and I can’t get the redirect to the local server to work.

I have added a couple of console.log()s to your script, one at the top, to see if it gets parsed, one in getFileUrl() to see if it gets invoked at all.

It appears that pc.Asset.prototype.getFileUrl() is not called, or has already been called by the time the script gets to patch it.

Maybe that’s a side-effect of using Scripts 2.0?
Or am I missing something obvious?

64

@whydoidoit I thought this could be of interest to folks who use your ES6 template. I wrote a simple wrapper that makes it possible to write scripts using the ES6 class syntax. I haven’t tested it with your template though. But it works with vanilla PlayCanvas.

1 Like
65

can confirm this works with scripts 2.0

1 Like
66

omg, thank you @whydoidoit.
Was struggling to get react/es6 infrastructure working with playcanvas. This should get me farther.

67

@whydoidoit. While I’m able to use ES6 and do DOM manipulation with this setup, it appears like I have no handle on any of playcanvas asset/models. In fact in the below example, it doesn’t even call initialize. Am i missing something ?

const Example = pc.createScript('example');


Example.prototype.initialize = function () {

  console.log('this was reached');

  //this is undefined
  console.log(pc.app)

};
68

You better to use this.app inside a script component, instead of pc.app.

69

even this.app is undefined :frowning:

70

First of first, thanks for your contribution! However, I think that I am reluctant to use your code because you give me too much things I don’t need.

Instead, using playcanvas is as simple as using three.js. We just need to replace the animation programme by using the playercanvas’s rendering loop and coding geometries using playcanvas’s scene graph management toolkits.

And I think integrating compiled codes with playcanvas is a choice but not necessary the best choice. The codes from playcanvas are just responding for canvas webgl rendering not dom rendering. We can use other tools to develop editor components which are responsible for data dom bidirectional binding.

Editor should be shipped with frontend codes.

1 Like
71

Without the ability to use loading screen you’re stuck with utility-scripts/exerpt.js which unfortunately doesn’t work - I think it’s just ran too late to have an effect.

In order to make Hot Module Replacement work in that case you have two options:

  1. The hard way
  • Clone playcanvas/engine repo.
  • Modify src/asset/asset.js file applying changes similar to the ones from utility-scripts/exerpt.js.
  • Run npm serve.
  • Add use_local_engine=http://localhost:51000/playcanvas-latest.js param to launch.playcanvas.com url and change protocol from https to http
  • Unfortunately webpack-dev-server has a bug which makes adding publicPath: "http://localhost:8081" or port and host not work.
    This means we need to fork webpack-dev-server, roll it back to version 2.7.1 and apply this patch.
  • Install our fork of webpack-dev-server - we can then either publish to our local npm registry, install from disk or install from github.
  • Add publicPath: "http://localhost:8081" to devServer configuration from webpack.development.config.js
  • Add some code to src/main.js
    if (module.hot)
  module.hot.accept()
  • http://launch.playcanvas.com/{projectId}?debug=true&use_local_engine=http://localhost:51000/playcanvas-latest.js&local=http://localhost:8081
  1. The easy way

I also made my own fork based on CoffeeScript 2 with updated readme and all of the things that weren’t neccessary removed.

1 Like
72

I’ve added two more Redirector rules in order to achieve:

  1. Clicking Launch button from the Editor redirecting to proper URL for local work
  2. Serving image files (png|jpeg|jpg) from local server if their path starts with /img - allows for creating GUIs in any web framework and assets are downloaded localhost instead of playcanvas.com

If you want to use them as well you can save the json below as a .json file and use import functionality from Redirector

{
    "createdBy": "Redirector v3.2",
    "createdAt": "2019-02-02T19:00:00.250Z",
    "redirects": [
        {
            "description": "playcanvas launch to local launch",
            "exampleUrl": "https://launch.playcanvas.com/687320?debug=true",
            "exampleResult": "http://launch.playcanvas.com/687320?local=http://localhost:8081&debug=true",
            "error": null,
            "includePattern": "https://launch.playcanvas.com/(\\d+)\\??(.*)$",
            "excludePattern": "",
            "patternDesc": "",
            "redirectUrl": "http://launch.playcanvas.com/$1?local=http://localhost:8081&$2",
            "patternType": "R",
            "processMatches": "noProcessing",
            "disabled": false,
            "appliesTo": [
                "main_frame"
            ]
        },
        {
            "description": "playcanvas local server for scripts",
            "exampleUrl": "http://launch.playcanvas.com/api/assets/files/main.build.js?id=16617298&branchId=00465776-6b83-4f4c-af75-01c351769fa8",
            "exampleResult": "http://localhost:8081/main.build.js?id=16617298&branchId=00465776-6b83-4f4c-af75-01c351769fa8",
            "error": null,
            "includePattern": "launch.playcanvas.com\\/api\\/assets\\/files\\/(.+\\.js)\\?(.*)",
            "excludePattern": "",
            "patternDesc": "",
            "redirectUrl": "http://localhost:8081/$1?$2",
            "patternType": "R",
            "processMatches": "noProcessing",
            "disabled": false,
            "appliesTo": [
                "script",
                "xmlhttprequest"
            ]
        },
        {
            "description": "playcanvas hot reloading from localhost",
            "exampleUrl": "http://launch.playcanvas.com/191247d10e518c420782.hot-update.json",
            "exampleResult": "http://localhost:8081/191247d10e518c420782.hot-update.json",
            "error": null,
            "includePattern": "launch.playcanvas.com\\/(.*)\\.hot-update\\.(js|json)$",
            "excludePattern": "",
            "patternDesc": "",
            "redirectUrl": "http://localhost:8081/$1.hot-update.$2",
            "patternType": "R",
            "processMatches": "noProcessing",
            "disabled": false,
            "appliesTo": [
                "script",
                "xmlhttprequest"
            ]
        },
        {
            "description": "playcanvas serving images from localhost",
            "exampleUrl": "http://launch.playcanvas.com/img/lightning.14b1c585.png",
            "exampleResult": "http://localhost:8081/img/lightning.14b1c585.png",
            "error": null,
            "includePattern": "launch.playcanvas.com\\/(img\\/[^\\.]+\\..[\\w\\d]+\\.(png|jpeg|jpg)$)",
            "excludePattern": "",
            "patternDesc": "",
            "redirectUrl": "http://localhost:8081/$1",
            "patternType": "R",
            "processMatches": "noProcessing",
            "disabled": false,
            "appliesTo": [
                "image"
            ]
        }
    ]
}
2 Likes
73

Hey folks! As it took me a bit of time to get this running and since it seems that @whydoidoit isn’t updating it anymore, I’ve made a fork:

And thanks a lot for the Redirector posts, @redka! I’ve added your “easy way” rules to the readme there.

2 Likes