[Tutorial] Janelas Dinâmicas IV

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