[Tutorial] Screen Fading
#1

2K-TUTORIALS


What is this?

[ame]http://www.youtube.com/watch?v=hk4byIGBaLA[/ame]

Introduction

I was bored, seen a question like this in Scripting Help, and figured I'd make a tutorial on how to do this. Before I start, this probably isn't the best way to go about it, but I really don't think it's the worst either. This tutorial uses one TextDraw, 2 player-variables, and one timer which is killed at the end of its job. (Obviously)

Creating the Variables

I've already told you we are going to use two player-variables and one TextDraw in this tutorial, so let's create them. I assume you already know how to create variables by now, but I suppose I will explain it just to be safe.

pawn Код:
new
    Text: WholeScreen;
    // The "Text:" tag defines the variable as a TextDraw, imagine that.
   
new
    ScreenStatus [ MAX_PLAYERS ] = 0,
    // "ScreenStatus" is the opacity of the fade.
    FadeTDTimer [ MAX_PLAYERS ] = -1;
    // "FadeTDTimer" is just the timer which we can kill after the players screen is done fading.
Creating the TextDraw

Since we want to create this textdraw, and it has no changing information, we may as well create it under OnGameModeInit because it has no player-specific values and never changes.

pawn Код:
public OnGameModeInit ( )
{
    WholeScreen = TextDrawCreate( -20.000000, 0.000000, "_" );
    // This creates a TextDraw which covers the entire screen.
    TextDrawUseBox( WholeScreen, 1 );
    TextDrawBoxColor( WholeScreen, 0x000000FF );
    // This creates a pure-black box over the entire TextDraw (which, remember, covers your entire screen..)
    TextDrawAlignment( WholeScreen, 0 );
    // We don't use Alignment, so let's set it to zero just to make sure it doesn't bug out.
    TextDrawBackgroundColor( WholeScreen, 0x000000FF );
    // Let's set the background color to black too!
    TextDrawFont( WholeScreen, 3 );
    // I just picked a random font for this, although the font isn't important at all.
    TextDrawLetterSize( WholeScreen, 1.000000, 52.200000 );
    // TextDrawLetterSize with a box enabled modifies the Y height of the TextDraw.
    TextDrawColor( WholeScreen, 0x000000FF );
    // TextDrawColor modifies the color of the TextDraw, imagine that!
   
    //The rest of your code OnGameModeInit.
    return true;
}
Creating the Command
I use YCMD for this command, although you can easily convert this command to the other processors.

pawn Код:
CMD:fade( playerid, params[] )
{
    if( ScreenStatus [ playerid ] == 0 )
    {
        // If their ScreenStatus is 0, that means a fade is currently not active.
        ScreenStatus [ playerid ] = 1;
        // This sets their ScreenStatus to 1, which means that as long as it's not 0, their screen is fading.
        TextDrawShowForPlayer( playerid, WholeScreen );
        // We obviously have to show the TextDraw we want to fade..
        FadeTDTimer [ playerid ] = SetTimerEx( "FadeTextdraw", 50, true, "i", playerid );
        // We assign the ID of the timer to "FadeTDTimer [ playerid ]", which is one of our player-variables!
        // SetTimerEx is just a timer which passes an argument. In this case it's our ID, which is an integer ("playerid")
    }
    else return SendClientMessage( playerid, -1, "You are already fading!" );
    return true;
}
Creating the Function
https://sampwiki.blast.hk/wiki/Colors_Li...ransparency.29

pawn Код:
forward FadeTextdraw( playerid );
public FadeTextdraw ( playerid )
{
    switch( ScreenStatus [ playerid ] ) // This is faster than an 'if statement'
    {
        case 1:
        {
            TextDrawBoxColor( WholeScreen, 0x000000EE );
            // EE is one of the Alpha Values of a HEX Color!
        }
        case 2:
        {
            TextDrawBoxColor( WholeScreen, 0x000000DD );
            // DD is less visible than EE, but more visible than CC.
        }
        case 3:
        {
            TextDrawBoxColor( WholeScreen, 0x000000CC );
            // CC is less visible than DD, but more visible than BB.
        }
        case 4:
        {
            TextDrawBoxColor( WholeScreen, 0x000000BB );
            // BB is less visible than CC, but more visible than AA.
        }
        case 5:
        {
            TextDrawBoxColor( WholeScreen, 0x000000AA );
            // AA is less visible than BB, but more visible than 99.
        }
        case 6:
        {
            TextDrawBoxColor( WholeScreen, 0x00000099 );
            // 99 is less visible than AA, but more visible than 88.
        }
        case 7:
        {
            TextDrawBoxColor( WholeScreen, 0x00000088 );
            // 88 is less visible than 99, but more visible than 77.
        }
        case 8:
        {
            TextDrawBoxColor( WholeScreen, 0x00000077 );
            // 77 is less visible than 88, but more visible than 66.
        }
        case 9:
        {
            TextDrawBoxColor( WholeScreen, 0x00000066 );
            // 66 is less viisble than 77, but more visible than 55.
        }
        case 10:
        {
            TextDrawBoxColor( WholeScreen, 0x00000055 );
            // 55 is less visible than 66, but more visible than 44.
        }
        case 11:
        {
            TextDrawBoxColor( WholeScreen, 0x00000044 );
            // 44 is less visible than 55, but more visible than 33.
        }
        case 12:
        {
            TextDrawBoxColor( WholeScreen, 0x00000033 );
            // 33 is less visible than 44, but more visible than 22.
        }
        case 13:
        {
            TextDrawBoxColor( WholeScreen, 0x00000022 );
            // 22 is less visible than 33, but more visible than 11.
        }
        case 14:
        {
            TextDrawBoxColor( WholeScreen, 0x00000011 );
            // 11 is less visible than 22, and 00 is completely transparent.
        }
        case 15:
        {
            TextDrawBoxColor( WholeScreen, 0x00000000 );
            // This makes the TextDraw completely transparent.
            KillTimer( FadeTDTimer [ playerid ] );
            // Remember to kill the Timer, otherwise you will have a constant 50 millisecond timer running.
            TextDrawHideForPlayer( playerid, WholeScreen );
            // Hide the transparent TextDraw.
            ScreenStatus [ playerid ] = 0;
            // Reset their Status to 0, because they're no longer fading.
            return true;
        }
    }
   
    TextDrawHideForPlayer( playerid, WholeScreen );
    TextDrawShowForPlayer( playerid, WholeScreen );
    return ScreenStatus [ playerid ] ++;
    // Every time the function is called, the TextDraw is refreshed (Hidden & then re-shown and their ScreenStatus goes up 1.
}
I hope you learned something, and good luck!
Reply
#2

Very nicely explained good job, i hope every tutorial was like this.
Reply
#3

Also works even in other colors?
Without editing the TextDrawBoxColors?

Btw.

Nice.
Reply
#4

Quote:
Originally Posted by Glint
Посмотреть сообщение
Very nicely explained good job, i hope every tutorial was like this.
Thank you.

Quote:
Originally Posted by Romel
Посмотреть сообщение
Also works even in other colors?
Without editing the TextDrawBoxColors?

Btw.

Nice.
Yes it works with other colors, just edit the HEX value everywhere it uses a color.

E.G: Right now it's 0x000000FF, which is a solid black.

Editing it to 0xFFFFFFFF would make it a solid white.

Of course, everywhere you see 0x000000(ALPHA), you would have to edit 000000 to FFFFFF.

That was hard to explain, if it didn't make sense, reply back and I'll try to explain it in more detail.

Quote:
Originally Posted by ******
Посмотреть сообщение
There is a much simpler way to do that switch by calculating the TD colour, and thus also supporting other colours. Check y_zonepulse for an example of slowly fading between two arbitrary colours in arbitrary time. I'd suggest also checking seiffade, but I'm not sure how that one works.
Like I stated above, it's probably not the best way, but this works just fine. This does support other colors, just with a little bit of effort editing-wise.
Reply
#5

Quote:
Originally Posted by ******
Посмотреть сообщение
I saw that, I was simply pointing you to a place where information on a simpler method was available.
Fair enough.
Reply
#6

This is a nice feature, I'll be sure to use it.
Thanks
Reply
#7

Quote:
Originally Posted by AaronKillz
Посмотреть сообщение
This is a nice feature, I'll be sure to use it.
Thanks
Thank ya. Added a video.
Reply
#8

Good job.
Reply
#9

50 Nano.s O.o

Reply
#10

Quote:
Originally Posted by [Full]Garfield[XDB]
Посмотреть сообщение
50 Nano.s O.o

If you want it to fade like shown in the video, that's the setting I chose that looked the best to me, and it's 50 milliseconds, actually.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)