[LeLeTe]

TUTORIAL SOBRE - TEXTDRAWS

Apesar de muitos jб terem visto vбrios tutoriais sobre isso, vou reunir aqui alguns programas e utilidades interessantes para todos vocкs.

Capнtulos
1 - Comeзando com TextDraws
2 - Textos
3 - Boxes(Caixas)
4 - Barras

COMEЗANDO COM TEXTDRAWS

O que sгo textdraws?
-Sгo aqueles textos que aparecem no meio da sua tela (sem ser o chatbox.)

Exemplo:



Acima й um exemplo de um MUITO SIMPLES sistema de velocнmetro (Que foi postado por mim aqui no fуrum);

WOW! Que troзo legal! Que que eu posso fazer?


Muitas coisas. Tanto que й (praticamente) limitado somente a sua imaginaзгo.



Vocк pode criar:


-Barras de progresso;
-Informaзхes;
-Simples textos;
-Textos que se mexem;


Entre muitos outros!


Agora, vamos para a primeira parte:

TEXTOS!


Antes de tudo, para tudo que serб ensinado neste tutorial, irгo ser necessбrias as ferramentas:

(Eu pedi para os criadores dos FS's/INCLUDE's abaixo mostrados a permissгo de traduзгo para PT/BR de suas ferramentas. Se me for dada a permissгo, irei postar aqui os mesmos, em forma de Attachment.

TextDraw Edtior by: Zamaroth (Link: https://sampforum.blast.hk/showthread.php?tid=117851 )
VERSГO TRADUZIDA: Se encontra em Attachment.

Progress Bar Creator by: Toribio (Link: https://sampforum.blast.hk/showthread.php?tid=113443 )

As explicaзхes abaixo serгo baseadas no uso destas duas ferramentas acima descritas.

TEXTOS

Neste tutorial, vocк irб aprender como fazer um sisteminha legal de combustнvel. Mais os ensinamentos aqui transmitidos podem ser usados para fazer MUITAS coisas, como sistema de ranks, sistema de nнveis, e etc.

Notas:
Infelizmente, muito infelizmente, o TextDraw nгo suporta os acentos em letras(Algumas fontes).
As fontes que suportam, porйm, mostram os acentos errados, e й uma lambanзa geral.
Tipos de Fontes:

As informaзхes abaixo sгo meramente explicativas. Ou seja, sгo somente para que vocк aprenda como usufruir do menu de criaзгo de TextDraws.



Ao digitar /text em seu servidor, vocк irб ver um menu com trкs opзхes:
-Novo projeto;
-Carregar Projeto;
-Deletar Projeto;



Selecione Novo Projeto, e digite um nome qualquer.



Agora, este serб seu projeto. Outro menu irб aparecer, com as opзхes:
Novo TextDraw;
Exportar Projeto;
Fechar Projeto;



Selecione Novo TextDraw;



Vocк irб ver no topo da tela seu novo TextDraw Criado.



Agora, selecione seu TextDraw no menu.



E entгo, vocк terб na sua tela um menu rico em opзхes de customizaзгo de sua TextDraw.



Vamos comeзar por mudar o texto da TextDraw para Combustivel;



Agora, vamos mudar a posiзгo.



Selecione Move The TextDraw para mover ela livremente pela tela. Porйm, se preferir, selecione Write Exact Position, e digite as exatas coordenadas de sua TextDraw na tela.



Apуs definirmos aonde fica a TextDraw Combustivel, vamos mudar o Alinhamento.
O alinhamento serve para alinhar o texto conforme a posiзгo que vocк escolheu. Left, alinha o texto para Esquerda. Right, para a Direita. Centered, para o centro. Igual ao mesmo sistema usado aqui no fуrum, e no Microsoft Word, entre outros.



Depois, iremos selecionar a cor.



No menu de cores, existem trкs opзхes:
-Write a Hexadecimal Number - Serve para que vocк digite um nъmero de cor Hexadecimal para sua TextDraw;
-Use Color Combinator - Um combinador de cores, com as cores Red(vermelho), Green(Verde), e Blue(azul), alйm da Opacity(Opacidade/Alpha/Transparкncia) da cor desejada;
-Select a Pre-Made Color - Selecione dentro de uma lista de cores prй-feitas;



Apуs isso, selecionaremos a fonte. No exemplo, selecionei a fonte 3.



Depois, selecionaremos a proporcionalidade, ou seja, o alinhamento das letras para com elas mesmas.
(NOTA: O menu estб invertido, ou seja, OFF seta o alinhamento para ON, e vice versa.)



Apуs isso, selecionaremos o tamanho das letras do TextDraw. Temos duas opзхes: Escrever o Exato Tamanho(Primeira Opзгo), ou mover o tamanho livremente pela tela(Segunda opзгo). Irei escolher a segunda.



E entгo, iremos selecionar Edit Outline.
O menu Edit Outline tem as opзхes de selecionar se vocк quer sombra(Shadow), ou borda(Outline) em seu TextDraw. Ou nenhum dos dois.
DETALHE: O tamanho da borda nгo pode ser editado pelo editor. Somente manualmente.
(NOTA: O menu estб invertido, ou seja, OFF seta a borda para ON, e vice versa.)



Em Shadow Size, vocк pode selecionar a distвncia da sombra para com o texto, ou, se quiser, vocк pode escrever a distвncia que quiser.


Em Outline/Shadow Color, vocк tem as mesmas opзхes do que no menu de seleзгo de cores para o seu texto.

A ъltima opзгo do menu Outline/Shadow faz vocк voltar para o menu principal.


As duas ъltimas opзхes se referem a : Duplicar(Duplicate) a textlabel, ou deletб-la.


Agora que vocк jб sabe como criar e modificar boa parte das funзхes de texto de uma TextDraw, vamos criar um outro texto, agora com o texto 0%, cor branca, alinhamento central, fonte 2, sem borda nem sombras, e um pouco abaixo do texto Combustivel, e com o size igual o da imagem abaixo:



Agora, vamos selecionar Edit Box...

BOXES(CAIXAS)

Essas "Caixas", sгo meramente caixas pretas feitas em TextDraw.


No menu Edit Box, selecionamos Box On.


Agora, em Box Size, iremos editar o tamanho da Box. (ATENЗГO: Somente as setas para cima e para baixo (No exemplo aqui mostrado) funcionam. Elas tem a funзгo de enlargar ou encurtar a caixa (Na horizontal, ou seja, para os lados);



E, agora, em Box Color, vocк irб ter um menu igual ao de seleзгo de cores para seu TextDraw.


Com boxes, vocк pode criar caixas para colocar seus TextDraws, e atй barras!


Mas, criar barras com o TextDrawEditor dб MUITO trabalho. Por isso, existe o Progress Bar include...


Enfim, agora, vб atй o menu de seleзгo de TextDraws, e selecione Export Project, apуs isso, selecione Self-Working Filterscript, e agora vocк verб um menu com vбrias opзхes de TextDraw. Selecione show textdraw while in vehicle, para que seja exibido enquanto vocк estiver em um veнculo, e pronto! O FS estarб pronto em sua pasta Scriptfiles. Nгo se esqueзa de compilar e mover o FS para a pasta Scriptfiles!

TEXTOS

No link provido no comeзo deste tуpico, existe um FS, que й ao mesmo esquema do TextDrawEditor, mas para o Progress Bar.


Para comeзar, digite /bar e uma barra irб aparecer na tela. Utilize as teclas de movimento para mover. Apуs isso, aperte o Botгo de Sair do Carro, e digite /bar de novo, para o menu de ediзгo de sua barra aparecer. Ele й bem simples. Ele contйm 4 opзхes:
-Mudar Posiзгo;
-Mudar Tamanho;
-Mudar Cor;
-Terminar ediзгo;


Os menus de Mudar Posiзгo, e Mudar tamanho, sгo iguais. Selecione eles, e vocк entrarб no modo de ediзгo.
O menu de mudar cor, porйm, pode parecer difнcil, mais nгo й. Simplesmente digite o cуdigo Hexadecimal da cor
(Link para cores: http://www.dave-stephens.com/computers/colors.htm ), Seguido pela Transparкncia (Tambйm Hexadecimal. Varia de 00(Transparкncia total, ou seja, INVISНVEL) a FF(Transparкncia 0, ou seja, FORTE) e a barrinha serб criada. MAS ATENЗГO: Vocк DEVE digitar 0x ANTES do cуdigo HexaDecimal de Cor! Exemplo: 0x[CodigoHexadecimalDeCor][Transparкncia].
Exemplo:
0x00BFFFAA
0xFFFFFFFF



Ao clicar em terminar ediзгo(Eu alinhei e modifiquei a barrinha para ficar igual a da imagem acima, usando a cor Hexadecimal 00BFFF, Transparкncia AA, ), surgirб uma caixa de texto que irб lhe pedir que digite um nome para que seja salvo o cуdigo de sua barrinha. Este arquivo se encontrarб na pasta Scriptfiles.

EXTRAS

-Como usar a barrinha;
[CODE]
FUNЗХES DO INCLUDE PROGRESS BAR:
* CreateProgressBar(x, y, largura, altura, cor, max)

Cria uma barrinha (Como TextDrawCreate).
o x e y sгo a posiзгo da barra na tela;
o largura e altura (Eles tem valores default, ou seja, valores padrгo. jColoque "_" sem as aspas como um parвmetro(valor) de largura e altura );
o Cor = Cor da barra;
o Max define a mбxima porcentagem que a barra pode chegar(Valor padrгo й 100).

Retorna: O ID da barra.

* DestroyProgressBar(barid)

Destrуi uma barrinha.

* ShowProgressBarForPlayer(playerid, barid)

Mostra a barra para um player.

* HideProgressBarForPlayer(playerid, barid)

Esconde a barra de um player.

* ShowProgressBarForAll(barid)

Mostra a barra para todos os players conectados.

* HideProgressBarForAll(barid)

Esconde a barra para todos os players conectados.

* SetProgressBarValue(barid, value)

Define o valor porcentual da barra (й um valor float). Lembre-se que o valor nгo deve ultrapassar o valor mбximo definido em CreateProgressBar.

* GetProgressBarValue(barid)

Retorna o valor de uma barra.
Note: Ele vai retornar INVALID_BAR_VALUE se a barrinha nгo existe, ou se algo deu errado.

* SetProgressBarMaxValue(barid, max)

Seta o valor mбximo de uma barrinha a qualquer instante. (o valor, porйm, nгo muda).

* SetProgressBarColor(barid, color)

Define a cor da barrinha. Para os resultados serem aplicados, deve-se usar UpdateProgressBar.

* UpdateProgressBar(barid, playerid=INVALID_PLAYER_ID)

Toda a vez que vocк mudar o valor da barrinha, ou sua cor, vocк DEVE usar esta funзгo. Nгo coloque nada no parвmetro playerid |Exemplo: OnPlayerUpdate(barid)| para que a funзгo seja executada para todos.



E assim, termina meu tutorial. (Imagens amanhг, net discada й phodz.)


Espero que tenham gostado, e aprendido algo.