如何使用Createjs来编写HTML5游戏（一）EaselJS简介 - 博客频道 - CSDN.NET
失业矿工的博客
我是名矿工，曾经是，后来国有变成私有，领导变成老板，老板掏空企业，企业玩完，矿工失业。
分类：Html5/Createjs

CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。
CreateJS 中包含：
EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash 中的“显示列表”功能。
TweenJS：一个简单的用于制作类似 Flash 中“补间动画”的引擎，可生成数字或非数字的连续变化效果。
SoundJS：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。
PrloadJS：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据……
以上的Createjs介绍来自百度，不过通过介绍可以知道，虽然CreateJS看起来复杂，不过四个部分各有作用，其中最主要的就是EaselJS，其余三项不过是为他服务。
一.如何使用EaselJS
&首先到 下载最新版的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&
3.编写自己的javascript代码，在函数init()中首先应该使用HTML中的canvas标签来创建一个Stage，createjs中用到的所有元素，都是添加在这个stage当中的，添加后调用stage.update()方法即可使得添加的元素显示在页面上。在创建Stage时，可以直接使用Canvas的id来创建，也可以调用document.getElementById(&game&)，选取canvas来创建，没有区别。
function init(){
var stage = new createjs.Stage(&game&);
stage.update();
二.使用EaselJS创建图形和文字
最简单的游戏都是由文字和图形组成，使用EaselJS添加文字和图形非常的简单。
1.添加文字
var txt = new createjs.Text(&HELLO&,&20px Times&,�&);
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(�&);
g.beginFill(&red&);
g.drawCircle(0,0,30);
使用new createjs.Graphics();创建g变量后，即可调用Graphics内置的方法来绘制图形，例如beginStrokeStyle(�&)是设置边框颜色，beginFill(&red&)是设置填充的颜色，最后drawCircle(0,0,30)是在（0，0）位置绘制一个半径30的圆，drawRect(0,0,100,150);是在（0，0）位置绘制一个100*150的方形，同时所有的方法可以一起调用，例如：
var graphics = new createjs.Graphics().beginStroke(�&).beginFill(&#ff0000&).drawRect(0, 0, 100, 100);
这样就获得了一个用来渲染Shape的画笔graphics，使用之即可获得一个黑色边框的红色正方形：
var graphics = new createjs.Graphics().beginStroke(�&).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(�&).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(�&,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&,�&);
label.textAlign = 'center';
label.textBaseline = 'middle';
var shape = new createjs.Shape();
shape.graphics.beginFill(&#ff0000&).drawCircle(0, 0, 50);
shape.shadow =
new createjs.Shadow(�&,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()。一个比较常用的方法也是一个最简单的游戏框架一般都是这样。
function init(){
stage = new createjs.Stage('game');
stage.enableMouseOver();
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
function update(event){
stage.update();
当然可以直接使用
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中）
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,
var drawingC
var oldPt;
var oldMidPt;
function init() {
canvas = document.getElementById(&myCanvas&);
index = 0;
colors = [̼b20&, &#b0ac31&, &#cbc53d&, &#fad779&, &#f9e4ad&, &#faf2db&, 򉤸&, b4a0b&, &#d36600&, &#fe8a00&, &#f9a71f&];
//check to see if we are running in a browser with touch support
stage = new createjs.Stage(canvas);
stage.autoClear =
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&, 򽸱&);
title.x = 300;
title.y = 200;
stage.addChild(title);
stage.addChild(drawingCanvas);
stage.update();
function handleMouseDown(event) {
if (!event.primary) { }
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) { }
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) { }
stage.removeEventListener(&stagemousemove&, handleMouseMove);
还有些简单的小游戏都可以自己实现，比如：

排名：千里之外
（1）（8）（2）如何使用Createjs来编写HTML5游戏EaselJS简介_百度知道君，已阅读到文档的结尾了呢~~
数据驱动的HTML5 统一动画播放引擎的设计与实现
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
数据驱动的HTML5 统一动画播放引擎的设计与实现
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口如何使用Createjs来编写HTML5游戏TweenJS和Tick动画_百度知道如何使用createjs来编写html5游戏_百度知道