Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
[Dx8] Aprendendo a adicionar Botões e Gui
4 participantes
Página 1 de 1
[Dx8] Aprendendo a adicionar Botões e Gui
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)
_________________
"Mistress of shattered hopes and forever broken dreams"
Profane ~- Colaborador
- Mensagens : 818
Créditos : 130
Re: [Dx8] Aprendendo a adicionar Botões e Gui
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 GUIVocê 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!
Kloney- Novato
- Mensagens : 12
Créditos : 1
Re: [Dx8] Aprendendo a adicionar Botões e Gui
simplesmente um excelente tutorial
_________________
- Dancinha:
METAS 2020.
- APRENDER TOCAR VIOLINO ||||||||||
- FAZER ETEC DESENVOLVIMENTO EM SISTEMA ||||||||||
- CRIAR UM APLICATIVO RENTÁVEL||||||||||
- GANHAR DINHEIRO PROGRAMANDO ||||||||||
Re: [Dx8] Aprendendo a adicionar Botões e Gui
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
_________________
"Mistress of shattered hopes and forever broken dreams"
Profane ~- Colaborador
- Mensagens : 818
Créditos : 130
Re: [Dx8] Aprendendo a adicionar Botões e Gui
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
_________________
using C# and import Python developer || Expert in Unity Engine IDE. || 2D pixel games.
Tópicos semelhantes
» Aprendendo habilidades de cordo com o uso
» [CRISTAL SHIRE] Aprendendo a mover GUI e botãos [Dx8]
» Aprendendo Magias por Level v1.0
» Aprendendo sobre Win32API
» Aprendendo mais sobre Game_Party ( 2 )
» [CRISTAL SHIRE] Aprendendo a mover GUI e botãos [Dx8]
» Aprendendo Magias por Level v1.0
» Aprendendo sobre Win32API
» Aprendendo mais sobre Game_Party ( 2 )
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|