An article will take you quick start with createjs and Quick Start With createjs

An article will take you quick start with createjs and Quick Start With createjs
When I started using the createjs framework, I found that there were few tutorials on the Internet, so I wrote an article to facilitate future viewing.Introduction to createjsOfficial Website: Drawing Sprites, animation, vector and bitmap, creating interactive experience on HTML5 Canvas (including multi-touch) TweenJS: used for animation effect SoundJS: audio playback engine PreloadJS: website Resource pre-loading is similar to SoundJS and PreloadJS. If it is easy to process, you can write it yourself. In general, they are equivalent to an auxiliary function and are optional. Therefore, this article mainly describes how to use EaselJS.1. General api of EaselJS

• Bitmap)
• Use a Shape to draw a graph, such as a rectangle or a circle. It is similar to changing coordinates x and y, adding shadow, transparency alpha, and narrowing down and enlarging scaleX/scaleY]
• Draw Text, use (Text)
• There is also the concept of Container iner, which can contain multiple display objects

  2. General Drawing Process of EaselJSGeneral process: Create a display object → set some parameters → call method plotting → add to stage → update (). The Code is as follows:

<Script src = "easeljs-0.7.1.min.js"> </script> // introduce the relevant js File
<Canvas id = "canvas"> </canvas> var canvas = document. querySelector ('# canvas'); // create a stage var stage = new createjs. stage (canvas); // create a Shape object. You can also create Text and Bitmapvar rect = new createjs. shape (); // use a paint brush to set the color. Call the method to draw a rectangle. The rectangle parameters are x, y, w, and hrect. graphics. beginFill ("# f00 "). drawRect (0, 0,100,100); // Add it to stage. addChild (rect); // refresh stage. update ();

Graphics can set some styles, line width, color, and so on. You can also call some methods to draw images, such as rectangular drawRect and circular drawCircle. You can view the APIS by yourself.

Note: Remember to add the shape object to the stage, otherwise the screen will not be displayed. 3. Ticker TimerOne thing you will certainly encounter when writing createjs is ticker, which is mainly to regularly refresh the stage. The ideal frame rate is 60FPS.

createjs.Ticker.setFPS(60);  

 

4. Control hierarchical relationships of Multiple display objectsStage, the contain object has a children attribute that represents the child element. It is an array. The element level starts from 0 like a subscript. In short, it overwrites the previous one, the addChild method is added to the end of the display list. We can also dynamically change the stacked Effect of children.

stage.setChildIndex(red,1);

 

5. containerIt can contain Text, Bitmap, Shape, Sprite, and other EaselJS elements, which can be conveniently and centrally managed in a Container. For example, a character consists of hands, feet, heads, and bodies. You can place these parts in the same iner and move them in a unified manner. The usage is also simple:

var contain = new createjs.Container(); contain.addChild(bgImg);contain.addChild(bitmap);  stage.addChild(contain);

 

Pedal pedal ~ The focus of this article is to draw and process images

6. Draw Images

var bg = new createjs.Bitmap("./background.png");stage.addChild(bg);stage.update();

According to the normal Painting Process of EaselJS above, the above Code should be properly displayed. However, it can only be displayed normally in some cases. This image resource can be new only after it is loaded successfully. Otherwise, no image is displayed on the canvas. If there is resource pre-loading, you can directly use the above Code. If not, you need to draw the image after loading the onload.

var img = new Image();img.src = './img/linkgame_pass@2x.png';img.onload = function () { var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update();}

Creating images alone is not enough. createjs provides several ways to process images:

 

6.1 add a mask layer to the imageYou can use the mask attribute to display only the areas in which the image and shape intersect.

Stage = new createjs. stage ("gameView"); bg = new createjs. bitmap (". /img/linkgame_pass@2x.png "); bg. x = 10; bg. y = 10; // mask image shape = new createjs. shape (); shape. graphics. beginFill ("#000 "). drawCircle (0, 0,100); shape. x = 200; shape. y = 100; bg. mask = shape; // adds a mask stage to the image bg. addChild (shape); stage. addChild (bg); stage. update ();

Common application scenarios: Used to crop an image, such as a circular image

 

6.2 Add filter effects to images

var blur = new createjs.BlurFilter(5,5,1);bg.filters = [blur];

We found that the image is still not blurred because the stage is refreshed immediately after the filter is added to the image. The filter can only maintain the effect of one frame, and the filter of the second frame is invalid. After the image cache () method is used, the Filter effect can be maintained regardless of the refresh on the stage. Adding a cache also plays a significant role in improving FPS and caching.

bg.cache(0,0,bg.image.width,bg.image.height);

 

6.3 use Rectangle to crop images
Use the Rectangle object built in EaselJS to create a selection box and display each part of the image.

stage = new createjs.Stage("gameView");bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");bg.x = 10;bg.y = 10;var rect = new createjs.Rectangle(0, 0, 121, 171);bg.sourceRect = rect;stage.addChild(bg);stage.update();

Applicable scenarios: jigsaw puzzle games, image cropping ......

 

7. createjs event

By default, easeljs events do not support touch devices. The following code is required:

createjs.Touch.enable(stage);

For Bitmap, Shape, and other objects, you can directly use addEventListener for event listening.

bitmap = new createjs.Bitmap('');bitmap.addEventListener（‘click’，handle）;

 

8. Rendering mode of CreateJsCreateJs provides two rendering modes: setTimeout, requestAnimationFrame, setTimeout by default, and 20 by default, however, if there are many animations and set them to the requestAnimationFrame mode, the animations will feel as smooth as they are. 9. AdaptationIn mobile development, there is a need to face the problem of multiple screens and sizes, so the adaptation issue is particularly important.

<canvas id="game" width="1000" height="700"></canvas>

Note that the width and height of the above Code are different from the width and height in css.

For example, if you draw an image inside the canvas and use the x and y axes to locate the image, here the x and y are relative to the canvas.

We can use css to adapt canvas to a whole image.

canvas{     width: 100%;}

In this case, the canvas will adapt to the screen size, and the image in the canvas will become larger and smaller.