设为首页收藏本站
机战Z2破界篇 星组汉化 下载

星组游戏论坛

 找回密码
 注册(QQ注册+邀请注册)

QQ登录

只需一步,快速开始

查看: 8568|回复: 14

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

Rank: 11Rank: 11Rank: 11Rank: 11

UID
95061
星币
5191
积分
813
阅读权限
90
注册时间
2012-12-5
最后登录
2016-9-7
发表于 2012-12-6 22:26:56 |显示全部楼层
本帖最后由 MythosMa 于 2013-6-26 09:45 编辑
% `9 C, B# c0 \9 F, t5 \- C1 t: w: m! Y! w. p) K) B

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

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

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

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

3 p0 z4 [) p6 \% B' g0 |: o

图1.png

7 Y4 y4 V2 M7 @- U5 _: y

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

4 f4 E/ G& T" m- b7 K

图2.png

0 m7 |! i( F1 P+ ^  A# o

! C7 p- a6 o' v
4 a! k+ j4 x3 A$ H7 K# q! u

     好的组合完了,保存成PNG的。
/ b$ b; s5 B) s( [


4 ^1 f# [: }! {. K& v! m

图3.png

5 H. x& M( I0 T3 n# h- e, {9 o% I" H

2 O# v% m* y, r4 B* {     我们将这个合成后的图导入到SpriteX中。点击这个图标(PS:SpriteX默认是英文的,在工具(tools)中能够设置语言成为中文),找到刚才合成的组图,打开它。2 V+ i: e6 e3 x% u# k5 a: s
2 k6 B" \" f. n0 E% Q

图4.png

6 b! `6 F4 k: j7 k" W7 E

; w  Z  P  W/ i

图5.png


$ x& b7 S5 G+ W5 S. K2 w, F( w7 R- j6 `' Q# q7 ?5 O- f% p+ o

5 L' u* f, Q& B- S: s+ F     这样在右边的绿色界面就能得到我们刚才的图了。下面我们点击左边窗口的裁剪图块工具。, E$ S! p  `) G$ M4 R- W' S
4 \9 `0 c# E$ k; u* t( T; \

图6.png

, R1 b2 Q6 i1 A% G
( ?. d( z$ k5 m5 K0 M' ?) X  @% P* ?
     将鼠标移动到图片上,会出现一个红色的选框和基准线。我们在人物的边缘拖动鼠标,会出来一个方框。
9 [, y7 P0 q: S
$ y9 N0 E& L) e: \# V& d- o

图7.png


4 {4 f& G' W$ P# M, e) t# U# e, u

图8.png

& g! n% V3 b2 z9 A& E" g, c& Z

* f" |3 ?9 O; z- Y
7 x8 R0 X! S( B& J

图9.png

: P) x. c: o  e3 Q: P
3 a  m1 N, l% Y5 F2 |9 l* ^
          像这样,将一个人物完全包裹住。(当然,如果你的人物组图比较分散,在人物上直接点击左键,会自动将人物给包裹住的。如果想删除已经拖出的框,可以使用裁剪图块下面的橡皮工具,或者直接在选框中点击右键即可。如果人物图比较小,下方有放大和缩小的工具可以使用)。 当所有人物都处理好后,我们单击右边黑色口的任意地方,进入到动画帧的编辑状态,此时右边的工具栏处于激活状态。. i1 S% W; c. Z6 N6 f
# b) a. q4 ~$ }) W4 x9 S) L
+ n0 ~9 B: t5 I3 @( Z( n

图10.png

! y  H+ h, B. c% H$ h1 h
( J+ M! ?% ~3 H$ S# C
      现在点击第一个工具,创建一个帧。这里,我一次性创建9个,因为女仆长的行走动作是9张图。6 k3 i1 O. Q) h; c8 j+ I

/ e; [7 R% ]: R

图11.png

4 |1 U4 r2 P6 r6 c# x1 v) C

0 q$ R0 K# x" h& {4 t7 m

图12.png

( W0 z3 h, ~% E. @6 w7 P# ]5 W; _

& u5 k" j5 W3 p& B# Y. x
      可以看到,有了9个空白帧。这时,我们再点击左边的窗口,进入到左边窗口的编辑模式,点击箭头工具。
; s; i. J, D$ h8 Y+ ~0 L5 W9 L
/ A9 K  _1 h: K# Y: z3 I, G& R

图13.png


  a9 _0 X1 z  U# u; l/ X4 t" w9 k% U  F
      这样就可以拖动人物了。我们先把第一个人物拖动到右边第一个帧的小窗口内,双击这个小窗口。就可以对这个人物进行位置的布置了。- o1 ^* f: q5 l9 Y8 D+ Q

- i3 N) D& |& ~& ?5 d% y7 |# g6 W  R

图14.png


8 Q6 F- N; E* [: `( I% R
. g3 I. T% X- p* ]+ ]- f( |. o

图15.png


4 n6 j" z0 u$ M. v
' P. l: ?$ ?1 j. r4 m, F      因为是人物连贯动作,我们需要把人物置于同一个位置上。这里为了方便对齐,在右边工具栏中提供了一些自动对齐的工具。我们需要点中人物才能使用这些工具。
3 N4 K5 I; P4 _3 D7 R
, n( O1 h4 C- {

图16.png

& ~0 i2 Q) H$ o& [

" u% F- t( o; ]0 K8 q! Z
      这里我们让人物水平且垂直居中就可以了。. s! o; ?7 N+ t4 L1 Q! l/ v; u
( Q- t2 A# x( w# n

图17.png


2 E; _) T! C% B7 d" P3 D$ d; A9 N5 L: S
      当编辑好一个人物的时候,双击人物以外任何地方,即可还原窗口。我们依次处理剩下的图片。所有人物处理好后,我们点击编辑动作按钮,或者在动作菜单中打开编辑。


# `& [) J8 r3 m" Q4 d% v

图18.png


, P- R& u/ H. U5 Y3 o+ a% o, i& U0 |% ?% G
      可以看到这样一个动画编辑的窗口。
" t' E8 C' K% f: l( e2 n( q- Q4 w7 }5 A1 y9 {& E# y- j

图19.png

! q8 a& b) ]* w7 V
, d" k7 I2 w! [" K) b- m. t0 j; W; {
      点击新建动作创建一个动作。然后选中这个动作。
' O3 Z* A  b- Y" \
, ~& i/ D2 z( Z+ J

图20.png


  X0 r9 ?- {# S% ~+ N* w" x( @& ]4 _

图21.png


2 W' x7 }" H4 ]9 K1 B
! F' ^2 h9 ?$ f& u4 Y
5 l% g6 z2 O! C; Y+ M      选中这个动作后,再选中帧窗口的所有帧,将他们添加进序列中。

& X4 ]5 J' q7 J& I0 w( y5 y

图22.png


2 |5 }4 v; x5 j7 P* s  s) w
+ b# d+ e8 H, m           接着,我们就可以在这个动作编辑窗口预览了。
- x+ A0 G4 n, x% M& [* ^' X7 t9 ?5 O/ d& H: C

图23.png

- u. Q2 N4 B, {. u. n
, l' o, _$ I( Z0 V, ?
      1是一些播放动画的控制按钮,这里也可以将这组动画变成GIF,或者选择导出,即可得到包含了切割图片数据和动画数据的spritespx)文件,这个后面再详细介绍。   2号是用来控制动画速度的,只对动画预览起作用,要是控制图片在程序中的切换速度,那么需要在动作窗口中选择延迟,再在帧列表中设置延迟时间。其他功能大家可以自己试着调试。调色板是针对导出的图片中的背景色的,这里没什么用,就点击透明色后不管就行了。
0 F8 [/ Y; v# S& e      3号就是我们动画的预览界面了,左边是1倍大小,右边是3倍大小视图。   设置好后我们就可以导出了,点击导出数据。, d* f7 t: P9 d+ I1 \6 }6 \

# Y7 c& s. y* w% _

图24.png

; j- V) G7 n2 G
4 v, [* l: r+ r9 Q; N5 O: g1 b
      第一个对话框是让我们保存spritespx)文件,第二个框是保存我们导入的原始图片(注意,在保存图片的时候,一定要注意保存成PNG格式,否则默认是BMP格式的,有背景色)。保存完成后,我们就有了一个spritespx)文件和一张PNG图(这个图是不能使用的,因为切割点的数据是根据导入的原图计算的,只能使用原图)。额外讲一个小功能,在左边图片处理窗口有个组合碎片和自动排列碎片,会将我们的图片紧密的贴合在一起。
, m4 X: h& G6 x0 \' O# |; u5 u
+ U2 }4 R2 f$ z1 B( e

图25.png


& u3 p+ b4 R# H1 u" f1 q7 @3 b0 Y+ K0 f7 A) X' A
      这个功能能够大大缩小我们的图片体积,将这个图片导出后,再按照上述步骤对这个图片处理一次,我们就能使用这个排列后的图片了,有助于我们减少图片的体积。. |' H6 ?# C# _& q6 W- N4 o
      额外说一句,在每个帧中可以放入多张图片,这样也就给我们一个思路,可以将一个动作中具有相同样式的部位单独切割成一个块,也就是把人物按照部位分解成若干块,在每个帧中将这些块拼接成一个完整的人物,这样一来就可以进一步的缩减图片资源所占用的空间。不过这种事一般美工才能干的出来,程序猿同志们就算了吧。。。
, c7 z- v& ]# C0 j) s+ G. _      得到切割数据文件后,我们就可以把它用在我们的Android代码中了。在附件的SpriteX工具中已经包含了在J2ME下解析spritespx)文件的代码,而Android中是没有J2ME中的一些工具类的。     
; x# m" _+ Q' V; S. ]0 A' `1 V      不过没关系,这里可以告诉大家,在程序提供的解析代码中,我们将它的Grahpic类替换成Android中的Cavas类,将Image类替换成Bitmap,不使用它原来的绘图方法,而是自己传入canvas画布去画等等, g9 U. X0 O# A% V# `" x! \- ^0 B% |
      具体可以自己尝试,或者参考附件中的工程,里面的SpriteX3_9_6类就是在J2ME基础上改来的。而mySprite类是在SpriteX3_9_6基础上经过简化得到的。SpriteXImage类是综合使用的,是参考了一个开源的项目代码改过的,而这个方案提供的功能比较多,有兴趣可以自己研究。5 r- Y: C9 V' }. p' i. L9 q

% u0 P* h8 Q9 t9 [3 l

图26.png

$ K8 C- |5 y  p1 Y/ Q

) E: c7 {2 p; u$ o$ h1 U9 S# V
      需要注意的是,spritespx)文件需要放在“asset”文件夹下,而原始图片需要在“asset”文件夹下放置(用于使用参数为字符串的图片名的构造函数使用),在res/drawable-nodpi文件夹下放置(用于使用资源文件创建Bitmap对象)。      当程序运行之后,我们就会看到可爱的女仆长在屏幕中走动的样子了~~~~
" T5 I* e; }$ _' a* r1 [9 e4 X5 q' C. Y) c: }

图27.png


. L3 \1 i  v1 D) E  p1 s6 {+ B- T/ b0 \' w
- N2 I8 v9 M& `2 ^
* K% s+ e$ f! t! A! D. v1 ]$ w
      今天的教程就讲到这里,有不太明白的地方可以在下面回复中提出,或者PM我,我会为大家做出解答~~谢谢~~~~0 G6 g& N+ `& T5 ]0 q5 m

3 ?' u. O2 \$ o' o, w
8 Y- t* G! t+ f7 v3 w7 r, V% t, W. n4 m0 T5 l. t8 t
BerryAnimTest.rar (1.07 MB, 下载次数: 491) # Z4 Z- I0 V8 l. M

& k% p) R7 m' j spritex3final.rar (2.26 MB, 下载次数: 491)   m7 h" w2 w7 j$ |6 [1 `! Y7 ]5 {0 W
7 P2 m4 {0 B" g" p: {+ O
SpriteX3_9_6.java (51.56 KB, 下载次数: 110) 5 k- ]7 |2 j5 i1 a2 c

. S" u) ^( P+ U8 ]# s# T4 g6 {  w0 C

8 X, b  L" D$ F% z4 _# z8 V6 d+ ~6 r( W! R' ~4 C/ X- W0 G- j0 z
Freely Tomorrow

Rank: 11Rank: 11Rank: 11Rank: 11

UID
95079
星币
21
积分
9
阅读权限
90
注册时间
2012-12-5
最后登录
2013-1-20
发表于 2012-12-6 22:36:41 |显示全部楼层
我说过我要第一个来顶帖的,哈哈。。。。

Rank: 11Rank: 11Rank: 11Rank: 11

UID
95079
星币
21
积分
9
阅读权限
90
注册时间
2012-12-5
最后登录
2013-1-20
发表于 2012-12-6 23:36:15 |显示全部楼层
哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!% D7 [8 a( z4 i% w/ B9 k

# ?6 r% z: K/ ^0 G9 s8 M4 F# P
7 i: t! T% ^% ~0 l1 ^8 O% l6 `0 E3 L+ e  I" q( l, ]0 f. i! X
但是最后生成了一张gif图片在Win 7里打开播放不了,仍然是静态的,只能用IE打开后才能正常播放这个动画。

Rank: 11Rank: 11Rank: 11Rank: 11

UID
95061
星币
5191
积分
813
阅读权限
90
注册时间
2012-12-5
最后登录
2016-9-7
发表于 2012-12-7 08:31:18 |显示全部楼层
小白菜 发表于 2012-12-6 23:36 6 r9 U: `9 f* ^- ^
哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!

* _8 ^/ @" Q8 C2 _2 z没错,WIN7的图片查看器是不支持GIF的,只能在IE中打开。
Freely Tomorrow

光芒万丈的恒星

FFF团突击大队队员

Rank: 6Rank: 6

UID
47641
星币
530
积分
1320
阅读权限
60
注册时间
2009-8-29
最后登录
2016-2-11

STS-X-001 七芒星勋章

发表于 2012-12-7 08:51:51 |显示全部楼层
路过看看PAD长
我辈屌丝,当心存美眉,沙发,酱油之行不可取,潜水之道不可为,匡扶马甲,铲除脑残。。

管理员

勇者

Rank: 24Rank: 24Rank: 24Rank: 24Rank: 24Rank: 24

UID
4
星币
389
积分
5110
阅读权限
255
注册时间
2007-6-30
最后登录
2017-11-20
发表于 2012-12-7 11:22:03 |显示全部楼层
不错~~ 加精了~~
星组游戏开发组 急招游戏画师美工~~~详见链接点我进入招募贴

Rank: 1

UID
95158
星币
7
积分
1
阅读权限
10
注册时间
2012-12-7
最后登录
2012-12-7
发表于 2012-12-7 17:41:10 |显示全部楼层
好文章 学习下 android的开发

Rank: 11Rank: 11Rank: 11Rank: 11

UID
95071
星币
9
积分
2
阅读权限
90
注册时间
2012-12-5
最后登录
2013-4-12
发表于 2012-12-19 16:46:37 |显示全部楼层
哎哟!不错哟!掌声在哪里
智能回复机器人的兴趣

Rank: 1

UID
96309
星币
11
积分
2
阅读权限
10
注册时间
2013-1-21
最后登录
2013-1-21
发表于 2013-1-21 17:00:00 |显示全部楼层
看到熟悉的界面了 在android上也能用 太棒了

Rank: 1

UID
97202
星币
9
积分
1
阅读权限
10
注册时间
2013-2-21
最后登录
2013-2-21
发表于 2013-2-21 18:12:30 |显示全部楼层
顶一个

Rank: 1

UID
97430
星币
0
积分
5
阅读权限
10
注册时间
2013-3-3
最后登录
2013-6-28
发表于 2013-6-20 13:10:31 |显示全部楼层
正在使用呢!!支持!!

Rank: 1

UID
97430
星币
0
积分
5
阅读权限
10
注册时间
2013-3-3
最后登录
2013-6-28
发表于 2013-6-26 09:17:30 |显示全部楼层
两个精灵同时paint的时候只显示第一个,很奇怪!求解答~!~

Rank: 11Rank: 11Rank: 11Rank: 11

UID
95061
星币
5191
积分
813
阅读权限
90
注册时间
2012-12-5
最后登录
2016-9-7
发表于 2013-6-26 09:43:25 |显示全部楼层
本帖最后由 MythosMa 于 2013-6-26 09:49 编辑 4 ]: V" N9 D8 o+ B+ |5 ?6 c# ]

7 {6 b/ {( u+ e' I8 J  W* U5 ^嗯嗯,多谢提醒,我试了下确实是,有部分代码写错了,已改。请各位将新上传的java文件替换掉原来的,谢谢!
Freely Tomorrow

Rank: 1

UID
97430
星币
0
积分
5
阅读权限
10
注册时间
2013-3-3
最后登录
2013-6-28
发表于 2013-6-28 22:53:38 |显示全部楼层
客气了!我还感谢你呢!这工具很好,不过不支持切片自由翻转这个有点蛋疼,希望越来越完善~~多谢~~

Rank: 1

UID
102579
星币
15
积分
1
阅读权限
10
注册时间
2014-3-9
最后登录
2014-3-18
发表于 2014-3-10 10:35:14 |显示全部楼层
我打包出来的图片用不了.例子是在本帖下载的.....只是用3_9_6版本来打包出图...在项目...展示不了..求解...大神

Archiver|星组游戏论坛 ( 京公网安备110403080002 )  

GMT+8, 2017-11-20 19:42

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部