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

星组游戏论坛

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

QQ登录

只需一步,快速开始

查看: 11560|回复: 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 编辑
2 j& H) u5 `  c" q6 g8 s8 c
8 z$ l$ m1 b. @2 J4 t. [

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

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

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

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


$ o5 x8 k8 e! v' z6 v

图1.png

1 |/ Q$ l9 e) m% A

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


/ s% c( K7 F# h7 }, f

图2.png


. a- e; C3 e; X1 N
" `2 c# ^, Q: Y6 F. ~+ n, w

6 E0 S% ?, Q/ U" P! |

     好的组合完了,保存成PNG的。
5 m+ L( \8 Q4 e& r/ s- u


2 E: l7 j) [; s: \( [

图3.png

0 v4 e. H. C; E8 {
4 _& k) P" O' _, Z
     我们将这个合成后的图导入到SpriteX中。点击这个图标(PS:SpriteX默认是英文的,在工具(tools)中能够设置语言成为中文),找到刚才合成的组图,打开它。1 N$ l9 ?9 [0 V' i. ?" E
) c* u5 c  S: F1 r

图4.png

& [( @' r$ o# w# s4 d! T  O

! @6 ~: Q2 A& F2 x4 A4 Y& P

图5.png

# p& x' l6 H- z! e# [1 j9 c, Q
' e5 j% M: K; H  i) Z- X& X
8 `+ e6 y% j7 c( E7 L; S4 y4 O
     这样在右边的绿色界面就能得到我们刚才的图了。下面我们点击左边窗口的裁剪图块工具。
, W) D" m5 Q; ?! U/ r" y
2 R+ k# J+ Y4 v) A

图6.png


/ E& s* H" F9 r: M5 E
6 U- j9 K+ @  X# ?, z
     将鼠标移动到图片上,会出现一个红色的选框和基准线。我们在人物的边缘拖动鼠标,会出来一个方框。
7 I4 ]& x9 B1 o% V( Q/ W
- r; F1 P. g  J( r$ J. y

图7.png

' z+ Z  @& ]) r7 Z! }. L
$ {$ L! c( o! @/ `- Z* M

图8.png


, z6 x) A9 _" V8 P% y) `
% f! x+ Q* v$ t* v4 r) l0 ~0 ^; d
1 w' ]! u2 {# u/ |

图9.png

0 e4 h* H; ^( Y7 v! C0 y/ |* v
% z* w; F" h  e3 T) M) z# P
          像这样,将一个人物完全包裹住。(当然,如果你的人物组图比较分散,在人物上直接点击左键,会自动将人物给包裹住的。如果想删除已经拖出的框,可以使用裁剪图块下面的橡皮工具,或者直接在选框中点击右键即可。如果人物图比较小,下方有放大和缩小的工具可以使用)。 当所有人物都处理好后,我们单击右边黑色口的任意地方,进入到动画帧的编辑状态,此时右边的工具栏处于激活状态。
4 f7 f! y% O4 O( B* j# u9 e
& h0 }0 o! D4 J

; K3 d8 L" @, ?. A3 J: P

图10.png

/ W) N% u% R, r% {; t
/ i( p" m6 u( T
      现在点击第一个工具,创建一个帧。这里,我一次性创建9个,因为女仆长的行走动作是9张图。/ G1 O9 x, z, {. V+ w

& C' k) y6 S* m

图11.png


* d+ G& K1 J* ~" A: \! g; ]8 \+ Z: N. h+ B

图12.png


5 z& |; A5 ]( s! T* U8 W# `) y$ c' Q* J* F- [' s/ L+ }7 |
      可以看到,有了9个空白帧。这时,我们再点击左边的窗口,进入到左边窗口的编辑模式,点击箭头工具。* [  u' }( U/ o3 ^8 e
/ f* g* g7 F+ `* ?) u+ k% A2 X

图13.png

' n2 X% e3 a7 D; f6 j/ L" D- m

+ W# O3 x1 ^) q: S9 G/ H3 k
      这样就可以拖动人物了。我们先把第一个人物拖动到右边第一个帧的小窗口内,双击这个小窗口。就可以对这个人物进行位置的布置了。
+ g5 m& P: u1 g  s, W
  r9 H, e3 g+ i& u! v6 K% H

图14.png

" t# C- e& |8 K. n, [4 F
3 k% r8 Z" x$ w8 G# s6 a5 B

图15.png

2 d( a) L) f6 A
/ l/ F/ p; q, |
      因为是人物连贯动作,我们需要把人物置于同一个位置上。这里为了方便对齐,在右边工具栏中提供了一些自动对齐的工具。我们需要点中人物才能使用这些工具。( W: m8 _: f, W; Z

/ Z  ^0 [1 D  p- `1 j6 l8 w

图16.png


  i* |1 [0 ]  U+ X- f& b) n* i
* ], a: u' {5 x7 T* l
      这里我们让人物水平且垂直居中就可以了。0 Q1 E# t5 j6 |3 O7 l, @/ E# x
3 |7 B' d! m2 h: Z7 e

图17.png

  x# r( E. f" d+ y0 R2 P8 F: A" d+ m
" `0 K. O; D- _& W* Q
      当编辑好一个人物的时候,双击人物以外任何地方,即可还原窗口。我们依次处理剩下的图片。所有人物处理好后,我们点击编辑动作按钮,或者在动作菜单中打开编辑。


2 N3 B& n5 f2 C2 _4 @0 E! C

图18.png


9 y0 O% C+ S  M; y+ A5 a( f- E9 |' c) W0 q9 f% [5 {$ X
      可以看到这样一个动画编辑的窗口。& _- l6 i" M5 Y6 y6 d9 H' R. \6 r5 P" X- a

/ j2 o4 S5 r; B

图19.png

( D3 ^9 o2 ^" b5 D0 Z
" |; G# W) F' n! Z  }6 B/ i% s5 B
      点击新建动作创建一个动作。然后选中这个动作。9 V2 m( a' V% _4 E2 g  \2 m
7 ~/ y, F, n$ I; G/ B# [

图20.png


' s/ Q% B/ J0 f$ M5 I$ X4 k! y/ q6 ]' Q# d( p

图21.png

4 ~$ z6 I1 F" J2 u8 L

: a$ K- I/ _: R: Z/ S/ T# w0 b- s: x: w# s2 Q3 }8 q' s* }
      选中这个动作后,再选中帧窗口的所有帧,将他们添加进序列中。


6 u) U! ~2 E- s, \3 h" L

图22.png


) m+ I( B( W/ I8 L4 G" m; }5 Z0 {; e6 |" j- ~" k
           接着,我们就可以在这个动作编辑窗口预览了。: s1 R  U* R  w# U* C

3 x- _* k( T1 x

图23.png

9 I+ j- n, h/ o, `

+ s' d5 m! A5 f8 y7 J1 q
      1是一些播放动画的控制按钮,这里也可以将这组动画变成GIF,或者选择导出,即可得到包含了切割图片数据和动画数据的spritespx)文件,这个后面再详细介绍。   2号是用来控制动画速度的,只对动画预览起作用,要是控制图片在程序中的切换速度,那么需要在动作窗口中选择延迟,再在帧列表中设置延迟时间。其他功能大家可以自己试着调试。调色板是针对导出的图片中的背景色的,这里没什么用,就点击透明色后不管就行了。
3 M! g3 W3 G3 N% `# A/ V0 Y0 o$ M2 s      3号就是我们动画的预览界面了,左边是1倍大小,右边是3倍大小视图。   设置好后我们就可以导出了,点击导出数据。- i3 B1 `$ i* w! G2 h' c

: e* j& q, M0 }: r

图24.png


0 Q  w' q( ^' {7 n2 L/ P  @& }3 h$ H; G1 J" F) V
      第一个对话框是让我们保存spritespx)文件,第二个框是保存我们导入的原始图片(注意,在保存图片的时候,一定要注意保存成PNG格式,否则默认是BMP格式的,有背景色)。保存完成后,我们就有了一个spritespx)文件和一张PNG图(这个图是不能使用的,因为切割点的数据是根据导入的原图计算的,只能使用原图)。额外讲一个小功能,在左边图片处理窗口有个组合碎片和自动排列碎片,会将我们的图片紧密的贴合在一起。
4 S1 e4 ?- N9 z- ~1 @$ u/ Y
% o0 J" V! d7 R& r: L0 ?( x+ s

图25.png


  _% ]" C2 s3 O& L) d4 ]0 Q
* q3 x3 g0 b5 |8 R' V+ L
      这个功能能够大大缩小我们的图片体积,将这个图片导出后,再按照上述步骤对这个图片处理一次,我们就能使用这个排列后的图片了,有助于我们减少图片的体积。/ w; T( w: D+ s# i$ [
      额外说一句,在每个帧中可以放入多张图片,这样也就给我们一个思路,可以将一个动作中具有相同样式的部位单独切割成一个块,也就是把人物按照部位分解成若干块,在每个帧中将这些块拼接成一个完整的人物,这样一来就可以进一步的缩减图片资源所占用的空间。不过这种事一般美工才能干的出来,程序猿同志们就算了吧。。。
) a& B( j3 q3 {9 j$ P1 R      得到切割数据文件后,我们就可以把它用在我们的Android代码中了。在附件的SpriteX工具中已经包含了在J2ME下解析spritespx)文件的代码,而Android中是没有J2ME中的一些工具类的。     # ^- f& v" m" `& P( I3 s
      不过没关系,这里可以告诉大家,在程序提供的解析代码中,我们将它的Grahpic类替换成Android中的Cavas类,将Image类替换成Bitmap,不使用它原来的绘图方法,而是自己传入canvas画布去画等等# q3 W# P, o  H4 X) S  W
      具体可以自己尝试,或者参考附件中的工程,里面的SpriteX3_9_6类就是在J2ME基础上改来的。而mySprite类是在SpriteX3_9_6基础上经过简化得到的。SpriteXImage类是综合使用的,是参考了一个开源的项目代码改过的,而这个方案提供的功能比较多,有兴趣可以自己研究。8 e; ?0 n+ }; I) G2 a+ [) v* y+ ?
& V: y3 @, u0 ]" x

图26.png

. `* e7 f# F- B/ d
+ f; @* R; I2 T) o
      需要注意的是,spritespx)文件需要放在“asset”文件夹下,而原始图片需要在“asset”文件夹下放置(用于使用参数为字符串的图片名的构造函数使用),在res/drawable-nodpi文件夹下放置(用于使用资源文件创建Bitmap对象)。      当程序运行之后,我们就会看到可爱的女仆长在屏幕中走动的样子了~~~~
  Y' C9 ?8 D  O% [4 P3 m. C
, b4 u& j" `1 ~6 J! o2 p0 G/ E' J

图27.png


/ e( o% @) ]( _4 B" W: t( Y' Q0 \
  G" z- e& z0 k  X

2 P6 T9 l5 z: e9 P; w, r; ~
( g; X$ A; {3 C' }      今天的教程就讲到这里,有不太明白的地方可以在下面回复中提出,或者PM我,我会为大家做出解答~~谢谢~~~~* ^) p  m# T1 B7 p8 H; c0 r0 r$ D
8 b! ]0 o2 b+ O4 z* T
% D7 I/ R7 F: A4 E$ R  B% L
+ w, O. {/ U5 }' n" J9 P5 K
BerryAnimTest.rar (1.07 MB, 下载次数: 491) ) @, f0 i4 u( N# y8 Y! N

* V* O! S( @" C! T* \ spritex3final.rar (2.26 MB, 下载次数: 491)
- ~* }7 I1 T: M( `% i" D! ^" O3 L- W' v, X. q$ N
SpriteX3_9_6.java (51.56 KB, 下载次数: 110) / g; f% q; J7 h( x( z* T" z
# `5 l7 J0 d' z' S$ B* T

* F( O) @& o  d; b8 J: }
6 w. }; i$ K8 Y5 r: \5 u2 d
% C0 ^0 K+ _! P: D( @" S# {4 M
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 |显示全部楼层
哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!: ~% b; B4 p% H. z2 C! [
% l2 q7 ~$ j, f* B" d
8 {/ r1 W9 B7 @; e& C7 S4 Q& V

, t' K* N3 v; f& U6 g0 {  @& q但是最后生成了一张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
- L, ?! c& Y- C, _6 I" E  H哈哈,很不错的教程哦。 我按照你的方法操作了一遍,效果蛮好的。要加精啊!
( K- z% S7 M) c; X: c! k. t7 r
没错,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
星币
262
积分
5143
阅读权限
255
注册时间
2007-6-30
最后登录
2019-2-21
发表于 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 编辑 ( c6 W# L6 D- T; T" b/ J2 _
3 P$ T% o' |8 Y& ~' @4 t9 Q
嗯嗯,多谢提醒,我试了下确实是,有部分代码写错了,已改。请各位将新上传的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, 2019-2-22 20:43

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部