Createjs Getting Started

Createjs is a lightweight framework, a little bit of time and patience, you can put all the source code to see once, after all, only more than 30 JS files. Address: http://www.createjs.com/

Developing Createjs animations or games, no heavy-duty IDE or any tool support, we can only write JS from scratch. On the one hand, this is flexible enough for jser, and on the other hand, Createjs is sufficiently small enough to be streamlined.

The CREATEJS consists of several libraries:

L EASELJS, this is the core, including the display list, the event mechanism;

L PRELOADJS, for pre-loading pictures, etc.;

L TWEENJS, for controlling the easing of components;

L Soundjs for sound playback.

Easeljs 81k,preloadjs 31k,soundjs 34k,tweenjs 18k, for mobile small animation or small game, in fact, only need to load easeljs, because the core library has covered the simple picture of the preload function.

Development steps:

1, download the class library, you can use the source code, you can also use the compressed min.js, as if you usually write a Web page.

2. Create HTML and canvas tags, and then execute Createjs related logic after onload.

3, write Createjs logic. This is very simple, because Createjs only provides the simplest basic functionality, and we understand the basics and then we can stack the blocks.

On Createjs, the key is to understand the class structure

The main class structure of Createjs is listed, and all the content on the stage is a component, and the base class of the component is displayobject. The container can contain sub-components, and stage stages themselves are container. In addition, the sprite is used to represent spritesheet-frame animated characters and bitmap for displaying purely static characters.

Filter and Shadow are filter branches, which can be used to achieve color transform, blur, shadow and other effects for any component. Using filters in a way that is consistent with flash, you need to create a new filter instance to add to the target component's filterlist, and the Createjs frame will add the filter effect to the next frame.

Below is an example of how Createjs is used:

<script type= "Text/javascript" >varstage; functioninit () {varCanvas = document.getElementById ("Testcanvas"); Stage=NewCreatejs.            Stage (canvas); Stage.autoclear=true;//Add a background map            varBG =NewCreatejs. Bitmap (".. /res/bg.jpg "); Stage.addchild (BG);//add 5 little men and keep spinning and shrinking .             for(vari = 0; I < 5; i++) {                varMan =NewCreatejs. Bitmap (".. /res/grossini.png "); MAN.REGX= 42; Man.regy= 60; Man.x= canvas.width/6* (i+1);MAN.Y= Canvas.height/5*4;Man.scalex= Man.scaley = 1;                Stage.addchild (man); Createjs. Tween.get (man, {loop:true},true). To ({rotation:Scalex:2, Scaley:2}, +). To ({rotation:360, scalex:1, scaley:1}, 1000); Man.addeventlistener ("Click",function(event) {Console.log ("Click", Event.currenttarget); }); //easy to monitor and click to ignore mouse events in transparent areas of bitmaps            }            varImages = [];  for(vari = 1; I <= 14; i++) {Images.push (".. /res/grossini_dance_ "+ (i<10? (" 0 "+i): i) +". png "); }//added 5 frames animated villain, constantly playing 14 frame screen             for(varj = 0; J < 5; J + +) {                varSheet =NewCreatejs. Spritesheet ({images:images, frames: {width:height:121, regx:42, regy:60}                }); //need to set the width height per frame, registration point information                varMan =NewCreatejs.                Sprite (sheet); Man.framerate= 60/7;man.x= canvas.width/6* (j+1);MAN.Y= CANVAS.HEIGHT/3;                Man.play ();            Stage.addchild (man);            } stage.update (); Createjs. Ticker.setfps (60); Createjs. Ticker.addeventlistener ("Tick", tick); }//It's a little creepy, you need the user to control the stage constantly update updates        functionTick (event) {stage.update (event); }    </script>

Createjs Getting Started