Browse Source

Add 'Aula 5 - Interface de usuario.md'

galo 3 years ago
parent
commit
83ff0faed2
1 changed files with 36 additions and 0 deletions
  1. 36 0
      Aula 5 - Interface de usuario.md

+ 36 - 0
Aula 5 - Interface de usuario.md

@@ -0,0 +1,36 @@
+![](https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Godot_logo.svg/1200px-Godot_logo.svg.png)
+<a href="https://git.galodev.net/galo/Aulas-Conexao/raw/master/Kmitt%2091.png"><img src="https://git.galodev.net/galo/Aulas-Conexao/raw/master/Kmitt%2091.png" align="left" height="216" width="445" ></a>
+<a href="https://git.galodev.net/galo/Aulas-Conexao/raw/master/Wojtek%20pe.png"><img src="https://git.galodev.net/galo/Aulas-Conexao/raw/master/Wojtek%20pe.png" align="left" height="216" width="445" ></a>
+###### <br>screenshoot by Kmitt 91 and Wojtek Pe</br>
+
+Aula 5 para a engine Godot 3.2.3
+
+Hoje vermos a ula de interface de usario para a engine Godot, vermos como criar menus interativos nela usand os proprios recursos da engine, a Godot permite o desenvolvedor a usar qualquer Interface do Editor da Godot dentro do seu jogo, facilitando o desenvolvimento de forma massiva.
+
+Primeiro iremos criar um node do tipo 'user interface', o 'user interface' e ultilizado para organizar items de um menu, e podemos ultilizalo para mudar varias propredades de um menu inteiro sem ter que preocupar em mudar variaveis de cada um de forma individual.
+![](https://i.imgur.com/XZcBPld.png)
+
+proximo passo criaremos um node chamado 'ninepatchrect' que servirar para agrupas os nosos nodes.
+![](https://i.imgur.com/fZeAkCh.png)
+
+e mudaremos o valor x no atributo size na aba rect para 100.
+![](https://i.imgur.com/b1SUKle.png)
+
+e mudaremos o 'layout' para center, centralizando qualquer items que serao postos dentro do mesmo, ajudando em organiza-los
+![](https://i.imgur.com/wMKnMxE.png)
+
+proximo iremoso criar um node filho, chamado 'VBoxContainer', ele irar impedir os items do menu de ficar um acima do outro, ajudando ainda mais em organizalos
+![](https://i.imgur.com/REoa3sj.png)
+
+proximo nos iremos botar o Layout do VboxContainer em 'VCenter Wide'
+![](https://i.imgur.com/QK5XZmw.png)
+
+e mudar o atributo 'Algiment' para 'Center', garantindo que tems do menu ficarao no centro da tela
+![](https://i.imgur.com/51Nmlpk.png)
+
+entao iremos adcionar um node button
+![](https://i.imgur.com/8xKguOC.png)
+
+e mudaremos o atributto text no Button para 'teste button'
+![](https://i.imgur.com/JO4f3sD.png)
+