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

星组游戏论坛

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

QQ登录

只需一步,快速开始

查看: 10187|回复: 14

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

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

UID
95061
星币
5191
积分
814
阅读权限
90
注册时间
2012-12-5
最后登录
2018-9-29
发表于 2012-12-6 22:26:56 |显示全部楼层
本帖最后由 MythosMa 于 2013-6-26 09:45 编辑
* ^- F4 L" A+ l5 ?- R
" i* ^& U  q1 o% w3 c

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

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

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

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

/ M. e& P1 e4 S! E0 W/ Z, F6 n

图1.png

, J% C& S' G9 H

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

: l1 M! F1 \2 f' h. }4 K0 t( C

图2.png

8 S9 T+ N3 a' @

; U, o; z: ~6 P5 w1 }
" u" ~; w' h$ b( d

     好的组合完了,保存成PNG的。( ?" \* G! A3 ]8 I% V  n

: W9 z3 M! o/ D- k

图3.png


# O7 z! p( ]2 m2 [6 S4 j8 V* \7 o; q2 [9 ]
     我们将这个合成后的图导入到SpriteX中。点击这个图标(PS:SpriteX默认是英文的,在工具(tools)中能够设置语言成为中文),找到刚才合成的组图,打开它。
2 k4 [9 ]$ X  n! T
0 k- j1 S/ g* p) A4 O

图4.png

# H+ P" ?+ P2 j; F9 S
$ V& ?- R4 s( x6 f

图5.png


, K9 {! F( q$ Q8 ]4 P- n8 p5 n7 h: Y, i5 d# K4 Z, M2 Q, a
! a+ w% H0 q! ^3 b& n6 s
     这样在右边的绿色界面就能得到我们刚才的图了。下面我们点击左边窗口的裁剪图块工具。
1 b1 m/ e: V. m4 f; D: g: g  ~3 D% A2 _& k2 ^6 Y

图6.png


  l6 m& o4 d$ P& V; s7 H+ O1 G! s* z& l' Y+ L" T3 I
     将鼠标移动到图片上,会出现一个红色的选框和基准线。我们在人物的边缘拖动鼠标,会出来一个方框。$ r2 ^$ W% U$ J( l

+ E* s2 v0 ?+ v5 _

图7.png


! x7 e. j% f: K( r5 _
( m/ F/ D, L* @" W5 n: S3 k4 ~* }

图8.png


, W  V( p9 |7 w9 G( ?, V, \" `) i' e1 f& D' e

; _9 S$ c2 z* V7 f. S

图9.png


7 P1 e+ `: I) d7 u  P; `+ k+ W' ?! ?' S
          像这样,将一个人物完全包裹住。(当然,如果你的人物组图比较分散,在人物上直接点击左键,会自动将人物给包裹住的。如果想删除已经拖出的框,可以使用裁剪图块下面的橡皮工具,或者直接在选框中点击右键即可。如果人物图比较小,下方有放大和缩小的工具可以使用)。 当所有人物都处理好后,我们单击右边黑色口的任意地方,进入到动画帧的编辑状态,此时右边的工具栏处于激活状态。% r9 q) z% b( c8 x: T9 X6 l
8 [" h% ]+ l7 @$ ?5 [
$ Q5 e$ S9 C1 p1 S4 C9 x# g

图10.png

! ?2 {! k; e8 S; F& {+ s9 h! ~

, T/ c  g# w: \3 a: S$ ^) x      现在点击第一个工具,创建一个帧。这里,我一次性创建9个,因为女仆长的行走动作是9张图。
/ C4 L" J) i+ n' i
$ r7 g0 j3 Y/ |- @4 I: J: }; P9 @7 \

图11.png


2 E# r, ]: h7 j0 p2 I4 X3 z( O+ c/ Y9 {1 m- e  U/ N  ?

图12.png

: t9 U; M0 s' g

$ G) H+ T& {* f9 |- k  W: G
      可以看到,有了9个空白帧。这时,我们再点击左边的窗口,进入到左边窗口的编辑模式,点击箭头工具。) J* U# G3 b* @1 }0 s

: _  c% X5 H# c. O

图13.png

! }" o3 K8 R8 B( J

: z9 d5 x6 F+ b! }% v: t+ ~
      这样就可以拖动人物了。我们先把第一个人物拖动到右边第一个帧的小窗口内,双击这个小窗口。就可以对这个人物进行位置的布置了。+ p( n8 j# P* W, m7 J4 B
- Q4 F4 d( H. Y* _1 {4 ?

图14.png

, `& r% l$ ^' \  O4 A  Z

- S* b: \1 ^# z8 E, c

图15.png


7 Z/ Q- [8 p0 L5 e/ V1 `7 c0 B3 |8 Y% S1 M$ x9 ~: X
      因为是人物连贯动作,我们需要把人物置于同一个位置上。这里为了方便对齐,在右边工具栏中提供了一些自动对齐的工具。我们需要点中人物才能使用这些工具。3 T0 `% s' d# f" ~* m8 d: F
& b' t- u3 F* x+ R+ |' O) i  y

图16.png


2 |5 C+ t3 w# y: J% O% F/ p9 d/ @+ t; }# X3 G" r' v
      这里我们让人物水平且垂直居中就可以了。
( [* G* g, s4 |9 ~( ^& F- P$ s0 O

图17.png

! y, w% G2 @$ P  Z
6 J" p" B8 V  E
      当编辑好一个人物的时候,双击人物以外任何地方,即可还原窗口。我们依次处理剩下的图片。所有人物处理好后,我们点击编辑动作按钮,或者在动作菜单中打开编辑。

- T/ B# [+ d) T1 V

图18.png

: S. R& j# i+ h  b7 _: q
# u- w; u* J9 z! e
      可以看到这样一个动画编辑的窗口。7 A1 i5 s) I+ X2 \# T
+ K8 \( o3 U- w* A! w/ r0 ]4 A- _3 L

图19.png

2 v, {# `- v& j' n' d  G

  f  X, @& k$ F$ c
      点击新建动作创建一个动作。然后选中这个动作。
9 s: L& y3 V7 ]0 ?) T: i0 E* f

图20.png


1 Y6 k, {1 {  o# Y/ ^5 `; b- A3 z3 o1 x- |: \

图21.png


' s+ T9 s3 B5 X+ j5 w4 n- P6 z! M7 ]$ c- o
- x0 E; B; j. S0 O0 X
      选中这个动作后,再选中帧窗口的所有帧,将他们添加进序列中。


" v7 L0 A7 k" Q

图22.png


; [5 q3 m$ j* Q
" m0 G% U, Q; _% B4 w# I           接着,我们就可以在这个动作编辑窗口预览了。; f, A# C5 A% ~) A

1 b& s  @+ V4 s; U* i4 I  J* s

图23.png


/ u1 y/ @7 J. I) k5 n1 v! i: f5 H, ?( i6 `* L
      1是一些播放动画的控制按钮,这里也可以将这组动画变成GIF,或者选择导出,即可得到包含了切割图片数据和动画数据的spritespx)文件,这个后面再详细介绍。   2号是用来控制动画速度的,只对动画预览起作用,要是控制图片在程序中的切换速度,那么需要在动作窗口中选择延迟,再在帧列表中设置延迟时间。其他功能大家可以自己试着调试。调色板是针对导出的图片中的背景色的,这里没什么用,就点击透明色后不管就行了。
- P5 ~) r: e! A      3号就是我们动画的预览界面了,左边是1倍大小,右边是3倍大小视图。   设置好后我们就可以导出了,点击导出数据。. U, [6 T9 P7 l. a1 W6 c

( F) Q; u8 w5 J7 T7 O5 G! x- I% w; D

图24.png


* W6 o% W1 [, \' g6 O
( V$ N0 m  |5 o0 R* G
      第一个对话框是让我们保存spritespx)文件,第二个框是保存我们导入的原始图片(注意,在保存图片的时候,一定要注意保存成PNG格式,否则默认是BMP格式的,有背景色)。保存完成后,我们就有了一个spritespx)文件和一张PNG图(这个图是不能使用的,因为切割点的数据是根据导入的原图计算的,只能使用原图)。额外讲一个小功能,在左边图片处理窗口有个组合碎片和自动排列碎片,会将我们的图片紧密的贴合在一起。1 o' I: ?) @/ O3 E8 r+ M

9 E$ y* p$ C/ m

图25.png


4 v& V* C& n  Y3 G( a1 Q' r# B/ t& y9 h! {( X; q3 |
      这个功能能够大大缩小我们的图片体积,将这个图片导出后,再按照上述步骤对这个图片处理一次,我们就能使用这个排列后的图片了,有助于我们减少图片的体积。' H' f( N( \1 t; V( e4 a+ P% P
      额外说一句,在每个帧中可以放入多张图片,这样也就给我们一个思路,可以将一个动作中具有相同样式的部位单独切割成一个块,也就是把人物按照部位分解成若干块,在每个帧中将这些块拼接成一个完整的人物,这样一来就可以进一步的缩减图片资源所占用的空间。不过这种事一般美工才能干的出来,程序猿同志们就算了吧。。。9 \3 O4 B' B8 w3 o. _! ?' Y) Z
      得到切割数据文件后,我们就可以把它用在我们的Android代码中了。在附件的SpriteX工具中已经包含了在J2ME下解析spritespx)文件的代码,而Android中是没有J2ME中的一些工具类的。     
% |6 V) S- Q& {4 Y; ?      不过没关系,这里可以告诉大家,在程序提供的解析代码中,我们将它的Grahpic类替换成Android中的Cavas类,将Image类替换成Bitmap,不使用它原来的绘图方法,而是自己传入canvas画布去画等等! j' U2 F( U4 i. H& @# t# ^
      具体可以自己尝试,或者参考附件中的工程,里面的SpriteX3_9_6类就是在J2ME基础上改来的。而mySprite类是在SpriteX3_9_6基础上经过简化得到的。SpriteXImage类是综合使用的,是参考了一个开源的项目代码改过的,而这个方案提供的功能比较多,有兴趣可以自己研究。) L1 F8 u" l# _, X  h

$ ~# N, a/ ~8 u' q, X' ?. v

图26.png

4 Y) S& K$ [3 C: {( y% h0 p
5 C# y  F; ^5 {1 S0 \
      需要注意的是,spritespx)文件需要放在“asset”文件夹下,而原始图片需要在“asset”文件夹下放置(用于使用参数为字符串的图片名的构造函数使用),在res/drawable-nodpi文件夹下放置(用于使用资源文件创建Bitmap对象)。      当程序运行之后,我们就会看到可爱的女仆长在屏幕中走动的样子了~~~~4 t1 R0 s! A0 g% A

5 \. t+ b+ y; m# n; H( I# t

图27.png


$ M: V0 e# K7 i/ x# ^$ R2 H; y9 C5 Y# K9 P: `* x; d
" J- u: N9 K- }% G9 e+ `. h2 R

: l& @; t; R# b5 k. C! ?3 r      今天的教程就讲到这里,有不太明白的地方可以在下面回复中提出,或者PM我,我会为大家做出解答~~谢谢~~~~, x! w, l# k/ O/ S0 t! S0 z+ m; I

3 c( s- M4 t- [$ }
$ O% U% o+ j7 v$ Q/ `' E  d$ u9 t( Y7 O" e8 D
BerryAnimTest.rar (1.07 MB, 下载次数: 491) ) J" D4 Z8 b+ e

  l) B, N' P4 I3 [1 ^ spritex3final.rar (2.26 MB, 下载次数: 491) , [% j7 r! Q3 w) [/ x4 n- T1 K

2 [( H2 @% p  U# m  o4 O( d* n; _7 A! T SpriteX3_9_6.java (51.56 KB, 下载次数: 110)
  L. Z7 R8 ]* l* C
! B/ C9 q" \! T8 m- l! Q' h
' n* w5 u6 u9 e7 r) j5 c" S
  g. Z1 d( f4 W# D8 ^
1 s+ L: w" Q' g4 X4 c
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 m2 ^& |, t5 B5 t& W( w% ~4 h9 t, P; o8 Y  z" h
( ~  W) G0 t' _* i( ^9 M
( y) s: ]2 p  y. D8 z6 p. g
但是最后生成了一张gif图片在Win 7里打开播放不了,仍然是静态的,只能用IE打开后才能正常播放这个动画。

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

UID
95061
星币
5191
积分
814
阅读权限
90
注册时间
2012-12-5
最后登录
2018-9-29
发表于 2012-12-7 08:31:18 |显示全部楼层
小白菜 发表于 2012-12-6 23:36
! e! m- \  S% W6 A+ `" J% ]哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!

1 |8 b& Y  X" p  @没错,WIN7的图片查看器是不支持GIF的,只能在IE中打开。
Freely Tomorrow

光芒万丈的恒星

FFF团突击大队队员

Rank: 6Rank: 6

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

STS-X-001 七芒星勋章

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

管理员

勇者

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

UID
4
星币
317
积分
5134
阅读权限
255
注册时间
2007-6-30
最后登录
2018-12-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
积分
814
阅读权限
90
注册时间
2012-12-5
最后登录
2018-9-29
发表于 2013-6-26 09:43:25 |显示全部楼层
本帖最后由 MythosMa 于 2013-6-26 09:49 编辑
; z1 o# K" E! r
- F8 H* [. o! T3 S3 ?嗯嗯,多谢提醒,我试了下确实是,有部分代码写错了,已改。请各位将新上传的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-12-18 01:21

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部