[Dx8] Aprendendo a adicionar Botões e Gui

por **Profane ~** Ter Out 13, 2015 12:17 am

Olá amores,

Percebi que existe uma grande complicação por parte de muitos a respeito do uso do [ Dx8 ], adições de GUI, edições e entre outros. Neste tópico estarei auxiliando na criação de botões.

#Nível de Programação : Minimo/Médio
#Grau de Chatice : Alto 'Sim, é um pouco chato o fazer

'Eu havia escrito o tutorial por completo : ( Deu algum problema e não salvou y-y

#Necessidades#

Visual Basic
Client-Side (Source Client da sua Engine sendo Dx8)
Preparo do Botão em 3 estados (Normal / Hover e Click)
Uma GUI a sua Escolha

Apenas usaremos o Client-Side, então não se preocupem com o Servidor.

Lembre-se que as Dx8 trabalha em grande parte com PNG pela transparência.

[ 0º - Dando Vida a GUI ]

0.1 - Certo em meu Exemplo criarei um Menu onde dentro desse Menu terá um botão que Abrirá o Inventory e Fechará o Inventory. Eu mostrarei como e onde usando esta base mudar e usar para infinitas coisas.

0.2 - Selecione sua GUI (Tela desejada) - Abaixo link da GUI caso queria usar a mesma do exemplo.

[Dx8] Aprendendo a adicionar Botões e Gui 4Nn1lwg

https://i.imgur.com/4Nn1lwg.png

É uma GUI 100x100 em PNG - Fique atento ao tamanho pois será necessário saber o tamanho exato da GUI que irá trabalhar!

0.3 - Vá a Pasta datafiles/Graphics/GUI; e veja quem é o ultimo numero, é o 40? então adicione nossa GUI lá dentro, com o próximo número..No caso 41? Lembre-se que a pasta é uma sequência.

Vamos dizer que a GUi será adicionada com o número 81.

0.4 - Bom já temos nossa GUi dentro do Pasta, vamos começar a dar vida a ela ;3;

Dentro do Vb, procure pelo modulo: ModGraphics

#Note que pode ser que seja outro nome como ModRendering, ou ModDx8; Depende de sua engine, mas ela sendo Dx8 aceitará o processo, o nome do modulo nada o difere.

0.5 - Dentro do ModGraphics vamos procurar por:

Código:: Public Sub DrawGUI()

Ela é a responsável por identificar e modificar o estado das GUI em DX8. Dentro dela procure por:

Código:: DrawGUIBars

Abaixo adicione

Código:: If GUIWindow(GUI_ALDEIATUTORIAL).Visible Then DrawAldeiaTutorial

#Será este o nome da nossa Sub, e da nossa GUI.

0.6 - Vá ao final do ModGraphics e adicione:

Código:: Public Sub DrawAldeiaTutorial() Dim x As Long, y As Long Dim Width As Long, Height As Long ' backwindow + empty bars x = GUIWindow(GUI_ALDEIATUTORIAL).x y = GUIWindow(GUI_ALDEIATUTORIAL).y ' render the window Width = 100 'Largura da Imagem Height = 100 'Altura da Imagem 'EngineRenderRectangle Tex_GUI(4), GUIWindow(GUI_INVENTORY).x, GUIWindow(GUI_INVENTORY).y, 0, 0, width, height, width, height, width, height RenderTexture Tex_GUI(81), x , y , 0, 0, Width, Height, Width, Height End Sub

0.7 - Observem esta linha de código:

Código:: RenderTexture Tex_GUI(81), x , y , 0, 0, Width, Height, Width, Height

o (81) é o numero da nossa GUI, dentro da Pasta; modifique para o numero que está na sua pasta!

0.8 - Agora vamos ao ModEnumerations e procurem por:

Código:: Public Enum GUIType

Antes do :

Código:: GUI_Count End Enum

Adicionem a nossa Gui ;3

Código:: GUI_ALDEIATUTORIAL

0.9 - Agora ao ModGenerals, iremos adicionar ela lá também!
Procure por:

Código:: Public Sub InitialiseGUI

Dentro dela procure por:

Código:: ReDim GUIWindow(1 To GUI_Count) As GUIWindowRec

Abaixo desta linha é feita a leitura via arquivo de todas as GUI (Todas as que foram colocadas no Arquivo!)

Coloquem isso abaixo desta linha:

Código:: ' Gui - Aldeia Tutorial With GUIWindow(GUI_ALDEIATUTORIAL) .x = Val(GetVar(filename, "GUI_ALDEIATUTORIAL", "X")) .y = Val(GetVar(filename, "GUI_ALDEIATUTORIAL", "Y")) .Width = Val(GetVar(filename, "GUI_ALDEIATUTORIAL", "Width")) .Height = Val(GetVar(filename, "GUI_ALDEIATUTORIAL", "Height")) .Visible = True End With

1.0 - Fora do Visual Basic, procurem dentro da "Data files" (Pasta de Arquivos do Jogo) o arquivo:

Interface

É um arquivo de configuração, txt, você o abre no bloco de notas.

Dentro dele no final adicione:

Código:: [GUI_ALDEIATUTORIAL] X=200 Y=200 Width=100 Height=100

Bom, quando precisarmos mudar a GUI, local dela poderemos vir por aki neste arquivo e mudar o X e Y, ou fazer isso pelo Visual Basic dentro da nossa DrawAldeiaTutorial()

Salve o Arquivo e inicie o Jogo, ao entrar creio que já será possível ver sua GUI

Você completou o primeiro passo!

[ 1.0 - Adicionando o Gráfico de um Botão e seus Estados ]

Neste momento adicionaremos a capacidade do ModGraphics ir na pasta do Jogo e identificar, além de fazer a troca dos estados os botão.

Como dito no começo do tópico, o EO faz a leitura de um botão em 3 Estados "momentos". São eles:

Normal 'Sem o mouse estar por cima, nem clicando sobre.
Hover 'Mouse estando por cima da área determinada
Click 'Mouse Clicando sobre o botão

1.1 - Inicialmente temos de ter o resourcer (arquivo); Então façam uso do paint, coreldraw, Photoshop para criar seu botão em 3 figurinhas iguais, ou diferentes, fica a critério de vocês.

Eu por exemplo adoro este site:

http://dabuttonfactory.com/

Ele cria botões com muita facilidade, faço a mudança de cores e assim diferencio bem os 3 estados Normal/Hover/Click.

No Exemplo farei um Botão por lá.

Normal :
https://imgur.com/RPhmqAD

Hover:
https://imgur.com/0YO8z3g

Click:
https://imgur.com/Tg2Oj6J

1.2 - Agora temos os nossos 3 botões em PNG; Vamos adiciona-lo a pasta do Jogo para que ele possa ser lido pelo Client. Vá a pasta Data Files / Graphics / GUI ; Note que dentro da pasta GUI tem outra pasta com o nome Buttons.

Ali dentro procure o ultimo numero da sequência, como fizemos com a GUI. Seu botão será o próximo numero na sequência.

No meu caso foi o 65. Note como ficou na minha pasta:

https://i.imgur.com/1JwaYwb.png

[Dx8] Aprendendo a adicionar Botões e Gui 1JwaYwb

65 = Normal
65_c = Click 'Não esqueça de adicionar o _c
65_h = Hover 'Não esqueça de adicionar o _h

1.3 - Certo, o necessário em Arquivos para fazer com que ele funcione.
Vamos ao Visual Basic!

Dentro dele, iremos ao ModGenerals - Na mesma Sub que adicionamos os valores da GUI mais acima; o ->

Código:: Public Sub InitialiseGUI

Abaixo de onde adicionamos a GUI coloque:

Código:: 'Btt - Aldeia Tutorial With Buttons(96) 'Numero do ultimo Botão do InitialiseGui (Em Sequencia!!)* .state = 0 'normal .x = 200 .y = 200 .Width = 72 'Largura do Botão .Height = 24 'Altura do Botão .Visible = True .PicNum = 65 'Numero do Botão na Pasta Buttons End With

#Muita atenção aqui. É necessário que vá descendo o Sub InitializeGUI; Você vai notar que encontrará muitas exposições de codigos de GUI, e logo chegará aos Buttons, no mesmo molde deste codigo de Buttons acima.

O Caso é que cada um tem um número único. Você terá de localizar o Ultimo, é bem organizado, em meu jogo eu estou usando até o momento 95 Botões, então quando estive fazendo o tutorial, o próximo botão é o 96.

Basta Substituir o (96) pelo valor do ultimo. Lembre-se também de ter o valor de Largura e Altura correto do seu Botão! 000x000 / 100x100/ 125x321 / não importa o valor, desde que o coloque ali de maneira certa.

1.4 - Agora, vamos ao ModGraphics, ali adicionaremos no Draw desejado o Botão, e assim faremos que ao passar o mouse naquele local especifico ele faça a mudança dos estados do Botão.

Procurem o Draw da nossa GUI :

Código:: Public Sub DrawAldeiaTutorial()

No final dela ANTES do End sub; Adicionem :

Código:: ' draw buttons i = 96 ' i = Valor do Botão a qual colocamos no ModGenerals If Buttons(i).Visible Then ' set co-ordinate x = Buttons(i).x y = Buttons(i).y Width = Buttons(i).Width Height = Buttons(i).Height ' check for state If Buttons(i).state = 2 Then ' we're clicked boyo 'EngineRenderRectangle Tex_Buttons_c(Buttons(i).PicNum), x, y, 0, 0, width, height, width, height, width, height RenderTexture Tex_Buttons_c(Buttons(i).PicNum), x, y, 0, 0, Width, Height, Width, Height ElseIf (GlobalX >= x And GlobalX <= x + Buttons(i).Width) And (GlobalY >= y And GlobalY <= y + Buttons(i).Height) Then ' we're hoverin' ' EngineRenderRectangle Tex_Buttons_h(Buttons(I).PicNum), x, y, 0, 0, Width, Height, Width, Height, Width, Height RenderTexture Tex_Buttons_h(Buttons(i).PicNum), x, y, 0, 0, Width, Height, Width, Height ' play sound if needed If Not lastButtonSound = i Then PlaySound Sound_ButtonHover, -1, -1 lastButtonSound = i End If Else ' we're normal 'EngineRenderRectangle Tex_Buttons(Buttons(i).PicNum), x, y, 0, 0, width, height, width, height, width, height RenderTexture Tex_Buttons(Buttons(i).PicNum), x, y, 0, 0, Width, Height, Width, Height ' reset sound if needed If lastButtonSound = i Then lastButtonSound = 0 End If End If

Grande né? da até medo // Não esqueça de substituir o valor do [ i = 96 ] pelo valor do Botão a qual você setou no ModGenerals! Isso é muito importante.

Porém lembrem-se que i é uma variavel de valor, e nossa Sub não entende quem é [ i ]; então suba um pouco e abaixo do titulo da Sub adicione :

Código:: Dim i as Integer

Ficará desta forma:

Código:: Public Sub DrawAldeiaTutorial() Dim x As Long, y As Long Dim Width As Long, Height As Long Dim i As Integer 'Adicinei aqui <<<-

Agora ele entenderá o valor de I sendo um valor inteiro e até ~

Adicional : Alguns EO's tem uma capacidade Max em Constants para Buttons. Você precisará ir ao ModConstants, e procurar por isso aqui:

Código:: ' GUI Public Const MAX_BUTTONS As Long = 96

No Valor coloque um valor maior ou igual ao numero de botões a qual esteja usando, isso é para salvar memoria e melhorar a performance de sua engine. Caso não use um limite de Botões pode ignorar este processo.

Feito até aqui, e tenha colocado tanto a GUI como o Botão com seus tamanhos em Largura e Altura corretamente, poderá logar em seu jogo e ver que ambos vão estar ali, passe o mouse por cima de seu botão e notará que ele fará a mudança de Normal para Hover!!

Porém seu botão é apenas Gráfico, ele ainda não tem nada ligado ao "Click". Vamos lá.

1.5 - Vá ao ModInput - Ele na organização é o responsável por receber qualquer processo do jogador via Mouse e teclado. Procure por :

Código:: Public Sub HandleMouseMove(ByVal x As Long, ByVal y As Long, ByVal Button As Long)

Dentro dele procure por isso aqui:

Código:: If (x >= GUIWindow(i).x And x <= GUIWindow(i).x + GUIWindow(i).Width) And (y >= GUIWindow(i).y And y <= GUIWindow(i).y + GUIWindow(i).Height) Then If GUIWindow(i).Visible Then Select Case i Case GUI_CHAT, GUI_BARS, GUI_MENU ' Put nothing here and we can click through them! Case GUI_INVENTORY, GUI_SPELLS, GUI_CHARACTER, GUI_PARTY, GUI_OPTIONS, GUI_GUILD ' Moveable GUI if right clicked Case Else Exit Sub

Exatamente nesta linha:

Código:: Case GUI_INVENTORY, GUI_SPELLS, GUI_CHARACTER, GUI_PARTY, GUI_OPTIONS, GUI_GUILD

Adicionem nossa GUI, ficando assim:

Código:: Case GUI_INVENTORY, GUI_SPELLS, GUI_CHARACTER, GUI_PARTY, GUI_OPTIONS, GUI_GUILD, GUI_ALDEIATUTORIAL

(Não esqueçam de por a virgula [ , ], antes de por a GUI!)

1.6 - Procure pela

Código:: Public Sub HandleMouseDown(ByVal Button As Long)

Dentro dela, notem que existe vários Cases; Após o Ultimo Case adicionem o nosso case.

Código:: Case GUI_ALDEIATUTORIAL AldeiaTutorial_MouseDown Button Exit Sub

1.7 - Agora vamos ao MouseUP, procurem por:

Código:: Public Sub HandleMouseUp(ByVal Button As Long)

Abaixo também terá vários Cases, após o ultimo adicionem:

Código:: Case GUI_ALDEIATUTORIAL AldeiaTutorial_MouseUp

1.8 - Agora que criamos os "Chamados" de MouseUP e MouseDown, vamos criar os Processos de Sub. No final do ModInput adicione :

Código:: Public Sub AldeiaTutorial_MouseUp() Dim i As Long, x As Long, y As Long, Buffer As clsBuffer ' find out which button we're clickin i = 96 'LEMBRE DE MUDAR PARA O SEU NUMERO DE BOTÃO x = Buttons(i).x y = Buttons(i).y ' check if we're on the button If (GlobalX >= x And GlobalX <= x + Buttons(i).Width) And (GlobalY >= y And GlobalY <= y + Buttons(i).Height) Then If Buttons(i).state = 2 Then ' do stuffs Select Case i Case 96 'COLOQUE AQUI O PROCESSO DO BOTÃO - O QUE ELE IRÁ FAZER End Select ' play sound PlaySound Sound_ButtonClick, -1, -1 End If End If ' reset buttons resetClickedButtons End Sub Public Sub AldeiaTutorial_MouseDown(ByVal Button As Long) Dim i As Long, x As Long, y As Long ' find out which button we're clicking i = 96 'LEMBRE DE MUDAR PARA O SEU NUMERO DE BOTÃO If Buttons(i).Visible Then x = Buttons(i).x y = Buttons(i).y ' check if we're on the button If (GlobalX >= x And GlobalX <= x + Buttons(i).Width) And (GlobalY >= y And GlobalY <= y + Buttons(i).Height) Then Buttons(i).state = 2 ' clicked End If End If End Sub

Observe que existem ai duas SUBs:

Public Sub AldeiaTutorial_MouseUp()
Public Sub AldeiaTutorial_MouseDown(ByVal Button As Long)

Dentro delas, tem o nosso [ i = 96 ], mude para o seu Botão a qual você criou ;3

Agora no MouseUp, analisemos essa parte aqui:

Código:: Select Case i Case 96 'COLOQUE AQUI O PROCESSO DO BOTÃO - O QUE ELE IRÁ FAZER

Coloque abaixo do Case XX ( XX = Numeração do seu Botão) o processo que ele ao ser clicado irá fazer.

No começo do tutorial informei que eu iria fazer um botão que deixasse o Inventory em Dx8 Visivel ou Invisivel; então ele ficará assim :

Código:: Select Case i Case 96 GUIWindow(GUI_INVENTORY).Visible = Not GUIWindow(GUI_INVENTORY).Visible End Select

Pronto!

Pode iniciar e testar seu Botão. Se tiver feito o passo a passo corretamente não terá erros. Mas caso venha a ter, traga-a-nós , que auxiliaremos.

Parabéns, você foi capaz de criar sua GUI, e seu Botão em DX8!

### Adicionais ###

2.1 - Como faço para mudar o local onde está o Botão?
R: Vá ao ModGenerals, no InitialiseGUI, e localize seu Botão. Ali você terá o X e o Y dele, mudando aquele valor, ele se movimentará pela tela ou pela GUI.

2.2 - Como coloco mais de um Botão no Case? Já que I = XX sendo apenas 1 botão ? ;c
R: Você terá de usar o For; Como o fazer? Ex:

For i = 1 to 5

ou

For i = 96 to 100

Isso permitirá que ele vá buscar os valores dentro daquele valor setado. Então você aplicaria o Select Case, 96 / 97/ 98 / 99 / 100 ; Com funções diferentes, criando assim vários botões.

por Kloney Ter Out 13, 2015 1:07 am

Profane ~ escreveu:Olá amores,

Percebi que existe uma grande complicação por parte de muitos a respeito do uso do [ Dx8 ], adições de GUI, edições e entre outros. Neste tópico estarei auxiliando na criação de botões.

#Nível de Programação : Minimo/Médio
#Grau de Chatice : Alto 'Sim, é um pouco chato o fazer

#Necessidades#

Visual Basic
Client-Side (Source Client da sua Engine sendo Dx8)
Preparo do Botão em 3 estados (Normal / Hover e Click)
Uma GUI a sua Escolha

Apenas usaremos o Client-Side, então não se preocupem com o Servidor.
Lembre-se que as Dx8 trabalha em grande parte com PNG pela transparência.

[ 0º - Dando Vida a GUI ]

0.1 - Certo em meu Exemplo criarei um Menu onde dentro desse Menu terá um botão que Abrirá o Inventory e Fechará o Inventory. Eu mostrarei como e onde usando esta base mudar e usar para infinitas coisas.

0.2 - Selecione sua GUI (Tela desejada) - Abaixo link da GUI caso queria usar a mesma do exemplo.

https://i.imgur.com/4Nn1lwg.png

É uma GUI 100x100 em PNG - Fique atento ao tamanho pois será necessário saber o tamanho exato da GUI que irá trabalhar!

0.3 - Vá a Pasta datafiles/Graphics/GUI; e veja quem é o ultimo numero, é o 40? então adicione nossa GUI lá dentro, com o próximo número..No caso 41? Lembre-se que a pasta é uma sequência.

Vamos dizer que a GUi será adicionada com o número 81.

0.4 - Bom já temos nossa GUi dentro do Pasta, vamos começar a dar vida a ela ;3;

Dentro do Vb, procure pelo modulo: ModGraphics

#Note que pode ser que seja outro nome como ModRendering, ou ModDx8; Depende de sua engine, mas ela sendo Dx8 aceitará o processo, o nome do modulo nada o difere.

0.5 - Dentro do ModGraphics vamos procurar por:
Código:
Public Sub DrawGUI()

Ela é a responsável por identificar e modificar o estado das GUI em DX8. Dentro dela procure por:
Código:
DrawGUIBars

Abaixo adicione
Código:
If GUIWindow(GUI_ALDEIATUTORIAL).Visible Then DrawAldeiaTutorial

#Será este o nome da nossa Sub, e da nossa GUI.

0.6 - Vá ao final do ModGraphics e adicione:

Código:
Public Sub DrawAldeiaTutorial() Dim x As Long, y As Long Dim Width As Long, Height As Long    ' backwindow + empty bars    x = GUIWindow(GUI_ALDEIATUTORIAL).x    y = GUIWindow(GUI_ALDEIATUTORIAL).y    ' render the window    Width = 100 'Largura da Imagem    Height = 100 'Altura da Imagem    'EngineRenderRectangle Tex_GUI(4), GUIWindow(GUI_INVENTORY).x, GUIWindow(GUI_INVENTORY).y, 0, 0, width, height, width, height, width, height    RenderTexture Tex_GUI(81), x , y , 0, 0, Width, Height, Width, Height End Sub

0.7 - Observem esta linha de código:
Código:
RenderTexture Tex_GUI(81), x , y , 0, 0, Width, Height, Width, Height

o (81) é o numero da nossa GUI, dentro da Pasta; modifique para o numero que está na sua pasta!

0.8 - Agora vamos ao ModEnumerations e procurem por:
Código:
Public Enum GUIType

Antes do :

Código:
   GUI_Count End Enum

Adicionem a nossa Gui ;3

Código:
GUI_ALDEIATUTORIAL

0.9 - Agora ao ModGenerals, iremos adicionar ela lá também!
Procure por:

Código:
Public Sub InitialiseGUI

Dentro dela procure por:
Código:
ReDim GUIWindow(1 To GUI_Count) As GUIWindowRec

Abaixo desta linha é feita a leitura via arquivo de todas as GUI (Todas as que foram colocadas no Arquivo!)

Coloquem isso abaixo desta linha:

Código:
   ' Gui - Aldeia Tutorial    With GUIWindow(GUI_ALDEIATUTORIAL)    .x = Val(GetVar(filename, "GUI_ALDEIATUTORIAL", "X"))    .y = Val(GetVar(filename, "GUI_ALDEIATUTORIAL", "Y"))    .Width = Val(GetVar(filename, "GUI_ALDEIATUTORIAL", "Width"))    .Height = Val(GetVar(filename, "GUI_ALDEIATUTORIAL", "Height"))    .Visible = True    End With

1.0 - Fora do Visual Basic, procurem dentro da "Data files" (Pasta de Arquivos do Jogo) o arquivo:

Interface

É um arquivo de configuração, txt, você o abre no bloco de notas.

Dentro dele no final adicione:

Código:
[GUI_ALDEIATUTORIAL] X=200 Y=200 Width=100 Height=100

Bom, quando precisarmos mudar a GUI, local dela poderemos vir por aki neste arquivo e mudar o X e Y, ou fazer isso pelo Visual Basic dentro da nossa DrawAldeiaTutorial()

Salve o Arquivo e inicie o Jogo, ao entrar creio que já será possível ver sua GUI
Você completou o primeiro passo!

Está tarde então continuarei o tutorial amanhã! Onde colocaremos o Botão em Dx8!

Att

Muito obrigado, eu aprecio este tutorial pelo menos vou aprender um pouco mais sobre DX8.
Espero que um dia você pode me ajudar, eu apreciar de Coração isso

Aguardo ansiosamente a segunda etapa!

por joaopaulo98 Ter Out 13, 2015 9:20 am

simplesmente um excelente tutorial

por **Profane ~** Ter Out 13, 2015 10:11 am

Agradeço ><

Bom, estava morto de lindo, mas na hora de enviar deu um erro e tive de refazer uma grande parte :/ O Final está mais seco por causa disso. Porém caso tenham duvidas postem que auxiliamos.

Trabalhar no Dx8 so parece grande, depois que você coloca 1 ou 2 botões você já faz isso bem rápido. Parece ser uma coisa "monstra" mas na realidade nem é

Kkkk, com um pouco de pratica e tendo já a base na sua engine, você so faz copiar e colar, mudar o nome das coisas e fim >< *o*

Chato mesmo é ficar logando e deslogando 100x para poder arrumar cada milimetro como eu sempre faço.. gosto perfeitinho xD

att

por **GallighanMaker** Ter Out 13, 2015 1:13 pm

Muito explicativo o tutorial, excelente para quem tem dúvidas sobre GUI, principalmente como funciona ou como alterar posições e outras coisas. Com certeza vai ajudar muita gente!. +1 cred

por Conteúdo patrocinado

Hitskin.com

[Dx8] Aprendendo a adicionar Botões e Gui

[Dx8] Aprendendo a adicionar Botões e Gui

Re: [Dx8] Aprendendo a adicionar Botões e Gui

Re: [Dx8] Aprendendo a adicionar Botões e Gui

METAS 2020.

Re: [Dx8] Aprendendo a adicionar Botões e Gui

Re: [Dx8] Aprendendo a adicionar Botões e Gui

Re: [Dx8] Aprendendo a adicionar Botões e Gui