转载地址: http://star.kid-game.cn/forum.php?mod=viewthread&tid=47373
应该很多朋友都知道了SpriteX是J2ME下的一个游戏人物动作编辑器,通过它可以将一组人物连贯动作图片制作成一套完整的动画组。今天呢,我将给大家介绍一下SpriteX在Android下的使用方法。
通过SpriteX,我们能够生成一个sprite(spx)格式的文件,它包含了对图片的切割信息,每次循环中读取切割坐标,在指定位置上就能画出一个动作,那么在极短时间内绘制多幅图,就能产生一个动画的效果。
在这里,为了让没有用过SpriteX的朋友也能迅速上手,首先给大家介绍一下如何使用SpriteX来得到我们所需要的图片的切割数据(spx文件)。
我们使用的是SpriteX3.9.6版本,这是一个它的界面。左半部分是要处理的图片,右半部分是要编辑的动画区域。
# u3 l" b' Q' I% J# `; u) Q' k- J
. }% a3 F; |5 h
由于这个版本的SpriteX一次只能读取一张图片,如果我们手头的人物动作套图是单张的,那么需要先用PHOTOSHOP处理一下。我这里选择了一套《东方绯想天》中十六夜咲夜(女仆长大爱~~)的行走图,一共9张,我们将它们到PHOTOSHOP中组合一下。新建一个大概700 X 300的透明图层。
& ^. F! M7 h P. J
, ^4 E1 z9 l, R! v) s
# z+ k+ u# @1 @
好的组合完了,保存成PNG的。# j7 j/ @ e$ F4 K9 g; O3 h
5 K) V/ J, e) N2 R- F, Q8 A& p
# I$ S, B3 O9 S! j7 [$ M
我们将这个合成后的图导入到 SpriteX 中。 点击这个图标( PS:SpriteX 默认是英文的,在工具( tools )中能够设置语言成为中文),找到刚才合成的组图,打开它。 # ^( F+ W, B: y! J. U% E8 J
* {" e5 `$ u q% S9 T% k* V \3 k0 ^
% r7 w% @; u! m- _- v* m7 U
这样在右边的绿色界面就能得到我们刚才的图了。 下面我们点击左边窗口的裁剪图块工具。
0 |: G+ J5 [9 S0 C7 H9 K! d8 Q
; S6 J9 K* u1 U6 J
将鼠标移动到图片上,会出现一个红色的选框和基准线。我们在人物的边缘拖动鼠标,会出来一个方框。
6 z, G. [1 Y/ T4 E: C
2 U' i, P( p+ t
( c: H/ q5 }9 p' }; p8 O" @. F
像这样,将一个人物完全包裹住。(当然,如果你的人物组图比较分散,在人物上直接点击左键,会自动将人物给包裹住的。如果想删除已经拖出的框,可以使用裁剪图块下面的橡皮工具,或者直接在选框中点击右键即可。如果人物图比较小,下方有放大和缩小的工具可以使用)。 当所有人物都处理好后,我们单击右边黑色口的任意地方,进入到动画帧的编辑状态,此时右边的工具栏处于激活状态。 " \/ T4 o1 O- `, w! G
现在点击第一个工具,创建一个帧。 这里,我一次性创建 9 个,因为女仆长的行走动作是9张图。 0 ?0 [) t! M: O. u, ]" _
9 s/ | S, _# e0 k: D( i7 X/ J
( C% u3 u" t, [6 G/ w2 D
! o$ K% }+ o. | S
+ H1 l- T- D; R: h) P1 n
可以看到,有了 9 个空白帧。 这时,我们再点击左边的窗口,进入到左边窗口的编辑模式,点击箭头工具。 1 s2 M* s4 O* y" {
( a g( s- w0 n+ L+ J, |: G
这样就可以拖动人物了。我们先把第一个人物拖动到右边第一个帧的小窗口内, 双击这个小窗口。 就可以对这个人物进行位置的布置了。
1 T4 h4 h' A' A
@* v/ u5 J4 i, O) R" b* Z* e: [7 [% y3 K
因为是人物连贯动作,我们需要把人物置于同一个位置上。 这里为了方便对齐,在右边工具栏中提供了一些自动对齐的工具。我们需要点中人物才能使用这些工具。 ( Q) w; ~; G& Z' T5 s) _
* F/ w& e* j7 o: g- S
: V, P5 X& z0 @9 a. k& {
这里我们让人物水平且垂直居中就可以了。
. g- c% K4 l" E7 S8 A
当编辑好一个人物的时候,双击人物以外任何地方,即可还原窗口。 我们依次处理剩下的图片。所有人物处理好后,我们点击 编辑动作按钮,或者在动作菜单中打开编辑。
; R* L$ }9 j3 Q9 [3 \/ u- M
可以看到这样一个动画编辑的窗口。
6 s! [) {2 ~+ K2 d* D
; s, a/ m& d3 A9 J5 u9 o
. R" p; z- \0 B, U1 b# u
点击新建动作创建一个动作。然后选中这个动作。
+ q+ Q: j) [ D, N' R
& m9 _3 @0 L+ F' B/ N
! t6 O F/ g/ t% I! M
选中这个动作后,再选中帧窗口的所有帧, 将他们添加进序列中。
h3 ~( @" _/ r+ Q! w* O' h) z
接着,我们就可以在这个动作编辑窗口预览了。
1 是一些播放动画的控制按钮,这里也可以将这组动画变成 GIF ,或者选择导出,即可得到包含了切割图片数据和动画数据的 sprite ( spx )文件,这个后面再详细介绍。 2 号是用来控制动画速度的,只对动画预览起作用,要是控制图片在程序中的切换速度,那么需要在动作窗口中选择延迟,再在帧列表中设置延迟时间。其他功能大家可以自己试着调试。调色板是针对导出的图片中的背景色的,这里没什么用,就点击透明色后不管就行了。
3 号就是我们动画的预览界面了,左边是 1 倍大小,右边是 3 倍大小视图。 设置好后我们就可以导出了,点击导出数据。 - d6 }1 C" f1 [( A3 o7 d
第一个对话框是让我们保存 sprite ( spx )文件,第二个框是保存我们导入的原始图片(注意,在保存图片的时候,一定要注意保存成 PNG 格式,否则默认是 BMP 格式的,有背景色)。保存完成后,我们就有了一个 sprite ( spx )文件和一张 PNG 图(这个图是不能使用的,因为切割点的数据是根据导入的原图计算的,只能使用原图)。 额外讲一个小功能,在左边图片处理窗口有个组合碎片和自动排列碎片,会将我们的图片紧密的贴合在一起。 . |. ~( x2 _+ l/ O3 u1 j
这个功能能够大大缩小我们的图片体积,将这个图片导出后,再按照上述步骤对这个图片处理一次,我们就能使用这个排列后的图片了,有助于我们减少图片的体积。 : s; `! h! j6 d: [. I2 p2 b
额外说一句,在每个帧中可以放入多张图片,这样也就给我们一个思路,可以将一个动作中具有相同样式的部位单独切割成一个块,也就是把人物按照部位分解成若干块,在每个帧中将这些块拼接成一个完整的人物,这样一来就可以进一步的缩减图片资源所占用的空间。不过这种事一般美工才能干的出来,程序猿同志们就算了吧。。。