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
[ 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.
É 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:
Ela é a responsável por identificar e modificar o estado das GUI em DX8. Dentro dela procure por:
Abaixo adicione
#Será este o nome da nossa Sub, e da nossa GUI.
0.6 - Vá ao final do ModGraphics e adicione:
0.7 - Observem esta linha de código:
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:
Antes do :
Adicionem a nossa Gui ;3
0.9 - Agora ao ModGenerals, iremos adicionar ela lá também!
Procure por:
Dentro dela procure por:
Abaixo desta linha é feita a leitura via arquivo de todas as GUI (Todas as que foram colocadas no Arquivo!)
Coloquem isso abaixo desta linha:
1.0 - Fora do Visual Basic, procurem dentro da "Data files" (Pasta de Arquivos do Jogo) o arquivo:
É um arquivo de configuração, txt, você o abre no bloco de notas.
Dentro dele no final adicione:
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()
[ 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.
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:
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:
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 ->
Abaixo de onde adicionamos a GUI coloque:
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 :
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 :
Ficará desta forma:
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:
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.
1.5 - Vá ao ModInput - Ele na organização é o responsável por receber qualquer processo do jogador via Mouse e teclado. Procure por :
Dentro dele procure por isso aqui:
Exatamente nesta linha:
Adicionem nossa GUI, ficando assim:
(Não esqueçam de por a virgula [ , ], antes de por a GUI!)
Abaixo também terá vários Cases, após o ultimo adicionem:
1.8 - Agora que criamos os "Chamados" de MouseUP e MouseDown, vamos criar os Processos de Sub. No final do ModInput adicione :
Observe que existem ai duas SUBs:
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:
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 :
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.
### 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:
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.
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
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
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.
Última edição por Profane ~ em Ter Out 13, 2015 10:08 am, editado 4 vez(es)