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

星组游戏论坛

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

QQ登录

只需一步,快速开始

查看: 8779|回复: 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 编辑
2 ^+ K* X( S$ `% Z8 m
) j8 ~2 {- o1 E! P* b# ^1 q! o

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

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

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

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


- w+ I6 G/ U0 J# `( `! X) W

图1.png


) V( J' V6 E" a

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

, Y+ `0 V& ]' f. u0 a1 @

图2.png


1 B# l5 u! @+ T) ^  O9 }3 B' P$ v
# ^  a, |2 W+ b$ U8 x

     好的组合完了,保存成PNG的。+ V8 n/ T$ ?6 w& X) ^* Y  V


6 m2 e( T, c3 f% v$ D$ K

图3.png

2 H- \+ B9 v8 m: m- _

! i9 f' n4 m) B9 @, r: c     我们将这个合成后的图导入到SpriteX中。点击这个图标(PS:SpriteX默认是英文的,在工具(tools)中能够设置语言成为中文),找到刚才合成的组图,打开它。
$ X& A4 p8 b; @9 L2 h+ n8 Z# T/ a5 |# K/ J

图4.png


- k" e2 V3 |  m. d  f* {2 _
3 k0 H/ g: Z2 \! b1 u' _

图5.png


( C; s# z0 }" \! t+ z5 o! x8 G+ x( ?; Z; R9 T# s. M

+ m% L7 I; D. o% U     这样在右边的绿色界面就能得到我们刚才的图了。下面我们点击左边窗口的裁剪图块工具。
: R( |1 O/ k( ]* l9 J0 ?, N) `0 `: I/ B

图6.png


# A$ S& v# d/ z( A/ _5 S: O0 q3 a8 ?- \3 C, J- V
     将鼠标移动到图片上,会出现一个红色的选框和基准线。我们在人物的边缘拖动鼠标,会出来一个方框。9 K4 `: j0 a7 ~% o+ W) v* |& x

. M: s8 |+ E0 s3 x1 v. K1 j

图7.png


  i* I& |# S/ r/ I; b1 A8 U3 @$ K0 m3 ~/ g

图8.png


, j5 W6 s  ?1 _0 }" I0 e
% _0 l8 @- H* v0 g0 z9 M& [. x/ Z

图9.png

; J& S) N, _3 u! d
+ z9 c5 U1 b$ n0 I9 y
          像这样,将一个人物完全包裹住。(当然,如果你的人物组图比较分散,在人物上直接点击左键,会自动将人物给包裹住的。如果想删除已经拖出的框,可以使用裁剪图块下面的橡皮工具,或者直接在选框中点击右键即可。如果人物图比较小,下方有放大和缩小的工具可以使用)。 当所有人物都处理好后,我们单击右边黑色口的任意地方,进入到动画帧的编辑状态,此时右边的工具栏处于激活状态。1 i5 d4 b& p# r, m( X% \
8 b3 l2 e1 P- j. Y! p( r* V
5 U+ Q/ F. I7 }' r' v

图10.png


4 F- }; J' K3 Q; u# ~8 Y+ i) N9 R* y
      现在点击第一个工具,创建一个帧。这里,我一次性创建9个,因为女仆长的行走动作是9张图。
8 b" B' @9 o7 @9 M. [! k0 Y& a& S$ N- u6 n

图11.png

# G! X6 X8 F$ c; g& L8 y
2 i, k# ?. o: \# ^& {7 J

图12.png


7 T7 e" J& e0 d+ P! [8 I5 ~0 P6 q0 [& g6 P! [5 N1 p9 \4 K
      可以看到,有了9个空白帧。这时,我们再点击左边的窗口,进入到左边窗口的编辑模式,点击箭头工具。+ `' a% c: l% e0 {
2 [- u. W+ m; O2 }! J+ [% j! ]

图13.png


7 V. y. Y5 J/ `( H5 c6 n- e4 c6 l1 b3 n
      这样就可以拖动人物了。我们先把第一个人物拖动到右边第一个帧的小窗口内,双击这个小窗口。就可以对这个人物进行位置的布置了。
! |0 {" U# K+ r
; T& i: A3 H7 F+ M7 j* t, ^

图14.png

- u+ H4 s; b1 w
. `  z7 h4 N6 L. H! V( d) h/ }( |

图15.png


2 c' o6 z: t! i. r; r8 s4 p. H1 g' f! Y% g; {7 j
      因为是人物连贯动作,我们需要把人物置于同一个位置上。这里为了方便对齐,在右边工具栏中提供了一些自动对齐的工具。我们需要点中人物才能使用这些工具。+ n' Y% k7 T' {# @( Z
. m5 n. x" ?; ]9 K" o; s; D+ X

图16.png

! i& Z* Q: f2 K8 r4 o
6 T' q  o: o4 Q7 @0 Y' F
      这里我们让人物水平且垂直居中就可以了。- J+ z" q! F2 Q$ x9 j- F. F% O& E

' f% u5 l$ @# s% ?% ~

图17.png


! v* g( W* }% S
8 g2 K8 ~, A3 K) P$ W+ X
      当编辑好一个人物的时候,双击人物以外任何地方,即可还原窗口。我们依次处理剩下的图片。所有人物处理好后,我们点击编辑动作按钮,或者在动作菜单中打开编辑。

/ M4 I/ S1 f# u+ a0 a

图18.png

# y# P8 ]5 d& X$ U6 V* F% @
/ ]3 E. k; v" p, ?% K
      可以看到这样一个动画编辑的窗口。7 E5 `. ?: n8 e) a4 U9 t3 G8 h5 B4 H$ m
" w- ?) l1 }+ H7 y! R. e* e

图19.png


7 x$ N4 Z. M5 I* \7 m# F
8 G- k9 l1 [  N5 U1 ]- b
      点击新建动作创建一个动作。然后选中这个动作。
  B0 F* D6 ^. F  H- O7 y( N0 f* J/ Z  A1 I5 |

图20.png

% |2 L* @; g+ h1 Y7 _  P, Q  A

3 H) w) y, E% G( K; r; r

图21.png


/ k' j- U3 `2 u; k( ]
/ _1 ^- e' j6 G" r' C: K* ^! u0 k7 {, q. z* E
      选中这个动作后,再选中帧窗口的所有帧,将他们添加进序列中。


; B9 Z) ]  f& V/ d: r2 v

图22.png

# t! U# a% V; \

) A, {! t7 H3 j- L' f, V           接着,我们就可以在这个动作编辑窗口预览了。
1 O- K4 H, G' ]. Y2 m- G4 O
% K7 F% g4 P8 \) C) j" `# _; {2 i

图23.png

" G* ~0 M7 w5 M; l9 B- ~, O# Q& O

7 {! E: r, B) D" z, ~- x( R% p/ V& |! l5 i" E
      1是一些播放动画的控制按钮,这里也可以将这组动画变成GIF,或者选择导出,即可得到包含了切割图片数据和动画数据的spritespx)文件,这个后面再详细介绍。   2号是用来控制动画速度的,只对动画预览起作用,要是控制图片在程序中的切换速度,那么需要在动作窗口中选择延迟,再在帧列表中设置延迟时间。其他功能大家可以自己试着调试。调色板是针对导出的图片中的背景色的,这里没什么用,就点击透明色后不管就行了。
& W9 J# p. |% g+ a' u' x* G) F  P: I      3号就是我们动画的预览界面了,左边是1倍大小,右边是3倍大小视图。   设置好后我们就可以导出了,点击导出数据。1 B& w/ M* X$ b3 o

; ^+ f5 l7 l1 M  d" G6 T$ j

图24.png

# T' S$ {0 \9 p4 u

( }1 e5 b2 r" N3 T& j& E9 K
      第一个对话框是让我们保存spritespx)文件,第二个框是保存我们导入的原始图片(注意,在保存图片的时候,一定要注意保存成PNG格式,否则默认是BMP格式的,有背景色)。保存完成后,我们就有了一个spritespx)文件和一张PNG图(这个图是不能使用的,因为切割点的数据是根据导入的原图计算的,只能使用原图)。额外讲一个小功能,在左边图片处理窗口有个组合碎片和自动排列碎片,会将我们的图片紧密的贴合在一起。8 ]9 ?* c. B6 f! V3 H& @+ k

4 ^( B! c" I5 n+ \) T9 ^7 y* H

图25.png


2 h5 {! R) T1 @4 ^7 r5 e) c( u% x" k" N6 w" ?
      这个功能能够大大缩小我们的图片体积,将这个图片导出后,再按照上述步骤对这个图片处理一次,我们就能使用这个排列后的图片了,有助于我们减少图片的体积。1 z3 G& D7 c/ i' K1 ]$ Y
      额外说一句,在每个帧中可以放入多张图片,这样也就给我们一个思路,可以将一个动作中具有相同样式的部位单独切割成一个块,也就是把人物按照部位分解成若干块,在每个帧中将这些块拼接成一个完整的人物,这样一来就可以进一步的缩减图片资源所占用的空间。不过这种事一般美工才能干的出来,程序猿同志们就算了吧。。。
$ V: O! Z% B8 \4 P! s& n- l/ q      得到切割数据文件后,我们就可以把它用在我们的Android代码中了。在附件的SpriteX工具中已经包含了在J2ME下解析spritespx)文件的代码,而Android中是没有J2ME中的一些工具类的。     
: U; Q- t/ C5 k( s9 S; i$ g      不过没关系,这里可以告诉大家,在程序提供的解析代码中,我们将它的Grahpic类替换成Android中的Cavas类,将Image类替换成Bitmap,不使用它原来的绘图方法,而是自己传入canvas画布去画等等' i& }6 `2 V( N: S! ^4 T
      具体可以自己尝试,或者参考附件中的工程,里面的SpriteX3_9_6类就是在J2ME基础上改来的。而mySprite类是在SpriteX3_9_6基础上经过简化得到的。SpriteXImage类是综合使用的,是参考了一个开源的项目代码改过的,而这个方案提供的功能比较多,有兴趣可以自己研究。$ d' m: ~) l; m

3 U6 A; b- O; e+ k# {$ @. p

图26.png

/ T- C4 F( K# J
* D6 E0 B3 z- j  F/ H( a, s
      需要注意的是,spritespx)文件需要放在“asset”文件夹下,而原始图片需要在“asset”文件夹下放置(用于使用参数为字符串的图片名的构造函数使用),在res/drawable-nodpi文件夹下放置(用于使用资源文件创建Bitmap对象)。      当程序运行之后,我们就会看到可爱的女仆长在屏幕中走动的样子了~~~~8 d6 F7 p( h! V4 ~
3 r6 Y2 B, a  p1 C3 Q

图27.png


4 k$ l% |! @) W2 V0 s7 H* ^4 h! g5 H8 m0 ]
- A+ x3 H) j, H% m/ d
! H& U! h) F! J1 e
$ @$ G  Q7 k' ]7 b" \8 n
      今天的教程就讲到这里,有不太明白的地方可以在下面回复中提出,或者PM我,我会为大家做出解答~~谢谢~~~~
' O. z( \, s" f! J5 ]

7 a/ z9 g$ \1 T' L+ A/ }# e2 |! `
3 o: y1 C4 [" D; Z( f0 S8 B4 n) |
BerryAnimTest.rar (1.07 MB, 下载次数: 491) 7 u) \4 d. ~! f3 H9 k, E! l

3 Y9 V7 s* f2 r* J5 P spritex3final.rar (2.26 MB, 下载次数: 491) 9 Q' K! @. p+ |1 ~: L9 ~
! U1 u' L' p/ U) x
SpriteX3_9_6.java (51.56 KB, 下载次数: 110) . W& D; \! T8 d9 T7 `" n, Y

" {1 W1 i' `4 Z- [
& _4 L- H- u; x1 n9 _& x3 n
  E, Q7 E( u' U, u# Z% X* y' ?5 ?
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 |显示全部楼层
哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!3 a$ j7 f  u. K
$ T  _2 b: [  y  l' W

  y# ^6 v4 _# ^- [" I$ u' ?) z/ }7 B* c, h3 h' Q
但是最后生成了一张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
) z3 H$ C  E+ |* y; g哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!

' X6 \1 Z# w) y& [没错,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
星币
379
积分
5105
阅读权限
255
注册时间
2007-6-30
最后登录
2018-1-4
发表于 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 g9 r  l% g7 a6 B+ g" ^
4 g# B2 B% i. c9 Q( k  `+ d
嗯嗯,多谢提醒,我试了下确实是,有部分代码写错了,已改。请各位将新上传的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-1-17 13:25

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部