TEMPLATE: ES6 | Version Control | NPM | PlayCanvas

Showcase
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