- 38
- 16
2 tutorial de Lua ImGui
O primeiro tutorial tem um limite de caracteres,então vou fazer esse aqui como complemento
E claro,para Brasileiros ou qualquer um usuario de tradutor
Lembrando que as explicações estão dentro do códigoDependências :
Lua para windowsSA-MP 0.3.7
Asi Loader
Moonloader
ImGui Lua
Inicio :
Voltando a avisar que não ensino Lua aqui,então aprenda o básico e volte para cáBeginMenu(Barra de opções no menu)
Exemplo Visual :
┌────────────────────────────────┐
│ ImGui [_][□][X]│
├────────────────────────────────┤
│ Arquivo | Editar | │
├────────────────────────────────┤
│ │
│ [Aqui vai o resto do Menu] |
│ │
│ │
└────────────────────────────────┘
Código do BeginMenu :
Lua:
imgui.Begin('Tutorial ImGui SA-MP', state, imgui.WindowFlags.MenuBar) -- WindowFlags.MenuBar = permite usar BeginMenuBar dentro da janela]
if imgui.BeginMenuBar() then -- BeginMenuBar cria a barra de menu
-- Só funciona se a janela tiver a flag WindowFlags.MenuBar
-- Primeiro menu dropdown
if imgui.BeginMenu("Arquivo") then -- BeginMenu cria um menu dropdown (que abre para baixo)
if imgui.MenuItem("Novo") then -- MenuItem = item clicável dentro do menu
sampAddChatMessage("Novo clicado", -1)
end
if imgui.MenuItem("Abrir") then -- Outro item clicável
sampAddChatMessage("Abrir clicado", -1)
end
imgui.Separator() -- Linha separadora
if imgui.MenuItem("Sair") then -- Outro Item
state.v = false -- Aqui o state é a variável booleana do seu menu,Exemplo state = imgui.ImBool(false)
end
imgui.EndMenu() -- Fecha o menu "Arquivo"
end
-- Segundo menu dropdown
if imgui.BeginMenu("Editar") then -- Outro Dropdown
if imgui.MenuItem("Copiar") then -- Uma opção
sampAddChatMessage("Copiar", -1)
end
if imgui.MenuItem("Colar") then -- Outra opção
sampAddChatMessage("Colar", -1)
end
imgui.EndMenu() --Finaliza o Dropdown
end
imgui.EndMenuBar() -- Sempre feche o BeginMenuBar
endComo fica :
Como fazer BeginPopupModal (Janela Popup)
Lua:
if imgui.Button('Abra o Popup') then
imgui.OpenPopup("Modal") -- Guarde o nome do OpenPopup
end
-- Em seguida você usa o nome que você colocou em OpenPoup em BeginPopupModal como abaixo :
if imgui.BeginPopupModal("Modal", nil, imgui.WindowFlags.AlwaysAutoResize) then -- WindowFlags.AlwaysAutoResize ajusta tamanho automaticamente
-- Textos informativos dentro do modal
imgui.Text("Script Tutorial ImGui")
imgui.Text("Versão: 2.0")
imgui.Text("Autor: Seu Nome")
-- Linha separadora
imgui.Separator()
-- Botão para fechar o modal
-- ImVec2(120, 0) = largura 120px, altura automática
if imgui.Button("Fechar", imgui.ImVec2(120, 0)) then
imgui.CloseCurrentPopup() -- CloseCurrentPopup fecha o modal atual
end
imgui.EndPopup() -- Sempre feche o modal com EndPopup
endComo fica :
Como fazer TextQuestion (Um tipo de dica ou informação sobre tal botao,slider etc)
Você passa o mouse encima do '?' e aparece o ToolTip
Lua:
--Obrigatório (Vou explicar a function,só que você não precisa entender ela -_- )
function imgui.TextQuestion(text) -- Recebe o parametro text
imgui.TextDisabled('(?)') -- Cria o ícone de ajuda '?'
if imgui.IsItemHovered() then -- Ensinei no 1 tutorial
imgui.BeginTooltip() --Inicia um Tooltip(dica para o mouse)
imgui.PushTextWrapPos(450) -- Texto quebra em 450 Pixels
imgui.TextUnformatted(text) -- Consegue ter textos enormes e textos com símbolos especiais
imgui.PopTextWrapPos() -- Finaliza a quebra de texto
imgui.EndTooltip() -- Finaliza o ToolTip
end
end
imgui.Button('Botao teste')
imgui.SameLine() -- Próximo item na mesma linha
imgui.TextQuestion(" Aqui você bota informações ")Como ficou :
Como fazer BeginMainMenuBar(Menu no topo da tela)
Lua:
function imgui.OnDrawFrame()
-- Menu no topo da tela (não precisa de Begin/End de janela)
if imgui.BeginMainMenuBar() then -- Aqui começa o Menu
if imgui.BeginMenu("Arquivo") then -- Começa o Menu no Topo
if imgui.MenuItem("Novo") then -- Primeira Opção no BeginMainMenuBar
sampAddChatMessage("Novo", -1)
end
if imgui.MenuItem("Abrir") then -- Segunda Opção no BeginMainMenuBar
sampAddChatMessage("Abrir", -1)
end
imgui.Separator() -- Para separar
if imgui.MenuItem("Sair") then -- Terceira Opção no BeginMainMenuBar
sampAddChatMessage("Saindo...", -1)
end
imgui.EndMenu() -- Finzaliza o
end
if imgui.BeginMenu("Editar") then -- Inicia um Menu
if imgui.MenuItem("Copiar") then -- Quarta Opção no BeginMainMenuBar
sampAddChatMessage("Copiado", -1)
end
if imgui.MenuItem("Colar") then -- Quinta Opção no BeginMainMenuBar
sampAddChatMessage("Colado", -1)
end
imgui.EndMenu() -- Finaliza o BeginMenu
end
imgui.EndMainMenuBar() -- Sempre feche o BeginMainMenuBar
end
endComo ficou :
Como fazer BeginGroup(Colunas em resumo)
Lua:
imgui.BeginGroup() -- Inicia a primeira Coluna
imgui.Text("Nome: João")
imgui.Text("Idade: 25")
imgui.Text("HP: 100")
imgui.EndGroup() -- Finaliza a primeira Colina
imgui.SameLine(0, 20) -- Próximo grupo fica do lado com espaço de 20px para não ficar muito perto
imgui.BeginGroup() -- Inicia Segunda Coluna
imgui.Button("Teleportar")
imgui.Button("Curar")
imgui.Checkbox("God Mode")
imgui.EndGroup() -- Finaliza a segunda ColunaComo ficou :
Imgui.Columns : Coluna/Tabela no caso
Lua:
--[ Coluna 1 ] [ Coluna 2 ] [ Coluna 3 ]
imgui.Columns(3) -- define 3 colunas
imgui.Text("ID")
imgui.NextColumn() -- Proxima linha da tabela
imgui.Text("Nome")
imgui.NextColumn() -- Proxima linha
imgui.Text("Ping")
imgui.NextColumn() -- Proxima linha
--Como fica
-- ID Nome PingExemplo Real :
Lua:
imgui.Columns(3) -- Cria 3 colunas (serão: ID, Nome, Ping)
-- Cabeçalho da tabela
imgui.Text("ID") -- Escreve "ID" na primeira coluna
imgui.NextColumn() -- Pula pra próxima coluna (2ª)
imgui.Text("Nome") -- Escreve "Nome" na segunda coluna
imgui.NextColumn() -- Pula pra próxima (3ª)
imgui.Text("Ping") -- Escreve "Ping" na terceira coluna
imgui.NextColumn() -- Volta pra primeira coluna da próxima linha automaticamente
imgui.Separator() -- Cria uma linha horizontal separando o cabeçalho dos dados
-- Linha 1 da tabela
imgui.Text("1") -- Mostra "1" na primeira coluna
imgui.NextColumn() -- Vai pra próxima coluna
imgui.Text("Haru Urara") -- Mostra o nome do jogador na segunda coluna
imgui.NextColumn() -- Vai pra próxima
imgui.Text("48") -- Mostra o ping na terceira coluna
imgui.NextColumn() -- Vai pra próxima linha (coluna 1 da próxima linha)
-- Linha 2 da tabela
imgui.Text("2") -- Primeira coluna
imgui.NextColumn()
imgui.Text("Bode dus Behhh") -- Segunda coluna
imgui.NextColumn()
imgui.Text("92") -- Terceira coluna
imgui.NextColumn() -- Volta pra linha seguinte
-- Finalização
imgui.Columns(1) -- Volta ao layout normal (1 coluna)
imgui.Text("Fim da tabela.") -- Texto fora da tabela
endMais coisas de texto :
imgui.TextColored : Texto com cores personalizadas
O ImGui usa o sistema de cores RGBA:
- R = Vermelho
- G = Verde
- B = Azul
- A = Alpha (transparência)
e não de 0 a 255 como no Windows ou HTML.
Fica mais facil usando imgui.ColorEdit4,mais vou ensinar logo
Exemplo :
Lua:
imgui.TextColored(imgui.ImVec4(1, 0, 0, 1), "Texto vermelho")
imgui.TextColored(imgui.ImVec4(0, 1, 0, 1), "Texto verde")
imgui.TextColored(imgui.ImVec4(0, 0, 1, 1), "Texto azul")
imgui.TextColored(imgui.ImVec4(0, 0, 0, 1), "Transparente(preto)")
imgui.ColorEdit4 : Seletor de cores RGB
Lua:
local cor = imgui.ImFloat3(1.0, 1.0, 1.0) -- cor RGB (1=100%)
imgui.SetCursorPosX(5) -- recua o texto 5 pixels
imgui.Text("Configurações Visuais:")
imgui.ColorEdit3("Cor do jogador", cor) -- Cria editor de cor RGB, altera a variavel corimgui.ImFloat3(r,g,b) : guarda a cor (R,G,B) entre 0 e 1
ColorEdit3(label, variavel) cria seletor RGB que altera a variável de cor
Como fica :
imgui.BulletText : Mostra um texto com marcador (•) na frente, tipo lista
Lua:
imgui.BulletText("Nome: Haru Urara")
imgui.BulletText("Ping: 48")
imgui.BulletText("Vida: 100%")imgui.TextDisabled : Texto acizentado,bom para coisas desativadas
Lua:
imgui.TextDisabled("Texto exemplo")imgui.TextWrapped : Quebra o texto automaticamente em várias linhas, conforme o tamanho do Menu
Lua:
imgui.TextWrapped("Esse é um texto muito longo que vai quebrar em várias linhas automaticamente.")imgui.TextUnformatted : Igual ao imgui.Text, mas mais rápido, pois não interpreta formatação (sem cor, sem \n, sem nada)
Lua:
imgui.TextUnformatted("Texto puro e simples, sem processamento extra.")Imgui Addon (ProguessBar) : Barra de proguesso
Lua:
-- Variável que vai controlar o progresso (0.0 a 1.0)
local progresso = 0.0
progresso = progresso + 0.01 -- aumenta 1% a cada frame
if progresso > 1.0 then -- Se meior que 1.0 ou igual então volta pro 0.0
progresso = 0.0 -- reseta quando chega em 100%
end
imgui.ProgressBar(progresso, imgui.ImVec2(-1, 0), string.format("%.0f%%", progresso*100))
-- imgui.ProgressBar(valor, tamanho, texto)
-- valor → entre 0.0 e 1.0
-- tamanho → largura x altura; (-1,0) usa largura total da janela e altura padrão
-- texto → string exibida sobre a barra1 : progresso começa em 0.0
2 : A cada frame ele soma 0.01
3 : Quando chega em 1.0 (100%) → reseta pra 0
4 : ProgressBar(progresso, ImVec2(-1,0), texto) desenha a barra e mostra a porcentagem sobre ela
Voce pode fazer
imgui.ProgressBar(progresso, imgui.ImVec2(-1,0), "Carregando...") que fica mais fácil de entenderComo fica :
Exemplo Real:
Lua:
imgui = require 'imgui'
key = require 'vkeys'
local menu = imgui.ImBool(false)
-- Variável que vai controlar o progresso (0.0 a 1.0)
local progresso = 0.0
function main()
while true do
wait(0)
if wasKeyPressed(key.VK_F2) then
menu.v = not menu.v
end
imgui.Process = menu.v
end
end
function imgui.OnDrawFrame()
if menu.v then
imgui.Begin("Exemplo Barra de Progresso", menu)
if imgui.Button("Resetar Progresso") then
progresso = 0.0 -- reseta ao clicar
end
-- Aumenta o progresso a cada frame
progresso = progresso + 0.01 -- aumenta 1% a cada frame
if progresso > 1.0 then -- Se maior que 1.0 então volta pro 0.0
progresso = 0.0 -- reseta quando chega em 100%
end
imgui.ProgressBar(progresso, imgui.ImVec2(-1, 0), string.format("%.0f%%", progresso*100))
-- imgui.ProgressBar(valor, tamanho, texto)
-- valor → entre 0.0 e 1.0
-- tamanho → largura x altura; (-1,0) usa largura total da janela e altura padrão
-- texto → string exibida sobre a barra
imgui.End()
end
endFoto:
InputText Flags
Aqui vai uma lista de flags para InputText com foto:
imgui.InputTextMultiline : Campo de texto grande que voce pode escrever,tipo editor de texto
Lua:
local textoGrande = imgui.ImBuffer(2048) -- Variavel de texto
textoGrande.v = "Digite aqui seu texto" -- Texto dentro da variavel textoGrande
-- InputTextMultiline = caixa de texto com varias linhas
-- ImVec2(-1, 250) = largura total, altura 250px
imgui.InputTextMultiline("##editorTexto", textoGrande, imgui.ImVec2(-1, 250))Na prática '##' protege e é só para o título ou nome,além de ser uma boa prática
Password (Caracteres ofuscados)
Lua:
local inputPassword = imgui.ImBuffer(256) -- Variável
imgui.InputText('##password', inputPassword, imgui.InputTextFlags.Password) -- Input + Flag
ReadOnly(Texto não editável,apenas de leitura)
Lua:
local inputReadOnly = imgui.ImBuffer("Texto somente leitura", 256) -- Variavel que passa o texto primeiro,depois o maximo do texto
imgui.InputText('##readonly', inputReadOnly, imgui.InputTextFlags.ReadOnly) -- Input + Flag
CharsDecimal (Aceita apenas números , +- e números decimais)
Lua:
local inputDecimal = imgui.ImBuffer(256) -- Variável do Input
imgui.InputText('##decimal', inputDecimal, imgui.InputTextFlags.CharsDecimal) -- Input + Flag
CharsHexadecimal (apenas: 0-9, A-F,Códigos hex, cores, endereços de memória)
Lua:
local inputHexadecimal = imgui.ImBuffer(256) -- Variável do Input
imgui.InputText('##hexadecimal', inputHexadecimal, imgui.InputTextFlags.CharsHexadecimal) -- Input + Flag
CharsUppercase (FORÇAR LETRAS MAIÚSCULAS)
Lua:
local inputUppercase = imgui.ImBuffer(256) -- Váriavel do Input
imgui.InputText('##uppercase', inputUppercase, imgui.InputTextFlags.CharsUppercase) -- Input + Flag
CharsNoBlank (Sem Espaços)
Lua:
local inputNoBlank = imgui.ImBuffer(256) -- Váriavel do Input
imgui.InputText('##noblank', inputNoBlank, imgui.InputTextFlags.CharsNoBlank) -- Input + Flag
AutoSelectAll (Seleciona tudo ao clicar)
Код:
local inputAutoSelect = imgui.ImBuffer("Clique aqui para selecionar tudo automaticamente", 256) -- Texto que ja vem no Input,depois maximo de caracteres(256)
imgui.InputText('##autoselect', inputAutoSelect, imgui.InputTextFlags.AutoSelectAll) -- Input + Flag
Se eu não botei uma flag, ela é estranha de usar ou sei lá
Irei adicionar mais coisas depois...
Tutorial no Github Tutorial Github (Desatualizado até o momento)
Confira o primeiro tutorial Tutorial ImGui Lua 1
Последнее редактирование:
