浮烟 发表于 2016-05-15

小雪读条皮肤Uitex动画制作详细教程

JX3PVE独家专稿,转载需授权,By@浮烟烟烟烟烟烟
UITexMaker下载:(还是小雪和B叔的配方)

需要安装.NET Framework(自己360或金山卫士装一下吧)


废话:
有不少小伙伴对这个章节不太懂,我重新写一遍吧=。=!(谁说我不会写新手教程的,我可以的!!!)
其他3篇主引导教程也全部新增了不少补充,请自行阅读《皮肤制作教程索引》!!
有问题直接回帖。(务必描述清楚自己问题,最好附图,纯伸手怨妇党不处理)。


教程:
Follow me!开车啦~~

1.软件安装启动

[*]系统需要安装.NET Framework,这个可以在360和金山的软件管理里面搜索一下安装,已经安装过的可以无视这一条。
[*]下载上面的附件,随便放哪个目录就好,不需要专门的安装,启动里面的EXE后缀的文件即可。

2.问:这个是干嘛的?
这个你可以理解成转UITex格式或者制作UITex动画用的。
3.问:什么东西用得到?
读条皮肤里面有个Lighting和Animate这两个原件,这两个原件如果想要使用,它们必须使用该格式。(如果你不需要这个就可以不做这个东西)。
4.问:Lighting是什么?
首先你可以先阅读下《文件结构说明》,那么Lighting就是高光(它的英文意思就是亮光),你想象一下读条在前进的时候,最靠前那个东东,我们希望有点火箭冲起来的感觉~。
它需要你皮肤文件夹下存在Lighting.UITex和Lighting.tga两个文件来支持,它默认的效果就是在进度条的进度所在位置并始终跟随。

[*]示例一:

   比如插件里皮肤Skin_Org这个,这个元件本身看起来是静态的,但是也是需要两个格式的文件,那么你就可以做一个UITex动画,让里面2个帧都是一样的(好,如果这句话你没听懂先别急,下面解释)。

[*]示例二:

   又比如插件里皮肤Skin_SimplePink这个,这个高光则是星星们闪啊闪的,这个东东就是需要用到今天要学习的。

      总之你明白,高光是一个跟随进度条的元件,当然这个位置你可以自己进行微调,它可以是动画,但是不管它是要动画还是不动画,你都需要Lighting.UITex和Lighting.tga这两个文件来支持。


5.问:Animate又是什么?
Animate是动画的意思,同理,如果你希望需要这个原件来做支持,也需要Animate.UITex和Animate.tga这两个文件来支持。

那Animate和上面的高光有什么区别?Animate我们最初设计的时候呢,你可以理解成是QQ空间挂件。
所以它就是一个装饰品,但是为了避免过于繁冗,所以,你所有的挂件配饰都合在一个图上好了。就像平时我们看到gif动画,你可以理解成是把每个帧通过前面软件转成Animate.UITex和Animate.tga这个格式。

Animate另外就是还可以设置状态,就是静止 或者 跟随,而高光就是固定跟随的。
6.问:什么是帧?
来个gif示例,比如我们在TB经常看到的钻石图片:
闪闪的看起来很好吃的样子~!然后我们用Photoshop软件(点击下载PS CC 14.2)打开。
(PS的安装如出现问题啥的请查看此文,已经装了PS的无视。)
你会发现图层是这样的:

古老的动画,就是通过这种形式,一个个瞬间,然后切换,来达到动画的效果。

7.生成步骤:
步骤一.将每一个帧保存为TGA
[*]存储为TGA的方式请阅读《TGA格式转换》

[*]然后我们得到了7个帧的TGA文件。
[*]你可以下载上面这个已经转好格式的帧组,按照下面的步骤动手实测一下。


步骤二:拖入帧
[*]打开前面下载的工具,启动UITexMaker.exe。
[*]将这7个帧按顺序拖到软件右侧区域(或者按住ctrl按住顺序选择,然后一起拖进去)。我们看到这样:

步骤三:设置数值

[*]
[*]Group,代表组,一般来说你只需要一个组,全部填为0,双击后单击在里面写即可。

[*]Gindex,代表索引,一般来说你保持和Frame的顺序一致即可,编程中通常都是从0开始计数的,不是从1。所以上面的组也表示第一个组,这里的0~6就分别表示了第1~第7张图。

[*]Delay,延迟时间,即每个动画帧的间隔时间是多少,编程中一般以毫秒计算,1秒=1000毫秒,如果你希望间隔1秒钟,则填1000,如果希望直接马上一个个闪过去,就填0,常用过度动画我们经常会设置200,300,500这三个数值。
[*]X,Y,Width,Height,软件默认已经为我们生成了,默认是按水平排列的,这个不用去动了,它的原理和CSS中的雪碧图是一样的。

步骤四:导出文件

[*]勾选上保存UItex和Tga(此时生成的TGA是一个拼合过的TGA雪碧图),然后点击另存为。

[*]

[*]保存名字为Lighting或Animate。

[*]如果需要弄其它的,可以点击“关闭工程”,继续处理下一个。
[*]最后把生成的UITex和TGA文件剪切到皮肤文件夹下即可,两个文件都要拷喔!


步骤五:静态的Lighting或Animate

[*]由于必须至少有2个帧才能正常,所以假如我们的高光或挂件我希望就是静态的摆在那,那你就可以把那个图片保存2次,然后拖进去,这样相当于在2个一样的图片间切换,就看不出什么改变了。这样看起来就是静态的。

[*]但是值得注意的是Lighting和Animate就是必须都存在UITex,因为插件读的是这个文件。

步骤六:调试效果和数值

[*]当你修改了文件后,你需要大退一下游戏才能生效看到新做的元件。
[*]在修改参数设置中,你需要勾选上动画或高光后面的“显示”,你才能看见。

[*]Animate的尺寸设置和图片尺寸设置一致即可。

[*]Light如果是动画帧的话,则它的高度是实际高度/n(这设定应该算bug)。
[*]尽管如此,在实际制作中,总之你可能需要对light还要多作一些数值调整,包括偏移和尺寸。所以进去的时候如果发现变形了不用急,自己看着调吧。

8.我不会画图啊!
有了动画的装扮,会让读条看起来更生动呢~!
什么?不会画图?不会作图也没关系啊。
读条本身的话直接搜索“读条”、“进度条”、“loading”等关键词的图片。
动画挂件可以搜索QQ空间挂件,或者在素材中国和昵图网等素材站找些素材。
剩下自己拼合发挥想象就可以啦!!!
你们的表情包那么多,我知道的!!

以下可以无视:
UITex解析:(还是小雪当年的那张图)


xuezhan 发表于 2016-08-14

1111111111111

一风之泣一 发表于 2016-11-25

SDFSF
页: [1]
查看完整版本: 小雪读条皮肤Uitex动画制作详细教程