星组游戏论坛 › 论坛 › ≡平台主机≡ › 『Android/Unity平台』 › 在Android使用SpriteX动作编辑器的方法(图文)

查看: 10008|回复: 14

[心得] 在Android使用SpriteX动作编辑器的方法(图文) [复制链接]

MythosMa

星火

Rank: 11

UID: 95061
星币: 5191
积分: 814
阅读权限: 90
注册时间: 2012-12-5
最后登录: 2018-9-29

发表于 2012-12-6 22:26:56 |显示全部楼层

本帖最后由 MythosMa 于 2013-6-26 09:45 编辑

应该很多朋友都知道了SpriteX是J2ME下的一个游戏人物动作编辑器，通过它可以将一组人物连贯动作图片制作成一套完整的动画组。今天呢，我将给大家介绍一下SpriteX在Android下的使用方法。

通过SpriteX，我们能够生成一个sprite（spx）格式的文件，它包含了对图片的切割信息，每次循环中读取切割坐标，在指定位置上就能画出一个动作，那么在极短时间内绘制多幅图，就能产生一个动画的效果。

在这里，为了让没有用过SpriteX的朋友也能迅速上手，首先给大家介绍一下如何使用SpriteX来得到我们所需要的图片的切割数据（spx文件）。

我们使用的是SpriteX3.9.6版本，这是一个它的界面。左半部分是要处理的图片，右半部分是要编辑的动画区域。

6 `! U5 g' F% V/ M% `9 Z- J

图1.png

由于这个版本的SpriteX一次只能读取一张图片，如果我们手头的人物动作套图是单张的，那么需要先用PHOTOSHOP处理一下。我这里选择了一套《东方绯想天》中十六夜咲夜（女仆长大爱～～）的行走图，一共9张，我们将它们到PHOTOSHOP中组合一下。新建一个大概700 X 300的透明图层。

; N" u" O$ g8 O5 V+ A( C: V6 t

图2.png

好的组合完了，保存成PNG的。

图3.png

我们将这个合成后的图导入到SpriteX中。点击这个图标（PS:SpriteX默认是英文的，在工具（tools）中能够设置语言成为中文），找到刚才合成的组图，打开它。

图4.png

图5.png

这样在右边的绿色界面就能得到我们刚才的图了。下面我们点击左边窗口的裁剪图块工具。

图6.png

将鼠标移动到图片上，会出现一个红色的选框和基准线。我们在人物的边缘拖动鼠标，会出来一个方框。

图7.png

图8.png

图9.png

像这样，将一个人物完全包裹住。（当然，如果你的人物组图比较分散，在人物上直接点击左键，会自动将人物给包裹住的。如果想删除已经拖出的框，可以使用裁剪图块下面的橡皮工具，或者直接在选框中点击右键即可。如果人物图比较小，下方有放大和缩小的工具可以使用）。当所有人物都处理好后，我们单击右边黑色口的任意地方，进入到动画帧的编辑状态，此时右边的工具栏处于激活状态。

图10.png

现在点击第一个工具，创建一个帧。这里，我一次性创建9个，因为女仆长的行走动作是9张图。

图11.png

图12.png

可以看到，有了9个空白帧。这时，我们再点击左边的窗口，进入到左边窗口的编辑模式，点击箭头工具。

图13.png

这样就可以拖动人物了。我们先把第一个人物拖动到右边第一个帧的小窗口内，双击这个小窗口。就可以对这个人物进行位置的布置了。

图14.png

图15.png

因为是人物连贯动作，我们需要把人物置于同一个位置上。这里为了方便对齐，在右边工具栏中提供了一些自动对齐的工具。我们需要点中人物才能使用这些工具。

图16.png

这里我们让人物水平且垂直居中就可以了。

图17.png

当编辑好一个人物的时候，双击人物以外任何地方，即可还原窗口。我们依次处理剩下的图片。所有人物处理好后，我们点击编辑动作按钮，或者在动作菜单中打开编辑。

: n3 {* L A3 i7 l

图18.png

可以看到这样一个动画编辑的窗口。

图19.png

点击新建动作创建一个动作。然后选中这个动作。

图20.png

图21.png

选中这个动作后，再选中帧窗口的所有帧，将他们添加进序列中。

; Q6 _5 \1 p' m$ r

图22.png

接着，我们就可以在这个动作编辑窗口预览了。

图23.png

1是一些播放动画的控制按钮，这里也可以将这组动画变成GIF，或者选择导出，即可得到包含了切割图片数据和动画数据的sprite（spx）文件，这个后面再详细介绍。 2号是用来控制动画速度的，只对动画预览起作用，要是控制图片在程序中的切换速度，那么需要在动作窗口中选择延迟，再在帧列表中设置延迟时间。其他功能大家可以自己试着调试。调色板是针对导出的图片中的背景色的，这里没什么用，就点击透明色后不管就行了。
3号就是我们动画的预览界面了，左边是1倍大小，右边是3倍大小视图。设置好后我们就可以导出了，点击导出数据。

图24.png

第一个对话框是让我们保存sprite（spx）文件，第二个框是保存我们导入的原始图片（注意，在保存图片的时候，一定要注意保存成PNG格式，否则默认是BMP格式的，有背景色）。保存完成后，我们就有了一个sprite（spx）文件和一张PNG图（这个图是不能使用的，因为切割点的数据是根据导入的原图计算的，只能使用原图）。额外讲一个小功能，在左边图片处理窗口有个组合碎片和自动排列碎片，会将我们的图片紧密的贴合在一起。

图25.png

   这个功能能够大大缩小我们的图片体积，将这个图片导出后，再按照上述步骤对这个图片处理一次，我们就能使用这个排列后的图片了，有助于我们减少图片的体积。
   额外说一句，在每个帧中可以放入多张图片，这样也就给我们一个思路，可以将一个动作中具有相同样式的部位单独切割成一个块，也就是把人物按照部位分解成若干块，在每个帧中将这些块拼接成一个完整的人物，这样一来就可以进一步的缩减图片资源所占用的空间。不过这种事一般美工才能干的出来，程序猿同志们就算了吧。。。
   得到切割数据文件后，我们就可以把它用在我们的Android代码中了。在附件的SpriteX工具中已经包含了在J2ME下解析sprite（spx）文件的代码，而Android中是没有J2ME中的一些工具类的。
   不过没关系，这里可以告诉大家，在程序提供的解析代码中，我们将它的Grahpic类替换成Android中的Cavas类，将Image类替换成Bitmap，不使用它原来的绘图方法，而是自己传入canvas画布去画等等
   具体可以自己尝试，或者参考附件中的工程，里面的SpriteX3_9_6类就是在J2ME基础上改来的。而mySprite类是在SpriteX3_9_6基础上经过简化得到的。SpriteX和Image类是综合使用的，是参考了一个开源的项目代码改过的，而这个方案提供的功能比较多，有兴趣可以自己研究。

图26.png

需要注意的是，sprite（spx）文件需要放在“asset”文件夹下，而原始图片需要在“asset”文件夹下放置（用于使用参数为字符串的图片名的构造函数使用），在res/drawable-nodpi文件夹下放置（用于使用资源文件创建Bitmap对象）。当程序运行之后，我们就会看到可爱的女仆长在屏幕中走动的样子了～～～～

图27.png