如何使用Createjs来编写HTML5游戏（三）使用EaselJS中的制作Sprite类制作

一，使用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:}
//如果帧数据的尺寸不同，分别定义即可
frames: [// 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: {a2: {frames: [1,,3,5,7],next: "a1",//a2播放完成后进入a1speed: 2//速度
}

以官方示例中第一个Demo1为例，首先它的图片看起来大体是这样的

有了这样的图片，就可以通过SpriteSheet来创建一个Sprite动画。

第一步，创建构造Spritesheet

先创建SpriteSheet的参数，

var data = {"images":["./spritesheet_grant.png"],//图片路径"frames":{"height": 292, "width": 165, "count": 64,"regX": 82,  "regY": 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之后，游戏制作中需要那个图片时，只需要调用

var  wall  = new createjs.Sprite(marioSheet,"wall");
var gold = new ceatejs.Sprite(marioSheet,"gold");
等等

使用起来方便不少，而且便于管理。

2.怎么把所有图片合成到一个大图？

可以用photoshop，如果你会的话，通常我是用一个叫做TexturePacker的软件https://www.codeandweb.com/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":{"0":[0],"1":[1],"2":[2],"3":[3],"4":[4],"5":[5],"6":[6],"7":[7],"8":[8],"9":[9]}}var ss = new createjs.SpriteSheet(data);

同用来定义Sprite的SpriteSheet格式一样，只是在定义“animations”时把动画的名字定义为对应的字符，这里是数组，如果是字符的话，动画的名字就应该是'a','b'......

然后创建

var scoreTxt = new createjs.BitmapText(score.toString(), ss);//为了运算方便，我的score变量是数字，这里首先转化成字符

这样当你载入scoreTxt后就会发现，数字变成你提供的图片样式。

如何使用Createjs来编写HTML5游戏（三）使用EaselJS中的制作Sprite类制作相关推荐

如何使用Createjs来编写HTML5游戏（一）EaselJS简介
CreateJS CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. C ...
如何使用Createjs来编写HTML5游戏（八）通过继承扩展EaselJS中的基础元素
从我第一天了解到javascript开始,就听说在这里是没有类的.其实一开始我是沮丧的,尽管我并不知道有没有"类"对编程究竟有多大影响,不过有缺憾总是让人感觉遗憾,哪怕这是一个你可 ...
如何使用Createjs来编写HTML5游戏（二）使用EaselJS处理图片
如何使用EaselJS载入图片并进行简单的处理除了使用EaselJS中的Shape()来创建图形,EaselJS中还提供Bitmap可以很方便的载入图片,同Shape一样只需要创建一个Bitmap实 ...
如何使用Createjs来编写HTML5游戏（六）完成一个简单的打飞机游戏（上）
打飞机游戏雷电是一款经典的空战游戏,利用已知的CreateJS知识就可以很容易的做出一款类似的打飞机游戏. 首先,弄一些游戏需要的资源,做这样的一个小游戏,首先需要一架玩家操控的飞机图片,然后是可以击 ...
html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动...
第三篇,鼠标事件与游戏人物移动一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
HTML5游戏从轻度转向中重度-9秒学院
两年前HTML5热传到中国,行业随即掀起了Web App和Native App的生死论战,然而HTML5游戏真正走红其实是在2014年<围住神经猫>.<看你有多色>等刷爆朋友圈 ...
用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
C语言，期末复习之编写程序返回三个整数中的中间数
题目如下: 代码如下: #include <stdio.h> int mid(int a, int b, int c); int main(){int a, b, c,Mid;printf ...
QQ空间玩吧HTML5游戏引擎使用比例分析
GameLook报道/"Cocos 2015开发者大会(春季)"于4月2日在国家会议中心圆满落下帷幕.在会上全新的3D编辑器,Cocos Runtime等产品重磅公布,给业界带来了 ...

如何使用Createjs来编写HTML5游戏（三）使用EaselJS中的制作Sprite类制作

如何使用Createjs来编写HTML5游戏（三）使用EaselJS中的制作Sprite类制作相关推荐

最新文章

热门文章