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