Making a Buff Counter

dylantan · 04-25-2013 01:08 PM

Hi good ppl

I am seeking your advice on how we could make a Buff Counter/Timer effect such as the sample below (not referring to the number). I remember seeing many games especially with RPG type games such as Dragon Age and Diablo, the buff when being used will have a counter (or counter to cool down) where that particular icon will have layer on top of it going clock wise and when it is ready (after the cool down effect wear off) the icon would appear normal with out the dark layer ontop of it. Any advice or tips is greatly appreciate it.

Thank you in advance.

**Esenthel** · 04-25-2013 01:17 PM

Hello!

You can use a custom shader for the whole image (use VI for that), please check tutorial on using VI for custom shaders.

Or if you want a simpler solution, then I can add for next SDK option to VI to draw images as triangle (manually specifiy color, screen and tex coords for each of the 3 tri vertexes)
like existing:
static void face(Vtx3DTexCol &a, Vtx3DTexCol &b, Vtx3DTexCol &c);
static void face(Vtx3DTexCol &a, Vtx3DTexCol &b, Vtx3DTexCol &c, Vtx3DTexCol &d);
but operating on 2D vertex

dylantan · 04-25-2013 02:16 PM

Hi Esenthel

Thank you so much for the information. Let us try it out. Will let you know the result smile

Btw we using EE 1.0

**Esenthel** · 04-25-2013 02:48 PM

Based on following code:

Code:

VI.image(Images("gfx/logo/esenthel.gfx"));

   Vtx2DTexCol v[3];

   v[0].pos.set(-1, 1); v[0].tex.set(0, 0); v[0].color=WHITE;

   v[1].pos.set( 1, 1); v[1].tex.set(1, 0); v[1].color=WHITE;

   v[2].pos.set(-1,-1); v[2].tex.set(0, 1); v[2].color=TRANSPARENT;

   VI.face(v[0], v[1], v[2]);

   VI.end();

You will be able to develop that effect in next release.

dylantan · 04-25-2013 02:49 PM

Oh Ok, thats awesome. I will try this out. Thank you very much Sir!

Esenthel, you mentioned that we can use the code on next release, is this for EE 2.0 update? or for 1.0 also?

fatcoder · 04-26-2013 12:13 PM

This can be easily done using existing functions. I've quickly put together a simple example using the "Extending Gui Objects" tutorial.

Here is the code.

Code:

/******************************************************************************/

#include "stdafx.h"

/******************************************************************************

   Because the main methods of Gui Objects are virtual, you can extend them.

/******************************************************************************/

STRUCT(Button2 , Button) // Create a new class extending the default Gui Button

//{

   virtual void update(C GuiPC &gpc); // extend updating object

   virtual void draw  (C GuiPC &gpc); // extend drawing  object

   Flt progress;

};

void Button2::update(C GuiPC &gpc) // extend updating

{

   super::update(gpc); // call default method

}

void Button2::draw(C GuiPC &gpc) // extend drawing

{

   if(gpc.visible && visible()) // if parent is not hidden and button isn't hidden too

   {

      D.clip(gpc.clip); // clip display drawing to given clipping rectangle, this is needed for example when object is inside a window, and is partially hidden because the parent's rectangle doesn't fully cover this object

      Color  color=(T() ? BLACK : ColorLerp(ORANGE, RED, lit())); // set different color depending if the button is pushed and highlighted

      D.rect(color, rect()+gpc.offset); // draw a background rectangle, moved by 'gpc.offset' (parents offset)

      D.text(rect().center()+gpc.offset, text); // draw button's text, at center of rectangle and again moved by 'gpc.offset'

      D.clip(rect());

      if((progress -= Time.d()) < 0.0f) progress += PI2;

      Circle(rect().w() * 0.75f, rect().center()).drawPie(Color(0,0,0,100), 0.0f, PI_2, progress);

   }

}

/******************************************************************************/

Button2 button; // create a sample button

/******************************************************************************/

void InitPre()

{

   App.name("Extending Gui Objects");

   App.flag=APP_FULL_TOGGLE;

   DataPath("../data");

   Paks.add("engine.pak");

   D.mode(800,600);

}

/******************************************************************************/

Bool Init()

{

   Gui+=button.create(Rect_C(0, 0, 0.2f, 0.2f)); // add the button to the active desktop

   return true;

}

/******************************************************************************/

void Shut()

{

}

/******************************************************************************/

Bool Update()

{

   if(Kb.bp(KB_ESC))return false;

   Gui.update();

   return true;

}

/******************************************************************************/

void Draw()

{

   D  .clear(WHITE);

   Gui.draw ();

}

/******************************************************************************/

Just copy and paste all the code over the top of the tutorial code and run it. You should see a button with the effect on it as you need. Here's what it looks like.

Looks much better in motion though. The above example will just run down with time and then reset. Obviously you would control this with some game logic.

dylantan · 04-26-2013 03:25 PM

Oh Cool.. will surely try this out. Thanks in advance Fatcoder!

**Esenthel** · 04-27-2013 11:39 AM

@dylantan: yes it will work for both 1.0 and 2.0
@fatcoder: your solution is simpler, the only downside of that method is that it will draw the darkening ignoring the image alpha channel (where icon is transparent the darkening will still occur), but on the other hand I think it may be even better to ignore the alpha channel and darken the whole rectangle, thanks for sharing the idea.

dylantan · 04-27-2013 12:30 PM

(04-27-2013 11:39 AM)Esenthel Wrote: @dylantan: yes it will work for both 1.0 and 2.0
@fatcoder: your solution is simpler, the only downside of that method is that it will draw the darkening ignoring the image alpha channel (where icon is transparent the darkening will still occur), but on the other hand I think it may be even better to ignore the alpha channel and darken the whole rectangle, thanks for sharing the idea.

I see. Thanks again Esenthel and Fatcoder. I shall try both solution and see if they are suitable for our use.

dylantan · 05-15-2013 06:13 AM

Hi Esenthel. Just want to check with you if your solution is available for SDK built 23? or it is for up coming built 24? Reason why we ask is because we hope to implement this soon (perhaps within these next few days). Looking forward to implement this smile

**Esenthel** · 05-15-2013 01:08 PM

Hi, this will be released in the next version, this month smile

Did you try fatcoder's version? it's much simpler and I think it might be better.

dylantan · 05-15-2013 01:10 PM

Hi Esenthel,

OK will try Fatcoder ones later. Thanks smile

Rofar · 10-04-2013 12:09 AM

Minor correction to the example code. The rect needs to be offset by the gpc offset when drawing the pie.

Code:

D.clip(rect()+gpc.offset);

       if((progress -= Time.d()) < 0.0f) progress += PI2;

       Circle(rect().w() * 0.75f, rect().center()+gpc.offset).drawPie(Color(0,0,0,100), 0.0f, PI_2, progress);

Thanks for posting this fatcoder. Works great!

Making a Buff Counter
Author	Message