[Tutorial] Janelas Dinâmicas I

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

Qualidade [Tutorial] Janelas Dinâmicas I

Mensagem por Fuzenrad em Sex 10 Set 2010, 18:41

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


Última edição por Fuzenrad em Sab 11 Set 2010, 14:01, editado 1 vez(es)

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 I

Mensagem por fenanco em Sex 10 Set 2010, 18:56

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

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 I

Mensagem por fonetico em Sex 10 Set 2010, 19:02

Ó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!

fonetico

Número de Mensagens : 1830
Idade : 21
Data de inscrição : 05/10/2009
Reputação : 7
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas I

Mensagem por kraptus em Sex 10 Set 2010, 19:11

bom tutorial nota 10
continue assim que o forum agradece

kraptus

Número de Mensagens : 111
Idade : 22
Data de inscrição : 01/06/2010
Reputação : 6
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 I

Mensagem por Gabreel em Sex 10 Set 2010, 20:14

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

Gabreel

Número de Mensagens : 2227
Idade : 20
Data de inscrição : 02/10/2009
Reputação : 52
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 I

Mensagem por Luan Maia em Sab 11 Set 2010, 11:52

Ó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
flw

Luan Maia

Ranking : Sem avaliações
Número de Mensagens : 399
Idade : 20
Data de inscrição : 01/07/2010
Notas recebidas : D+C+C+D
Reputação : 2
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://blogluanmaia.blogspot.com.br/

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas I

Mensagem por The Wizard em Sab 11 Set 2010, 13:01

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

The Wizard

Ranking : Nota B
Número de Mensagens : 1129
Idade : 18
Data de inscrição : 24/03/2010
Notas recebidas : B
Reputação : 17
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 1

http://awesomewizards.deviantart.com/

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas I

Mensagem por CLS em Sab 11 Set 2010, 17:55

Ó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?


CLS

Número de Mensagens : 298
Idade : 19
Data de inscrição : 13/05/2010
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://www.totalmakers.forumais.com

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas I

Mensagem por Luan Maia em Sab 11 Set 2010, 19:00

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?
flw

Luan Maia

Ranking : Sem avaliações
Número de Mensagens : 399
Idade : 20
Data de inscrição : 01/07/2010
Notas recebidas : D+C+C+D
Reputação : 2
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://blogluanmaia.blogspot.com.br/

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas I

Mensagem por GuiEdu em Sab 11 Set 2010, 19:19

AEH fuzenrad, que bom que vc postou um tuto eu tinha pedido outro dia neh xD
E que tuto hein cara Happy
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 Smile

GuiEdu

Número de Mensagens : 505
Idade : 23
Data de inscrição : 04/06/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 I

Mensagem por Grotle em Sab 11 Set 2010, 19:22

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!

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 I

Mensagem por Janx em Sab 11 Set 2010, 19:54

Ó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%!

Janx

Número de Mensagens : 2417
Idade : 23
Data de inscrição : 24/05/2008
Reputação : 14
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 2
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas I

Mensagem por Fuzenrad em Sab 11 Set 2010, 20:11

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

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 I

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

Maravilhoso seu tutorial Fuzenrad!
Está virando um otimo usuario.
Espero ver um dia você virar um ''Colaborado''.
Continue assim que você será recompensado.

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 I

Mensagem por CLS em Dom 12 Set 2010, 11:00

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?
flw

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?


CLS

Número de Mensagens : 298
Idade : 19
Data de inscrição : 13/05/2010
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://www.totalmakers.forumais.com

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas I

Mensagem por .:Allison:. em Dom 12 Set 2010, 15:23

sem palavras *-* parabens voce explica muito bem !

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

.:Allison:.

Ranking : Nota B
Número de Mensagens : 630
Idade : 19
Data de inscrição : 25/07/2010
Notas recebidas : B
Reputação : 4
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://clubmaker.forumeiros.com

Voltar ao Topo Ir em baixo

Qualidade Re: [Tutorial] Janelas Dinâmicas I

Mensagem por LeandroDaher em Qui 16 Set 2010, 15:18

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

LeandroDaher

Número de Mensagens : 357
Idade : 20
Data de inscrição : 13/05/2010
Reputação : 3
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 I

Mensagem por Conteúdo patrocinado Hoje à(s) 17:50


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