First of all, to give you an idea of what is possible to achieve without coding, here is a video of an HTML5 game I’ve made in a few days without using a single line of code:
When I did some research about how to make an HTML5 WebGL game, it became clear to me that there are two options one can choose from. You can either use a JavaScript library (like Three.JS and Phaser), or a native game engine (like Unity3D and Unreal) and at the end export to HTML5. However, when I delved into it a bit more, I noticed that none of the options were a perfect solution for me:
The JavaScript libraries perform really well on the web (smaller file size especially), but you need to have some serious JavaScript skills to even get started.
Engines like Unity3D and Unreal aren’t entirely optimized for the web which results in exported files being really large, which leads to long loading times. Also, the performance of WebGL exports from native engines is flawed compared to JavaScript libraries. Only in Firefox the performance is decent due to their implementation of the asm.js subset.
So what choices are left when you’re not a hardcore JS programmer but still want the minimal loading time and performance of the Javascript Libraries? Then Goo Create might be a solution for you.
How it works
I can imagine you might have some trouble comprehending how it can be possible to make an entire game without a single line of code in Goo Create. Well, Goo Create allows you to add so called ‘state machine components’ to objects in the game and through it, you can specify pretty advanced game behaviors and logic in an intuitive way.
What is a state machine
A state machine is a collection of all the states an object can be in. For instance, the state machine of a lamp contains two states: ‘on’ and ‘off’. When in the ‘on’ state the lamp emits light and when in the ‘off’ state it doesn’t. In Goo Create, you can add multiple state machines (behaviors) to the state machine component of an entity.
Actions
So each object has it’s own state machine and each state machine contains states, but how do you ‘program’ the different states? That is, how do you specify what should happen when a state machine is in a certain state? The answer is actions.
You can choose from over a hundred different actions like ‘move’, ‘hide’ and ‘set camera’ that can be added to each state. Actions are pre-written pieces of code. If you add an action to a state, you can change its parameters, which will, in turn, change the behavior of the action. For instance, if you add the ‘Rotate’ action, you can then set the direction and the speed of the rotation by adjusting the X, Y and Z values of the rotation.
The advantage of working like this instead of using code is that it is really easy to understand and that you don’t have to know anything about the engine itself. You don’t even need to know how to code. And you can even view all your states and actions using a really intuitive visual editor.
A disadvantage could be that the things you’re able to do in a state are limited by the actions that are available in Goo Create. In any case, it is still possible to use code instead of the state machine should you want to do really specific or advanced things.
An example
Let’s make a state machine that moves a sphere to the left and to the right by using the arrow keys. First I added a box and a sphere to the scene. I added a collider to both objects and a rigid body to the sphere which took me seven clicks in total. Then I added a state machine to the sphere with three states: ‘Not moving’, ‘Moving to left’ and ‘Moving to right’.
In the ‘Not moving’ state I don’t want to do anything special, but I still need to make it listen for user input to make a transition to another state when a key is pressed by the user. If the left arrow key is pressed, the state machine has to make a transition to the state ‘moving to left’, and if the right arrow key is pressed, it has to transition to ‘moving to right’. To do this, there is a ‘key down’ action that makes a transition to another state when a particular key is pressed down. I add this action two times; one for the left arrow key, and one for the right key.
In the ‘Moving to left’ state I added the ‘Apply force on rigid body’ action and set the ‘X force’ to ‘-5’, which results in the ball rolling to the left. For the ‘Moving to right’ state I did the same, only I set the ‘X force’ to ‘5’ instead of ‘-5’ which will make the ball roll to the right. Finally, I add a ‘Key up’ action to the two states that will trigger a transition when a key isn’t pressed anymore.
That’s it. Check out the result below and move the sphere by using the arrow keys.
Conclusion
If you’re having trouble with understanding how WebGL JavaScript libraries like Three.js and Phaser work, and you don’t want the long loading times that are the result exporting from engines like Unity3D and Unreal, I suggest you take a look at Goo Create which gives you the possibility of developing 3D HTML5 games without a single line of code.
Tim Noorlander