Createjs相关

发表于   |  

Createjs相关

我并不非常了解canvas的基础。虽说用createjs写过不少游戏，但是其实并不非常了解其中的“奥秘”。就好像你用jQuery能写出很多效果，但可能你并不知道jQuery究竟干了什么。

Createjs的基本构成

  • Easeljs 图形库，最基本的canvas绘图功能
  • Tweenjs 补间动画的库
  • Soundjs 音频库
  • Preloadjs 预加载库
  • （以前还有一个叫做MovieClip的库，好像现在整合到Easeljs里面去了）

Createjs就是这几个库的集合（不确定还有没有不属于这几个库的其他东西）。

而这几个库也可以单独使用。

单独使用的话，其实Preloadjs跟Soundjs比较常用。

下面简单说几个我比较常用的对象、方法

Easeljs

舞台 Stage

1
2
3
4
 
// new 一个stage，用于绘制图案
var stage = new createjs.Stage('canvas_id');
// 刷新stage，当你stage里面的内容有修改的时候，通过update方法可以绘制出来
stage.update();

计时器 Ticker

1
2
3
4
5
6
7
8
9
10
11
12
 
// 设置帧率，以下方法即表示每秒60帧
createjs.Ticker.setFPS(60);
// 官方表示setFPS已过时，请用framerate代替
createjs.Ticker.framerate = 60;
// createjs默认是使用的requestAnimationFrame方法
// 一般用于stage的update
createjs.Ticker.addEventListener("tick", (e) =>{
  console.log(e)
  stage.update(e);
});

常用的图形元素

  • Bitmap 位图元素
  • Text 文字元素
  • Sprite 精灵元素，其实就是序列帧，需要搭配SpriteSheet
  • Shape 图形元素，需要搭配Graphics
  • BitmapText 图片化的文字，跟Sprite类似的位图元素，需要搭配SpriteSheet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
// 用到image、spriteSheet等的，需要先load，否则会取不到图片资源
// Bitmap 参数可以是img元素、canvas元素、video元素、或者图片路径
var bitmap = new createjs.Bitmap('img.png');
// Text 参数分别是text，font，color
// font：等同于CSS的font属性值，比如可以是'bold 20px Arial'
// color：CSS可用的color均能使用
var text = new createjs.Text("Hello World", "20px Arial", "#FFF");
// Sprite 参数是spriteSheet和开始帧
// 第二参数可选
var sprite = new createjs.Sprite(spriteSheet);
sprite.gotoAndPlay('帧名');
//等同于
var sprite = new createjs.Sprite(spriteSheet, '帧名');
//Shape 参数是Graphics对象，api重点在Graphics
var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);
//同样的，你也能这么写
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);
// BitmapText 参数是text和spriteSheet
var bitmaptext = new createjs.Sprite('Hello world', spriteSheet);

Container

顾名思义，容器：

1
2
 
var container = new createjs.Container();
container.addChild(bitmap, sprite);

最简单的案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <style>
    *{margin:0;padding:0;}
    body{text-align:center;}
    #game{margin:0 auto;}
  </style>
</head>
<body>
  <canvas id="game" width="640" height="640" style="width:320px;height:320px;"></canvas>
  <script src="/js/createjs-2015.11.26.min.js"></script>
  <script>
    var stage = new createjs.Stage('game');
    createjs.Ticker.framerate = 60;
    createjs.Ticker.addEventListener("tick", (e) =>{
          // 定时渲染
      stage.update(e);
    });
    var container = new createjs.Container();
    stage.addChild(container);
    var text = new createjs.Text('Hello world', '30px Tahoma', "#333");
    container.addChild(text);
  </script>
</body>
</html>

可以参考官方demo

Tweenjs

1
2
3
4
5
6
7
8
9
10
 
var t = new createjs.Text('Hello world', '30px Tahoma', "#333");
stage.addChild(t);
t.x = 0;
t.y = 100;
createjs.Tween.get(t)
  .wait(500)
  .to({x: 200}, 2000, createjs.Ease.backOut)
  .call(()=>{
  	// 结束
  });

createjs.Ease可以参考官方demo

Soundjs

不太了解 囧

一般用于播放音乐、音效

1
2
3
4
5
6
 
var soundsList = {};
// 这里需要结合preloadjs
var audio = loader.getResult(id);
var list = {};
list[id] = createjs.Sound.createInstance(id);
list[id].play({loop:-1});

Preloadjs

少说废话，直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
 
var loader = new createjs.LoadQueue();
var res = [
  {id:'n',src:'http://demo.com/thumb-default.png'}
];
loader.loadManifest(res);
loader.on("complete", (e) => {
  var img = new createjs.Bitmap(loader.getResult('n'));
  container.addChild(img)
});
loader.on("progress", (e) => {
  // 这里可以做进度条
});