[Tutorial] Janelas Dinâmicas IV

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

Qualidade [Tutorial] Janelas Dinâmicas IV

Mensagem por Fuzenrad em Qua 22 Set 2010, 21:49

Janelas Dinâmicas 4
Movendo Janelas e alguns efeitos

Finalmente a parte 4 desse tutorial. Consegui atingir um resultado muito bom, todos bem aplicáveis.

Obs: Para não estender muito essa parte do tutorial, eu vou pular uma parte da criação das janelas, pode ser visto no Tutorial 2 (Janelas com botões), o funcionamento é o mesmo.

Os resultado final foi esse:



Janela móvel

É um recurso muito legal, não só para janelas, mas para objetos em geral do jogo, dependendo do estilo, entretando mover um objeto não é apenas atribuir x=mouse_y e y=mouse_y no evento Left Button, isso faz com que o objeto "salte" para a posição do mouse, deve ser evitado.

Para mover de forma correta, é preciso criar um variável com a posição "relativa" do objeto ao mouse, onde a diferença das posições é que será adicionada ao objeto quando este for clicado, dessa forma, seja qual for a área do objeto que você clicar, ele move considerando-o como ponto de origem.

Só explicando, posição relativa é a diferença entre a posição do objeto e a posição a qual comparamos, no caso x - mouse_x e y - mouse_y:

Código:
x_relativo=x-mouse_x
y_relativo=y-mouse_y
Atribuimos isso ao evento Step, para que seja uma variável atualizada.

Agora em um evento do mouse, por exemplo Left Buttom:

Código:
x=x_relativo+mouse_x
y=y_relativo+mouse_y
Para mover vários objetos ao mesmo tempo, temos que usar a função with, que controla outros objetos:

Código:
with instance_nearest(x,y,botao1) {
x=other.x-80
y=other.y+75 }
Com o objeto botao1 mais próximo, mova-o, ao mesmo tempo que o botão é corretamente posicionado na janela (repetindo o código com os demais botões).

Efeito Fade In/Out

É um efeito simples, mas bem usual, para aplicá-lo, basta controlarmos a variável image_alpha e atribuí-la a todos os objetos envolvidos ao objeto.

No evento Create indicamos:

Código:
image_alpha=-0.5
apaga=0
A variável image_alpha inicia em -0.5 para que tenha uma diferença entre a criação e o surgimento dela na tela, bem mínima, milisegundos. E iniciamos a variável apaga, que usaremos mais adiante.

Do mesmo modo que fizemos no exemplo anterior, controlando objetos com o with, mas desta vez com o image_alpha:

Código:
if image_alpha<1.5 and !apaga{
image_alpha+=0.05
with instance_nearest(x,y,botao1) image_alpha=other.image_alpha}

if image_alpha>0 and apaga{
image_alpha-=0.05
with instance_nearest(x,y,botao1) image_alpha=other.image_alpha}
Quando a variável apaga for true (ou 1) e image_single for maior que zero ou quando apaga for false (ou 0) e image_single for menor que 1.5, a janela desaparecerá e aparecerá respectivamente.

No evento Left Released do objeto botao1, adicionamos:

Código:
jan_movel.apaga=1
Para indicar que ao ser pressionado a janela desapareça.

Surgindo da esquerda

Faz a janela surgir da esquerda e pára na posição que ela foi criada.

Seu funcionamento é igualmente semelhante ao fade, mas variando a posição x do objeto, no evento Create deve indicar qual era a posição inicial, guardando-a em uma variável para então mové-la para uma posição não visível na janela:

Código:
x_antigo=x
move=1
x=room_width+150
Lembrando que room_width é a largura da room e 150 é aproximadamente a metade da largura do objeto, assim o objeto salta para uma posição fora da janela, para então se mover.

Para finalmente mover a janela, no evento Step usamos:

Código:
if x>x_antigo and move=1
x-=10 else move=0

if x<=x_antigo and move=1
x=x_antigo
Isso indica que enquanto a posição atual do objeto não for menor ou igual a posição inicial do objeto (associada à x_antigo) será subtraído 10 pixels a cada frame.

Baixe aqui a engine deste tutorial (zip - 89kb)
________________________________
Veja também:

- Parte 1 - Janelas com informações
- Parte 2 - Janelas com botões
- Parte 3 - Janelas com entrada de dados


Última edição por Fuzenrad em Qui 21 Out 2010, 20:55, editado 2 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 IV

Mensagem por .:Allison:. em Qua 22 Set 2010, 22:17

Muito bom, adorei, adoro todos os seus tutoriais, são muito bem explicados!

Faz uma FanBar, que eu quero 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 IV

Mensagem por Fuzenrad em Qui 23 Set 2010, 15:04

Acabei esquecendo de anexar as engine:
- Movendo Janelas
- Fade in/out
- Surgindo da esquerda

jan_movel.zip (89kb) - Link direto

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 IV

Mensagem por Mr. Kaleb em Qui 23 Set 2010, 15:34

Muito bom Funzerad como sempre colaborando muito para com o forum, está muito bem explicado como todos os outros, vai ajudar muita gente inclusive eu que estou criando um rpg e esbarrei justamente nesta parte, vou colocar você nos créditos

Mr. Kaleb

Ranking : Nota C
Número de Mensagens : 1400
Idade : 19
Data de inscrição : 07/09/2010
Notas recebidas : C
Reputação : 21
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 IV

Mensagem por Conteúdo patrocinado Hoje à(s) 11:35


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