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:

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:

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");

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 :).