Skip to main content
createjs-logo

New Release of CreateJS (2014.12.12)

This week we finally had the new release of CreateJS, with a lot of changes, starting with the new site and new visual identity! All libraries (EaselJS, PreloadJS, TweenJS and SoundJS) have major updates that improve performance and the architecture.

Some important updates:

New class model with performance improvements:

In the old CreateJS, attributes were defined in the classes prototypes. By moving the definition from prototype to instance, EaselJS could decreases the canvas update time (by stage.update) in more than 2 times (a 100%-150% improvement).

The tick propagation was also improved with a small change: the tick event is reused for all display objects through the propagation of the tick, i.e., the tick event is instantiated only a single time. By avoiding redundant instantiation, the tick propagation has also an improvement of ~100%.

See:

New inheritance model

The inheritance model were updated following the modification of the class model. Now, if you want to inherit some class in CreateJS, you need to use  createjs.extend and createjs.promote.

The  createjs.extend function set up the prototype and constructor of a new class. The code is pretty simple:

 and this function must be called right after the creation of the new class constructor.

The  createjs.promote back up the superclass methods that were overridden. For example, if you create a FlexibleBitmap inheriting from Bitmap and override the method draw, createjs.promote back up the method bitmap draw by creating an alias Bitmap_draw inside the new FlexibleBitmap.

See:

All classes now implement properties for getters and setters

Some changes are pretty straightforward, e.g., Container.getNumChildren() is now replaced by Container.numChildren; but some names have been updated too, e.g.,  Ticker.getFPS() is now Ticker.framerate. Using properties instead of getters and setters is a good practice, nice to see that on CreateJS.

See:

Other updates

See https://github.com/CreateJS/EaselJS/blob/master/VERSIONS.txt for a full list of changes.

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/

CreateJS Logo

Getting Started with EaselJS

EaselJS is a Javascript library that allows the programmer to work on html canvas in an easy way. It means that EaselJS abstracts the low level API of the canvas element and provides classes, structures and functions to manipulate visual elements.

Before starting the examples and the talk about the Easel modules, let’s set up the html file which will be used as basis throughout this post. Create a file called easel.html and copy the following code:

 The Basics

EaselJS provides a whole architecture to control the objects that will be used at our games. The following list explains a bit of each one of the core components of this architecture.

  • EventDispatcher: the EventDispatcher class provides the structure for managing queues of events listeners and dispatching events. All components of EaselJS inherit from this class, thus, any component can handle events such as mouse clicks, drags, etc. For example, you can register a callback function to the ‘click’ event of a Bitmap object, causing the callback to be called whenever the user clicks that Bitmap.
  • DisplayObject: is the base class for all visual element, exposing properties such as position, rotation, scale and transparency. It means that, you can manipulate the position, rotation and other display properties of any object that draws something at the screen.
  • Container: The Container inherit from DisplayObject and provides methods to group other DisplayObjects. Using Containers, you can create hierarchy of visual objects and manipulate them together. For example, if you have a container within 3 images and move the container to the left, all the three images will be moved to the left too.
  • Stage: the Stage is the root level of the DisplayObject hierarchy, thus, if you want to show an object in canvas you need to add this object to the stage.

After adding objects to stage, you need to call the stage “update” method, otherwise the canvas will be redraw and you won’t see any change. All examples below show how to use it.

Working with Shapes

A Shape object stores a group of vector graphics that are created directly by the canvas element. Each shape has a Graphics instance which is the interface to the canvas drawing system. Check the example below.

Notice how the graphics instance does the hard work. The beginFill function sets the filling color for the next drawings while beginStroke sets the stroke color. The Graphics object provides several functions for the drawing itself, take a look at the official documentation to see how drawRect, drawCircle and other directives work.

Working with Texts

With Text objects you can draw… texts! But just plain texts, not HTML-formatted ones. EaselJS allows you to change the color, alignment, size, font, wrapping and others settings of Text objects, check the official documentation to know more:

Working with Bitmaps

With Bitmap objects you can display an image, canvas or video (the HTML elements) into the canvas. You can instantiate the Bitmap object using the HTML element explicitly or passing a string, as shown in the example. Notice that, the first lines of the code below is a bit different from the examples above, that is because I am using a external resource (the image ‘assets/html5.png’) and we can use it before the browser totally load it. This process is automated by PreloadJS.

Consult the documentation to know more about bitmaps:

 Working with SpriteSheets

A sprite sheet is a group of several images combined into a single larger file, e.g.:Bubbles Sprite SheetYou can also define animations using sprite sheets as shown in the example.

EaselJS provides the SpriteSheet class to handle this kind of image.  The SpriteSheet object requires some configuration to work, such as the size of each frame and the sequence of animations, check the documentation for a detailed description of each property:

The SpriteSheet only represents the sequence of images, to see them as isolated images or animations you need a Sprite.

Notice that, in the last lines of example, I register a function “update” to the “tick” event, so it will be called every frame by Easel. In this function I call the stage update so it can redraw the canvas and show each frame of our animation.

Other Tutorials

To learn more about EaselJS, follow the official tutorials:

CreateJS Logo

My Personal CreateJS Boilerplate

I created a new repository in Github with my personal boilerplate to CreateJS. This boilerplate includes:

  • A simple server written in Python using the Flask web framework, you will need them to run the server;
  • A simple html page initializing the CreateJS libraries and jQuery;
  • The last release of jQuery;
  • A folder structure containing: assets, core, data, models, scenes, and systems;
  • Core files containing some useful objects for your games;

I will keep these files updated as much as I can.

For those who don’t know, a boilerplate is a “template project” that you can use to start a new work. The template includes files, folders and the structure of the project. If you are happy user of Sublime Text, you can install the Nettuts + Fetch plugin to add this (or other ones) boilerplate automatically.

You can access the repository and propose changes, access:

https://github.com/renatopp/createjs-boilerplate

CreateJS Logo

A Humble Introduction To CreateJS Suite

CreateJS Logo

CreateJS is a great suite of modular libraries and tools to make HTML5 games and other interactive applications. In the core of CreateJS, there is 4 libraries: EaselJS, SoundJS, PreloadJS, and TweenJS. These libraries are completely independent, i.e., they can be used isolated or even with other game libraries.

EaselJS is the main component of CreateJS. EaselJS controls the game loop, the event manager, the hierarchical organization of objects and the rendering system. It works above the canvas element, thus, providing an easy interface to draw shapes and bitmaps.

SoundJS provides a consistent API to use audio in different browsers. It works via plugins which abstract the actual audio implementation, so playback is possible on any platform without specific knowledge of what mechanisms are necessary to play sounds.

PreloadJS is used to preload all assets to your game, such as images, sounds, data, etc. It provides a complete API with an event system so you can track the loading progress and the connection fails.

TweenJS provides tween function for animations. It can be used independently and provide a simple but complete API to track tweening of object properties and chained commands.

Together with these four libraries, the CreateJS suite also comprises a set of tools to aid the game development process, from applications for exporting SWF animations to EaselJS spritesheets to code completion for editors.

Checkout the video below by the creator of CreateJS to have a better overview of what CreateJS is capable of.