CreateJS In 5 Minutes

CreateJS In 5 Minutes Cover

I bet you have probably never heard about the CreateJS library, if so, this post is for you.

What is CreateJS?

So… let me explain. CreateJS is a suit that consists of 4 JS libraries (can be run together or independently):

EaselJS – all you need for generating graphics and interact with HTML5 Canvas.
TweenJS – all you need for tweening things.
SoundJS – all you need for playing sound.
PreloadJS – all you need to preload your app assets.

So as you see, pretty much all you need to create a fancy game!

How can you use it?

Unfortunately, the library is written in ES5, so it means you can’t just import and use it in your project. There are some ideas for updating it to ES6 but for now, we can only use the old version.

I’ve created a starter project that lets you quickly check how the library works. Check it out here.

So clone the repository and execute three commands in the following order (make sure you have node & yarn):

yarn setup – this one will init a fresh repository for a new project
yarn install – this one will install dependencies
yarn start and boom! You should see the following page:

CreateJS Boilerplate's initial screen
CreateJS Boilerplate’s initial screen

Editing the code

Once it’s started, you can edit whatever you want for testing. For example, open the app.js file and try to change the text background color. All you need is to change the HEX color string at line 26. For example to #ff0000 :

25    const graphics = new Graphics()
26      .beginFill("#ff0000")
27      .drawRect(CONFIG.canvasWidth / 2, CONFIG.canvasHeight / 2, 380, 100);

Let’s see what happens:

CreateJS Boilerplate's initial screen step 2
CreateJS Boilerplate’s initial screen with red text background

Oops! The text is not really visible now. Try to change the third argument in the Text call on line 32 to #ffffff:

32 const welcomeText = new Text("CreateJS Boilerplate", "26px Courier", "#ffffff");

CreateJS Boilerplate's initial screen step 3
CreateJS Boilerplate’s initial screen with changed text and background colors

So that’s pretty much how the boilerplate works. Here is library documentation.

Bonus

The repository is prepared for Visual Studio Code, so there are basic settings and recommended extensions for linting and formatting code (using ESLint and Prettier). Configuration files are placed at the root of the project (.eslintrc.js and prettier.config.js).

If you want you can also use a vscode’s debugger. After starting the webpack-dev-server click at debugger icon:

Visual Studio Code debugger icon
Visual Studio Code’s debugger icon

and run the debugger:

Visual Studio Code run debugger
Run Visual Studio Code’s debugger

Conclusion

Even though it is not the newest and fresh library, you should give it a try!
Come back later for more materials about that. Good luck with coding :).