[Tutorial] Janelas Dinâmicas III
Página 1 de 1
[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:
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).
Para permitir a edição de um texto, eu criei o seguinte código:
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.
E por fim, o evento Destroy, é responsável por destruir todos os objetos relacionados a janela, evitando problemas futuros.
(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)
- 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)
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
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=""
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)
- Código:
switch t=0
{
case 0:{cursor="|" t=0} break;
case 1:{cursor="" t=1} break;
}
alarm[0]=5
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()}
Fuzenrad- Membro
- Mensagens : 11
Fama : 2
Tópicos semelhantes
» [Tutorial] Janelas Dinâmicas I
» [Tutorial] Janelas Dinâmicas II
» [Tutorial] Janelas Dinâmicas IV
» Tutorial Spritando Xp
» [Tutorial] Loops
» [Tutorial] Janelas Dinâmicas II
» [Tutorial] Janelas Dinâmicas IV
» Tutorial Spritando Xp
» [Tutorial] Loops
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|