用CEGUI绘制环形进度条和雷达扫描(技能CD)效果

CEGUI还是一套蛮好用的GUI系统的,但是有一个缺陷就是它所有的控件都是用的矩形,如果想做出不规则的图形比较麻烦。最近想出一个用CEGUI实现圆形进度条的方案。就是采用遮罩手段。

 

    1. 新建一个类ImageGenerator,采用单例模式,内部提供各种图形的绘制算法,并生成可直接用于绘制的Texure,其工作原理是从Texure 中获取保存数据的数组,然后根据其大小定义一个同样大小的数组,初始化值为0x00000000,通过图形学算法在新建的数组上绘制一个扇面,填入值为 0xFFFFFFFF,然后再将2个数组进行一次完全的与运算,再用得到数组生成新的Texture,就是我们需要的环形的部分进度了。

 

    2. 给ProgressBar控件添加一个成员变量d_type,用于区分经典的条形进度和我们要做的环形进度,再添加3个成员变量 d_startAngle,d_endAngle和d_center,分别代表扇形的起始角度,终结角度,和圆心的位置。

 

    3. 在 render 函数中增加条件判断d_type,用于区分是用传统的矩形裁剪的方式来绘制还是用遮罩的方式来绘制。根据d_progress的值与 d_startAngle计算出一个目标角度destAngle,然后调用ImageGenerator的函数,传入载入的图形Texture和 d_startAngle,destAngle,d_center,得到返回后的Texure,然后将其绘制出来,一个圆形的进度条就诞生了,哈哈。

 

    以上只是一些想法,由于实际的条件,我这个项目不能获取到源图的Texure(由于封装的原因 = =),于是采用了另一个办法,基本思路还是一样,只不过不是对2个数组进行与运算(因为源数组获取不到 = =),而是新绘制一个扇形,但是反过来,需要绘制的地方全部填入0x00000000,不需要显示的部分全部填入0xFFFFFFFF,也就是黑色,然后 在利用外层的其他控件对黑色部分进行遮挡从而只露出进度条需要显示的部分,也能造成环形进度的效果。

PS:采用这个方法,如果不用其他控件进行遮挡,再通过实时不断的改变角度的值,就可以生成类似于游戏里面走技能CD的那种效果了,呵呵。

Tag 标签:

发表评论

电子邮件地址不会被公开。