首先到http://createjs.com/ 下载最新版的EaselJS,下载解压后可以在lib文件夹中找到easeljs-0.8.1.min.js,同时在压缩包中可以找到一个examples和tutorials目录,这两个目录中包含一些入门介绍和例子,有英语基础可以看看,DOC文件夹中包含easeljs所有的api。(同理,可以得到createjs包含的其他三项,其目录结构都与EaselJS相似)。
1.得到easeljs-0.8.1.min.js后,新建一个HTML5文件并导入之:
<script src="easeljs-0.8.1.min.js"></script>
2.入口函数和创建canvas标签
<body οnlοad="init();">
<canvas id="game" width="1000" height="700" style="background-color: white"></canvas>
</body>
3.编写自己的javascript代码,在函数init()中首先应该使用HTML中的canvas标签来创建一个Stage,createjs中用到的所有元素,都是添加在这个stage当中的,添加后调用stage.update()方法即可使得添加的元素显示在页面上。在创建Stage时,可以直接使用Canvas的id来创建,也可以调用document.getElementById("game"),选取canvas来创建,没有区别。
<script>
function init(){
var stage = new createjs.Stage("game");
.......
stage.update();
}
</script>
二.使用EaselJS创建图形和文字
最简单的游戏都是由文字和图形组成,使用EaselJS添加文字和图形非常的简单。
1.添加文字
var txt = new createjs.Text("HELLO","20px Times","#000");
Createjs中所有的元素都通过调用new createjs.XXXXX来创建,Text包含三个参数分别是显示的字符,字体及大小,最后是颜色。当然在创建完成后可以随意改变txt的x,y坐标和对其,居中以及内容等等的属性。例如:
txt.x = 100;
txt.y = 100;
txt.text = "hello, world!"
完成后记得一定要把新创建的txt添加到stage中才能正常显示
stage.addChild(txt);
2.添加图形
常用图形包含两个部分,png或jpg的图片和代码绘制的矢量图。先从矢量图开始,在preload中会有图片的加载绘制方法。
同添加Text类似,直接调用new createjs.Xxxx来创建这里是Shape()。
var shape = new createjs.Shape();
stage.addChild(shape);
直接添加后发现并不能显示任何图形,因为在EaselJS中想要显示一个图形,除了需要先创建一个Shape意外,还需要再创建一个Graphics,可以理解成一个有绘制能力的画笔,而Shape则是一个画布。
首先创建一个Graphics,类似的调用new createjs.Graphics();
var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke("#000000");
g.beginFill("red");
g.drawCircle(0,0,30);
使用new createjs.Graphics();创建g变量后,即可调用Graphics内置的方法来绘制图形,例如beginStrokeStyle("#000")是设置边框颜色,beginFill("red")是设置填充的颜色,最后drawCircle(0,0,30)是在(0,0)位置绘制一个半径30的圆,drawRect(0,0,100,150);是在(0,0)位置绘制一个100*150的方形,同时所有的方法可以一起调用,例如:
var graphics = new createjs.Graphics().beginStroke("#000").beginFill("#ff0000").drawRect(0, 0, 100, 100);
这样就获得了一个用来渲染Shape的画笔graphics,使用之即可获得一个黑色边框的红色正方形:
var graphics = new createjs.Graphics().beginStroke("#000").beginFill("#ff0000").drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);
stage.addChild(shape);
如果觉得先创建Graphics后创建Shape太复杂,也可以调用Shape的graphics属性直接画出图形。
var shape = new createjs.Shape();
shape.graphics.beginStroke("#000").beginFill("#ff0000").drawRect(0, 0, 100, 100);
同前段代码的作用一样,都可以获得一个黑边的红色正方形。
Shape也包含很多可以修改的属性,如坐标x/y,透明度等,rotation是设置旋转角度,scaleX和scaleY是设置图形放大或者缩小的比例。可以查询api手册,其中有个regX和regY,左偏移和又偏移,这两个可以理解为设置图形Shape的中点,默认值都是0,即为图形左上角,所以当你设置显示的x/y坐标为0,0时,图形Shape自左上角开始,在(0,0)位置显示图形,如果设置regX和regY为50
shape.regX = 50;
shape.regY = 50;
则图形的中心改为(50,50),显示的位置仍然是坐标(0,0),则此时只显示1/4的方形,整个图形,向左且向上移动了50px。
还有一个常用的属性是shadow,通过给图形设置shadow属性可在图形下添加一个阴影使得图形显得有立体感。
shape.shadow = new createjs.Shadow("#000",5,5,8);
var button = new createjs.Container();
var label = new createjs.Text("OK","20px Times","#000");
label.textAlign = 'center';
label.textBaseline = 'middle';
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 50);
shape.shadow = new createjs.Shadow("#000",5,5,8);
button.addChild(shape,label);
button.regX = shape.width/2;
button.regY = shape.height/2;
button.x = 100;
button.y = 100;
button.cursor = "pointer";
label.x = button.regX;
label.y = 50;
stage.addChild(button);
stage.enableMouseOver();
这样就能得到一个按钮,只需要给它添加事件监听即可正常使用。(常用的方式是继承一个Container来创建一个按钮,后面会见到)
想要与stage中的所有元素交互只需要给他们添加addEventListener,例如点击,鼠标划过等等,而对于stage本身,有个特别的事件"tick",给stage设置tick相当于javascript中的SetInterval,定时的运行一个函数,可以用来定时的刷新stage,即运行stage.update()。一个比较常用的方法也是一个最简单的游戏框架一般都是这样。
<script>
var stage;
function init(){
stage = new createjs.Stage('game');
stage.enableMouseOver();
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
}
function update(event){
stage.update();
}
</script>
当然可以直接使用
createjs.Ticker.addEventListener('tick',stage);来直接给stage添加一个tick相应,由setFPS来设定刷新的频率,如果这样只会调用stage.update()方法来刷新stage,为了防止有其他的元素需要更新,一般都是调用一个方法,这里是一个新的update方法。
除去stage的tick事件外,还可以给元素添加很多事件监听,比如click点击,mouseover划过,mouseout鼠标移出等等,在API中可以找到每个元素能够相应的所有事件Event,例如给一个shape添加点击:
var shape = new createjs.Shape(); shape.graphics.beginFill("#ff0000").drawCircle(100, 100, 50); shape.addEventListener("click",function(e){ alert("ok"); });
这里先创建了一个shape,然后给它添加点击事件,弹出一个警告框。
var stage;
function init(){
stage = new createjs.Stage('game');
stage.enableMouseOver();
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawCircle(100, 100, 50);
shape.addEventListener("click",function(e){
alert("ok");
});
shape.on("mouseover",function(e){
shape.scaleX = 1.2;
shape.scaleY = 1.2;
shape.alpha = 0.8;
});
shape.on("mouseout",function(e){
shape.scaleX = 1;
shape.scaleY = 1;
shape.alpha = 1;
});
stage.addChild(shape);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
}
function update(e){
stage.update();
}
var canvas, stage;
var drawingCanvas;
var oldPt;
var oldMidPt;
var title;
var color;
var stroke;
var colors;
var index;
function init() {
canvas = document.getElementById("myCanvas");
index = 0;
colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
//check to see if we are running in a browser with touch support
stage = new createjs.Stage(canvas);
stage.autoClear = false;
stage.enableDOMEvents(true);
createjs.Touch.enable(stage);
createjs.Ticker.setFPS(24);
drawingCanvas = new createjs.Shape();
stage.addEventListener("stagemousedown", handleMouseDown);
stage.addEventListener("stagemouseup", handleMouseUp);
title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777");
title.x = 300;
title.y = 200;
stage.addChild(title);
stage.addChild(drawingCanvas);
stage.update();
}
function handleMouseDown(event) {
if (!event.primary) { return; }
if (stage.contains(title)) {
stage.clear();
stage.removeChild(title);
}
color = colors[(index++) % colors.length];
stroke = Math.random() * 30 + 10 | 0;
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt.clone();
stage.addEventListener("stagemousemove", handleMouseMove);
}
function handleMouseMove(event) {
if (!event.primary) { return; }
var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
stage.update();
}
function handleMouseUp(event) {
if (!event.primary) { return; }
stage.removeEventListener("stagemousemove", handleMouseMove);
}