[SOLVED] Minify after download

[LeXXik]

I am trying to minify the JS code after exporting uncompressed project.

First question, can I rely on the asset folders names? E.g. my build tool replaces a JS file in an asset folder named 123456. Can that number be changed by Playcanvas engine at some point (considering I am not editing it in the Playcanvas code editor)?

The reason is I would like to stub all third party API’s in the Playcanvas, so I can launch the game in the editor and it just makes life easier. Then, after I am happy with the code, I download the sources, my build tool replaces the needed files with the proper ones that call real API’s, minify and archive it for release.

And the second question. How would I go with the minification? Should I scan all asset folders for js files, concatenate-minify and add to index.html?

[Leonidas]

Ηι @LeXXik,

Asset folder names will stay the same as long as you don’t add/remove assets. So each new build will indeed reference the same assets ids (folders). Just be careful since it’s easy to break this: e.g. forking your project will create copy the assets and create new asset ids.

Regarding minification, now that’s a bit harder, I am not sure just attaching your compressed .js to index.html would do the trick with the default Playcanvas loader (unless you are dev directly with the engine).

A good way to get started is to take a look at a published build that has concatenation enabled. You will see that Playcanvas creates a single script file called __game-scripts.js

That file is then referenced inside config.json under every script asset, as the filename that contains the script code:

So you can do something similar, create your own compressed file and instead of attaching it in the index.html, go in config.json and replace all *.js instances with the new filename (using some node.js / parser).

Hope I’ve been of help, you are attempting a complex pipeline, good luck!

[LeXXik]

Ok, it was a roller coaster! Well, first of all, I think it would take me much less time, if I had any prior experience in tooling and building code. I’ve spent on this more time than I was originally anticipating, but I’ve learned a lot in the way, so I don’t mind.

So, first, my idea was to simply insert custom comment tags into the code, and allow Playcanvas to concatenate the script for me. I would then use those comments as anchors to substitute blocks of code in the final file. It was all going well, until I found that Playcanvas not only concatenates, but also minifies the build (not mentioned in the UI).

Thank you, @Leonidas for pointing in the right direction. I ended going that way. So, now my build system takes in the raw sources from Playcanvas, updates dependencies e.g. files related to google or facebook and init scripts related to their environments, concatenates game scripts into single file and updates the config.json to refer to the new file for required assets, minifies it, zips and boom - ready to upload to the platform I’m a happy panda.

[aravinda.b-work1]

Hello @LeXXik. I am trying to do something similar to this. Can you please elaborate more on what you did? If you can provide any links to references. or sample code that will be really helpful to me.

Thank you

[LeXXik]

Hi, @aravinda.b-work1

I had a need, where some of my in-game script files would contain a different logic, which would depend on the platform the game was hosted on. For example, my cloud.js has a logic that fetches the friend list of a player. If the game is hosted on Facebook, I use its API to fetch the list; if it is on Google, I use a different set of API to get the list; and so on. All of the versions of my cloud.js listen for the same events, and fire the same events on some action completion, but the logic to complete these actions differs.

For example, within my game at some point, I simply fire an event, say get top 5 scores of my friends, then one of my views expects to receive an array of friends by listening for cloud fetched friends event and act on it. Meanwhile, my cloud.js uses its logic to fetch the list, normalize it for the rest of my game scripts to consume and fires cloud fetched friends event.

Initially. I had a single cloud.js file with lots of if statements, where I would change the API calls and handlers, based on the current platform. However, it quickly became hard to maintain. So, my solution was to download the non concatenated build from Playcanvas, and replace the correct version of the cloud.js file via the local task tool, when it prepares the build for one platform or another.

I use the same approach to replace the root loading.js or index.html, since some platforms require own scripts to load first, before anything else is loaded. Or some additional functionality initialization is required, during the game load, etc.

After I replace the individual files, I concatenate all game related scripts (i.e. the ones you create via Editor or through .createScript() method). To do this, I traverse though the files/assets folder and concatenate all .js files, except the Ammo physics files (I found it doesn’t want to work, if I also include it to the final merged file), into a single game file, say my-game-scripts.js. Then, my task tool replaces the references of all the related assets in the config.json to point to this newly created concatenated file. The engine hash checks are simple, so I just kept their values as they are.

In the end, I have different versions of the game, where the core game files are same, but the initialization differs, based on the target platform the build was prepared for.