About Store Forum Documentation Contact
Donations:
345$/mo



Post Reply 
Making a Buff Counter
Author Message
dylantan Offline
Member

Post: #1
Making a Buff Counter
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.

   
(This post was last modified: 04-25-2013 01:10 PM by dylantan.)
04-25-2013 01:08 PM
Visit this user's website Find all posts by this user Quote this message in a reply
Esenthel Offline
Administrator

Post: #2
RE: Making a Buff Counter
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
04-25-2013 01:17 PM
Find all posts by this user Quote this message in a reply
dylantan Offline
Member

Post: #3
RE: Making a Buff Counter
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
04-25-2013 02:16 PM
Visit this user's website Find all posts by this user Quote this message in a reply
Esenthel Offline
Administrator

Post: #4
RE: Making a Buff Counter
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.
04-25-2013 02:48 PM
Find all posts by this user Quote this message in a reply
dylantan Offline
Member

Post: #5
RE: Making a Buff Counter
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?
(This post was last modified: 04-26-2013 06:54 AM by dylantan.)
04-25-2013 02:49 PM
Visit this user's website Find all posts by this user Quote this message in a reply
fatcoder Offline
Member

Post: #6
RE: Making a Buff Counter
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.
04-26-2013 12:13 PM
Find all posts by this user Quote this message in a reply
dylantan Offline
Member

Post: #7
RE: Making a Buff Counter
Oh Cool.. will surely try this out. Thanks in advance Fatcoder!
04-26-2013 03:25 PM
Visit this user's website Find all posts by this user Quote this message in a reply
Esenthel Offline
Administrator

Post: #8
RE: Making a Buff Counter
@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.
04-27-2013 11:39 AM
Find all posts by this user Quote this message in a reply
dylantan Offline
Member

Post: #9
RE: Making a Buff Counter
(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.
04-27-2013 12:30 PM
Visit this user's website Find all posts by this user Quote this message in a reply
dylantan Offline
Member

Post: #10
RE: Making a Buff Counter
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
05-15-2013 06:13 AM
Visit this user's website Find all posts by this user Quote this message in a reply
Esenthel Offline
Administrator

Post: #11
RE: Making a Buff Counter
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.
05-15-2013 01:08 PM
Find all posts by this user Quote this message in a reply
dylantan Offline
Member

Post: #12
RE: Making a Buff Counter
Hi Esenthel,

OK will try Fatcoder ones later. Thanks smile
05-15-2013 01:10 PM
Visit this user's website Find all posts by this user Quote this message in a reply
Rofar Offline
Member

Post: #13
RE: Making a Buff Counter
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!
10-04-2013 12:09 AM
Find all posts by this user Quote this message in a reply
Post Reply