[Tutorial] Janelas Dinâmicas I

Janelas dinâmicas
(Parte 1/4 - Informações)

Várias vezes, durante o desenvolvimento de um jogo, nos deparamos com um problema, as janelas do jogo, é possível usar a função do Game Maker show_message ou get_integer, só que por mais customizável que elas são, não fica bom, eu particularmente evito usar essas funções por quase nunca combinarem com o jogo. É possível fazer janelas com GML, assim abrindo uma imensa gama de possibilidades, como efeitos, opções, customização etc, basta saber aproveitá-las.

Esse tutorial está dividido em 3 partes (pra não ficar muito extenso a mensagem), a primeira (essa), vou mostrar como posicionar informações e imagens em uma janela dinâmica, além de adicionar efeito de fade in/out, pra surgir/sumir de forma bem profissional, a segunda parte será sobre como fazer janelas com botões de opções, como Ok, Cancelar, Sim, Não ou qualquer uma (costumizável) e finalmente a terceira e última, como fazer uma janela onde é possível inserir dados como nome, informações, valores etc.

É até simples trabalhar com janelas dinâmicas, em geral é saber posicionamento e configurar corretamente a coordenada da origem das sprites.

Pra começar, é sempre bom saber o que você pretende fazer, a posição das janelas etc, pra quem estar iniciando, é recomendável fazer efeitos simples, mais "quadrados", pois ajuda a respeitar a posição, mas com o tempo você vai posicionar no olho.



Essa é a área que eu vou trabalhar, é uma imagem de 324x191 pixels, separada em pequenos quadrados de 10 pixels.

A segunda parte é determinar a área das informações que serão adicionadas nessa janela, como feito na imagem abaixo:



Feito isso, você atribui algum efeito, imagem de fundo, colorização, enfim, essa parte vai da criatividade de cada um, nesse caso eu fiz uma montagem bem simples, no próprio editor de sprites do Game Maker, embora simples, ficou bem agradável.



Se você quiser adicionar textos na janela, fica mais fácil pro jogador identificar o que está contido nas regiões, no meu caso eu vou colocar só "Informações", "Dragão" e "Personagem", que vai mostrar informações de um RPG (um exemplo):



Informações
Você está no reino de Dacrons. Encontre o treinador do centro da cidade para que ele te ajude a treinar seu novo dragão.

Personagem
Dragão Glacial
XP: 278/350

Dragão


(Poderia ser uma imagem fixa, mas no caso o dragão será mudada ao passar do jogo, por isso tem que ser uma imagem separada)

Finalizamos então a parte gráfica da janela, entra agora a programação. Será usado somente 1 objeto, assim fica mais fácil atribuir efeitos de movimento, fade, ou qualquer outro.

No evento Create do objeto, temos que identificar as variáveis que será usada na janela, no caso são:

Código:

tahoma=font_add("Tahoma",8,0,0,32,127)
tahoma_n=font_add("Tahoma",8,1,0,32,127)
//As fontes da janela

nome_dragao="Dragao Glacial"
exper_atual=278
exper_max=350
img_dragao=sp_glacial
//Personagem

some=0

msg_missao_atual="Voce esta no reino de #Dacrons.##Encontre o treinador do #centro da cidade para que #ele te ajude a treinar seu #novo dragao."
//Missao atual

Essas variáveis são fixas, mas em um jogo elas devem se direcionadas para ler as informações ao decorrer do jogo. Mudando a missão, a experiencia etc.

Com as variáveis já fixadas, vamos para o evento Draw, que é onde toda a "mágica" é feita, primeiro vamos mostrar a janela do jogo (é uma sprite chamada sp_janela).

Código:

draw_sprite_ext(sp_janela,0,x,y,1,1,0,c_white,image_alpha)
//será mostrada na posição que for colocada na tela

draw_sprite_ext(img_dragao,0,x+209,y+19,1,1,0,c_white,image_alpha)
//agora a imagem do dragão, na área que ele deve aparecer

Atenção:Com o tempo, vai ser muito mais fácil determinar a posição dos itens na janela, uma solução fácil e rápida, é você colocar a janela na posição 0x0 dentro da room e colocar uma função no mouse, pra mostrar a posição X e Y atual:

Código:

draw_text(mouse_x,mouse_y,"x="+string(mouse_x)+" y="+string(mouse_y))

Com isso você sabe o valor que deve ser adicionado a X e Y da janela para que fique no lugar correto.

Falta agora as informações em texto:

Código:

draw_set_font(tahoma)
draw_set_halign(0)
draw_text_color(x+26,y+24,msg_missao_atual,c_white,c_silver,c_white,c_ltgray,image_alpha)
//As informações sobre a fase

draw_set_font(tahoma_n)
draw_text_color(x+217,y+138,nome_dragao+"#XP: "+string(exper_atual)+"/"+string(exper_max),c_white,c_silver,c_white,c_ltgray,image_alpha)
//As informações do personagem

Adicionando o efeito fade in/out

No evento create eu coloquei uma variável (some=0) que eu não havia explicado pra que seria usada, pois bem, ela entra agora.

No evento Step:

Código:

if keyboard_check_pressed(ord('S')) some=1
if keyboard_check_pressed(ord('A')) some=0
if image_alpha<1 and some=0 image_alpha+=0.05
if image_alpha>0 and some=1 image_alpha-=0.05

Esse código fará com que ao pressionar a letra S do teclado, a janela desaparece e ao apertar A ela reaparece, é um efeito bem simples, mas bem ocasional, pode ser usado em diversos tipos de jogos.

Por fim, o resultado final será:


Baixar a engine do tutorial