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

星组游戏论坛

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

QQ登录

只需一步,快速开始

查看: 9806|回复: 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 编辑 # e  q( i2 Q% [7 k( I; m8 K

! S! h* ?) y% d0 M

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

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

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

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

+ p& R8 p/ g0 O8 v

图1.png


! h0 A( A7 C( x* ]. D6 ^2 V  m

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


2 d8 c- H; N! O) b

图2.png


9 x$ C7 i/ r* ]: @7 u
5 T7 k; b1 g6 g- x9 p& G  z& b/ ~
4 C& L' q* ^: O

     好的组合完了,保存成PNG的。2 M& y6 U6 m3 q/ p( ]& P9 w( {4 E


% ]& k2 Q8 Z  @1 _1 D

图3.png

! f% W% Y9 V7 a, o3 R% V
2 P+ d# O# ?: c% u9 u
     我们将这个合成后的图导入到SpriteX中。点击这个图标(PS:SpriteX默认是英文的,在工具(tools)中能够设置语言成为中文),找到刚才合成的组图,打开它。" |+ z8 q: w/ d- X  T3 h; E: c
) C3 ~9 Y  h! ^) X* i+ O

图4.png


/ q- E/ v+ }1 ]$ J9 \3 l# K: a) o% n( X$ h2 q' N) s4 P! P# w

图5.png


4 {- t+ G4 A" G: a5 [" K
, H0 M& ?4 o  K( o0 O6 K% @" J% h
' G% ?- b5 H# p- q( K  ^8 ~; |; }     这样在右边的绿色界面就能得到我们刚才的图了。下面我们点击左边窗口的裁剪图块工具。7 H: v7 h9 J$ @+ e$ U

3 n0 m7 v* Q( |. Z

图6.png

1 d1 ~: q3 L3 b0 m
; X7 j+ v, A, |. v0 ?$ s
     将鼠标移动到图片上,会出现一个红色的选框和基准线。我们在人物的边缘拖动鼠标,会出来一个方框。  u0 o2 b0 }$ _" U. I( O( C

7 m6 v" S& P" M% j( f$ e

图7.png

" w+ |! S$ o% w; L$ k3 d

) f% L. n/ V7 g# c# b

图8.png


1 Q1 }1 N* ~7 u2 W& J
' q. B4 E8 b" p' n+ a
! E" q4 @9 O0 Q4 Y( V

图9.png

1 z0 h+ d2 {- m# h1 }' ]$ y; v* N( k

$ r' s" F# G# q% r5 U          像这样,将一个人物完全包裹住。(当然,如果你的人物组图比较分散,在人物上直接点击左键,会自动将人物给包裹住的。如果想删除已经拖出的框,可以使用裁剪图块下面的橡皮工具,或者直接在选框中点击右键即可。如果人物图比较小,下方有放大和缩小的工具可以使用)。 当所有人物都处理好后,我们单击右边黑色口的任意地方,进入到动画帧的编辑状态,此时右边的工具栏处于激活状态。& F2 s8 r  P& }
2 C+ T$ k7 M! e3 m1 ?
. I/ f& d- z9 M1 Y) M% E

图10.png


& M$ p4 w1 T6 H2 m( v
) k, {4 r7 m! {$ N      现在点击第一个工具,创建一个帧。这里,我一次性创建9个,因为女仆长的行走动作是9张图。( @. B2 |, x' W  `, U& A, @
$ ]! s- r) L4 w" G# u& p

图11.png


& P. h* c/ r, [  H8 I  d
" A& {0 C! H6 a% C

图12.png


/ k* L/ E: z+ x7 W; W0 F* e- Y. i' }2 v
      可以看到,有了9个空白帧。这时,我们再点击左边的窗口,进入到左边窗口的编辑模式,点击箭头工具。# M1 `; g! n6 \. b

- d: w( O) [5 b8 M( g) L4 ]7 X

图13.png

1 V. O" v7 h1 N# T
( m; t# J: Z6 s1 `* }' o
      这样就可以拖动人物了。我们先把第一个人物拖动到右边第一个帧的小窗口内,双击这个小窗口。就可以对这个人物进行位置的布置了。. G, S: S+ T% w: T

" _+ q2 D! Y* |

图14.png


% G' Y  T$ u+ U- A
( E) I0 g! u+ f- U  ]2 z: n

图15.png

4 e3 A+ S/ i+ e

: @" k' Q. p/ Z9 r4 U8 P      因为是人物连贯动作,我们需要把人物置于同一个位置上。这里为了方便对齐,在右边工具栏中提供了一些自动对齐的工具。我们需要点中人物才能使用这些工具。
; X7 H- }$ O5 H4 Q6 j: L5 q( ?
4 V. l0 b! U0 z7 a

图16.png

+ e( b* B2 ~* M$ p! w

/ C( W- G' K' |
      这里我们让人物水平且垂直居中就可以了。8 u8 l* X# `- E1 S9 N0 H

; x4 c8 c; N  o+ G6 f2 n& n! P* T

图17.png

3 A# n3 C4 B% h# b- L

1 J3 }9 [3 I1 P# T/ |
      当编辑好一个人物的时候,双击人物以外任何地方,即可还原窗口。我们依次处理剩下的图片。所有人物处理好后,我们点击编辑动作按钮,或者在动作菜单中打开编辑。

6 J. ]0 B- j: G+ r1 K3 E: W

图18.png

3 j- P; d/ E( u$ W" m

1 f" G" S/ \5 Q, ~      可以看到这样一个动画编辑的窗口。5 R- T. [; ~: a; k- F" I+ z
, _3 m  \$ i! q7 ]- C

图19.png


" x* a7 t9 f0 s- _- `
7 W, l! d7 Z( q6 }) ~& O; j5 y/ y
      点击新建动作创建一个动作。然后选中这个动作。
. ]) N% \7 S' z/ [6 ^+ @% s1 p" j! j! ^! O# Y$ f' ~

图20.png

4 J9 f  W7 k' h5 R7 D' y( E

& X5 j2 n" q- h6 A5 y

图21.png

  }! q( v0 H' f! A
7 T3 n9 J* m; T( A  \

9 p7 T0 O- J" ]0 ~      选中这个动作后,再选中帧窗口的所有帧,将他们添加进序列中。


' y, B3 ~+ b5 F

图22.png

% N$ E3 O/ q8 y" J" l

$ Y5 x9 m$ R8 c2 V! }% N* u- k% Y; J' W6 O           接着,我们就可以在这个动作编辑窗口预览了。5 A+ K0 K' I/ F
) h' M7 L9 H2 S8 |* `% p; O# x

图23.png

$ j8 q5 M$ t0 @" D+ Y. f, f! U, I

7 o" V* H1 l! c
      1是一些播放动画的控制按钮,这里也可以将这组动画变成GIF,或者选择导出,即可得到包含了切割图片数据和动画数据的spritespx)文件,这个后面再详细介绍。   2号是用来控制动画速度的,只对动画预览起作用,要是控制图片在程序中的切换速度,那么需要在动作窗口中选择延迟,再在帧列表中设置延迟时间。其他功能大家可以自己试着调试。调色板是针对导出的图片中的背景色的,这里没什么用,就点击透明色后不管就行了。. c. c; B- ~, K7 E4 H' Y
      3号就是我们动画的预览界面了,左边是1倍大小,右边是3倍大小视图。   设置好后我们就可以导出了,点击导出数据。& y% g' ?$ P/ q' g. e0 {1 @5 ?( w

9 E6 ~% x7 |6 I6 w0 v% `+ P

图24.png


) T; A0 w& L* N" x: @# @$ q& C
6 W% A0 p2 C# K2 y" g" }" y9 \
      第一个对话框是让我们保存spritespx)文件,第二个框是保存我们导入的原始图片(注意,在保存图片的时候,一定要注意保存成PNG格式,否则默认是BMP格式的,有背景色)。保存完成后,我们就有了一个spritespx)文件和一张PNG图(这个图是不能使用的,因为切割点的数据是根据导入的原图计算的,只能使用原图)。额外讲一个小功能,在左边图片处理窗口有个组合碎片和自动排列碎片,会将我们的图片紧密的贴合在一起。
/ S7 i% c8 `- f5 A5 u; J2 ~
! I& L/ w. I2 J1 o) Z) c

图25.png

, n# d; {) t* J/ N% ]# ^0 d" t

5 _2 R& n- ~( S$ O
      这个功能能够大大缩小我们的图片体积,将这个图片导出后,再按照上述步骤对这个图片处理一次,我们就能使用这个排列后的图片了,有助于我们减少图片的体积。
$ v( d2 m0 R2 _" H, [      额外说一句,在每个帧中可以放入多张图片,这样也就给我们一个思路,可以将一个动作中具有相同样式的部位单独切割成一个块,也就是把人物按照部位分解成若干块,在每个帧中将这些块拼接成一个完整的人物,这样一来就可以进一步的缩减图片资源所占用的空间。不过这种事一般美工才能干的出来,程序猿同志们就算了吧。。。
0 x# G2 N+ }2 x) J' f* n. x      得到切割数据文件后,我们就可以把它用在我们的Android代码中了。在附件的SpriteX工具中已经包含了在J2ME下解析spritespx)文件的代码,而Android中是没有J2ME中的一些工具类的。     
3 `8 m0 R+ R3 T! B* F# E+ P. P      不过没关系,这里可以告诉大家,在程序提供的解析代码中,我们将它的Grahpic类替换成Android中的Cavas类,将Image类替换成Bitmap,不使用它原来的绘图方法,而是自己传入canvas画布去画等等# b; L/ V! B6 j$ V7 q# ?* a- q
      具体可以自己尝试,或者参考附件中的工程,里面的SpriteX3_9_6类就是在J2ME基础上改来的。而mySprite类是在SpriteX3_9_6基础上经过简化得到的。SpriteXImage类是综合使用的,是参考了一个开源的项目代码改过的,而这个方案提供的功能比较多,有兴趣可以自己研究。0 M. c3 d- h3 m

4 M+ h8 I1 T  ~

图26.png

6 _, G& o  D2 q; x
* s4 |- D# G6 h5 F1 o# |7 J
      需要注意的是,spritespx)文件需要放在“asset”文件夹下,而原始图片需要在“asset”文件夹下放置(用于使用参数为字符串的图片名的构造函数使用),在res/drawable-nodpi文件夹下放置(用于使用资源文件创建Bitmap对象)。      当程序运行之后,我们就会看到可爱的女仆长在屏幕中走动的样子了~~~~
* ]) c& d! h, o9 y
) e7 w( `; o: r: N. C

图27.png

4 \" j+ K% Y  y/ x8 \& }) ^' ?5 d
) M1 @- d5 |4 o( @8 \' M) ~6 F
2 [% v, h7 ~$ s
, G  [0 a) ^. e# Y+ N9 @% p
      今天的教程就讲到这里,有不太明白的地方可以在下面回复中提出,或者PM我,我会为大家做出解答~~谢谢~~~~
2 M" J& M% q6 p3 y; A0 P! }

6 r6 O/ A  M0 ?0 S9 Y) S! y7 b6 s7 N6 c
2 g( }( E) l8 q! c0 C" o. d+ ^' |
BerryAnimTest.rar (1.07 MB, 下载次数: 491) + L8 b7 s  f4 g  v: z& s
2 P1 o' q: C) {# e* w2 n* [
spritex3final.rar (2.26 MB, 下载次数: 491) ; r- f9 G( a7 @9 T, Q

2 p( h; c  d) {! v6 p" J5 U1 ?4 ` SpriteX3_9_6.java (51.56 KB, 下载次数: 110)
$ K+ H* D0 J+ L7 |2 G' w4 e/ b( k8 ]% ~- a3 I' _& [( }
* f' s7 ~. [- a0 u$ g

) \  v) @9 A$ g% d  ^  u+ ]
5 l' r+ m; o/ c" V* P
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 |显示全部楼层
哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!
9 \" h$ e+ Y. `' X5 c8 g" I
: m8 `& _- Z& Z- R8 y5 m' g6 `# L
' K! ~3 ^! Q' g4 `  E
1 ~8 N5 }" D0 I! p0 y; Q- ]3 r但是最后生成了一张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
% U+ `& s+ N) ^5 r6 E5 `哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!

  h6 T; }. d  a: g3 C1 E. b没错,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
星币
351
积分
5125
阅读权限
255
注册时间
2007-6-30
最后登录
2018-8-17
发表于 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
最后登录
2018-7-5
发表于 2013-6-20 13:10:31 |显示全部楼层
正在使用呢!!支持!!

Rank: 1

UID
97430
星币
0
积分
5
阅读权限
10
注册时间
2013-3-3
最后登录
2018-7-5
发表于 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 编辑 ) `) U+ R; K1 Z2 w4 ^; v! {

% }9 q5 ~6 n& U" u嗯嗯,多谢提醒,我试了下确实是,有部分代码写错了,已改。请各位将新上传的java文件替换掉原来的,谢谢!
Freely Tomorrow

Rank: 1

UID
97430
星币
0
积分
5
阅读权限
10
注册时间
2013-3-3
最后登录
2018-7-5
发表于 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-8-17 19:47

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部