PDA

View Full Version : textdraw fade in screencenter


Elk
02-24-2015, 07:49 AM
Okay so I tried making a script that would fade in a text only once if you entered the specified area and after a short while it would automatically fade out without fading in again unless you enter the specified field again, but I guess its too much for me >_<

Could someone help me? I'm really bad with timeout stuff x.x

//#CLIENTSIDE
function onCreated(){
dontblock();
layer = 2;
onTimeout();
}
function onTimeout(){
onCheckScreen();
setTimer(.05);
}
function onCheckScreen() {
if (player.x in |this.x-10,this.x+10| && player.y in |this.y-5,this.y+5|) {
temp.fimg = findimg(375);
fimg.x = screenwidth / 2;
fimg.y = screenheight / 2 - 180;
fimg.text = "Fancy Text Here";
fimg.layer = 8;
fimg.zoom = 2;
fimg.style = "bc";
fimg.textshadow = true;
fimg.shadowcolor = {0,0,0};
}
else hideimg(375);
}

Restraint
02-26-2015, 03:36 PM
Off the top of my head:

You didn't do anything to "fade" it in and "fade" it out as you suggested. The way to do that would be:

>Create the text onCreated, set its alpha to 0 default. Assign it to "this.img"
>Inside a timeout loop:
>>If the player is inside, increase its alpha gradually to 1. This can be done as follows:
this.img.alpha = min(this.img.alpha + 0.1, 1);
>>If the player is outside, decrease it gradually to 0 as follows:
this.img.alpha = max(this.img.alpha - 0.1, 0);
>>>Note: I am using +/- 0.1 as a placeholder, obviously.

Additionally: I've never created text using that method, so I can't speak to its effectiveness. Is there any reason you skipped the more obvious showText() function?

showText(index, x, y, font, style, text); (??? - may have mixed up the last 3 arg's order)

Can still do something like:

temp.img = this.img = showText(...);
img.layer = 8; // or changeImgVis(index, 8) // any number over 4 is likely overkill
img.zoom = 2;
etc;


Final thought: If you aren't using image indices 200 through 374 in that code, you might as well just use index 200. NPC's each have their own, local, image indices (as long as you're 200 or higher).

xAndrewx
02-26-2015, 03:52 PM
I personally don't think you can use alpha on text. If you convert the text to an image, you could do this. If it works with text, great. I'm sure it won't though...


//#CLIENTSIDE
function onCreated(){
this.dontblock();

//So I set the image at the start - no need to keep re-drawing it.
this.fimg = findimg(200);
with(this.fimg) {
x = screenwidth / 2;
y = screenheight / 2 - 180;
image = "block.png";
alpha = 0;
layer = 4;
zoom = 2;
}
this.onTimeout();
}

function onPlayerEnters() {
this.onCreated();
}

function onTimeout(){
this.onCheckScreen();
setTimer(0.05);
}

function onCheckScreen() {
if (player.x in |this.x-10,this.x+10| && player.y in |this.y-5,this.y+5|) {
//If the image alpha is less than one, increase it gradually.
if (this.fimg.alpha < 1)
this.fimg.alpha += 0.05;
} else {
//If they're not in the area and the alpha is greater than 0, decrease it gradually.
if (this.fimg.alpha > 0)
this.fimg.alpha -= 0.05;
}
}

Elk
02-27-2015, 12:50 AM
I personally don't think you can use alpha on text. If you convert the text to an image, you could do this. If it works with text, great. I'm sure it won't though...


//#CLIENTSIDE
function onCreated(){
this.dontblock();

//So I set the image at the start - no need to keep re-drawing it.
this.fimg = findimg(200);
with(this.fimg) {
x = screenwidth / 2;
y = screenheight / 2 - 180;
image = "block.png";
alpha = 0;
layer = 4;
zoom = 2;
}
this.onTimeout();
}

function onPlayerEnters() {
this.onCreated();
}

function onTimeout(){
this.onCheckScreen();
setTimer(0.05);
}

function onCheckScreen() {
if (player.x in |this.x-10,this.x+10| && player.y in |this.y-5,this.y+5|) {
//If the image alpha is less than one, increase it gradually.
if (this.fimg.alpha < 1)
this.fimg.alpha += 0.05;
} else {
//If they're not in the area and the alpha is greater than 0, decrease it gradually.
if (this.fimg.alpha > 0)
this.fimg.alpha -= 0.05;
}
}


Thats the exact script im using for my transitional things, i would use it but i dont know of a way to have it fade out after a while and not being called again

i dont want the alpha to be 1 constantly while in the area, it has to just trigger once and fade out until the entire area is touched again basically


the above method works with this.chat but i havent figured out a way to do it with findimg in combination with alpha

Elk
02-27-2015, 02:02 AM
Made a GIF of how I'd want it to be :0

https://dl.dropboxusercontent.com/u/18369116/pixelart/elknoob.gif

khortez
02-27-2015, 03:37 AM
I personally don't think you can use alpha on text. If you convert the text to an image, you could do this. If it works with text, great. I'm sure it won't though...


//#CLIENTSIDE
function onCreated(){
this.dontblock();

//So I set the image at the start - no need to keep re-drawing it.
this.fimg = findimg(200);
with(this.fimg) {
x = screenwidth / 2;
y = screenheight / 2 - 180;
image = "block.png";
alpha = 0;
layer = 4;
zoom = 2;
}
this.onTimeout();
}

function onPlayerEnters() {
this.onCreated();
}

function onTimeout(){
this.onCheckScreen();
setTimer(0.05);
}

function onCheckScreen() {
if (player.x in |this.x-10,this.x+10| && player.y in |this.y-5,this.y+5|) {
//If the image alpha is less than one, increase it gradually.
if (this.fimg.alpha < 1)
this.fimg.alpha += 0.05;
} else {
//If they're not in the area and the alpha is greater than 0, decrease it gradually.
if (this.fimg.alpha > 0)
this.fimg.alpha -= 0.05;
}
}


you can use alpha on text, i have a mini system on testbed that uses alpha to fade in/fade out for it

Elk
02-27-2015, 03:52 AM
changeimgcolors(); seems to be able to affect its transparency, but i still dont get how to make it occur only once like in the pic :<

Restraint
02-27-2015, 03:57 AM
you can use alpha on text, i have a mini system on testbed that uses alpha to fade in/fade out for it

Also 100% certain. I've done it before on UN way back in GS1 and the script is still around to this date.

Enter a city on UN for the first time and you'll see a message the top, "Welcome to <Town>!" - it fades in and fades out.

Elk
02-27-2015, 04:04 AM
im guessing its just onPlayerEnters though :S

im trying to get it to be more specified for a defined x/y area, hence playerxy in xy

Restraint
02-27-2015, 04:22 AM
im guessing its just onPlayerEnters though :S

im trying to get it to be more specified for a defined x/y area, hence playerxy in xy

On UN it's also an X/Y box around the warp-in zone.

You want it to fade in when they enter the space and then fade out on its own, and then not re-fade in until they've EXITED the space and subsequently RE-ENTERED the space. Is that what you're saying?

In that case, you simply set a flag when they enter and unset it when they exit. If the flag is false, make it show the text. If it's true, don't show the text.

You'd still create the text under onCreated and initialize it with an alpha of 0. Then you'd simple do:

function onTimeOut() {
checkArea();
setTimer(0.05);
}
function checkArea() {
if (/* player in area stuff */) {
if (!this.showed) { // If the image hasn't been displayed since their last entrance
this.showed = true; // Flag it as displayed
onFadeIn(); // Start fading in
}
} else {
if (this.showed) { // If it was displayed already
this.showed = false; // Unset it, since they're no longer inside
}
}
}
function onFadeIn() {
if (/* player in area stuff */) {
this.img.alpha += 0.05; // 0.05 is a placeholder, it will take num * 20 seconds to fully fade in, so @ 0.05 it will take 1 second
if (this.img.alpha < 1) { // If it isn't fully visible yet
scheduleEvent(0.05, temp.name, nil); // THIS 0.05 is not a placeholder, it is the tick rate of graal - this will "loop" the fade in
} else {
onPause(3); // '3' is up to you, it's how long it will appear to "hang," this creates the "pausing"
}
} else {
onFadeOut(); // If the player left the area, stop fading in and start fading out instead
}
}
function onPause(timeLeft) {
if (/* Player in area stuff */) {
if (timeLeft > 0) {
scheduleEvent(0.05, temp.name, timeLeft - 0.05); // Keep counting down if the player is inside and there's time left to pause.
} else {
onFadeOut(); // Once time runs out, fade out
}
} else {
onFadeOut(); // If player isn't still in area, pre-maturely fade out.
}
}
function onFadeOut() {
if (/* NOT player in area */) {
this.img.alpha -= 0.05; // Lower the alpha back down, remember: this 0.05 is a placeholder
if (this.img.alpha > 0) { // While it's not 0 yet
scheduleEvent(0.05, temp.name, nil); // Keep looping to decrease it
}
} // No need to put an else {} here to check if they re-enter the area. If they re-enter the area, this will fail and onFadeIn() will be called by checkArea()
}


I haven't tested it, but that's roughly what you're going for, assuming I handled your fringe cases correctly (ie, what you want to happen when the player rapidly enters/exits the area and such like that). There are other ways of doing it if you don't want it to prematurely begin fading out if they exit too soon (ie, you remove onPause() and just change it to a scheduleEvent(3, "fadeOut", nil) call). There are various ways of handling those fringe cases, but this seemed like the most aesthetically appealing at a glance.

EDIT: And if you only want it to happen once EVER then simply don't unset the flag (as I did via the line "this.showed = false;" inside checkArea()). In that scenario you probably don't want the text fading prematurely, even if they walk away from the area, and so you'd do my suggestion in the last paragraph (vis-a-vis removing onPause and changing it to scheduleEvent(3, "fadeOut", nil); )

Elk
02-27-2015, 04:58 AM
Gonna try it

is this the correct negation of player xy in xy?

if (player.x !in |this.x-10,this.x+10| && player.y !in |this.y-5,this.y+5|) {

cbk1994
02-27-2015, 05:43 AM
Gonna try it

is this the correct negation of player xy in xy?

if (player.x !in |this.x-10,this.x+10| && player.y !in |this.y-5,this.y+5|) {

You can't negate in like that, try:

if (!(player.x in |this.x-10, this.x+10| && player.y in |this.y-5, this.y+5|)) {

(If you could, you'd probably want to use || instead of && by De Morgan's laws. Unless I'm misinterpreting what you're trying to do.)

Elk
02-27-2015, 06:46 AM
(If you could, you'd probably want to use || instead of && by De Morgan's laws. Unless I'm misinterpreting what you're trying to do.)

|| = or
&& = and

player.x != player.y 8-D

Ok now I tried this, but it isnt fading in nor fading out, just permanently onscreen

//#CLIENTSIDE
function onCreated(){
dontblock();
layer = 2;
temp.fimg = findimg(375);
fimg.x = screenwidth / 2;
fimg.y = screenheight / 2 - 180;
fimg.text = "Era Underground Complex Level 2";
fimg.layer = 8;
fimg.zoom = 2;
fimg.style = "bc";
fimg.textshadow = true;
fimg.shadowcolor = {0,0,0};
}
function onTimeOut() {
checkArea();
setTimer(0.05);
}
function checkArea() {
if (player.x in |this.x-10,this.x+10| && player.y in |this.y-5,this.y+5|) {
if (!this.showed) { // If the image hasn't been displayed since their last entrance
this.showed = true; // Flag it as displayed
onFadeIn(); // Start fading in
}
} else {
if (this.showed) { // If it was displayed already
this.showed = false; // Unset it, since they're no longer inside
}
}
}
function onFadeIn() {
if (player.x in |this.x-10,this.x+10| && player.y in |this.y-5,this.y+5|) {
this.img.alpha += 0.05; // 0.05 is a placeholder, it will take num * 20 seconds to fully fade in, so @ 0.05 it will take 1 second
if (this.img.alpha < 1) { // If it isn't fully visible yet
scheduleEvent(0.05, temp.name, nil); // THIS 0.05 is not a placeholder, it is the tick rate of graal - this will "loop" the fade in
} else {
onPause(3); // '3' is up to you, it's how long it will appear to "hang," this creates the "pausing"
}
} else {
onFadeOut(); // If the player left the area, stop fading in and start fading out instead
}
}
function onPause(timeLeft) {
if (player.x in |this.x-10,this.x+10| && player.y in |this.y-5,this.y+5|) {
if (timeLeft > 0) {
scheduleEvent(0.05, temp.name, timeLeft - 0.05); // Keep counting down if the player is inside and there's time left to pause.
} else {
onFadeOut(); // Once time runs out, fade out
}
} else {
onFadeOut(); // If player isn't still in area, pre-maturely fade out.
}
}
function onFadeOut() {
if (!(player.x in |this.x-10,this.x+10| && player.y in |this.y-5,this.y+5|)) {
this.img.alpha -= 0.05; // Lower the alpha back down, remember: this 0.05 is a placeholder
if (this.img.alpha > 0) { // While it's not 0 yet
scheduleEvent(0.05, temp.name, nil); // Keep looping to decrease it
}
} // No need to put an else {} here to check if they re-enter the area. If they re-enter the area, this will fail and onFadeIn() will be called by checkArea()
}

xAndrewx
02-27-2015, 03:29 PM
Here ya go


//#CLIENTSIDE
function onCreated(){
dontblock();
layer = 2;
this.fimg = findimg(200);
this.fimg.x = screenwidth / 2;
this.fimg.y = screenheight / 2 - 180;
this.fimg.text = "Era Underground Complex Level 2";
this.fimg.layer = 4;
this.fimg.zoom = 2;
this.fimg.style = "bc";
this.fimg.textshadow = true;
this.fimg.shadowcolor = {0,0,0};
this.fimg.red = 1;
this.fimg.green = 0;
this.fimg.blue = 0;
this.fimg.alpha = 0;
setTimer(0.05);
}

function onPlayerEnters() {
this.onCreated();
}

function onTimeout(){

if (player.x in |this.x-10,this.x+10| && player.y in |this.y-5,this.y+5|) {
if (this.text_display == null)
this.text_display = timevar2 + 5;
} else {
this.text_display = null;
}

if (this.text_display > timevar2) {
if (this.fimg.alpha < 1) {
this.fimg.alpha += 0.05;
}
} else {
if (this.fimg.alpha > 0) {
this.fimg.alpha -= 0.05;
}
}
setTimer(0.05);
}

Crow
02-27-2015, 04:24 PM
I personally don't think you can use alpha on text.

Why would you not be able to do that :oo:

Draenin
02-28-2015, 01:47 AM
Any way to do custom fonts with something like this as well?

Elk
02-28-2015, 04:37 AM
Any way to do custom fonts with something like this as well?

I'm fairly certain that you can just use
this.fimg.font = "custom font name here"
for this specific example
and use a ttf uploaded on the server
(referenced from http://wiki.graal.net/index.php/Particle_Engine)

Havent tried yet though 8-D

Draenin
02-28-2015, 10:38 PM
I'm fairly certain that you can just use
this.fimg.font = "custom font name here"
for this specific example
and use a ttf uploaded on the server
(referenced from http://wiki.graal.net/index.php/Particle_Engine)

Havent tried yet though 8-D
Trying that out at the moment, but no luck yet. Do the fonts need to be in a specific folder?

I've already added one under levels/fonts and gave myself rights to upload fonts to that folder as well, but the TTF file I'm wanting to display isn't coming up yet. Just the default font.

MysticalDragon
03-01-2015, 12:25 AM
Are you using GUIControls or showimg? for the fonts folder make sure you have this in folder configuration.


file fonts/*.ttf


Also if your using a GUIProfile that already is setup using another profile, try this.


useownprofile = true;
profile.fonttype = "arial"; // Or whatever your font type is.


If your using showimg/find image it might be this, not to sure havn't used showimg in a long time.


findimg(index).font = "arial";

cbk1994
03-01-2015, 12:35 AM
Trying that out at the moment, but no luck yet. Do the fonts need to be in a specific folder?

I've already added one under levels/fonts and gave myself rights to upload fonts to that folder as well, but the TTF file I'm wanting to display isn't coming up yet. Just the default font.

Everything that MD said, but also check F2 "Files" tab to see if it's trying to download the file at all (and failing). That might give you a hint.

Draenin
03-01-2015, 01:53 AM
Got it working with this.fimg.font = "fontname";

I think it just stemmed from a problem with the font itself. But the good news is that it does work.