Skip to main content
icon-512

Game Developement with CreateJS and Creatine

CreateJS is a collection of 4 libraries: EaselJS, PreloadJS, SoundJS and TweenJS. EaselJS provides tools to work with the HTML5 canvas; PreloadJS helps you to load the application assets; SoundJS to work with all kind of sounds; and finally, TweenJS provides interpolation functions for easing effects. Together, they allow you to create graphical and interactive applications in an easy and fast manner.

The thing is, the CreateJS suite does not focus on game development, thus, it lacks of important structures and algorithms that helps you to develop games. creatine logo

Having this in mind, I’m developing Creatine, which the first version was published today. Creatine aims to provide all algorithms and structures present in games today and that are not implemented on the CreateJS suite.

Take a look at some examples above, use the following code as base:

 

Creating some Random Scenes

Let’s create some random scenes using Creatine. First you need to create the base objects:

Together with the base object, we create a new scene and add it to director at line 6, and registered 2 events at lines 8 and 9. The line 6 uses the function newScene(), let’s define it:

The createScene function create a new empty scene and add a background with a random color. Now, when the user click on the stage let’s change the scene. Put this on init:

And create the function onClick:

Done! Now check it out the result:

 Changing Scenes with Effects

To put some effect on the scene transition, just change the onClick function:

Resulting on:

Learn More

To see more examples, check it out the official repository: https://github.com/renatopp/creatine

To know more about creatine, take a look at the official page: http://guineashots.com/creatine/

Leave a Reply

Your email address will not be published. Required fields are marked *