Conectar-se

Esqueci minha senha

Últimos assuntos
» [Enquete] Concursos GMBR
por Willy Ontem à(s) 19:49

» CR - Concurso Relâmpago!!
por Willy Ter 18 Jul 2017, 17:11

» 3D:como rodar a camara em horizontal?
por Cambalinho Ter 18 Jul 2017, 15:09

» [Resolvido] pode explicar a d3d_set_projection()?
por Cambalinho Ter 18 Jul 2017, 11:28

» Escrever a resposta certa muda de room
por PedroX Seg 17 Jul 2017, 21:46

» Nota de esclarecimento - GMBR voltou!
por Mentos e Coca-cola Seg 17 Jul 2017, 17:05

» [CR] Campo Minado
por Katerp Dom 16 Jul 2017, 23:09

» [CR] The Bazooka Cat
por Tedi Ripper Dom 16 Jul 2017, 23:01

» Como melhorar um protótipo(Design)
por lolandoplayer Dom 16 Jul 2017, 22:56

» Diminuir velocidade ao arrastar objeto
por LwysF Dom 16 Jul 2017, 17:33

Quem está conectado
11 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 10 Visitantes

CRP-Max

[ Ver toda a lista ]


O recorde de usuários online foi de 324 em Ter 05 Out 2010, 13:36
Estatísticas
Temos 12700 usuários registrados
O último usuário registrado atende pelo nome de Eduardo Gomes

Os nossos membros postaram um total de 220919 mensagens em 30412 assuntos

[Tutorial] Janelas Dinâmicas III

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[Tutorial] Janelas Dinâmicas III

Mensagem por Fuzenrad em Dom 12 Set 2010, 18:13

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.


Última edição por Fuzenrad em Dom 12 Set 2010, 21:03, editado 2 vez(es)
avatar
Fuzenrad

Ranking : Nota A
Notas recebidas : A-A-A-A-B
Data de inscrição : 04/07/2010
Número de Mensagens : 1027
Insígnias de JAM :

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Prêmios
   : 1
   : 0
   : 1

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial] Janelas Dinâmicas III

Mensagem por fenanco em Dom 12 Set 2010, 18:53

de novo ficou super legal
avatar
fenanco

Data de inscrição : 16/07/2010
Número de Mensagens : 88
Insígnias de JAM :

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Prêmios
   : 0
   : 0
   : 0

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial] Janelas Dinâmicas III

Mensagem por PedroX em Dom 12 Set 2010, 19:07

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

PedroX

Ranking : Nota C
Notas recebidas : C+B
Data de inscrição : 26/07/2008
Número de Mensagens : 6036
Insígnias de JAM :

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Prêmios
   :
   :
   :

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial] Janelas Dinâmicas III

Mensagem por Fuzenrad em Dom 12 Set 2010, 19:41

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.
avatar
Fuzenrad

Ranking : Nota A
Notas recebidas : A-A-A-A-B
Data de inscrição : 04/07/2010
Número de Mensagens : 1027
Insígnias de JAM :

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Prêmios
   : 1
   : 0
   : 1

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial] Janelas Dinâmicas III

Mensagem por PedroX em Dom 12 Set 2010, 21:10

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

PedroX

Ranking : Nota C
Notas recebidas : C+B
Data de inscrição : 26/07/2008
Número de Mensagens : 6036
Insígnias de JAM :

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Prêmios
   :
   :
   :

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial] Janelas Dinâmicas III

Mensagem por Grotle em Dom 12 Set 2010, 21:22

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

Ranking : Nota B
Notas recebidas : B-B
Data de inscrição : 28/02/2010
Número de Mensagens : 559
Insígnias de JAM :

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Prêmios
   : 0
   : 0
   : 0

Ver perfil do usuário http://gsogaming.blogspot.com/

Voltar ao Topo Ir em baixo

Re: [Tutorial] Janelas Dinâmicas III

Mensagem por Fuzenrad em Dom 12 Set 2010, 22:18

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).
avatar
Fuzenrad

Ranking : Nota A
Notas recebidas : A-A-A-A-B
Data de inscrição : 04/07/2010
Número de Mensagens : 1027
Insígnias de JAM :

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Prêmios
   : 1
   : 0
   : 1

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial] Janelas Dinâmicas III

Mensagem por Super Games em Seg 13 Set 2010, 08:57

Otimo tutorial amigo!
Está sempre ajudando.
Espero mais tutoriais de você.
avatar
Super Games

Ranking : Nota D
Notas recebidas : D
Data de inscrição : 10/06/2010
Número de Mensagens : 2704
Insígnias de JAM :

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Prêmios
   : 0
   : 0
   : 0

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum