DEV Community

loading...
Cover image for What is CreateJS?

What is CreateJS?

szymkab profile image Szymon Kabelis ・2 min read

This is also available on the frontendgamedev.com blog

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

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);
Enter fullscreen mode Exit fullscreen mode

Let’s see what happens:

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");
Enter fullscreen mode Exit fullscreen mode

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

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

Discussion (0)

pic
Editor guide