Image alpha, waitfor, and loops

scriptless · #1 01-31-2010, 01:10 AM

Hello, I wanted to start off by explaining what I am trying to accomplish.

I wanted to make a similar effect to the xbox360/ps3 notification system. For those of you who use "ubuntu" you may notice it too, uses a similar effect called "NotifyOSD".

What I am doing here is drawing a polygon, and replacing it with an image. However, I wanted to use GUI's but had several problems. I could not make a semi-transparent black window appear. I was using GuiWindowCtrl, GuiControl, and GuiShowImgCtrl. No sucess, so I turned to polygons.

The problem I am having is that I need the polygon (or gui if anyone can help with that) to fade in/out. I am stumped why this code would not work seeing as it looks correct to me at first glance. Maybe anyone else might have an idea what I am doing wrong.

PHP Code:


			
//#CLIENTSIDE
function onCreated() {
  with (findimg(4002) ) {
    this.xy2 = {screenwidth-275,25};
    this.xy = {temp.poly[0]+50, temp.poly[1]+25};
    polygon = {this.xy2[0],this.xy2[1],this.xy2[0]+250,this.xy2[1],this.xy2[0]+250,this.xy2[1]+75,this.xy2[0],this.xy2[1]+75};
    layer = 4;
    red=green=blue=25;
  }
  changeimgcolors(4002,0,0,0,.5);
  with (findimg(4003)) {
    this.xy2 = {screenwidth-215,35};
    x=this.xy2[0];
    y=this.xy2[1];
    layer = 5;
    text = "scriptless has logged on";
    zoom = .7;
  }
  with (findimg(4004)) {
    this.xy2 = {screenwidth-260,45};
    x=this.xy2[0];
    y=this.xy2[1];
    layer = 5;
    image = "head1212.png";
    zoom = 1.5;
  }
  changeimgpart( 4004, 0, 64, 32, 32 );
  
  for ( i=0; i<1; i+= .01 ) {
    for ( j=4002; j<4005; j++ ) {
      with (findimg(4002)) { alpha = i/100; }
    }
    waitfor("", "noevent", 0.5);
  }
}

** Edit ***
I was unable to figure out how to change the polygons colors to black so i had to use a black image, stretch it and then change alpha. I know there must be an easier way but it just refused to work for me.
** end edit ***

Thank you in advanced,
scriptless

For solution click here.

ffcmike · #2 01-31-2010, 01:16 AM

Quote:

Originally Posted by scriptless

Hello, I wanted to start off by explaining what I am trying to accomplish.

I wanted to make a similar effect to the xbox360/ps3 notification system. For those of you who use "ubuntu" you may notice it too, uses a similar effect called "NotifyOSD".

What I am doing here is drawing a polygon, and replacing it with an image. However, I wanted to use GUI's but had several problems. I could not make a semi-transparent black window appear. I was using GuiWindowCtrl, GuiControl, and GuiShowImgCtrl. No sucess, so I turned to polygons.

The problem I am having is that I need the polygon (or gui if anyone can help with that) to fade in/out. I am stumped why this code would not work seeing as it looks correct to me at first glance. Maybe anyone else might have an idea what I am doing wrong.

PHP Code:


			
//#CLIENTSIDE
function onCreated() {
  with (findimg(4002) ) {
    this.xy2 = {screenwidth-275,25};
    this.xy = {temp.poly[0]+50, temp.poly[1]+25};
    polygon = {this.xy2[0],this.xy2[1],this.xy2[0]+250,this.xy2[1],this.xy2[0]+250,this.xy2[1]+75,this.xy2[0],this.xy2[1]+75};
    layer = 4;
    red=green=blue=25;
  }
  changeimgcolors(4002,0,0,0,.5);
  with (findimg(4003)) {
    this.xy2 = {screenwidth-215,35};
    x=this.xy2[0];
    y=this.xy2[1];
    layer = 5;
    text = "scriptless has logged on";
    zoom = .7;
  }
  with (findimg(4004)) {
    this.xy2 = {screenwidth-260,45};
    x=this.xy2[0];
    y=this.xy2[1];
    layer = 5;
    image = "head1212.png";
    zoom = 1.5;
  }
  changeimgpart( 4004, 0, 64, 32, 32 );
  
  for ( i=0; i<1; i+= .01 ) {
    for ( j=4002; j<4005; j++ ) {
      with (findimg(4002)) { alpha = i/100; }
    }
    waitfor("", "noevent", 0.5);
  }
}

Thank you in advanced,
scriptless

I'm not sure but I would have thought that this. inside of with(){} would be referencing the provided object or in this case the image object instead of parent script variables, have you tried changing them all to thiso.?

Edit: Doesn't seem to the the case.

scriptless · #3 01-31-2010, 01:24 AM

You mean such as

PHP Code:


			
with() {
thiso.variable = value;
}

Yes, but only on the

PHP Code:


			
with(findimg(j)) { thiso.alpha = i/100; }

Sorry, did not fully explain problem properly. The images all show just fine, the problem is the alpha does not fade in/out, but rather instantly changes to that color. I have done this just last night the exact same way and it worked but using only a single poly (no second for loop). I wonder why it would not work now tho?

P.S. I am on testbed if anyone is curious.

ffcmike · #4 01-31-2010, 01:37 AM

Quote:

Originally Posted by scriptless

You mean such as

PHP Code:


			
with() {

thiso.variable = value;

}

Yes, but only on the

PHP Code:


			
with(findimg(j)) { thiso.alpha = i/100; }

Sorry, did not fully explain problem properly. The images all show just fine, the problem is the alpha does not fade in/out, but rather instantly changes to that color. I have done this just last night the exact same way and it worked but using only a single poly (no second for loop). I wonder why it would not work now tho?

P.S. I am on testbed if anyone is curious.

Hm well the whole

PHP Code:


			
for ( j=4002; j<4005; j++ ) {

part does seem to be unnecessary, as it would always be setting alpha to the same i / 100 value each time.

Alpha also ranges from 0 to 1, so dividing i by 100 would be giving you a value no greater than 0.01, which is near if not invisible,
this loop is also one way only and only occuring when onCreated is called, when it would need to be running over an amount of time.

scriptless · #5 01-31-2010, 01:43 AM

The for loop for "j" is to loop through multiple things being drawn on-top of the polygon. I need 1 text, 1 image and the polygon to all fade at the same time. Looping "j" like that lets me set all the alpha on al lthe images to the same so they fade nice and neatly.

As for the i/100. Are you sure? I mean I did it last night, it worked so im confused.

PHP Code:


			
Example:
50 / 100 = 50% (0.50)
0 / 100 = 0% (0.00)
100 / 0 = Cannot divide by zero

How do you get I would only have a value of .01 at most? Like I said, it works almost flawlessly. My only problem is it jumps to (i think the minumum) value in the foor loop, and does not increase as the loop increases.

** EDIT
sorry did not notice I had "+= .01", however, this does not solve the problem.

PHP Code:


			
//#CLIENTSIDE
function onCreated() {
  with (findimg(4002) ) {
    this.xy2 = {screenwidth-275,25};
    polygon = {this.xy2[0],this.xy2[1],this.xy2[0]+250,this.xy2[1],this.xy2[0]+250,this.xy2[1]+75,this.xy2[0],this.xy2[1]+75};
    layer = 4;
    red=green=blue=25;
  }
  changeimgcolors(4002,0,0,0,.5);
  with (findimg(4003)) {
    this.xy2 = {screenwidth-215,35};
    x=this.xy2[0];
    y=this.xy2[1];
    layer = 5;
    text = "scriptless has logged on";
    zoom = .7;
  }
  with (findimg(4004)) {
    this.xy2 = {screenwidth-260,45};
    x=this.xy2[0];
    y=this.xy2[1];
    layer = 5;
    image = "head1212.png";
    zoom = 1.5;
  }
  changeimgpart( 4004, 0, 64, 32, 32 );
  
  for ( i=0; i<1; i+= 0.01) {
    for ( j=4002; j<4005; j++ ) {
      with (findimg(4002)) { alpha = i; }
    }
    waitfor("", "noevent", .1);
    player.chat = i;
  }
}

This seems to make the image invisable. So wither .1 is tooo fast or its not working and seeing how I did test the speed. That is not the problem, tho setting the i=0; i<1; i+= 0.01; seems to effect it if i change i=0 to i=.25; i<.75;

And again, no fade in/out effect, just a alpha that sits there unchanged.

ffcmike · #6 01-31-2010, 01:52 AM

Quote:

Originally Posted by scriptless

The for loop for "j" is to loop through multiple things being drawn on-top of the polygon. I need 1 text, 1 image and the polygon to all fade at the same time. Looping "j" like that lets me set all the alpha on al lthe images to the same so they fade nice and neatly.

As for the i/100. Are you sure? I mean I did it last night, it worked so im confused.

PHP Code:


			
Example:

50 / 100 = 50% (0.50)

0 / 100 = 0% (0.00)

100 / 0 = Cannot divide by zero

How do you get I would only have a value of .01 at most? Like I said, it works almost flawlessly. My only problem is it jumps to (i think the minumum) value in the foor loop, and does not increase as the loop increases.

With

PHP Code:


			
for ( i=0; i<1; i+= .01 ) {

"i" would never be greater than 0.99, 0.99 divided by 100 is 0.0099, which is barely anything.

I think you may have been trying to do:

PHP Code:


			
with (findimg(j)) { alpha = i/100; }

In order to adjust the Alpha of all the displays at once.

scriptless · #7 01-31-2010, 01:56 AM

Yes, to adjust all alpha at once. And thank you for pointing that flaw out but why does it still not work?

Ahh.. and yes findimg(4002)) {} should have been "j" but i used 4002 for easier testing so i could comment j completly out and see if it worked by itself, nope. I know this is possible why is it being so hard right now? I know im not drunk or on drugs so what I am seeing happening is reality.

Might be worth mentioning that when I do player.chat = i; player chat becomes "6" instantly and does not move at all, no sleep() or waitfor() or even schedualedevent() seems to make a difference. Let me try temp.i, maybe?

Okay, thank you for your help. Got it working.

PHP Code:


			
//#CLIENTSIDE
function onCreated() {
  with (findimg(4002) ) {
    this.xy2 = {screenwidth-275,25};
    this.xy = {temp.poly[0]+50, temp.poly[1]+25};
    polygon = {this.xy2[0],this.xy2[1],this.xy2[0]+250,this.xy2[1],this.xy2[0]+250,this.xy2[1]+75,this.xy2[0],this.xy2[1]+75};
    layer = 4;
    red=green=blue=25;
  }
  changeimgcolors(4002,0,0,0,.5);
  with (findimg(4003)) {
    this.xy2 = {screenwidth-215,35};
    x=this.xy2[0];
    y=this.xy2[1];
    layer = 5;
    text = "scriptless has logged on";
    zoom = .7;
  }
  with (findimg(4004)) {
    this.xy2 = {screenwidth-260,45};
    x=this.xy2[0];
    y=this.xy2[1];
    layer = 5;
    image = "head1212.png";
    zoom = 1.5;
  }
  changeimgpart( 4004, 0, 64, 32, 32 );
  
  for ( temp.i=0; temp.i<.60; temp.i += 0.02) {
    for ( j=4002; j<4005; j++ ) {
      with (findimg(j)) { alpha = temp.i; }
    }
    waitfor("", "noevent", 0.05);
    player.chat = temp.i;
  }
}

DustyPorViva · #8 01-31-2010, 02:00 AM

Change the mode of the images to 1.

scriptless · #9 01-31-2010, 02:04 AM

Quote:

Originally Posted by DustyPorViva

Change the mode of the images to 1.

Images including the poly? And dusty, would you happen to know how to draw this using gui's? I have been to the graal bible (much help on gui's) but it just lacks examples. I think the graal bible could be a much more powerfull tool if it were to include more examples. But untill that happens the forums are a nice place to look and I notice you post alot of usefull information dusty.

DustyPorViva · #10 01-31-2010, 02:15 AM

Yup. Default images are set to mode 0, which is a light effect. This MAY mean that it won't be properly transparent unless ALL values(red, green, blue) are lowered along with the alpha. Setting it to mode 1 will not only make it properly transparent, but may also fix the problem you're having. It would also explain why you can't use a black polygon, as black for these light effects = transparency mask.

PHP Code:


			
function onCreated() {
  with (findimg(200)) {
    // CREATE A BLACK POLYGON AT 0% TRANSPARENCY
    polygon = {0,0,5,0,5,5,0,5};
    mode = 1;
    red = green = blue = 0;
    alpha = 1;
  }
  // FADE IT OUT
  for (temp.i=1;i>0;i-=.1) {
    with (findimg(200)) alpha = i;
    waitfor("", "noevent", 0.05);
  } 
  // FINALIZE BY SETTING IT TO 0 AFTER LOOP AS FAILSAFE
  findimg(200).alpha = 0; 
}

Something like that should work, however I'm not familiar with waitfor so that could possible be causing problems, I'm not sure.

Also, I found: http://wiki.graal.net/index.php/Crea...iControls_List
to have pretty great examples. If you still need help with GUI's though I could post an example.

scriptless · #11 01-31-2010, 02:17 AM

Yes, I do need help. I read that profile's can use fillcolor(r,g,b,a); but no clue how to apply that in pratice. I wanted thought, why not GuiControll, use it's own profile, set it to black, and add alpha but that aparently was beyond my comprehension because I failed misarably. Not only that but gui's when closed seem to not reopen for me O_O when I update my script, I think theres a command to show it again tho?

Something else I was looking for was is there a way to use ("-PlayerList") to get information about who just logged in? If not, I guess a simple onActionPlayerOnline() would work but then it has to alert all people. Then my idea was to check if "isBuddy()" and if so, show a notification very much like how the xbox360 and ps3 currently do. I have it set to 2.5 seconds before it fades out might change it to 3 if needed. Will post a video as soon as I figure out just how graal's built-in video works :o

Also I swear I tried that red=green=blue=0; before with no luck but im 100% sure it should have worked. Maybe my pc was bugged. Also, I am running Ubuntu 9.10 since windows crashed on me and I had literally no other cds to install from

DustyPorViva · #12 01-31-2010, 02:54 AM

I believe it's something like:

new guistuff("test") {
useownprofile = true;
profile.opaque = false;
profile.fillcolor = {255,255,255,255/2}; // GUI's use 0-255 scale for colors
}

test.show(); // will make the gui come back into view.
test.hide(); // will hide it

scriptless · #13 01-31-2010, 01:52 PM

Quote:

Originally Posted by DustyPorViva

I believe it's something like:

new guistuff("test") {
useownprofile = true;
profile.opaque = false;
profile.fillcolor = {255,255,255,255/2}; // GUI's use 0-255 scale for colors
}

test.show(); // will make the gui come back into view.
test.hide(); // will hide it

Still did not fill the gui. And I used "GuiControl" instead of "guistuff" because im not sure if "guistuff" would even be valid?? ANd how would "255/2" work? I thought alpha worked on a percentage scale using 0 to 1 and decimals in between?

DustyPorViva · #14 01-31-2010, 02:53 PM

Try profile.opaque = false; then

And like the comment says, GUI's use the 0-255 format instead of 0-1. Thus, 255/2 = 50% = .5.

scriptless · #15 01-31-2010, 10:57 PM

Quote:

Originally Posted by DustyPorViva

Try profile.opaque = false; then

And like the comment says, GUI's use the 0-255 format instead of 0-1. Thus, 255/2 = 50% = .5.

I did try that, and no luck.

cbk1994 · #16 01-31-2010, 11:04 PM

Quote:

Originally Posted by DustyPorViva

Try profile.opaque = false; then

And like the comment says, GUI's use the 0-255 format instead of 0-1. Thus, 255/2 = 50% = .5.

opaque should be true.

scriptless · #17 02-01-2010, 12:08 AM

Quote:

Originally Posted by cbk1994

opaque should be true.

Thank's that seemed to work. Why must it be set to true tho? I thought it was the other way around or am I just mis-interpreting what "opaque" actually means?

cbk1994 · #18 02-01-2010, 01:20 AM

Quote:

Originally Posted by scriptless

Thank's that seemed to work. Why must it be set to true tho? I thought it was the other way around or am I just mis-interpreting what "opaque" actually means?

From what I understand "opaque" means to use the fill color defined in the profile rather than the one in the bitmap. It works like this with scrolls and other containers as well.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode