[Tutorial] Janelas Dinâmicas II

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

muitto boom esse tutorial muito explicado e bem util

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.

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

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

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!

Obrigado por colaborar.