关闭

失业矿工的博客

我是名矿工,曾经是,后来国有变成私有,领导变成老板,老板掏空企业,企业玩完,矿工失业。
11
原创
1
转载
0
译文
11
评论
22781
访问

2015八月
05

如何使用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播放完成后进入a1
             speed: 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后就会发现,数字变成你提供的图片样式。






img

lanix516

等级:

排名:千里之外

博客专栏
文章分类
文章存档
阅读排行
评论排行
推荐文章
最新评论
img