如何使用Createjs来编写HTML5游戏（一）EaselJS简介

CreateJS

CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。

CreateJS 中包含：

EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash 中的“显示列表”功能。

TweenJS：一个简单的用于制作类似 Flash 中“补间动画”的引擎，可生成数字或非数字的连续变化效果。

SoundJS：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。

PrloadJS：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据……

以上的Createjs介绍来自百度，不过通过介绍可以知道，虽然CreateJS看起来复杂，不过四个部分各有作用，其中最主要的就是EaselJS，其余三项不过是为他服务。

一.如何使用EaselJS

首先到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 onload="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);

三.容器Container

Container是一个容器，可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素，包含在一个Container中方便统一管理，比如你要做一个按钮，按钮图形和上面的提示文字包含在一个Container中，可以统一移动。

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);

这样就能得到一个圆形的红色按钮，设置button的cursor属性可以是鼠标放在按钮上是显示一个白色的手，提示点击，要想使用这个必须先添加

stage.enableMouseOver();

这样就能得到一个按钮，只需要给它添加事件监听即可正常使用。（常用的方式是继承一个Container来创建一个按钮，后面会见到）

四.添加事件监听和Ticker

想要与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,然后给它添加点击事件，弹出一个警告框。

还可以添加鼠标滑过等，（这里使用on方法添加，on方法是addEventListener的一个简单的形式，很多的createjs方法都有简写的形式，尤其在graphics中）

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();
    }

五.一个简单的画板工具

通过Text，Shape，Container，addEventListener这些基本的内容，完全可以实现一些简单的工具和小游戏，比如俄罗斯放块，托球。在createjs的官方demo中就有一个画板工具，代码如下：

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);
}

还有些简单的小游戏都可以自己实现，比如：

如何使用Createjs来编写HTML5游戏（一）EaselJS简介

猜你喜欢