您目前使用的浏览器该进博物馆啦~~~
为了更佳的浏览体验，请使用现代浏览器访问本站
Outdated Browser
您的浏览器已禁用 Javascript，启用它获得更好的体验。
Outdated Browser
这是为桌面用户准备的工具，但您可以安心在这里浏览
46.5% 的互联网用户在使用 此款浏览器
GOOGLE CHROME
支持如下操作系统
16.5% 的互联网用户在使用 此款浏览器
MOZILLA FIREFOX
支持如下操作系统
21.6% 的互联网用户在使用 此款浏览器
INTERNET EXPLORER
支持如下操作系统
10.3% 的互联网用户在使用 此款浏览器
APPLE SAFARI
支持如下操作系统
1.5% 的互联网用户在使用 此款浏览器
支持如下操作系统
冷静 这是为桌面用户提供的不是为手机用户提供的如何使用Createjs来编写HTML5游戏（三）使用EaselJS中的制作Sprite类制作 - 博客频道 - CSDN.NET
失业矿工的博客
我是名矿工，曾经是，后来国有变成私有，领导变成老板，老板掏空企业，企业玩完，矿工失业。
分类：Html5/Createjs
&一，使用Sprite制作动画
&&&&& 动画的制作原理据说是由于人的视觉残留效应，连续播放一系列的静止图片，即可获得一段动画，每张图片可以称作动画的一帧，可以参考Gif动画的原理。在EaselJS中，提供了一个Sprites类，可以用来创建动画。创建Sprite同创建其他EaselJS对象实例一样，只需要调用new createjs.Sprite(SpriteSheet);
很显然，需要使用SpriteSheet来创建Sprite，那么SpriteSheet又是什么呢？可以理解为一个运行动画所需要的数据集合，包含动画的原始图像（一般都是将动画的每一帧合并为一个大图），每一帧的尺寸数据，以及动画的帧数（每个动画的名称及包含那几个帧）。
如何来构造一个SpriteSheet呢？在EaselJS中，首先要创建一个用于创建的SpriteSheet的数据集合作为参数，包含定义Spritesheet所必须的信息，一般情况看起来是这样的：
var data = {
//动画所需要的图像路径
//可以是多个图片路径组成的列表
&images&:[image.png],
//定义每一帧的数据，宽高等等，形成动画的每一帧
//有两种方法，如果所有的帧的尺寸相同，只需要统一定义
&frames&:{width:, height:, count:, regX: , regY:}
//如果帧数据的尺寸不同，分别定义即可
// x, y, width, height, imageIndex, regX, regY,这里的imageIndex对应“images”列表中的图片索引
[0,0,64,64,0,32,64],//frames0
//创建动画，动画的名字，以及对应&frames&列表中的哪些帧，也有两种方法
&animations&:{
a1:[frame0,framen]}//a1动画从第一帧运行到第n帧
//也可以单独列出一个动画所需要的帧数
，同时定义动画完成后的动作，速度等等
animations: {
frames: [1,,3,5,7],
next: &a1&,//a2播放完成后进入a1
speed: 2//速度
以中第一个Demo1为例，首先它的图片看起来大体是这样的
有了这样的图片，就可以通过SpriteSheet来创建一个Sprite动画。
第一步，创建构造Spritesheet
先创建SpriteSheet的参数，
var data = {
&images&:[&./spritesheet_grant.png&],//图片路径
&frames&:{&height&: 292, &width&: 165, &count&: 64,®X&: 82,
®Y&: 0},//每帧的尺寸，count是总帧数
&animations&:{
&run&: [0, 25, &run&, 1.5],//[开始帧，结束帧，动画完成后的动作，速度]
&jump&: [26, 63, &run&]
对参数必须包含的三项，images,frames, animations采用合适的方式赋值，参数构造完成后调用
var spriteSheet = new createjs.SpriteSheet(data);
现在你有了一个spritesheet示例，随后就可以来创建一个sprite动画了，这里有两种方法：
sprite = new createjs.Sprite(spriteSheet);
sprite.gotoAndPlay(&run&);
sprite = new createjs.Sprite(spriteSheet，&run&);
最后把sprite添加到stage当中即可
stage.addChild(sprite);
现在你的页面上就有了一个不断走动的小人。
关于动画Sprite的使用，有几个特别的地方
1.可不可以构造一个只有一帧的动画？
只有一帧的动画，其实就是一个静止的图片。很多时候，尤其是编写前端CSS是，很多人喜欢把用到的所有图片合成为一个大图，在使用Createjs制作游戏时也是一样，把用的图片合成为一个大图，然后使用sprite把其中的每个图片分解出来，当然你也可以用Bitmap中的Rectangle来选取部分图片。比如有一个素材的图片包含你的游戏用到的所有图：
使用Sprite把图片逐个分离出来，代码看起来是这样的：
var data2 = {
&images&:[&./mario.png&],
&frames&:[
[2, 2, 32, 32],
[34, 2, 32, 32],
[66, 2, 32, 32],
[100, 2, 32, 32],
[2, 34, 32, 32],
[34, 34, 32, 32],
[66, 34, 32, 32],
[100, 34, 32, 32],
&animations&:{
&wall&:[0],
&gold&:[1],
&key&:[2],
&head&:[3],
&flag&:[4],
&mush&:[5],
&mario&:[6],
&tube&:[7]
var marioSheet = new createjs.SpriteSheet(data2);
好了，所有的图片都被分解为8个帧，而在“animations”中又分别创建了8个单帧的动画，然后你获得了一个marioSheet，当你有了这个marioSheet之后，游戏制作中需要那个图片时，只需要调用
= new createjs.Sprite(marioSheet,&wall&);
var gold = new ceatejs.Sprite(marioSheet,&gold&);
使用起来方便不少，而且便于管理。
2.怎么把所有图片合成到一个大图？
可以用photoshop，如果你会的话，通常我是用一个叫做TexturePacker的软件
下载安装后可以试用，选择EasalJS/CreateJS格式。它不但可以合成图片，而且可以生成一个json格式的数据，此处有惊喜。
把你制作游戏中用到的图片都拖进来，或者直接选择图片目录即可，点击publish sprite sheet，在你选定的目录中就会出现你想要的合成图片和一个json文件，打开json后你会惊讶的发现，它看起来非常眼熟，是不是很像你在构建SpriteSheet时使用的参数data，把需要的部分复制出来，让构建SpriteSheet变非常简单。（其实可以使用preloadJS直接载入这个json文件）
3.怎么获得一个连续动做的图片？
像制作Gif动画一样，当你想做一个这样的GIF
显然你需要录制很多熊猫不同动作的图片，然后组合到一起顺序播放，CreateJS官方提供的工具中，使用zoe工具可以把flash文件转变为sprite（这就是亲儿子的力量）。
最妙的是，同TexturePacker一样，使用zoe转化后，你将获得一个所有连续动作组成的大图，和一个json数据。
4.当一个动画播放完毕，如何删除这个动画
假设你有个飞机爆照效果的动画Sprite，飞机被击中后爆炸，当然只会爆照一次，动画播放完成后，必须在舞台Stage中删除这个动画，怎么才能让舞台在动画播放完成时收到通知并删除它呢？
在官方的API中，每个类的都有自己可以对应的事件event，打开Sprite页面，在event中可以看到animationend事件，就是动画播放结束所触发的，当你想在动画播放结束时删除掉这个动画，只需要：
sprite.addEventListener('animationend',function(event){
stage.removeChild(event.target);
所有的时间相应函数都有一个event参数，其中的event.target指向触发事件的元素。这样在动画结束后，就被从舞台上删除了。
二，使用BitmapText来制作图片字母或数字
CreateJS中所有的字符显示都可以通过Text类完成，虽然可以设置字体，不过有时候也许你想让他看起来更cool些，假设现在你想做一个电子表样式的记分牌，像这样
或者你发现了一些更酷的创意字体，比如这样的
想把他们用到你得游戏当中，这时候你需要用到BitmapText类
同Sprite一样，要创建一个BitmapText实例，首先要创建一个SpriteSheet作为参数，（以我的数字图片为例）
var data = {
&images&:[&./num.png&],
&frames&:[
[2, 2, 34, 41],
[34, 176, 22, 43],
[36, 45, 26, 41],
[34, 88, 24, 41],
[2, 45, 32, 41],
[34, 131, 22, 43],
[2, 174, 30, 41],
[38, 2, 24, 41],
[2, 131, 30, 41],
[2, 88, 30, 41]
&animations&:{
var ss = new createjs.SpriteSheet(data);
同用来定义Sprite的SpriteSheet格式一样，只是在定义“animations”时把动画的名字定义为对应的字符，这里是数组，如果是字符的话，动画的名字就应该是'a','b'......
var scoreTxt = new createjs.BitmapText(score.toString(), ss);//为了运算方便，我的score变量是数字，这里首先转化成字符
这样当你载入scoreTxt后就会发现，数字变成你提供的图片样式。


排名：千里之外
（1）（8）（2）createjs（13）
tick本来的意思是钟表的滴答声，在createjs中的Ticker当然就是于时间相关的。
Ticker是一个静态类，提供了好多静态方法和属性，不要去实例化它。
在API文档中对Ticker的介绍是它是一个集中的间隔广播，侦听tick时间后再设定的时间间隔会调用侦听函数。
但是我觉着在Beginning HTML5 Games with CreateJS这本书中的解释更好。Ticker类为游戏开发提供了一个主要的定时类。它主要的目的就是把stage渲染的工作集中起来，也就是说定时调用stage.update()这个方法。Ticker设置的频率也就是游戏的帧数了。
要注意一点就是在CPU使用率过高时，Ticker可能会比设定的要慢。这个很容易理解。
Ticker的使用如下，Ticker静态类侦听tick事件，然后设置好相应的函数就行
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
对于更新舞台来说就是，可以先设置一个帧频
createjs.Ticker.setFPS(30)
createjs.Ticker.addEventListener("tick", handleTick)
function handleTick(event) {
stage.update()
也可以这样写
createjs.Ticker.setFPS(30)
createjs.Ticker.addEventListener("tick",stage)
因为addEventListener这个方法是这样的
addEventListener (type listener [useCapture] )
其中参数listener可以是一个方法，也可以是一个对象，这个对象里面有handleEvent这个方法，来出来侦听事件。
而Stage类里面就有handleEvent这个方法，而且就是用来处理tick事件的，看Stage里面的源码就知道
p.handleEvent = function(evt) {
if (evt.type == "tick") { this.update(evt); }
tick事件的event
function handleTick(event) {
在侦听函数中event的数据
1.event.paused 表示ticker是否处于暂停状态
2.event.delta 在上一次tick事件之后到这次事件的时间间隔，以毫秒为单位。
3.event.time 在Ticker被初始化以后的时间总和，以毫秒为单位。
4.event.runTime 在Ticker被初始化以后没有暂停的时间总和，以毫秒为单位。
Ticker类的属性
1.interval
这个就是用来设置间隔的时间，以毫秒为单位。默认为50。
在RAF模式下，这个参数就会被忽略。
2.framerate 这个参数用来直接设置fps，其实内部实现就是设置interval
interval=1000/framerate。
3.maxDelta 指定tick事件中的delta最大值。文档中推荐这个值为interval的两倍。
4.paused 在ticker暂停时，所有的侦听器仍然会接受到tick事件，但是事件中的paused会是true；
createjs.Ticker.addEventListener("tick", handleTick)
createjs.Ticker.paused = true
function handleTick(event) {
console.log(event.paused)
5.timingMode指定tick的timing模式。一共有三种模式，TIMEOUT、RAF和RAF_SYNCHEN。
（1）TIMEOUT，这种模式下使用的就是setTimeOut这个方法实现的。是timingMode的默认模式。
（2）RAF 在这个模式下使用requestAnimationFrame，完全忽略Ticker的帧频。如果requestAnimationFrame API不支持的话就用TIMEOUT模式。
（3）RAF_SYNCHEN 在这个模式下使用requestAnimationFrame，但是试图与ticker的帧频同步。如果requestAnimationFrame API不支持的话就用TIMEOUT模式。
Ticker类的方法
1.getTime ([runTime=false] )
返回Ticker初始化以后的总时间，如果没有初始化就返回-1。（初始化时在添加第一个侦听时进行的）。参数runTime表示返回的是否包含暂停时间，true的话只有tick运行的时间，false的话是所有时间。
2.getEventTime (runTime )
和getTime差不多，但是返回的是最近一次tick事件的时间。
3.getMeasuredFPS() 获得当前的实际帧频。
4.getMeasuredTickTime 获得平均一次tick所有的时间，大概就是在这一次tick所用的时间。
5.getTicks (pauseable)
获得初始化后所有tick的次数 参数表明是否包含暂停的tick
6.reset() 停止Ticker并且移除所有的侦听。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：6679次
排名：千里之外
原创：29篇
(2)(12)(1)(1)(5)(4)(6)cocos2d-js 和 createjs 性能对比（HTML5）-爱编程
cocos2d-js 和 createjs 性能对比（HTML5）
cocos2d-js除了做native游戏外，还可以用来做HTML5游戏/动画，那么它跟adobe的createjs框架比较会怎么样呢？
（背景知识：createjs是adobe支持的HTML5框架，沿用了Flash的思想，实现了最基本的显示列表和事件机制，是一个非常轻量的框架。createjs暂时只有canvas 2d版本，webgl版本还没完成。）
1背景，上排5个小人播放SpriteSheet动画（14帧位图轮播），下排5个小人不断做旋转和缩放。其中小人是带透明的png，尺寸为85*121px。
在PC的chrome运行，cocos2d-js和createjs都能满帧60fps，轻松搞掂无压力。
cocos2d-js：
for (var i = 0; i & 5; i++) {
var man = new cc.Sprite("res/grossini.png");
man.runAction(cc.spawn(cc.rotateBy(1, 360, 360), cc.sequence(cc.scaleTo(1, 2), cc.scaleTo(1, 1))).repeatForever());
this.addChild(man, 2);
man.x = size.width/6*(i+1);
man.y = size.height/5;
for (var j = 0; j & 5; j++) {
var man = new cc.Sprite();
var animation = new cc.Animation();
for (var i = 1; i &= 14; i++) {
animation.addSpriteFrameWithFile("res/grossini_dance_" + (i & 10 ? ("0" + i) : i) + ".png");
animation.setDelayPerUnit(1 / 7);
man.runAction(cc.animate(animation).repeatForever());
man.x = size.width/6*(j+1);
man.y = size.height / 3 * 2;
this.addChild(man, 3);
createjs：
for (var i = 0; i & 5; i++) {
var man = new createjs.Bitmap("../res/grossini.png");
man.regX = 42;
man.regY = 60;
man.x = canvas.width/6*(i+1);
man.y = canvas.height/5*4;
man.scaleX = man.scaleY = 1;
stage.addChild(man);
createjs.Tween.get(man, {loop: true}, true)
.to({rotation: 360, scaleX:2, scaleY:2}, 1000).to({rotation: 360, scaleX:1, scaleY:1}, 1000);
var images = [];
for (var i = 1; i &= 14; i++) {
images.push("../res/grossini_dance_" + (i&10?("0"+i):i) + ".png");
for (var j = 0; j & 5; j++) {
var sheet = new createjs.SpriteSheet({
images: images,
frames: {width: 85, height: 121, regX: 42, regY: 60}
}); //需要设置每帧的宽高，注册点信息
var man = new createjs.Sprite(sheet);
man.framerate = 60/7;
man.x = canvas.width/6*(j+1);
man.y = canvas.height / 3;
man.play();
stage.addChild(man);
由于播放帧动画都需要不断的替换贴图，是否使用GPU加速差别不大，所以接下来只使用旋转放缩来测试两个框架的效率区别。
基于实验一，改为使用2个图，每个图新建2000个实例放到舞台上，分别做旋转放缩的缓动变化。实验二继续在PC的chrome中运行。
cocos2d-js：使用webGL，帧频不断变化，最高有55fps，最低只有29fps。
如果让cocos2d-js强制在canvas 2d模式下渲染，帧频只有26fps左右。
createjs：使用canvas 2d渲染，保持在28fps。
在这个实验中，两者差异的原因主要是cocos2d-js使用了webgl渲染，可以让部分矩阵计算放到GPU，而createjs使用纯canvas 2d渲染，只能依赖CPU计算矩阵变换，导致每帧的计算超过了重绘时间间隔，导致了帧频降低。
接着，我们再做一个手机canvas的实验，测试机是小米1 Android 2.3，可谓是低端情况的canvas 2d，代表了一大批山寨机水平吧。
判断当前帧频，如果帧频大于30，则添加20个运动的小人到舞台上，直到帧频低于30才停止。
cocos2d-js在UC浏览器上运行，勉强支撑40个小人，帧频13到23fps之间波动。
createjs情况就没有在PC chrome那么风光了，运行20个小人就已经卡得掉牙了，只有10到15fps。
通过这个实验可以发现，手机的canvas性能真心不行，包括UC浏览器和微信内嵌的浏览器。这可能是手机CPU性能带来的主要瓶颈吧，所以在手机上只能多依赖GPU，要么发布为native，要么只给iOS 8（带webgl）的高帅富使用。
有兴趣的朋友，可以拿起手机扫一下，看看你的手机测试情况如何，跟个贴。
cocos2d-js：
createjs：
总体来说，由于cocos2d-js可以在webgl上渲染，所以性能会比createjs要好。单纯比较在canvas 2d上的渲染来说，createjs和cocos2d-js不相伯仲，没太大区别，尤其在手机（Android）上基本都是废物，手机的canvas2d游戏/动画只能尽量避免全屏重绘，减少每帧的变化。
再考虑框架的附加能力方面，cocos2d-js框架提供的UI编辑器、粒子系统、骨骼动画、瓦片地图等等，都是createjs这个轻量级选手不具备的，createjs只能从零开始，一切都得靠开发者自行实现。因此，cocos2d-js更适合做中大型游戏（大型指的是游戏画面复杂程度，而不是渲染要求高），而createjs更适合做小游戏，例如神经猫级别。
本文的代码可以在/kenkozheng/cocos/cocos_vs_createjs中找到。
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。Html5游戏框架createJs的简单用法 - W·Axes【站长博客网】
Html5游戏框架createJs的简单用法 - W·Axes
作者：冰河 来源：博客园精华区 时间： 23:05
声明：本文为原创文章，如需转载，请注明来源 WAxes ，谢谢！ 楼主记忆力不好，最近刚好用了一下createJs框架，怕以后一段时间没用后会忘记，所以在此做个记录，或许以后用得着。
相关推荐：
声明：本文为原创文章，如需转载，请注明来源
楼主记忆力不好，最近刚好用了一下createJs框架，怕以后一段时间没用后会忘记，所以在此做个记录，或许以后用得着。
createJs网上的中文教程挺少的，以前UC有个Xcanvas的论坛有createJs的详细教程，但是随着XCanvas团队的解散，那个网站也关闭了。。网上的大部分都是非常基础的教程，有点千遍一律的感觉。所以楼主就去把createJs下载下来，硬着头皮看英文文档了。凭着楼主这英语六级只考了三百多分的渣渣来说，看起来很费力啊，不过还是勉强摸索出了大概的用法。所以现在就是学了多少就记录多少，之后或许也会不定期更新一下该框架的新的学习心得。毕竟对自己以后还是有帮助的。
希望本文能帮到那些想学createJs的新手。因为楼主也是刚学的，所以本文或许有不正确之处，因此本文仅当参考，若有不正之处欢迎斧正。
闲话说到这，直接进入主题。
楼主用createJs写了个简单的跑酷游戏DEMO，就拿它做例子吧。&
createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。
首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。
接下来开始分析代码：
首先引入js文件
&script src=&easeljs-0.7.1.min.js&&&/script&
&script src=&preloadjs-0.4.1.min.js&&&/script&
然后进行舞台初始化操作：
function init(){
stage = new createjs.Stage(&cas&);
C_W = stage.canvas.
C_H = stage.canvas.
var manifest = [
{src:&image/man.png& , id:&man&},
{src:&image/ground.png& , id:&ground&},
{src:&image/bg.png& , id:&bg&},
{src:&image/high.jpg& , id:&high&},
{src:&image/coins.png& , id:&coin&}
loader = new createjs.LoadQueue(false);
loader.addEventListener(&complete& , handleComplete);
loader.loadManifest(manifest);
drawLoading();
上面就用到了preloadJs中的方法，实例化一个loader，把需要加载的图片文件放在manifest里面，进行加载，加载完成后调用回调handleCompelete函数：
function handleComplete(){
//当图片素材load完后执行该方法
var manImage = loader.getResult(&man&),
lowground = loader.getResult(&ground&),
highground = loader.getResult(&high&),
bgImage = loader.getResult(&bg&),
coins = loader.getResult(&coin&);
sky = new createjs.Shape();
sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);
sky.setTransform(0, 0, 1 , C_H/bgImage.height);
stage.addChild(sky);
man = createMan(200,326,manImage);
//该框为判定角色的判定区域
kuang = new createjs.Shape();
kuang.graphics.beginStroke(&rgba(255,0,0,0.5)&).drawRect(0 , 0 , man.size().w , man.picsize().h*1.5);
// stage.addChild(kuang);
mapHandle(lowground , highground , coins);
createjs.Ticker.timingMode = createjs.Ticker.RAF;//设置循环方法，可以是requestAnimationFrame或者是setTimeout
createjs.Ticker.setFPS(30);//舞台帧率控制
createjs.Ticker.addEventListener(&tick&, tick);//绑定舞台每一帧的逻辑发生函数
window.addEventListener(&keydown& , function(event){
event = event||window.
if(event.keyCode===32&&man.jumpNum&man.jumpMax){
man.jump();
大家感兴趣的内容
最近更新的内容
