[Tutorial] Janelas Dinâmicas II

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

Qualidade [Tutorial] Janelas Dinâmicas II

Mensagem por Fuzenrad em Sab 11 Set 2010, 19:42

Janelas dinâmicas
(Parte 2/4 - Janela com botões)

No tutorial anterior (Janelas Dinâmicas I) eu expliquei como posicionar imagens e textos em uma janela, muito bom quando se deseja mostrar ao jogador algo relacionado ao jogo, como a missão atual, o inventário ou algum item.

Nesse, vou mostrar como posicionar botões de opção, bem parecido com o esquema padrão do Windows. Um janela com Ok, Ok/Cancelar e Sim/Não.

Antes de tudo, vamos criar a janela, o esquema é o mesmo do outro, fazer primeiramente um layout, só pra posicionar corretamente os itens nela.



Esse é o espaço que será usado para criar a janela, existem diversos programas especializados para edição e criação de imagens como GIMP e Photoshop, mas é possível fazer no próprio editor de imagens do Game Maker.

O próximo passo é determinar a região onde será disposto o texto e os botões.



Feito isso e usando seu editor de imagens preferido, crie uma janela com alguma imagem de fundo, com algum efeito, sombra, iluminação, enfim, aqui a sua imaginação manda.



Nesse exemplo eu fiz um efeito bem simples de metal, com uma textura bem leve, combina com vários tipos de jogos. O espaço da mensagem da janela eu destaquei para diferenciar das outras áreas, mas fica a critério de cada um, eu particularmente gosto de efeitos assim, são simples, mas muito agradáveis.



A mesma coisa foi feita com os botões, colocando o mesmo efeito, mas em um tom diferente, a terceira imagem é a segunda invertida horizontalmente e verticalmente (textura aplicada depois).

Ao enviá-las para o Game Maker, configure a região de origem dessas sprites, do botão para 29x10 e da Janela para 133x46, como mostrado nas imagens abaixo:





Como exemplo, as 3 janelas que serão criadas nesse tutorial são:

Botão: Ok
Texto: "Para que as configurações sejem aceitas, é necessário reiniciar o Jogo."

Botões: Ok/Cancelar
Texto: "Você tem certeza que deseja encerrar o aplicativo? Seu jogo será perdido."

Botões: Sim/Não
Texto: "O arquivo selecionado já existe. Deseja substituir?"

Terminado a parte gráfica, vamos agora para a programação.

Em um novo objeto, chamado botao_ok, será configurado as opções da sprites no Mouse Left Pressed, Mouse Left Released, Mouse Enter e Mouse Leave, pra respectivamente image_single=2, image_single=1, image_single=1 e image_single=0. E no evento create será indicado somente:

Código:
image_single=0
//Faz com que o objeto inicie com a sprite parada
tahoma_n=font_add("Tahoma",8,1,0,32,127)
//Seta a fonte usada no objeto
No evento Draw inserimos:

Código:
draw_set_font(tahoma_n)
//Chama a fonte tahoma_n
draw_set_halign(1)
//Alinhamento horizontal no centro (1)
draw_set_valign(1)
//Alinhamento vertical no centro (1)

draw_sprite_ext(sprite_index,image_single,x,y,1,1,0,c_white,image_alpha)
//Mostra a sprite do botão

draw_text_color(x+1,y,"Ok",c_gray,c_silver,c_gray,c_silver,image_alpha)
draw_text_color(x,y-1,"Ok",c_black,c_dkgray,c_black,c_black,image_alpha)
//Mostra "Ok" em preto com uma sombra cinza
O mesmo com os botões Cancelar, Sim e Não, no Gm é possível duplicar um objeto, o que ajuda bastante, mas lembre-se de alterar o texto que será mostrado no Botão, substituindo por "Cancelar", "Sim" e "Nao" respectivamente.



É necessário agora fazer um novo objeto, com a sprite da janela para controlar os botões e posicioná-los corretamente.

No evento Create desse novo objeto:

Código:
instance_create(x,y,botao_ok)
//Cria o botão iniciar
instance_create(x,y,botao_cancelar)
//Cria o botão Cancelar

tahoma_n=font_add("Tahoma",8,1,0,32,127)
//Seta a fonte do objeto

mensagem="Voce tem certeza que deseja#encerrar o aplicativo?##Seu jogo sera perdido."
//Determina a mensagem a ser mostrada
Ao criar os botões eles serão posicionados na posição X e Y da janela, mas não estão alinhados, isso será feito no evento Step desse objeto:

Código:
with instance_nearest(x,y,botao_ok) {
x=other.x-80
y=other.y+61 }
/*Com o objeto botão_ok mais próximo, posicione em -80 e +61.*/

with instance_nearest(x,y,botao_cancelar) {
x=other.x+80
y=other.y+61 }
/*Com o objeto botão_cancelar mais próximo, posicione em +80 e +61.*/
E no evento Draw quase a mesma coisa do objeto botão:

Código:
draw_set_font(tahoma_n)
//Define a fonte
draw_set_halign(1)
draw_set_valign(1)
//Alinhamento horizontal e vertical no centro (1)

draw_sprite_ext(sprite_index,image_single,x,y,1,1,0,c_white,image_alpha)
//Desenha a sprite da janela

draw_text_color(x,y,mensagem,c_black,c_dkgray,c_black,c_black,image_alpha)
//Desenha o texto na janela
Pra posicionar um botão no centro:

Código:
with instance_nearest(x,y,botao_ok) {
x=other.x
y=other.y+61 }
As outras janelas são exatamente a mesma coisa, só muda o texto e o botão delas, é possível fazer algum efeito de movimento ou de Fade in/out (como feito no tutorial anterior), tornando-as mais profissional. O grande diferencial dessas janelas é que elas não interferem no funcionamento do jogo e é possível atribuir uma grande gama de possibilidades.

E finalmente o resultado será:







Baixar a engine desse tutorial
Observação: A engine tem as 3 janelas concluídas, separadas em rooms diferentes, ajuda no estudo, pra colocar as funções desejadas, basta inserí-las no evento "Mouse Released", como game_end(), room_goto_next(), depende da situação.

No próximo tutorial vou mostrar como fazer janelas com locais para inserir dados, seja texto ou número e adicioná-las a uma variável ao confirmar (e usá-la no jogo).

Fuzenrad

Ranking : Nota A
Número de Mensagens : 1026
Idade : 26
Data de inscrição : 04/07/2010
Notas recebidas : A-A-A-A-B
Reputação : 41
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 1

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas II

Mensagem por fenanco em Sab 11 Set 2010, 21:27

muitto boom esse tutorial muito explicado e bem util

fenanco

Número de Mensagens : 88
Idade : 18
Data de inscrição : 16/07/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas II

Mensagem por †Ceifador em Sab 11 Set 2010, 21:49

Grande tutorial Fuzenrad. Serve de exemplo aos demais, bem escrito, bem apresentado, resumindo, bem trabalhado. Independente do nível do conteúdo acho isso fundamental, pois as vezes alguns usuários sequer postam uma imagem ilustrativa (exceto quando não se aplica, naturalmente) pra enriquecer o trabalho.

†Ceifador

Número de Mensagens : 154
Data de inscrição : 28/08/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas II

Mensagem por rafasgb em Sab 11 Set 2010, 22:33

Perfeito o tutorial!
Para quem quer que seu tutorial não seja deletado a partir do dia 10, é melhor começar a seguir este modelo.
Como o ceifador disse, bem escrito, bem apresentado... bem trabalhado.

Continue assim ;D

rafasgb

Ranking : Nota A
Número de Mensagens : 581
Idade : 21
Data de inscrição : 19/05/2008
Notas recebidas : A
Reputação : -32
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   : 1

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas II

Mensagem por Super Games em Sab 11 Set 2010, 22:45

Você está ajudando muito o forum Fuzenrad.
Seu tutorial está hiper bom.
E Foi bom você ter feito a engine, assim as pessoas que não etenderam o tutorial iram poder ver GMK.
Continue assim cara!

Até!

Super Games

Ranking : Nota D
Número de Mensagens : 2704
Idade : 18
Data de inscrição : 10/06/2010
Notas recebidas : D
Reputação : 10
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas II

Mensagem por vitor_liminha123 em Dom 12 Set 2010, 10:48

MUIIIIIIIITOOOOOOOOO OBRIGADOOOOOOOOOOOOOOOOOOO!!!!
Vai me ajudar pra caramba!
VALEU's

vitor_liminha123

Número de Mensagens : 510
Idade : 18
Data de inscrição : 16/08/2010
Reputação : 12
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://www.newgrounds.com/tanber

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas II

Mensagem por Grotle em Dom 12 Set 2010, 13:11

Muito legal mesmo cara!
Esse tipo de janelhina é muito útil pra substituir a função de menssagens que já vem com o GM.
Continue assim, vai ajudar muita gente (inclusive eu, um mero mortal).
Flw!

Grotle

Ranking : Nota B
Número de Mensagens : 559
Idade : 21
Data de inscrição : 28/02/2010
Notas recebidas : B-B
Reputação : 12
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://gsogaming.blogspot.com/

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas II

Mensagem por OverClock26 em Dom 12 Set 2010, 16:54

Obrigado por colaborar.

OverClock26

Número de Mensagens : 12
Idade : 26
Data de inscrição : 29/05/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas II

Mensagem por Conteúdo patrocinado Hoje à(s) 18:37


Conteúdo patrocinado


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