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

星组游戏论坛

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

QQ登录

只需一步,快速开始

查看: 9448|回复: 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 编辑 ) O! b9 t# d/ e+ G0 ^2 C) _; G! i' \

+ ]+ G" v3 z+ m7 V, u

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

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

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

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

  L& R" c: ^* U8 s' l* ^1 x4 V8 G

图1.png

2 _* [6 r+ _: k0 |

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


& k. M% R/ O3 o- `0 q& H" \' v

图2.png

/ V1 N4 ]# [; r- j  h
" I0 K/ H( r, }* E) c5 A

; b! B4 \+ P6 U* V1 T& j% e

     好的组合完了,保存成PNG的。  w3 R# N  W; n5 O0 t8 t9 l

4 A4 N7 P0 }" d# ?3 L0 s+ H( Y

图3.png


3 R- X( _( M6 G! v
# a! \# H2 l' f! B2 Y3 ^     我们将这个合成后的图导入到SpriteX中。点击这个图标(PS:SpriteX默认是英文的,在工具(tools)中能够设置语言成为中文),找到刚才合成的组图,打开它。, ^2 B  t3 u8 Y; i
7 x) k) Y: \" [+ T7 T

图4.png

( p: ?5 o5 ]" v/ o) ?& ]' |
; _5 m" H" w  A# J. O

图5.png

  r* G/ Y; K' b3 [' H) i

9 P3 [+ ?4 Y. o( S5 d$ b% B9 W8 B8 q' e
     这样在右边的绿色界面就能得到我们刚才的图了。下面我们点击左边窗口的裁剪图块工具。' P; B  v: f2 `  v" [4 Y& l

. r% d: z7 ^; w+ q2 e# g

图6.png


- }( I$ N: r! t
2 k6 q8 g/ \! w1 d' \+ U. V4 T
     将鼠标移动到图片上,会出现一个红色的选框和基准线。我们在人物的边缘拖动鼠标,会出来一个方框。
* m/ H  D2 v0 M: W2 Q9 h) P- z& n5 U# g6 X# ?9 z

图7.png


9 s- N; z+ [' x5 F0 h+ N" q* V5 D/ o; q+ a. r

图8.png


5 Z- k: V3 v/ \( W8 y; {' x
  q. E& N7 _7 H" T, U% |& T, @7 c1 z+ s% x

图9.png


' L4 [# M1 v/ k: |7 ^: p, K( s
7 y; y& Q1 g: K- w% ^          像这样,将一个人物完全包裹住。(当然,如果你的人物组图比较分散,在人物上直接点击左键,会自动将人物给包裹住的。如果想删除已经拖出的框,可以使用裁剪图块下面的橡皮工具,或者直接在选框中点击右键即可。如果人物图比较小,下方有放大和缩小的工具可以使用)。 当所有人物都处理好后,我们单击右边黑色口的任意地方,进入到动画帧的编辑状态,此时右边的工具栏处于激活状态。
4 e4 W# L/ V6 w/ ^, V. p7 P
; {8 E0 X% B0 v0 j

2 _$ F4 B# O! m5 w+ N7 n5 r

图10.png

3 h8 ]. h! j* Z, B8 Y0 f

2 K$ h, E1 S6 Y      现在点击第一个工具,创建一个帧。这里,我一次性创建9个,因为女仆长的行走动作是9张图。
# S2 P% V6 G+ e- ]
" Q, V; `% ~; {& V" g4 f, Y7 @- V4 O

图11.png

/ l' v1 {. _- n6 Y2 p2 s6 O5 e# v& p

2 n7 j) I" b# z4 M6 _" U$ l6 d  k

图12.png

  ?9 }1 K2 I7 A; |5 j

% L) X! V/ a% @) A6 x4 R  A
      可以看到,有了9个空白帧。这时,我们再点击左边的窗口,进入到左边窗口的编辑模式,点击箭头工具。
) B% ]- G  S1 ~# a- `3 H. [9 k" V1 _# c0 ?/ @

图13.png


$ t4 A# r' F) T6 Y% @: t' t5 n( v# e; I3 ]% [' Y2 T
      这样就可以拖动人物了。我们先把第一个人物拖动到右边第一个帧的小窗口内,双击这个小窗口。就可以对这个人物进行位置的布置了。8 j0 m6 l% M0 F2 l% @7 P1 }# ^4 [1 {
, ]& T5 m/ V" Z" l8 q

图14.png

/ q$ n/ }1 ]) f! q
2 N4 F3 |% E2 c; x2 E  y

图15.png


' m$ y% ~  f. E$ I
  V  `% ~; A7 p' }  q: G- \6 `& A7 T' n      因为是人物连贯动作,我们需要把人物置于同一个位置上。这里为了方便对齐,在右边工具栏中提供了一些自动对齐的工具。我们需要点中人物才能使用这些工具。
' i. `9 [, q# f& H6 Q: P
5 H* u5 {. [- z4 o7 c) e5 V

图16.png


& x9 ?/ }' n6 w1 G6 t$ u) p8 H) ^) o) E0 t* v% T
      这里我们让人物水平且垂直居中就可以了。
" b) Q( k4 d$ t7 H( O, b, }; U# C6 B9 J3 W# ?) n0 P: r% Q

图17.png

/ B' T  d8 x) R% a4 \* e
' Y5 Z# R1 C3 o4 T9 c
      当编辑好一个人物的时候,双击人物以外任何地方,即可还原窗口。我们依次处理剩下的图片。所有人物处理好后,我们点击编辑动作按钮,或者在动作菜单中打开编辑。


1 R. p; Z4 g4 A7 ^) f% S9 K" ^

图18.png


7 H6 p; ^7 \* |+ E  v4 \+ y' |2 J% e4 C- Q5 p2 P/ q
      可以看到这样一个动画编辑的窗口。
& w7 h, S% U2 V8 `. o7 d* Z9 e5 Y
; _  K8 D% G; y

图19.png

/ M! X+ j6 [1 s* l# g

% |% J* Q5 _/ [5 Y: K
      点击新建动作创建一个动作。然后选中这个动作。/ G+ n' ~' k2 L$ _: \$ N% \, D5 O. I
. a: u6 e  }# Z# T5 U5 b- j4 _

图20.png

6 Y3 p$ H5 @* M+ }/ V! h! B$ z
8 U' `2 }, Z1 P5 b

图21.png


; g# F  X6 d4 J1 l4 L
7 T( I# O: s" A% t  g6 P" b6 I' w& Y# J2 A6 f# u/ N: l
      选中这个动作后,再选中帧窗口的所有帧,将他们添加进序列中。

9 Y4 m$ J3 }. m& v; |" o

图22.png


9 c# ^! O( y9 M4 Q& I" d
7 ]2 I0 o# p" V' X           接着,我们就可以在这个动作编辑窗口预览了。
- C4 V( f( `7 N) H/ N
2 X# A: g3 l4 [8 @2 O

图23.png


* W3 ^" Z! J8 _# Y( B' [/ j0 u% a& _: k+ u3 ?1 K- \- P
      1是一些播放动画的控制按钮,这里也可以将这组动画变成GIF,或者选择导出,即可得到包含了切割图片数据和动画数据的spritespx)文件,这个后面再详细介绍。   2号是用来控制动画速度的,只对动画预览起作用,要是控制图片在程序中的切换速度,那么需要在动作窗口中选择延迟,再在帧列表中设置延迟时间。其他功能大家可以自己试着调试。调色板是针对导出的图片中的背景色的,这里没什么用,就点击透明色后不管就行了。
1 m7 U$ d3 Z% g& R7 {5 O: J5 O9 J& }      3号就是我们动画的预览界面了,左边是1倍大小,右边是3倍大小视图。   设置好后我们就可以导出了,点击导出数据。( H. y9 X# p: \# H, y
& ?: e- F8 A) P5 f' x

图24.png


; f/ ?" H4 i3 m- d8 R* o" n/ I! c. i5 S. K5 p% D7 Y5 _
      第一个对话框是让我们保存spritespx)文件,第二个框是保存我们导入的原始图片(注意,在保存图片的时候,一定要注意保存成PNG格式,否则默认是BMP格式的,有背景色)。保存完成后,我们就有了一个spritespx)文件和一张PNG图(这个图是不能使用的,因为切割点的数据是根据导入的原图计算的,只能使用原图)。额外讲一个小功能,在左边图片处理窗口有个组合碎片和自动排列碎片,会将我们的图片紧密的贴合在一起。
1 X& K4 {! u* H, N
+ z0 Y0 m$ y. R2 [% Y

图25.png

8 t* o0 o* H/ [* r' f

, _8 B0 U# e" |3 d/ F* U6 b
      这个功能能够大大缩小我们的图片体积,将这个图片导出后,再按照上述步骤对这个图片处理一次,我们就能使用这个排列后的图片了,有助于我们减少图片的体积。) r' B% }9 T0 G" Z; d
      额外说一句,在每个帧中可以放入多张图片,这样也就给我们一个思路,可以将一个动作中具有相同样式的部位单独切割成一个块,也就是把人物按照部位分解成若干块,在每个帧中将这些块拼接成一个完整的人物,这样一来就可以进一步的缩减图片资源所占用的空间。不过这种事一般美工才能干的出来,程序猿同志们就算了吧。。。
* [" s7 Y0 E( Z0 m% _" H! x' K1 {: s' C      得到切割数据文件后,我们就可以把它用在我们的Android代码中了。在附件的SpriteX工具中已经包含了在J2ME下解析spritespx)文件的代码,而Android中是没有J2ME中的一些工具类的。     * D8 e9 r5 C! N! w  S5 k
      不过没关系,这里可以告诉大家,在程序提供的解析代码中,我们将它的Grahpic类替换成Android中的Cavas类,将Image类替换成Bitmap,不使用它原来的绘图方法,而是自己传入canvas画布去画等等, R0 G, K* F6 J* y
      具体可以自己尝试,或者参考附件中的工程,里面的SpriteX3_9_6类就是在J2ME基础上改来的。而mySprite类是在SpriteX3_9_6基础上经过简化得到的。SpriteXImage类是综合使用的,是参考了一个开源的项目代码改过的,而这个方案提供的功能比较多,有兴趣可以自己研究。
/ }4 x* W/ }, m# ]* ?( N# ]
6 Q( T1 d" J: s( _: Q0 _3 e  s; R

图26.png

. M# R% K8 K* V4 A5 s

& }# z' r( ^# X% w9 Q) B$ e: e
      需要注意的是,spritespx)文件需要放在“asset”文件夹下,而原始图片需要在“asset”文件夹下放置(用于使用参数为字符串的图片名的构造函数使用),在res/drawable-nodpi文件夹下放置(用于使用资源文件创建Bitmap对象)。      当程序运行之后,我们就会看到可爱的女仆长在屏幕中走动的样子了~~~~9 Y: u( X' j! g

& m/ C+ R- t0 J

图27.png

+ W% G/ s% W0 d: h4 Y" W

3 P8 ?0 q" W5 s& {" z
4 o8 T; ~: |) r  h
( y- M3 v9 P! k
      今天的教程就讲到这里,有不太明白的地方可以在下面回复中提出,或者PM我,我会为大家做出解答~~谢谢~~~~
0 H: k. v7 t6 A* U
. H% `/ O% t( W; G: Y7 _
7 K0 G1 S& U, ~$ M9 x- F9 |
9 y4 \: [9 g+ [/ Q3 ], x4 t
BerryAnimTest.rar (1.07 MB, 下载次数: 491) 0 Q+ M+ u6 z1 ^( w9 L$ ~( ?* W8 P

9 x  U, a5 M" I2 W6 c7 u spritex3final.rar (2.26 MB, 下载次数: 491) . q  s/ f7 _9 z9 m& j0 o3 D
6 u+ |/ Q% K6 W$ x. X4 R. J
SpriteX3_9_6.java (51.56 KB, 下载次数: 110)
. M! T* g9 t% M3 l+ m- _+ J' x, N! y' b$ u2 J1 w

. R% u; M' M; J- D2 }5 X, W0 p' F* _3 e1 b  x: E  z" i% _  }
$ f+ O: ~1 ~2 B! S2 W* x8 i
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 |显示全部楼层
哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!
. `& X, r. [& g4 O9 Q, C% n6 s# b! Q% _: F& d- V; }

; a' V& T' ^' [, H, g+ j$ i. f+ f1 G' i8 ?5 m
但是最后生成了一张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 4 u! h5 Z3 P! f3 J% U
哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!

- U" O9 g  Z$ a  v没错,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
星币
371
积分
5121
阅读权限
255
注册时间
2007-6-30
最后登录
2018-6-22
发表于 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 编辑
$ l3 `5 L$ m7 a
( q8 ^3 j) k$ ?$ m嗯嗯,多谢提醒,我试了下确实是,有部分代码写错了,已改。请各位将新上传的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, 2018-6-23 02:37

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部