Aulas-Conexao/Aula 5 - Interface de usuario.md

screenshoot by Kmitt 91 and Wojtek Pe

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.

proximo passo criaremos um node chamado 'ninepatchrect' que servirar para agrupas os nosos nodes.

e mudaremos o valor x no atributo size na aba rect para 100.

e mudaremos o 'layout' para center, centralizando qualquer items que serao postos dentro do mesmo, ajudando em organiza-los

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

proximo nos iremos botar o Layout do VboxContainer em 'VCenter Wide'

e mudar o atributo 'Algiment' para 'Center', garantindo que tems do menu ficarao no centro da tela

entao iremos adcionar um node button

e mudaremos o atributto text no Button para 'teste button'

e criaremos um node do tipo 'textedit'

criaremos um novo script

e iremos a opçao Node ao lado do inspetor do item button, one olharemos os sinais, iremos escolher a opçao 'button_down' e iremos connectar o sinal, ao node com o script, isso era permiter um pedaço de codigo a ser executado toda vez que o botao e pressionado.

e introuduziremos o seguinte codigo

extends Control

func _on_Button_button_down():
	var texto = $NinePatchRect/VBoxContainer/LineEdit.get_text()
	$NinePatchRect/VBoxContainer/Button.set_text(texto)

a variavel texto recebe como o valor o texto dentro do 'LineEdit' usando a funçao 'get_text', e entao o valor e atributo ao texto do botao com a funçao 'set_text'.

se escrivermos algo dentro do LineEdit, se clicarmos o botao iremos substuir o texto no botao pelo texto no LineEdit.