Zelsazgh 发表于 2007-12-16 20:08:15

[求助]如何实现北欧女神里面的连击进度条??

RT,我对北欧女神里的连击进度条很感兴趣的说,尤其是左边的那个不规则进度条,实现了颜色渐变,精确到个位,最重要的是不规则的,有人曾告诉我说用N个三角形进行切分进度槽,然后按百分比进行填充。我不太理解这种做法,有人能解释一下吗?或者有更好的做法更好

shawind 发表于 2007-12-16 20:31:43

有一个思路上比较简单的办法,但是有点消耗资源。当然也不是耗得很多。
就像图中所示那样:

画得简陋,见谅。

A是一个圆形进度条,这个是很多GUI系统的基本部件,也没什么好说的,无非就是算下角度,用三角形来无限逼近。像OpenGL在讲画基础图形时,肯定会有这个。

B就是空槽的基本外形。

然后两个层叠加显示,把槽外的圆形进度条的图形给过滤掉,就得到最后的效果。

这是相当精确的做法。如果不要求很高,那干脆做个10-20帧的位图动画。然后按比例来显示好了。

如果lz你说的那个什么槽不是这个样式的。那就当我什么都没有说过吧。

ps.想起来了,放在后面的那个A图也不一定要用圆形的,长方形也一样。只是在前面的槽有比较好看的弧度的时候,后面同样用圆形的就会显示出一定的斜角,会比较好看一点。

john_he 发表于 2007-12-16 21:27:25

没玩过北姑……不知道啥进度条……以下瞎说……

实现了颜色渐变,精确到个位
颜色渐变可以用纹理Alpha + 顶点颜色实现,实现不难,D3D里设下RenderState和TextureSampleState就行。
恕在下无知,不知道何为“精确到个位”……

最重要的是不规则的
同时也不知道什么为止不规则,我想像为一个一定大小区域根据连击数的不同填充不同的面积,如果不是请无视……
首先是该区域的划分,标好哪个区域是第几号,例如下面简单的例子:

01 02 03 04
05 06 07 08
09 10 11 12
13 14 15 16

如此将一个区域划分成16份,当然划分的形状可以是不规则的,使用shawind所说的方法用三角形组成任意的形状。
之后创建一个01~16(16为区域总数)的array,对里面的元素进行随机排序,得到如下结果:
12,16,05,08,01,14,15,……
然后根据这个数组进行填充,例如连击第一次填充12号区域,第二次填充16号区域。
当连击完成时,清空所有填充区域,并对以上数组再进行随机排序。
如此便可实现“不规则”,虽然不知道LZ所指的是不是这样,不过我想方法大同小异。
页: [1]
查看完整版本: [求助]如何实现北欧女神里面的连击进度条??