[Tutorial] Janelas Dinâmicas III

Janelas dinâmicas
(Parte 3/4 - Inserir Dados)
Usa Game Maker 8 Pro

Essa parte do tutorial será a mais usada provavelmente, pode ser usada quando o jogador perde, para adicionar no Highscore do jogo, ou em um jogo multiplayer onde é necessário inserir dados como Nick, IP etc. Ou até mesmo para usar em um chat em um jogo online, tem diversas utilidades.

Atenção: É essencial seguir esse tutorial com a engine aberta, algumas funções será mais bem entendidas se for feito um acompanhamento.

Você pode baixá-las no endereço abaixo:
http://64digits.com/users/Fuzenrad/jan_dinamicas3.gmk

Novamente vamos usar a grade separada em pequenos quadrados, nesse exemplo eu vou fazer uma janela para conexão de um jogo multiplayer, haverá 3 áreas para inserir dados (Nick, Seu IP e Conectar ao IP)e 3 botões (Conectar e Cancelar), sobre os botões, foi visto no tutorial anterior (Janelas Dinâmicas II), por tanto não vou me aprofundar tanto nesse pedaço do tutorial.



O padrão é o mesmo, distribuindo regularmente a posição das regiões em uma área quadriculada, impede os erros de simetria e alinhamento.



Pra finalizar eu usei uma textura de rochas e as áreas de dados um prateado bem discreto e na janela um sombreamento bem claro (feito no editor do Game Maker), nesse exemplo eu inseri os botões direto na janela, diferente do exemplo anterior, onde eram sprites, isso facilita um pouco, mas impede que os botões sejem modificados de posição mais tarde.

As interfaces separadas




Em relação ao exemplo anterior, sobre os botões, esse terá novas características, o funcionamento é o mesmo, usando os eventos Left Pressed, Mouse Enter etc, no caso o botão Conectar vai acender verde quando apontar para ele e o botão Cancelar vermelho, é um efeito bem discreto, mas que fica muito bom.



O draw do objeto botão Cancelar:

Código:

if image_single=0
draw_text_color(jan_mplayer.x+208,jan_mplayer.y+107,"Cancelar",c_black,c_dkgray,c_black,c_black,image_alpha)
else
draw_text_color(jan_mplayer.x+208,jan_mplayer.y+107,"Cancelar",c_red,c_red,c_black,c_red,image_alpha)

E do botão Conectar:

Código:

if image_single=0
draw_text_color(jan_mplayer.x+208,jan_mplayer.y+68,"Conectar",c_black,c_dkgray,c_black,c_black,image_alpha)
else
draw_text_color(jan_mplayer.x+208,jan_mplayer.y+68,"Conectar",c_lime,c_green,c_black,c_green,image_alpha)

Traduzindo, se o mouse estiver em cima do botão (image_single diferente de 0) a cor do texto será vermelho (ou verde, se for o botão conectar).

A localização dos pontos foram feitas de forma diferente, nesse exemplo eu criei um objeto, e no evento draw dele eu coloquei uma função para mostrar a localização do pontos X e Y, então eu os posicionei no lugar correto, onde deverão aparecer, facilitou bem mais do que a técnica anterior, onde a função para mostrar a coordenada era inserida no mouse_x e mouse_y, o resultado foi esse:



Com a origem da janela em 0x0, esse é o valor que eu terei que somar ao x e y da janela, para posicionar corretamente. Os valores seguidos no tutorial são esses ai.

No evento Create do objeto jan_mplayer, foi indicado várias variáveis, as globais são o texto que estamos modificando, são: o nick, o ip e o ip para conectar, no caso eu coloquei uma função para detectar o ip da máquina, esse número você indica ao seu amigo para jogar em modo multiplayer e o outro ip, é um string fixa, com o ip zero da máquina (127.0.0.1).

Código:

instance_create(x,y,botao_conectar)
instance_create(x,y,botao_cancelar)
instance_create(x,y,barra1)
instance_create(x,y,barra2)
instance_create(x,y,barra3)
//Cria os botoes e as regioes do texto

lucida=font_add("Lucida Console",8,0,0,32,127)

global.nick="Fuzenrad"
global.seuip=mplay_ipaddress()
global.conectar="127.0.0.1"

maximo=15
//Quantidade maxima de caracteres
cursor="|"
t=1
alarm[0]=5

escolhe=0

Eu optei por substituir a fonte pela Lucida Console, pois é uma fonte em que o tamanho físico que cada letra ocupa é indiferente de que letra seja (W ou l), isso possibilita alinhar corretamente e determinar o espaço para o número de caracteres.

Para permitir a edição de um texto, eu criei o seguinte código:

Código:

if keyboard_check_pressed(vk_backspace)
global.nick=string_delete(global.nick,string_length(global.nick),1)

if maximo-string_length(global.nick)>0 {
if keyboard_string!="" {
global.nick=string_insert(keyboard_string,global.nick,string_length(global.nick)+1)
keyboard_string="" }} else
keyboard_string=""

É muito simples, ele só apaga o texto (com a tecla Backspace), ou insere, não é possível copiar, colar ou selecionar, eu poderia ter me baseado em algum exemplo por ai, mas é bastante extenso as funções para realizar isso, e acredito que para um tutorial, somente a função básica de edição de texto já é muito útil (que é apagar e escrever).

Nos 3 objetos da área para inserir texto, ao clica, ele altera o valor da variável jan_mplayer escolher, para assim selecionar qual janela o cursor irá editar (caso contrário, teríamos um resultado indesejado).

O evento draw do objeto jan_mplayer é responsável por mostrar todos os itens da janela, organizando-os de forma mais fácil.

Código:

draw_set_font(lucida)
draw_set_halign(0)
draw_set_valign(1)
draw_sprite_ext(sprite_index,image_single,x,y,1,1,0,c_white,image_alpha)

if escolhe=1 {
mostra_nick=global.nick+cursor } else
mostra_nick=global.nick

if escolhe=2 {
mostra_ip=global.seuip+cursor } else
mostra_ip=global.seuip

if escolhe=3 {
mostra_conectar=global.conectar+cursor } else
mostra_conectar=global.conectar

draw_text_color(jan_mplayer.x+28,jan_mplayer.y+30,mostra_nick,c_black,c_dkgray,c_black,c_black,image_alpha)
draw_text_color(jan_mplayer.x+28,jan_mplayer.y+68,mostra_ip,c_black,c_dkgray,c_black,c_black,image_alpha)
draw_text_color(jan_mplayer.x+28,jan_mplayer.y+108,mostra_conectar,c_black,c_dkgray,c_black,c_black,image_alpha)

No caso da variável cursor, o evento Alarm é responsável por alterar entre "|" e "" (vazio), se código é:

Código:

switch t=0
{
  case 0:{cursor="|" t=0} break;
  case 1:{cursor="" t=1} break;
}
alarm[0]=5

Ele alterna a variável t, e para o resultado 0, mostra o cursor, para o resultado 1, oculta.

E por fim, o evento Destroy, é responsável por destruir todos os objetos relacionados a janela, evitando problemas futuros.

Código:

with instance_nearest(x,y,botao_conectar) {
instance_destroy()}

with instance_nearest(x,y,botao_cancelar) {
instance_destroy()}

with instance_nearest(x,y,barra1) {
instance_destroy()}

with instance_nearest(x,y,barra2) {
instance_destroy()}

with instance_nearest(x,y,barra3) {
instance_destroy()}

O resultado final, creio eu, foi o melhor dos outros 2 exemplos, o botão ficou bem personalizado com coloração, com esse sistema é possível fazer, como eu já citei, a área onde será inserido o nome do jogador para adicionar em um highscore, ou no menu principal, uma janela pro jogador informar o nome, não sei, fica a critério.



No próximo tutorial, vou mostrar o que é possível fazer com essas janelas, efeitos de movimentos, fricção, gravidade, fade, blend, efeitos com imagens ect. Aguardem.

de novo ficou super legal

o tutorial ficou otimo...nota 9


obs:
nao sei se eu olhei direito, mas vc usou o DRAW num objeto
que usa o mouse...e ele pega?
FLE

Como assim? Eu coloquei funções do draw em um evento do mouse? Talvez eu tenha errado, me mostra onde é que eu não encontrei.

nao,
vc usou o DRAW em um objeto que tem sprite, oq desabilita as funcoes do mouse...
isso q eu quis dizer...
só que nao tenho certeza pq eu tava com pressa, eu vou baixar
a engine e avaliar para ver se eu falei bobagem...
FLW

Legal!
Se eu fosse fazer um jogo multiplayer, com certeza eu usaria esse tutorial como base.
Muito bom cara!

vc usou o DRAW em um objeto que tem sprite, oq desabilita as funcoes do mouse...

Entendo, mas nesse caso eu indiquei "draw_sprite(sprite_index..." para mostrar novamente a sprite, caso contrário não mostraria nada. Obrigado pela informação, no final acabei arrumando alguns problemas na mensagem (tinha várias tags < BR > espalhadas na região dos códigos).