Quick start createjs example tutorial

When I started using the createjs framework, I found that there were still very few related tutorials on the Internet, so I wrote an article for easy reference in the future.

createjs introduction

Official website: http://www.createjs.cc/

createjs contains the following four parts:

EaselJS: used for drawing Sprites, animations, vectors and bitmaps, creating interactive experiences on HTML5 Canvas (including multi-touch)

TweenJS : Used for animation effects

SoundJS: Audio playback engine

PreloadJS: Website resource preloading

Similar to SoundJS, PreloadJS, if you handle it yourself If it is more convenient, you can also write them yourself. Generally speaking, they are equivalent to an auxiliary function, optional or not. Therefore, this article mainly explains the use of EaselJS.

1. The general api of EaselJS

• Draw pictures Use (Bitmap)

• to draw graphics, such as rectangles, circles, etc. Use (Shape) [Similar to changing coordinates x, y, increasing shadow, transparency alpha, reducing and enlarging scaleX/scaleY You can do it]

• Draw text, use (Text)

• There is also the concept of container Container, the container can contain multiple display objects

2. The general process of EaselJS drawing

##The general process:

Create a display object→Set some parameters→Call method drawing→Add to stage→update(), the code is as follows:

<script src="easeljs-0.7.1.min.js?1.1.10"></script>  //引入相关的js文件
<canvas id="canvas"></canvas> canvas = document.querySelector('#canvas' stage =  rect = rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100stage.update();

graphics can set some styles, Line width, color, etc., you can also call some methods to draw graphics, such as rectangle drawRect, circle drawCircle, etc. You can check the API yourself for details.

Note: Remember to add the shape object to the stage, otherwise it will not be displayed on the screen.

3. Ticker timer

Write createjs for sure One you will encounter is ticker, which mainly refreshes the stage regularly. The ideal frame rate is 60FPS

createjs.Ticker.setFPS(60);

4 . Control the hierarchical relationship of multiple display objects

stage. The contain object has a children attribute that represents the child elements. It is an array. The element level inside starts from 0 like a subscript. Simple In other words, the latter one overwrites the previous one, and the addChild method is added to the end of the display list.

We can also dynamically change the cascading effect of children.

stage.setChildIndex(red,1);

5. Container container

It can contain Text, Bitmap, Shape, Sprite and other EaselJS elements are included in a Container to facilitate unified management.

For example, a character is composed of hands, feet, head, and body. You can put these parts in the same container and move them uniformly. The method of use is also relatively simple:

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

嬹嬷嬬～The focus of this article is to draw images and process them

6. Draw pictures

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

According to the normal drawing process of EaselJS above, the above The code snippet should display normally. However, it can only be displayed normally in some cases. This image resource needs to be loaded successfully before it can be new. Otherwise, there will be no image on the canvas. If there is resource preloading, you can use the above code directly. If not, then It needs to be drawn after the image is loaded 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();
}

Just drawing pictures is not enough. Createjs provides several methods for processing pictures:

6.1 Add a mask layer to the image

Use the mask attribute to display only the area where the image intersects with the shape

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;//遮罩图形shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩stage.addChild(shape);
stage.addChild(bg);
stage.update();

Common application scenarios: used to crop pictures, such as displaying circular pictures, etc.

6.2 Add filter effects to pictures

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

We found that the picture still did not become blurred. The reason is that the stage is refreshed immediately after adding a filter to the picture. The filter can only maintain the effect of one frame, and the second frame filter failed. After using the cache() method of the image, the filter effect can be maintained no matter how the stage is refreshed. Adding cache has many effects, such as improving FPS, caching, etc.

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

6.3 Use Rectangle to crop the imageUse the built-in Rectangle object of EaselJS to create a selection box to display certain parts 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();

适用场景：拼图小游戏，剪裁图片……

 

7. createjs事件

easeljs事件默认是不支持touch设备的，需要以下代码才支持：

createjs.Touch.enable(stage);

对于Bitmap，Shape等对象，都可以直接使用addEventListener进行事件监听

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

 

8. CreateJs的渲染模式

CreateJs提供了两种渲染模式，一种是用setTimeout，一种是用requestAnimationFrame，默认是setTimeout，默认的帧数是20，一般的话还没啥，但是如果动画多的话，设置成requestAnimationFrame模式的话，就会感觉到动画如丝般的流畅。

 

 

9.适配

在移动端开发中，不得不面对一个多屏幕，多尺寸的问题，所以适配问题显得特别重要。

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

注意，以上代码的width，height不同于css中的width，height。

比如，你在canvas内部绘制图片，用x，y轴进行定位，这里的x，y是相对于canvas这个整体。

我们再把canvas当成一整张图片使用css进行适配

canvas{
     width: 100%;
}

那么，就会有以下的效果，canvas会适配屏幕尺寸，里面的图片也会等比例变大变小。

     

 

 

The above is the detailed content of Quick start createjs example tutorial. For more information, please follow other related articles on the PHP Chinese website!