[Tutorial] Janelas Dinâmicas I

Janelas dinâmicas
(Parte 1/3 - 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

Boa ideia de tutorial, e tambem esta bem explicado nota 10

Ótimo tutorial, é mesmo muito útil se comparado às funções padrões do GM.
Com esse tipo de técnica, como você disse, podemos fazer janelas muito estilizadas para RPG's.

Gostei muito, mas só um detalhe:

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

Não é necessário fazer uma função para mostrar o lugar do mouse se a janela estará na posição 0x0. Neste caso, podemos usar a própria propriedade da room, em baixo, para ver a posição do mouse. Só um toque!

bom tutorial nota 10
continue assim que o forum agradece

Ótimo, sempre é necessário um script que entendamos, para pder pesonaliza-lo.. Muito bom tutorial, parabens.

Ótimo tutorial, ele além de ajudar no objetivo do tutorial (Janelas Dinâmicas) nos ajuda a treinar a lógica. Me ajudou a treinar a lógica da programação e a conhecer algumas funções desconhecidas por mim antes.
Continue assim, você e muitos outros programadores daqui do fórum são excelentes programadores, e com ajuda de vocês o fórum crescerá cada vez mais. xD

Adorei seu tutorial é muito bom,vai ajudar muitas pessoas ,parabens pelo seu tutorial

Ótimo tutorial!
Cara,realmente,ficou muito bom!
Eu não consegui entender essa parte:

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

Nas partes em negrito que destaquei,por que você colocou o x e y entre aspas?Esse comando não serve só para texto?Poderia me explicar por favor?

Dark Maker escreveu:Ótimo tutorial!
Cara,realmente,ficou muito bom!
Eu não consegui entender essa parte:

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

Nas partes em negrito que destaquei,por que você colocou o x e y entre aspas?Esse comando não serve só para texto?Poderia me explicar por favor?

Mas é isso mesmo que era pra acontecer, como está na função "draw_text". Vou traduzir o que aparecerá na tela, "x=5 y=10", supondo que 5 é a posição x do mouse na tela do jogo e y a posição y do mouse na tela do jogo, entendeu?

AEH fuzenrad, que bom que vc postou um tuto eu tinha pedido outro dia neh xD
E que tuto hein cara
Tem umas coisas que eu só vou entender com o tempo, como o esquema do mouse... e outra, sou péssimo com o evento draw, de todos é o que eu menos sei usar e é justamente o "tchan" da coisa...
Parabéns aí amigo, vc se empenhou e fez um tuto muito bom

Muito bom esse tutorial cara, parabéns.
Esse tipo de "layout" é muito bom pra jogos de RPG, dá um visual mais profissional.
Parabéns mesmo cara!

Ótimo tutorial.
É simples, não usa funções complicadas, mas é perfeito para explicar o conceito de janelas. Esse é o primeiro tutorial de uma seqüência de 3, por isso deve ser mais simples, os próximos devem adicionar mais funções (segundo o que é dito no tópico).

Sugestão:
draw_set_font(tahoma) não precisa ser chamado mais de uma vez no draw, a fonte não foi alterada em nenhum outro lugar. Não é necessário mandar mudar a fonte sempre que vai escrever, pois em alguns casos a fonte usada é a mesma da que foi usada anteriormente.

Para os próximos tutoriais dessa seqüência, você pode adicionar como fazer janelas independentes, que você pode arrastar, fechar e que possuem todas essas funções que você citou (botões, texto, etc).

Muito bom!
Ganhou selinho de Qualidade 100%!

Realmente, eu havia pensado nisso, acho que vou fazer a parte 4 desse tutorial, que será pra mover a janela e adicionar efeitos mais complexos, como movimento, área em blend, mas foi bom você ter falado, obrigado.

A minha idéia, é quando todos estiverem escritos eu vou juntar tudo e montar um PDF com todas as engines em um ZIP, vai ficar bem completo, acho que vai passar de 20 páginas tranquilo.

Sobre o draw_set_font, realmente quando configurado funciona pra todos os draw_text, mas nada que comprometa o tutorial. Agradeço a todos pelos comentários.

A segunda parte:
[Tutorial] Janelas Dinâmicas II

Luan_Maia escreveu:

Dark Maker escreveu:Ótimo tutorial!
Cara,realmente,ficou muito bom!
Eu não consegui entender essa parte:

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

Nas partes em negrito que destaquei,por que você colocou o x e y entre aspas?Esse comando não serve só para texto?Poderia me explicar por favor?

Mas é isso mesmo que era pra acontecer, como está na função "draw_text". Vou traduzir o que aparecerá na tela, "x=5 y=10", supondo que 5 é a posição x do mouse na tela do jogo e y a posição y do mouse na tela do jogo, entendeu?

Entendi sim!
Valeu!
É que eu pensei que ele usaria como uma variável interna!
Mas pelo o que eu entendi,vai aparecer isso na tela:

x = (número da posição x do mouse) y = (número da posição y do mouse)

Estou certo?

sem palavras *-* parabens voce explica muito bem !

por favor faz um fanbar que eu quero ser o primeeiro a usar!

Bom tutorial,nota 9,gostei XD.
PS:Voltei galera,eu tava bem sumido né?Pois é,agora eu voltrei.