[GRAF] Fazendo o efeito "FT" do Mario

[Tutoriais & Aulas]

Autor original: Caio Pinheiro

Fazendo o efeito "FT" do Mario

Com certeza a maioria daqui já jogou Super Mario World. Lançado junto com o SNES, o jogo apresentava diversos efeitos de transição de tela. O mais comum era a tela fechar em forma de círculo no final de cada fase.

Estudei um pouco e descobri um método para fazer o FT ("fechar tela"). É muito simples e bastante efetivo. O bom é que você não pode só fechar a tela em forma de círculo, mas da forma que quiser: em estrela, em caveira, em quadrado, etc.

Como funciona? Simples: desenhamos um sprite no meio da tela, e iremos fazer esse sprite diminuir de tamanho. Como um exemplo, utilizarei esse sprite:



É um sprite com o fundo branco. Ao adicioná-lo no Game Maker, não esqueça de deixá-lo transparente e de colocar os Origins no centro dele (clique no botão "Center", ao adicionar o sprite).

Agora, crie um objeto e coloque esse sprite. Adicione o seguinte código no evento Create:

Código: Selecionar todos

x = view_xview[0] + view_wview[0]/2;
y = view_yview[0] + view_hview[0]/2;
image_xscale = 8;
image_yscale = 8;

Nas duas primeiras linhas, colocamos o x e o y do objeto no meio da tela. Já nas duas últimas linhas, nós aumentamos o tamanho do sprite, para que ele pegue a tela toda. Se sua tela for pequena, você pode diminuir o valor do image_xscale e do image_yscale.

Agora, coloque o seguinte código no Step:

Código: Selecionar todos

if (image_xscale > 0)
    {
        image_xscale-=0.06
        image_yscale-=0.06
    }
else
    {
        room_goto_next();
    }

O código acima é bem simples. Primeiro, checamos se o image_xscale é maior que zero. Se for, diminuímos o image_xscale e o image_yscale em 0.06. O que irá acontecer é que o sprite irá diminuir de tamanho aos poucos, até sumir. Assim que o image_xscale for menor que zero, o jogo pula para a próxima room. Se quiser fazer a tela fechar mais rápido, aumente o valor (coloquei 0.06 por opção).

Nota: checamos apenas o image_xscale porque, neste caso, o image_xscale e o image_yscale tem o mesmo valor sempre.

Você pode testar agora. Se fez tudo certo, o sprite diminuirá de tamanho até sumir, e então você trocará de room. Mas temos um problema: conforme o sprite vai diminuindo, parte da tela fora do retângulo fica visível.

Apesar de ter demorado para descobrir, é bem simples de resolver. Adicione o seguinte código no evento Draw do objeto:

Código: Selecionar todos

//Retangulos
draw_set_color(c_black);
draw_rectangle(view_xview[0],view_yview[0],x-(sprite_width/2),view_yview[0]+view_hview[0],0)
draw_rectangle(x-(sprite_width/2),view_yview[0],x+(sprite_width/2),y-(sprite_height/2),0)
draw_rectangle(x+(sprite_width/2-2),view_yview[0],view_xview[0]+view_wview[0],view_yview[0]+view_hview[0],0)
draw_rectangle(x-(sprite_width/2),y+(sprite_height/2-3),x+(sprite_width/2),view_yview[0]+view_hview[0],0)
draw_sprite_ext(sprite_index,image_index,x,y,image_xscale,image_yscale,image_angle,c_white,image_alpha)

Esse código é um pouco mais complicado que os outros. Nele, nós desenhamos quatro retângulos de cor preta nas bordas do sprite, para que a área que antes era visível se torne impossível de se enxergar. No final do código, nós desenhamos o próprio sprite.

Nota: quando usamos algum código no evento Draw, o sprite do objeto não é desenhado na tela. Por isso uso a última linha de código. Assim, o objeto terá seu sprite visto na tela.

Podem testar. Verão que o código funciona perfeitamente: o círculo vai diminuindo de tamanho até fechar no centro, e então troca de room. Se quiser colocar outro efeito, é só usar outro sprite, sendo que a parte branca seria a parte que ficaria visível na tela.

Tutorial escrito por CPinheiro, da Staff da Game Maker Brasil. Não copie sem autorização.