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.
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
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
32 const welcomeText = new Text("CreateJS Boilerplate", "26px Courier", "#ffffff");
So that’s pretty much how the boilerplate works. Here is library documentation.
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:
and run the debugger:
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 :).