[Tutorial] Clickable textdraws
#1

Just a quick tutorial on how to interact with textdraws. Questions can go in the comments section.

Note:This tutorial assumes you already know how to create textdraws

Getting started
The possibility of clicking textdraws is introduced at 0.3e RC4. That means you'll need SA-MP 0.3e RC4 or higher to get this working (both client and server).

In this tutorial we'll be recreating this simple teleport menu I made with Zamaroht's textdraw editor:
[ame]http://www.youtube.com/watch?v=aqVS-unQO6M[/ame]
I'm not going to tell you how to create these textdraws, that's up to you.


The script
We'll start by initializing our textdraws and setting them up. This is just a copy n' paste from the textdraw editor, nothing to explain here.
pawn Код:
#include <a_samp>
new Text:teleportBox;
new Text:teleportLS;
new Text:teleportSF;
new Text:teleportLV;
public OnFilterScriptInit()
{
    print("\n--------------------------------------");
    print(" Textdraw teleporting - tut for showing\n  how textdraw selecting works");
    print("--------------------------------------\n");
   
    teleportBox = TextDrawCreate(320.000000, 143.000000, "~n~Teleport menu~n~~n~~n~~n~~n~~n~~n~~n~~n~~n~~n~_");
    TextDrawAlignment(teleportBox, 2);
    TextDrawBackgroundColor(teleportBox, 255);
    TextDrawFont(teleportBox, 2);
    TextDrawLetterSize(teleportBox, 0.500000, 1.000000);
    TextDrawColor(teleportBox, -1);
    TextDrawSetOutline(teleportBox, 0);
    TextDrawSetProportional(teleportBox, 1);
    TextDrawSetShadow(teleportBox, 1);
    TextDrawUseBox(teleportBox, 1);
    TextDrawBoxColor(teleportBox, 255);
    TextDrawTextSize(teleportBox, 45.000000, 115.000000);

    teleportLS = TextDrawCreate(320.000000, 180.000000, "Los Santos~n~Airport");
    TextDrawAlignment(teleportLS, 2);
    TextDrawBackgroundColor(teleportLS, 255);
    TextDrawFont(teleportLS, 2);
    TextDrawLetterSize(teleportLS, 0.260000, 0.799999);
    TextDrawColor(teleportLS, -1);
    TextDrawSetOutline(teleportLS, 0);
    TextDrawSetProportional(teleportLS, 1);
    TextDrawSetShadow(teleportLS, 1);

    teleportSF = TextDrawCreate(320.000000, 205.000000, "San Fierro~n~Airport");
    TextDrawAlignment(teleportSF, 2);
    TextDrawBackgroundColor(teleportSF, 255);
    TextDrawFont(teleportSF, 2);
    TextDrawLetterSize(teleportSF, 0.260000, 0.799999);
    TextDrawColor(teleportSF, -1);
    TextDrawSetOutline(teleportSF, 0);
    TextDrawSetProportional(teleportSF, 1);
    TextDrawSetShadow(teleportSF, 1);

    teleportLV = TextDrawCreate(320.000000, 230.000000, "Las Venturas~n~Airport");
    TextDrawAlignment(teleportLV, 2);
    TextDrawBackgroundColor(teleportLV, 255);
    TextDrawFont(teleportLV, 2);
    TextDrawLetterSize(teleportLV, 0.260000, 0.799999);
    TextDrawColor(teleportLV, -1);
    TextDrawSetOutline(teleportLV, 0);
    TextDrawSetProportional(teleportLV, 1);
    TextDrawSetShadow(teleportLV, 1);
    return 1;
}
In order to be able to make textdraws clickable, we'll need to use TextDrawSetSelectAble. This code will go at the bottom of OnGameModeInit (Check the source script if you've got problems with it):
pawn Код:
TextDrawSetSelectable(teleportBox, false);
TextDrawSetSelectable(teleportLS, true);
TextDrawSetSelectable(teleportSF, true);
TextDrawSetSelectable(teleportLV, true);
I'm using a filterscript for this tutorial, so I need to destroy the textdraws when I'm unloading the script.
pawn Код:
public OnFilterScriptExit()
{
    TextDrawDestroy(teleportBox);
    TextDrawDestroy(teleportLS);
    TextDrawDestroy(teleportSF);
    TextDrawDestroy(teleportLV);
    return 1;
}
I'm using a command to fetch the teleport menu. I know I'm using strcmp, but I'm not going to use ZCMD for just one simple command.

In this command we'll be showing the textdraws to the player and allowing him to select the textdraws:
pawn Код:
public OnPlayerCommandText(playerid, cmdtext[])
{
    if (!strcmp("/teleport", cmdtext, true))
    {
        TextDrawShowForPlayer(playerid, teleportBox); // Show the box
        TextDrawShowForPlayer(playerid, teleportLS);  // Show the LS option
        TextDrawShowForPlayer(playerid, teleportSF);  // Show the SF option
        TextDrawShowForPlayer(playerid, teleportLV);  // Show the LV option

        SelectTextDraw(playerid, 0xA3B4C5FF); // Allow the player to select textdraws.
            // The second parameter is the colour to which the textdraw turns when you hover over it.
            //  You can use stuff like COLOR_RED as well, that's your choice.
        return 1;
    }
    return 0;
}
I hope you've understood everything so far. If not, just leave a comment.

The player is now able to select textdraws (Or at least, the textdraws we've allowed him to select using TextDrawSetSelectable). After he has selected and clicked on a textdraw we need to process his 'click'.

I'll post the basic code:
pawn Код:
public OnPlayerClickTextDraw(playerid, Text:clickedid)
{
    if(clickedid == teleportLS) // If the player clicked on the teleportLS textdraw, teleport him there!
    {
        SetPlayerPos(playerid, 1630.2030,-2328.9673,13.5469);
        SetPlayerFacingAngle(playerid, 0.9392);
    }
    else if(clickedid == teleportSF) // Same as above, but for SF
    {
        SetPlayerPos(playerid, -1424.6083, -290.9622, 14.1484);
        SetPlayerFacingAngle(playerid, 134.9570);
    }
    else if(clickedid == teleportLV) // Same, but for LV
    {
        SetPlayerPos(playerid, 1688.7990, 1447.7753, 10.7675);
        SetPlayerFacingAngle(playerid, 267.3902);
    }

                     // Hide the textdraws after the player has teleport himself.
    TextDrawHideForPlayer(playerid, teleportBox);
    TextDrawHideForPlayer(playerid, teleportLS);
    TextDrawHideForPlayer(playerid, teleportSF);
    TextDrawHideForPlayer(playerid, teleportLV);

    CancelSelectTextDraw(playerid); // Everything worked out perfectly, now stop the player to be able to select shizzle.
    return 1;
}
'Done', you might say. However, there's a glitch when using CancelSelectTextDraw: It calls OnPlayerClickTextDraw. This code will result in an eternal loop. Click here for more information on this glitch.

We need to fix this code. CancelSelectTextDraw calls OnPlayerClickTextDraw with INVALID_TEXT_DRAW, so the workaround is easy:
pawn Код:
public OnPlayerClickTextDraw(playerid, Text:clickedid)
{
    if(_:clickedid != INVALID_TEXT_DRAW) // If the player clicked a valid textdraw, continue with the coding. (_:var removes the Text: tag, to avoid tag mismatch)
    {
        if(clickedid == teleportLS)
        {
            SetPlayerPos(playerid, 1630.2030,-2328.9673,13.5469);
            SetPlayerFacingAngle(playerid, 0.9392);
        }
        else if(clickedid == teleportSF)
        {
            SetPlayerPos(playerid, -1424.6083, -290.9622, 14.1484);
            SetPlayerFacingAngle(playerid, 134.9570);
        }
        else if(clickedid == teleportLV)
        {
            SetPlayerPos(playerid, 1688.7990, 1447.7753, 10.7675);
            SetPlayerFacingAngle(playerid, 267.3902);
        }

        TextDrawHideForPlayer(playerid, teleportBox);
        TextDrawHideForPlayer(playerid, teleportLS);
        TextDrawHideForPlayer(playerid, teleportSF);
        TextDrawHideForPlayer(playerid, teleportLV);
        CancelSelectTextDraw(playerid); // This will indeed call OnPlayerClickTextDraw again, but with an ID of 65535. The code above stops it from resulting in an eternal loop.
    }
    return 1;
}
I hope you've learned something from this tutorial. If you've still got questions, please post them in this thread (Do not PM me).

A link to the complete script can be found here on Pastebin.

Good luck!
Reply
#2

Nice, I guess? (:
Reply
#3

Quote:
Originally Posted by FireCat
Посмотреть сообщение
Nice, I guess? (:
Admit it, you only wanted to get the first post, didn't ya
Reply
#4

This will help alot of people. You deserve some reputations.
Reply
#5

Hiddos get some reputation from me because this will be very helpful to lot players.Rep[Hiddos] ++;
Reply
#6

Thanks folks, good luck working out your own ideas . I can see a ton of features using this system.
Reply
#7

Quote:
Originally Posted by Hiddos
Посмотреть сообщение
Thanks folks, good luck working out your own ideas . I can see a ton of features using this system.
Lot systems can be implemented through this.
Reply
#8

Good job Hiddos. I was working on something like this myself too
Reply
#9

Got some issue on the hover as stated on the video. You mind explaining how to fix that?
Reply
#10

Quote:
Originally Posted by T0pAz
Посмотреть сообщение
Got some issue on the hover as stated on the video. You mind explaining how to fix that?
Ye that its true just noticed it out right now.If you notice on the video the san fierro airport teleport doesnt get coloured when you hover it.
Reply
#11

I'm also experiencing these issues, I don't think there's a fix for it just yet though. I agree on it being annoying.
Reply
#12

Thank you

//EDIT Done it was the zcmd that every commnad answered with "SERVER: Unknown Command.".

I have tested it now.

Thank you its great.

But it you hover right on the line.
On the Right of screen and you are in the line it also get the color.
And if you go from down to up every line is this hovercolor.

Sorry for my bad english


Atta(Oo);
Reply
#13

i like in skin.
Reply
#14

Very nice.. explained well and demonstration.. very nice
Reply
#15

Good tut, i could use this for later ^^
Reply
#16

Nicely done tutorial.
Reply
#17

Nice, Hiddos! Really helped me with this. Never actually worked with textdraws, but even I can follow this! (it means that it is newbie-proof.)

Thank you very much.
Reply
#18

cool man

Only one bad thing is that you must create textdraw for every location, you can't use ~n~ :S
Reply
#19

Awsome, thanks for video! ..
Reply
#20

future is here <3
I love it lol , indeed
THis The feature is really helpful )
i already tried it ^^ , wanna some rep , na u dont
say plz!SAY IT!!
.
.
.
hmm i can hear it okay there u go <3
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)