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

星组游戏论坛

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

QQ登录

只需一步,快速开始

查看: 10008|回复: 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 编辑 1 f, t$ @( \" p9 U2 r+ O5 ]# H

6 Y% G# K2 s0 O  P$ Y

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

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

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

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

6 `! U5 g' F% V/ M% `9 Z- J

图1.png


! s) R  C* W' j% t0 w

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

; N" u" O$ g8 O5 V+ A( C: V6 t

图2.png

  D) y/ n, o7 z, s4 e. b* q
' c2 A/ b# T  g

. f) `/ R' F; X. c" w- V$ f

     好的组合完了,保存成PNG的。
6 L4 v1 A7 d6 z4 \5 d2 M) z2 s+ L" o" Z, a

# [. N0 [8 ^& A: d2 ^- U: x  P

图3.png


& n! J$ Z/ B+ `6 z# C2 g' i7 y" s/ f8 B+ x7 m# u0 ~; i9 U3 [
     我们将这个合成后的图导入到SpriteX中。点击这个图标(PS:SpriteX默认是英文的,在工具(tools)中能够设置语言成为中文),找到刚才合成的组图,打开它。
2 i  R( \$ H7 e+ {- B" a- ^* s3 y2 x% Y& S( O

图4.png

2 k- g: Y8 q: a1 r  t) R' B, r8 \  P

/ J3 F# F2 m  u. E

图5.png


8 r, n# z4 `+ Y8 r
" }) _8 S- b7 L5 n. x8 }' m# z" J4 g# ]) o3 C' Y0 J" d# W
     这样在右边的绿色界面就能得到我们刚才的图了。下面我们点击左边窗口的裁剪图块工具。3 ^' P7 m4 x9 ~+ d. Y2 K- |* L

6 ?7 K1 T6 v4 Y$ V

图6.png


) i- n- i9 Z' r$ G+ {. b
7 w; `1 l- j6 @8 N6 r, S  A( B
     将鼠标移动到图片上,会出现一个红色的选框和基准线。我们在人物的边缘拖动鼠标,会出来一个方框。
; F% g$ t9 H/ A7 i
) T& I. a% h* Z% w- O7 h

图7.png

. m6 }/ \8 M& Y6 |; d" B1 M

- Q" y" K; M, W8 _% V$ n8 ^

图8.png

3 W& z; u1 S/ q5 x& T/ V# D
9 O( a. ?/ D; W( N, f' v
3 \5 d$ D5 _" B+ \2 Z/ ]8 G, Z

图9.png

9 g1 A: D& ^  O4 M, O
# o5 x$ z+ z, I
          像这样,将一个人物完全包裹住。(当然,如果你的人物组图比较分散,在人物上直接点击左键,会自动将人物给包裹住的。如果想删除已经拖出的框,可以使用裁剪图块下面的橡皮工具,或者直接在选框中点击右键即可。如果人物图比较小,下方有放大和缩小的工具可以使用)。 当所有人物都处理好后,我们单击右边黑色口的任意地方,进入到动画帧的编辑状态,此时右边的工具栏处于激活状态。" _" s4 Y: k2 g: n$ d& `% i% u

; y/ _" ?& C  n% O) ]8 j7 l
* `1 j0 m/ H& r* P5 r5 r, Z9 S' W

图10.png

6 \( d6 J# T- p5 ]

; _( y+ L- ^6 n, Y      现在点击第一个工具,创建一个帧。这里,我一次性创建9个,因为女仆长的行走动作是9张图。
" C: X2 L3 @  |. K6 F) Q
+ ~' ]. Q2 u4 |* ^, l

图11.png

% c1 v( r& {& k/ u- I. A: u7 k

6 y- Q& R2 H7 Q: \# `; v9 J

图12.png

7 g3 x  F9 A& w: y

* U( Q9 \! h) N$ [  D
      可以看到,有了9个空白帧。这时,我们再点击左边的窗口,进入到左边窗口的编辑模式,点击箭头工具。
% R3 X1 \$ f: ~/ t2 d8 A
3 S# Z0 O* H4 q4 V7 ^# D$ F7 P

图13.png


% Z# |4 @, q* \* K8 G5 V1 V  ~  _" }1 p% e9 D
      这样就可以拖动人物了。我们先把第一个人物拖动到右边第一个帧的小窗口内,双击这个小窗口。就可以对这个人物进行位置的布置了。7 k3 J' o% ^/ X: t
1 T7 F& V3 V. \- X8 a5 C1 E

图14.png

% y: H% f! ?, a4 |/ y

/ s0 M) ^* i- z3 o% k

图15.png


( o8 T2 h! `# v% W
' Y  |% l) Y1 B+ P$ P      因为是人物连贯动作,我们需要把人物置于同一个位置上。这里为了方便对齐,在右边工具栏中提供了一些自动对齐的工具。我们需要点中人物才能使用这些工具。, Q' E% Q6 {, Z& k
7 C' R8 K# s4 R0 b2 D4 \

图16.png


6 F+ _8 B5 P8 b+ o, B
" ?; J$ V  U: q+ _1 |. F' e
      这里我们让人物水平且垂直居中就可以了。
  D( Y" U) W7 N. x: |: d1 y
& H& \! @" h. f* C

图17.png


5 A( \6 Z* M) j# H
; ]3 a+ F* L& C  ~2 ~7 G$ ]. \
      当编辑好一个人物的时候,双击人物以外任何地方,即可还原窗口。我们依次处理剩下的图片。所有人物处理好后,我们点击编辑动作按钮,或者在动作菜单中打开编辑。

: n3 {* L  A3 i7 l

图18.png


% }( k6 K6 f, v) D
' y6 p: I" A5 r: |3 T8 A      可以看到这样一个动画编辑的窗口。
: ~; {9 q# e7 u7 J; T
9 V, m7 o: F" B3 l4 U( B

图19.png

% Z) U" x6 \9 J3 [

  \0 Z; ^% p% o- H0 q+ v5 ~
      点击新建动作创建一个动作。然后选中这个动作。, Y; s5 E6 {7 O; i7 S

( f7 R* @& _! S

图20.png


& O  E: x' W! Z+ R9 ^( n8 r
$ S8 R  v. D. E0 {7 W4 G" K0 W

图21.png


5 S' W+ k; b8 a1 i- A  s8 r9 Z; t- O
6 S; I* |. P3 Y1 G9 `4 o/ [; h+ Z% d1 }! Q% `. o; q# r
      选中这个动作后,再选中帧窗口的所有帧,将他们添加进序列中。


; Q6 _5 \1 p' m$ r

图22.png


3 b* O3 _. O( S* N2 Y* X7 P# ]7 T; j1 l
           接着,我们就可以在这个动作编辑窗口预览了。
2 e0 l1 `2 Q* X0 ^# N# i0 t( n. H6 x" E5 ], O& B6 r9 ^4 S

图23.png


( d* E$ T& U0 X% `" n) }  k) J, G. m4 Y, _. n! @& V4 g
      1是一些播放动画的控制按钮,这里也可以将这组动画变成GIF,或者选择导出,即可得到包含了切割图片数据和动画数据的spritespx)文件,这个后面再详细介绍。   2号是用来控制动画速度的,只对动画预览起作用,要是控制图片在程序中的切换速度,那么需要在动作窗口中选择延迟,再在帧列表中设置延迟时间。其他功能大家可以自己试着调试。调色板是针对导出的图片中的背景色的,这里没什么用,就点击透明色后不管就行了。6 B4 t. V% c& q$ Y
      3号就是我们动画的预览界面了,左边是1倍大小,右边是3倍大小视图。   设置好后我们就可以导出了,点击导出数据。& G0 H4 }$ ]. ~/ |" q5 S

7 f$ E! R2 B* n- c# A9 ^

图24.png


0 m4 j& m) u# T- v, |, e+ Q% m
8 o: k; B* T5 ]# f# {. z
      第一个对话框是让我们保存spritespx)文件,第二个框是保存我们导入的原始图片(注意,在保存图片的时候,一定要注意保存成PNG格式,否则默认是BMP格式的,有背景色)。保存完成后,我们就有了一个spritespx)文件和一张PNG图(这个图是不能使用的,因为切割点的数据是根据导入的原图计算的,只能使用原图)。额外讲一个小功能,在左边图片处理窗口有个组合碎片和自动排列碎片,会将我们的图片紧密的贴合在一起。
; x0 W4 S, D( n4 Z3 {, W# ^
1 ^2 u) _: U2 W! k

图25.png

, P( d5 P! W$ y1 v. g

+ E4 @/ w- @' ?4 i
      这个功能能够大大缩小我们的图片体积,将这个图片导出后,再按照上述步骤对这个图片处理一次,我们就能使用这个排列后的图片了,有助于我们减少图片的体积。
/ z1 ?2 [3 ]; a: |# c      额外说一句,在每个帧中可以放入多张图片,这样也就给我们一个思路,可以将一个动作中具有相同样式的部位单独切割成一个块,也就是把人物按照部位分解成若干块,在每个帧中将这些块拼接成一个完整的人物,这样一来就可以进一步的缩减图片资源所占用的空间。不过这种事一般美工才能干的出来,程序猿同志们就算了吧。。。' A6 o, s6 ^- {) W. F+ `5 N1 }
      得到切割数据文件后,我们就可以把它用在我们的Android代码中了。在附件的SpriteX工具中已经包含了在J2ME下解析spritespx)文件的代码,而Android中是没有J2ME中的一些工具类的。     
8 E2 r# s" \. U( ~4 c/ R7 }! [      不过没关系,这里可以告诉大家,在程序提供的解析代码中,我们将它的Grahpic类替换成Android中的Cavas类,将Image类替换成Bitmap,不使用它原来的绘图方法,而是自己传入canvas画布去画等等
4 z$ q# ]+ _/ h5 i) M, \" {      具体可以自己尝试,或者参考附件中的工程,里面的SpriteX3_9_6类就是在J2ME基础上改来的。而mySprite类是在SpriteX3_9_6基础上经过简化得到的。SpriteXImage类是综合使用的,是参考了一个开源的项目代码改过的,而这个方案提供的功能比较多,有兴趣可以自己研究。1 p9 |3 Y4 j* L9 C/ \
$ ]" Z- H+ z6 |; E3 O3 f

图26.png


0 R! V4 m% H& v7 ~, ]7 j1 l
1 [# b: F; l, P, m6 e
      需要注意的是,spritespx)文件需要放在“asset”文件夹下,而原始图片需要在“asset”文件夹下放置(用于使用参数为字符串的图片名的构造函数使用),在res/drawable-nodpi文件夹下放置(用于使用资源文件创建Bitmap对象)。      当程序运行之后,我们就会看到可爱的女仆长在屏幕中走动的样子了~~~~
# h* F7 l, k/ v8 b
4 E0 g7 t: |  s0 z$ P# ^

图27.png


" o& ^: n5 U7 C7 h: u& b# c
$ `0 `) r0 x2 R! D) ~% X* b

+ s/ a3 s+ j8 X/ V9 F5 P
, h% V# e1 W2 f/ r  v      今天的教程就讲到这里,有不太明白的地方可以在下面回复中提出,或者PM我,我会为大家做出解答~~谢谢~~~~. t. T: S5 y7 T' R9 Q. U) S/ N8 K

7 g' }, f8 d+ |# s: ^5 \5 U; p  p6 t$ p8 _9 f# w
% ^9 z) @+ W' |) p
BerryAnimTest.rar (1.07 MB, 下载次数: 491)
: L+ a# Z4 N. i* h+ q/ t6 @' f* V5 A& P6 u( t  F
spritex3final.rar (2.26 MB, 下载次数: 491)
' V. d7 P0 U) M: B$ b& k
4 l$ q6 Q# f# @% T; o3 ^ SpriteX3_9_6.java (51.56 KB, 下载次数: 110)
: h; a/ J9 Y% q! i9 p- {& d: _$ c, ]5 X/ y+ |0 n
" o! ~6 i: b) V. T

8 U4 S( ?  S# u* h6 a
( r" u1 O; b: [2 S" L$ c+ X
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 |显示全部楼层
哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!
4 p6 x/ Y; X5 S, o4 x! m' B5 Z2 H
. X" o- _  S. R& a1 Y. {* N7 [$ u' r/ b% D- Z! N, o
+ B" n) k4 R  N8 x+ \4 U7 t/ r$ Y
但是最后生成了一张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
3 w4 p0 r8 e& w/ c7 y1 j5 ?; n哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!

! i3 {& m2 w2 s( J3 J* r  C. l6 l没错,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
星币
347
积分
5129
阅读权限
255
注册时间
2007-6-30
最后登录
2018-10-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
最后登录
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 编辑 + R4 i$ y9 f" \9 c% m0 s+ R
9 c$ P# r6 s7 G& p; M
嗯嗯,多谢提醒,我试了下确实是,有部分代码写错了,已改。请各位将新上传的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-10-23 15:50

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部