Adventure Game Studio

AGS Support => Beginners' Technical Questions => Topic started by: J.E.S. on Fri 05/09/2008 04:14:34

Title: GUI Message Fade-in, Fade-out Text Effect for Ver.3.02...
Post by: J.E.S. on Fri 05/09/2008 04:14:34
I've been tinkering around with some text effects I'd like to add to my game, but there was one in particular that had me stumped for a few days. What I had done was made a thin, black GUI with an invisible button in the center of it to display a description. When the cursor moves over a hotspot, a description will fade-in or fade-out when the cursor moves off of it. To create the effect of the text fading in or fading out, I created an image of the text and applied a text transition with another program. After I imported the text sprites, I created animation views. Here is what I have coded so far in my room script:



function repeatedly_execute_always()
{
  if((Hotspot.GetAtScreenXY(mouse.x, mouse.y)==hotspot[1])&&(Description.NormalGraphic==0))
  {
    Description.Animate(3, 1, 3, eOnce);
  }
  if((Hotspot.GetAtScreenXY(mouse.x, mouse.y)==hotspot[1])&&(Description.Graphic==146))
  {
    Description.Animate(3, 0, 3, eOnce);
  }
  if((Hotspot.GetAtScreenXY(mouse.x, mouse.y)==hotspot[0])&&(Description.Graphic==154))
  {
    Description.Animate(3, 1, 3, eOnce);
  }
}


While this code will work for 1 hotspot, I notice that if you move the mouse over the hotspot too fast, the animation doesn't always play; it only works if you move slowly over it. I believe there is a more efficient way to script my arguments, but I also have 12 hotspots in 1 room that need the same effect. I would appreciate any help with the correct approach I should take.
Title: Re: GUI Message Fade-in, Fade-out Text Effect for Ver.3.02...
Post by: Lt. Smash on Fri 05/09/2008 10:16:05
why don't you make a label on the gui and then use GUI.Transparency? your game has to be at least hi-color 16-bit.
lets assume the labels name is lblDescription and the gui is gDescription.

//in top of global script:
bool fadein;
bool fadeout;
int gTransparency;
int gID;


void Fade(this GUI*, FadeStyle style)
{
if (!fadein && !fadeout)
{
gID = this.ID;
if (style == eFadeIn)
{
fadein = true;
this.Visible=true;
gTransparency = this.Transparency;
SetTimer(20, 1);
}
else if (style == eFadeOut)
{
fadeout = true;
gTransparency = this.Transparency;
SetTimer(19, 1);
}
}
if (style == eStopFading)
{
SetTimer(20, 0);
SetTimer(19, 0);
fadein = false;
fadeout = false;
}
}

//////////////////////////////
//in global header
enum FadeStyle {
  eFadeIn,
  eFadeOut,
eStopFading
};
///Fades the gui in or out
import void Fade(this GUI*, FadeStyle style);

////////////////////////////////
function repeatedly_execute()
{
  if (IsTimerExpired(20) && gTransparency >= 0 && fadein) //FADE IN
{
gui[gID].Transparency = gTransparency;
gTransparency-=3;
if (gTransparency > 0) SetTimer(20, 2);
else {
gTransparency = 0;
gui[gID].Transparency = 0;
fadein = false;
}
}

if (IsTimerExpired(19) && gTransparency <= 100 && fadeout) //FADE OUT
{
gui[gID].Transparency = gTransparency;
gTransparency+=3;
if (gTransparency >= 100)
{
gui[gID].Visible = false;
gTransparency = 100;
gui[gID].Transparency = 100;
fadeout = false;
}
else SetTimer(19, 2);
}

Hotspot *hot  = Hotspot.GetAtScreenXY(mouse.x, mouse.y);
if(hot == hotspot[0] && gDescription.Visible) //cursor on no hotspot
{
if (!fadeout) gDescription.Fade(eStopFading);
gDescription.Fade(eFadeOut);
}
if (hot != hotspot[0] && !fadein)
{
gDescription.Fade(eStopFading);

if(hot == hotspot[1])
{
lblDescription.Text = "Text for hotspot 1";
gDescription.SetPosition(20, 12); //changes its coordinates to be at the right position
}
else if (hot == hotspot[2]) //continue like this for the rest of the hotspots
{
lblDescription.Text = "Text for hotspot 2"; //You can use ttf fonts instead of the ags built in fonts
                        gDescription.SetPosition(123, 45);
}
.....

gDescription.Fade(eFadeIn);
}
}
     

and before the gui is used the first time:
gDescription.Visible = false;
gDescription.Transparency = 100;
Title: Re: GUI Message Fade-in, Fade-out Text Effect for Ver.3.02...
Post by: J.E.S. on Fri 05/09/2008 12:38:00
Thanks for the reply, I have to admit that I'm not the best at coding, especially when I'm trying to learn a new game engine, so I'm hesitant on putting any code anywhere else besides the room script. Anyways, I gave up on GUI.transparency when it had strange effects on my gui such as making my invisible buttons and labels look pixelated as the process was running. That glitch also happened when I was running in 32bit true color. Also when I tested it, I didn't like the fact that I had to wait until the function ended before I could do anything else. The fonts that come with AGS are just terrible so I made my own with images created in another program. I get better control that way and can make other transition effects such as page curling or dissolve. In addition, the only GUI accessory that can be animated is the button so that's why I went that route. My goal is to make a quality adventure game and while I want to push the limits of this engine, I tend to design my game with the best visuals in mind since that is my strong point.

I will see what I can do with your code, it may take me awhile to get it right but I need to learn this stuff.

Thanks again!

Title: Re: GUI Message Fade-in, Fade-out Text Effect for Ver.3.02...
Post by: J.E.S. on Sat 06/09/2008 02:05:50
@Lt. Smash...I tried your code, but I got an error that says,"A blocking function was called within repeatedly_execute_always".
However, when I cut that section out of rep_ex_always and pasted into rep_ex in the global script, the code did work. Also, even though the code worked like it should have, it made my cursor disappear and I couldn't move my character until after the fade effect was completed. Unfortunately, this is not the desired effect I wanted. I appreciated your help regardless.
Title: Re: GUI Message Fade-in, Fade-out Text Effect for Ver.3.02...
Post by: Mazoliin on Sat 06/09/2008 09:54:07
That's because you have a wait command, and as you should know, a wait command pauses the game the game in X cycles. Try replace the wait with a timer.

Note that this is completely untested

void Fade(this GUI*, FadeStyle style)
{
   if (style == eFadeIn)
  {
        this.Visible=true;
int i = this.Transparency;
SetTimer(20, 1);
while (i >= 0)
{
if (IsTimerExpired(20)){
this.Transparency = i;
i-=3;
SetTimer(20, 1);
}
}
  }
  else if (style == eFadeOut)
  {
int i = this.Transparency;
SetTimer(20, 1);
while (i <= 100)
{
if (IsTimerExpired(20)){
this.Transparency = i;
i+=3; //if its too fast or slow change this number
SetTimer(20, 1);
}
}
this.Visible=false;
  }
}
Title: Re: GUI Message Fade-in, Fade-out Text Effect for Ver.3.02...
Post by: monkey0506 on Sat 06/09/2008 10:08:53
The fade function makes use of Wait which is a blocking function. Creating a non-blocking fade isn't difficult. In fact, IMO the best solution is to provide a BlockingStyle parameter to allow the user to decide.

I'm sure if you look around you can find other topics regarding the same idea. The only real difference in the code would be that you can now use an extender method. I'd type something up myself but it's 4 AM and I'm a bit groggy as I haven't slept yet.

However, something I feel strongly about and want to comment on is this:

if(Hotspot.GetAtScreenXY(mouse.x, mouse.y)==hotspot[1]) {
 // ...
}
else if(Hotspot.GetAtScreenXY(mouse.x, mouse.y)==hotspot[2]) {
 // ...
}
// ...


I can't be 100% certain since AGS does use a bitmap for hotspots which means no overlapping of colors or anything, so it could have an array of all the screen co-ordinates to optimize locating hotspots...but even if it did...you would still be calling the same function repeatedly unnecessarily. This is just plain bad programming practice. Even if the hotspot locator function is optimized, you should still do your part in optimizing your own functions. This is a perfect time to throw in a Hotspot* (Hotspot pointer):

// rep_ex(_always)
Hotspot *hat = Hotspot.GetAtScreenXY(mouse.x, mouse.y); // "hat" == "hotspot at (the mouse)"
// you can actually name the pointer whatever you like
if (hat == hotspot[1]) {
 // ...
}
else if (hat == hotspot[2]) {
 // ...
}
// ...


I'm not trying to offend you, so please don't take offense. I'm just trying to educate you to better coding practices. I'm hoping you didn't know about pointers or that AGS had them because especially in an instance where you have to use a function to find what you're looking for, it's faster to just store the value once and then check against that then having to find it several times.

If you're unfamiliar with "pointers" or their use in AGS, the manual and the wiki (http://www.americangirlscouts.org/agswiki/) have some very handy information about them. ;)
Title: Re: GUI Message Fade-in, Fade-out Text Effect for Ver.3.02...
Post by: Lt. Smash on Sat 06/09/2008 13:45:48
I've edited my post. So now it shouldn't be blocking  ;)
link: http://www.adventuregamestudio.co.uk/yabb/index.php?topic=35477.msg465074#msg465074
Title: Re: GUI Message Fade-in, Fade-out Text Effect for Ver.3.02...
Post by: J.E.S. on Sat 06/09/2008 23:35:10
Thanks everyone for helping me solve this problem!

@Lt. Smash...I've used your updated code and it works, I just have to go back a tweak it for all 12 hotspots.

I will also give the rest of the examples a try because I need to get familiar with scripting in AGS. I would never be offended as long as I'm learning something. I posted my original code to get some opinions about good programming practices. I need to read more about pointers and such, since (at the time of this post) I've only been using AGS for a good 2 weeks.

Thanks again!