一篇文章让你快速掌握 CreateJS。
官网:http://www.createjs.cc/
CreateJS 中包含以下四个部分:
EaselJS:用于 Sprites 、动画、向量和位图的绘制
TweenJS:用于做动画效果
SoundJS:音频播放引擎
PreloadJS:网站资源预加载
//放置静态资源的数组
var manifest = [
{src: './images/car_prop2_tyre@2x.png', id: 'tyre'}
];
var queue = new createjs.LoadQueue();
queue.on('complete', handleComplete, this);
queue.loadManifest(manifest);
//资源加载成功后,进行处理
function handleComplete() {
var tyre = queue.getResult('tyre'); //获取加载资源
}
“被污染的” Canvas ?
解决图片跨域有2种解决方法:
图片所在的服务器设置 Access-Control-Allow-Origin "*" 响应头
手动将 IMG 的 url 转换成当前域名的 url ,详细处理方法
var queue = new createjs.LoadQueue(false,'','Anonymous'); //LoadQueue ( [preferXHR=true] [basePath=""] [crossOrigin=""] )
第一个参数为true,代表通过xhr形式加载.
basePath 在加载资源时的,会把basePath加载url前面。这样加载同一个目录下的文件时,可以方便一点。 但是如果url是以协议(如”http://”)或者”../”这样路径开头时,不会添加basePath。
crossOrigin 设置为Anonymous的时候,则表示允许跨域
画图片用 (Bitmap)
画图形,比如矩形,圆形等用 (Shape) 【类似于改变坐标x,y,增加阴影 Shadow ,透明度 Alpha ,缩小放大 ScaleX/ScaleY 都可以做到】
画文字,用 (Text)
还有容器 Container 的概念,容器可以包含多个显示对象
var canvas = document.querySelector('#canvas');
//创建舞台
var stage = new createjs.Stage(canvas);
//创建一个Shape对象,此处也可以创建文字Text,创建图片Bitmap
var rect = new createjs.Shape();
//用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h
rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
//添加到舞台
stage.addChild(rect);
//刷新舞台
stage.update();
createjs.Ticker.addEventListener(“tick”, tick);
function tick(e) {
if (e.paused === 1) {
//处理
stage.update(); //刷新舞台
}else {}
}
createjs.Ticker.paused = 1; //在函数任何地方调用这个,则会暂停tick里面的处理
createjs.Ticker.paused = 0; //恢复游戏
createjs.Ticker.removeEventListener("tick", tick);
createjs.Ticker.setFPS(60);
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Touch.enable(stage);
bitmap = new createjs.Bitmap('');
bitmap.addEventListener(‘click’,handle);
控制多个显示对象的层级关系
obj.parent.setChildIndex(obj, n); //n为设置的层级
利用容器 Container
var contain = new createjs.Container();
contain.addChild(bgImg);
contain.addChild(bitmap);
stage.addChild(contain);
bitmap.name = ‘quick’; //设置name值
quick = this.stage.getChildByName(“quick”); //使用name值方便获取到该对象
quick.visible = true; //显示该效果
-
绘制图片
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();按照上面的 EaselJS 的正常的绘制流程来说,上面这段代码应该可以正常显示。但是,只是有些情况下可以正常显示的,这个图像资源需要确定加载成功后才可以 new ,否则不会有图像在画布上,如果有做资源预加载,可以直接使用上面的代码,如果没有,则需要在 Image 加载完成 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();
}仅仅绘制图片是不够的, CreateJS 提供了几种处理图片的方法:
-
给图片增加遮罩层
使用 mask 属性,可以只显示图片和 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();常用应用场景:用来剪裁图片,比如显示圆形的图片等
-
给图片增加滤镜效果
var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];我们发现,图片还是没有变模糊,原因是图片添加了 Filter 后 Stage 立即刷新, Filter 只能保持一帧的效果,第二帧 Filter 则失效了。而使用图片的 cache() 方法后,可以使得无论舞台怎么刷新,都可以保持住 Filter 的效果,添加 cache 还有很多作用,可以提高 FPS ,缓存等
bg.cache(0,0,bg.image.width,bg.image.height);
-
使用 Rectangle 剪裁图片
使用 EaselJS 内置的 Rectangle 对象来创建一个选取框,显示图片的某各部分。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(e);适用场景:拼图小游戏,剪裁图片……
this.backdrop = new createjs.Bitmap(bg);
this.backdrop.x = 0;
this.backdrop.y = 0;
this.stage.addChild(that.backdrop);
this.w = bg.width;
this.h = bg.height;
//创建一个背景副本,无缝连接
var copyy = -bg.height;
this.copy = new createjs.Bitmap(bg);
this.copy.x = 0;
this.copy.y = copyy; //在画布上 y 轴的坐标为负的背景图长
//使用 CreateJS 的 Tick 函数,逐帧刷新舞台
createjs.Ticker.addEventListener("tick", tick);
function tick(e) {
if (e.paused !== 1) {
//舞台逐帧逻辑处理函数
that.backdrop.y = that.speed + that.backdrop.y;
that.copy.y = that.speed + that.copy.y;
if (that.copy.y > -40) {
that.backdrop.y = that.copy.y + copyy;
}
if (that.copy.y > -copyy - 100) {
that.copy.y = copyy + that.backdrop.y;
}
}
that.stage.update(e);
}
demo体验链接: http://jdc.jd.com/fd/h5/peidan/demo/car.html
总结
整篇文章介绍了下面几个部分
详细介绍了 CreateJS 的常用 API
CreateJS 的一些常见 bug 及解决方法
CreateJS 实现小 Demo
https://github.com/pfan123/code-snippet/issues/10
如何使用 CreateJS 来编写HTML5游戏(一)EaselJS简介
如何使用 CreateJS 来编写HTML5游戏(二)使用EaselJS处理图片
如何使用 CreateJS 来编写HTML5游戏(三)使用EaselJS中的制作Sprite类制作
如何使用 CreateJS 来编写HTML5游戏(四)TweenJS和Tick动画
如何使用 CreateJS 来编写HTML5游戏(五)PreloadJS和SoundJS
如何使用 CreateJS 来编写HTML5游戏(六)完成一个简单的打飞机游戏(上)
如何使用 CreateJS 来编写HTML5游戏(七)完成一个简单的打飞机游戏(下)
推荐阅读