Script Soup

Games are not movies. Movies are linear with no interaction. Games may have a linear story, though often that is not the case, but they have interaction. Interaction means that the application will behave differently based on what the user is doing. The best example of this would be the user clicking on a button. The Animate movie has no idea when the user is going to click on the button. Likewise, if there is more than one button, the animate app is going to need to know what to do based on what button is pressed. To deal with this, we need a scripting language.

A scripting language is just a programming language that is was created specifically for handling domain specific activities. In other words, scripting languages tend to be specialized. Often, a simple scripting language grows over time and you will end up with what could be a full-blown programming language if only it didn’t require the application it was attached to. This is pretty much the case with JavaScript.

JavaScript is loosely based on the Java language, which itself is based on the C++ language which is an object-oriented version of the C language. In other words, understanding JavaScript will make it easier to learn real programming languages like Java or C++. One of the (many) downside to JavaScript is that it is slow because it was designed as an interpreted language. Explaining the difference between compiled, virtual machine, and interpreted languages is a bit beyond this book but essentially computers only know their specific machine language (which depends on the processor being used). Compiled languages, such as C++, convert their source code into machine language. Virtual machine languages, such as Java, compile into an intermittent machine language which then gets converted into the machine language of whichever machine is running the code. Interpreted languages convert the script into machine language as it is being run.

The scripting language itself is not enough for Animate, it also has a library of functions that are used to actually do the work. Originally Flash used a JavaScript variant called ActionScript which was JavaScript but with proper types and classes. The scripting language had a library of classes for manipulating movie clips and other aspects of the animation. When HTML5 started appearing, several Flash-like libraries started appearing for JavaScript. One of the more popular ones was Create.js. Adobe decided to migrate to Create.js instead of writing their own JavaScript library so when you are using an HTML5 canvas in Animate, you are creating a Create.js JavaScript application.

Create.js is actually a collection of four different libraries. These libraries can be used individually, but tend to be grouped together. As Animate generates a lot of the code for you, the bulk of the code that will need to be written is game logic code with direct manipulation of the Create.js very rare and often only to adjust already existing objects.

Easel.js is the heart of Create.js. This is the stage that the animation occurs on. The library tracks sprites and movie clips and is able to take the scene graph that results from the position of these objects and is able to draw a frame on the HTML5 Canvas. The HTML5 canvas is a special API for drawing things in JavaScript but is only for 2D images. There is an extension to this canvas called WebGL which lets the canvas take advantage of accelerated 3D graphics. An experimental version of Stage.js using WebGL is available and is distinguished from Stage.js by being named Stage.gl. I may cover StageGL in a future book.

Tween.js handles the animation aspects of the program. As explained earlier, tweening is simply changing an aspect of an object over time so it is possible to use Tween.js for non-animation related aspects of a program.

Sound.js handles the sounds that a program makes. JavaScript sound handling is a mess so having a simple API for getting sounds to play is nice. The downside to this API is that the sounds need to be loaded before they can be played. This is the reason the final API in the Create.js suite exists.

Preload.js is an asset preloader. This simply means that you give it a list of assets that you want your program to use and it will load them in. The preloader generates events to let your program know when it has loaded assets so you can even create a fancy loading screen if you wish.

We will cover the Create.js API as we need to, with my follow-up book going into much greater detail. As games require interaction to be playable and interaction requires some code to handle it, we are going to have to at least learn the basics of JavaScript. Still, in many cases you can get away with a minimal amount of simple JavaScript if the game is not too involved and by the end of this book you will have a good grasp of what games will require the most code and can pick your projects accordingly.