The Apple Watch Project
Hi, my name is Christian and I’m Software and Application Developer at C4Real. Together with my college Martin we lately started developing in PlayCanvas. As this was our first project using the engine and to give some feedback, we would like to share our experience with the community and the developers.
Martin and I both come from a C# background with experience in Unity and only started developing for the web about half a year ago.
To create a showcase for the capability of WebGL and our studio, we compared different WebGL engines and finally choose for PlayCanvas. The choice was based mainly on the fact that in contrary to most other engines PlayCanvas offered PBR workflow support which gives projects made in this engine a major advantage in quality.
Prior to this project our studio had tried out different engines already and we were working with another solution for quite a while before we swapped to PlayCanvas eventually.
The first obstacle to overcome was the different setup of scripts in PlayCanvas:
Coming from a ‘regular’ JavaScript based engine without any sort of visual editor involved, it felt unfamiliar to have to conform with the predefined skeleton that every script is build up on. What I mean is the auto generated code that comes with every script generated in the PlayCanvas editor:
pc.script.create('myScript', function (app) { // Creates a new MyScript instance var MyScript = function (entity) { this.entity = entity; };This felt (and sometimes still feels), very limiting at first and it took a whole while until one was used to the structure that this code generates:MyScript.prototype = { // Called once after all resources are loaded and before the first update initialize: function () { }, // Called every frame, dt is time in seconds since last update update: function (dt) { } }; return MyScript;
});
Every entity automatically generates a prototype and all functions within it are bound to this prototype object. This predefines the scope of these functions and limits it to the boundaries of this entity. A “new concept” when coming from an environment that expects nothing more than you dumping your JavaScript code into a file called “whatever”.js and your functions will be reachable from almost everywhere.
A more object oriented concept, written in a function oriented language, therefore somewhat uncommon within web development.
After development got up to speed both Martin and I found that PlayCanvas is easy to use and can deliver great quality, however finding the right piece of documentation or information regarding the engines classes and functions can be very difficult at times.
In addition to the above mentioned issue, we also sometimes missed features and had to find workarounds for the missing functions.
For example, while building reusable scripts for use in the editor, one of the most missed features was the ability to build array script attributes. While there are numerous script attribute types, it is (according to our knowledge and research) not yet possible to define array attributes. At least not in the online editor.
This would greatly increase the reusability value for a lot of scripts and it would be a highly appreciated feature.
Next to array attributes, a vector 2 attribute and eventually a vector 4 attribute would also be great.
While there is a ‘vector’ attribute already it does not offer the option to define the vector type. For GUI and OnScreen operations one will want to use a vector 2 value, while one can still use the ‘vector’ attribute and just ignore the Z value for example, this won’t work if a script would need a vector 4 value. Additionally it must be communicated that the last field has to be left empty, if using the ‘vector’ attribute as a vector 2 attribute, what can cause problems and errors, therefore a vector 2 attribute with only two input fields would help.
Yet we found two other features to be missing with attributes: One would be a hint text and label a label attribute, to add additional information that would be displayed on mouse over in the editor, or that could be used to name and separate groups. The second would be the ability to dynamically create, or hide and show attributes: At the moment it is only possible to create a fixed set of input fields per script, but sometimes it can be needed to add more fields according to input made into another field. For example if there was a boolean attribute saying: “Show advanced settings” and in the script one could check if it is true or false and accordingly the script could add or remove more input fields.
This would also be useful for creating instances of certain objects - another example: If there was a gui script creating all buttons on screen, and the user could specify how many buttons he wants to be created, it would be very useful to be able to create input fields for the settings of each button dynamically …
We used the online script editor while developing this project and while especially I was not convinced at first, in retrospective we both agree that it is a very useful feature of the engine and makes editing a lot easier, especially for quick changes.
While the online editor has a lot of advantages, it also has downsides:
Both Martin and I missed a “Find and replace” function terribly with the editor, if one decides to (for example) rename a variable in a script, each instance has to be found and replaced by hand.
Another useful feature we missed is the ability to duplicate an entire line with a shortcut like Ctrl+D.
As a final word to the editor, while it is a nice to have feature, the auto-completion should have an option to be adjusted or to be turned of all together. What I mean is that every-time one types a ", ’ or any parentheses, the editor will automatically add a second one. This is absolutely fine while code is written in a straight order, however when editing something like:
this.myFunction(parameter)to
this.myFunction("parameter")the auto-completion feature will be somewhat annoying as it will do the following:
this.myFunction("**"**parameter)the user will then delete the extra quotation mark just to get the same problem when setting the final quotation mark to close his string
this.myFunction("parameter"**"**)Maybe the auto-completion algorithm could just check if there is a character anywhere to the right of the edit-marker in the same line before applying the auto-completion.
It used to be a nice feature, that one was just able to paste a http link into the script-name field and the regarding script was referenced and downloaded automatically…
Especially since I’m using jQuerry a lot, it is a feature I miss since the latest update of the Editor.
Apart from this, we only experienced few problems with PlayCanvas, overall we are pretty happy with the engine and we are sure to continue developing in it.
A project link will be added as soon as we are ready to publish our product, until now here are some screenshots: