HTML5 Game Frame Createjs component--easeljs (i)

Now HTML5 small game more and more hot, due to the needs of the company's business, has also developed several small games, using canvas to write no use of what frame, found that performance has not been good, so the landlord can only bite the bullet to learn the CREATEJS framework of the fire of the Adobe company, Look for a long time the information is less, basically nothing

Chinese documents, many are English documents (think I this just over four level, can only borrow Youdao, 1.1 point to see, 1.1 translation study), today I write a primer (also slowly learn), write bad, we do not laughed at.

Easeljs is a JS library in Createjs suite that makes canvas easier to use, providing a straightforward solution for creating HTML5 canvas with rich media, rich interactive applications.

(a) How to use

First, download the Easeljs frame, and then create a stage stage object Stage=new Createjs for the staging canvas element. Stage (' demo '), add the displayed sub-object to the stage English is the Displayobject object Stage.addchild (), and then

Render render with Stage.update (). Easeljs support features are commonly used for Createjs under the corresponding objects:

1. Use the bitmap bitmap object with the image.

2. Vector graphics use shape and graphics objects.

3. Animated animated bitmap bitmaps use Spritesheet and Sprite objects.

4. Use text as an example.

5. A container containing Displayobjects objects is used container.

6. Control the use of HTML DOM elements domelement.

All display objects can be added to stage stages as a child, or directly to canvas canvases.

Instructions for use:

All display objects on the stage displayobject (except for domelement) can bind events when using mouse or touch. The EASELJS supports hover, press and release events, and it is easy to use drag and drop drag models.

Let's take a look at the basic example:

You can now illustrates inside to implement the simulation, then use EASELJS to create the stage and shape to achieve the effect.

  Create a stage by getting a reference to the canvas  //Creates a phase by referencing to the canvas on    stage = new Createjs. Stage ("Democanvas");            Create a Shape displayobject.        Create a shape Display object    circle = new Createjs. Shape ();    Circle.graphics.beginFill ("Red"). Drawcircle (0, 0, +);            Set position of Shape instance.        Sets the center coordinate of the shape instance    circle.x = Circle.y =;            Add Shape instance to stage display list.        Adding a shape instance appears on the stage list    stage.addchild (circle);            Update stage would render next frame        //update Arena render    stage.update ();

　　

Basic listener binding events, simple interaction

Displayobject.addeventlistener ("click", Handleclick); function Handleclick (event) {     //click happenened} displayobject.addeventlistener ("MouseDown", handlepress); function Handlepress (event) {     //A Mouse press happened.     Listen for mouse move while the mouse are down:     event.addeventlistener ("MouseMove", handlemove);} function Handlemo ve (event) {     //Check out of the Draganddrop example in GitHub for more}

Combining the Cricle display object created above is:

//listen to the circular display object, add Event Displayobject.addeventlistener ("Click", Hand                         Leclick);                         Circle.addeventlistener ("click", Handleclick);                         function Handleclick (event) {//click on alert (11) occurs;                         } circle.addeventlistener ("MouseDown", handlepress);                                 function Handlepress (event) {alert (' mouse pressed ')///Mouse down occurs Listen for event Event.addeventlistener ("MouseMove") that occurs when the mouse is pressed to move, handle                         Move); } function Handlemove (event) {//Check out the Draganddrop exampl E in GitHub for more console.log (' Mouse moved ')} 

Basic animation examples

Update stage would render next frame    Createjs. Ticker.addeventlistener ("tick", Handletick);    function Handletick () {     //circle'll move units to the right.    The circle will move to the right in 10 units        circle.x + = ten;        Will cause the circle-to-wrap        back//move more distance than the stage, restart        if (circle.x > Stage.canvas.width) {circle.x = 0;}        stage.update ();    }

　　

Finally, Easeljs also has other functions, also simple to say:

Features such as 1.canvas shading and compositeoperation

2.Ticker, a global heartbeat that objects can subscribe to (a little bit confused)

3. Filter, is like PS inside the filter mask, color channel these.

4. button buttons function, can be very simple to create button interaction.

5.SpriteSheetUtils and Spritesheetbuilder help us build and manage Spritesheet at runtime.


Createjs study is a series of tutorials, like to continue to focus on the next period ... Grow together

HTML5 Game Frame Createjs component--easeljs (i)