[Tutorial] Reflexo na água 2D

por Klior Ter 20 Mar 2012, 18:46

Reflexo na água 2D

Já viram pokemon ruby/emerald entre outros, onde o personagem é refletido na água ao passar por ela?
[Tutorial] Reflexo na água 2D 123456

Hoje ensinarei como fazer esse efeito de uma maneira bem simples.

Para começar o tutorial precisaremos dos seguintes sprites.
Nossa personagem que eu não tenho certeza mais acho que se chama May
[Tutorial] Reflexo na água 2D SprDown_strip3

[Tutorial] Reflexo na água 2D SprDown_strip3

Para Baixo
[Tutorial] Reflexo na água 2D SprLeft_strip3

Esquerda

[Tutorial] Reflexo na água 2D SprRight_strip3

Direita

[Tutorial] Reflexo na água 2D SprUp_strip3

Para Cima
E o Tile set que iremos usar.
[Tutorial] Reflexo na água 2D Tileset

Agora vamos por a mão na massa abrindo o game maker e adicionando as sprites e tile set.
Vai em Create Sprite, ou pressione Shift + Ctrl + S.
Em seguida clique em Edit Sprite, vá no menu File, depois clique em Create from strip... ou pressione Ctrl + I

Na janela que ira aparecer preencha os campos como na imagem abaixo
[Tutorial] Reflexo na água 2D Sprite3

Number of images são a quantidades de imagens.
Imagens per row são a quantidade de imagens por linha.
Image width é a largura da imagem.
Image height é a altura da imagem.
O restante dos campos não será preciso modificar. Faça esse procedimento com as outras três imagens, todas tem a mesma largura e altura.
Renomeie as sprites para sprUp, sprDown, sprRight e sprleft.

Agora vá em Create Background ou pressione Shift + Ctrl + B, Clique no botão Load Background e selecione o arquivo do tile set. Marque o checkbox Use as tile set e renomeie o background para bgkTileset.
Em Tile properites deixe como na imagem abaixo:
[Tutorial] Reflexo na água 2D Tilepropiets

[Tutorial] Reflexo na água 2D Tilepropiets

Agora vamos em Create Object ou pressione Shift + Ctrl + O, renomeie o objeto criado para objMay, vai em Add Event e adicione o evento Create.
Adicione o seguinte código no Evento Create:

Código:: parado = true; //Esta variável vai indicar se nosso personagem está parado ou andando. direcao = 2; //Esta variável vai indicar para qual direção nosso personagem está virado. // 0 //3 1 // 2 //0 = Para cima //1 = Direita //2 = Para baixo //3 = Esquerda sprite_index = sprDown; //Somente indicando qual a sprite inicial do nosso objeto.

No Evento Step, adicione:

Código:: if (keyboard_check(vk_up)) { parado = false; direcao = 0; y -= 2; } else if (keyboard_check(vk_right)) { parado = false; direcao = 1; x += 2; } else if (keyboard_check(vk_down)) { parado = false; direcao = 2; y += 2; } else if (keyboard_check(vk_left)) { parado = false; direcao = 3; x -= 2; } else { parado = true; } if (parado == true) { //Parado switch (direcao) { case 0: //Up sprite_index = sprUp; image_speed = 0; image_index = 0; break; case 1: //Right sprite_index = sprRight; image_speed = 0; image_index = 0; break; case 2: //Down sprite_index = sprDown; image_speed = 0; image_index = 0; break; case 3: //Left sprite_index = sprLeft; image_speed = 0; image_index = 0; break; } } else { //Andando switch (direcao) { case 0: //Up sprite_index = sprUp; image_speed = 0.3; break; case 1: //Right sprite_index = sprRight; image_speed = 0.3; break; case 2: //Down sprite_index = sprDown; image_speed = 0.3; break; case 3: //Left sprite_index = sprLeft; image_speed = 0.3; break; } }

Este código é simplesmente para o personagem andar, então não vou entrar em muitos detalhes.

Agora vamos criar uma Room, vá em Create Room ou pressione Shift + Ctrl + R, renomeie a room para romMain. Adicione nosso objMay na room e execute o jogo pressionando F5. Nossa personagem May deverá andar nas 4 direções pressionando as teclas do teclado. Se isso aconteceu corretamente, ótimo você fez tudo certo até agora.

Vou explicar como funciona o depth(Profundidade) no game maker, este é o principal 'ingrediente' do nosso tutorial.
O game maker desenha todos sprites, tile sets, códigos de draw e etc em camadas, quanto maior o depth do objeto mais em baixo ele ficará, como assim?? Por exemplo, temos o objeto1 e objeto2 na room, o objeto1 tem depth = 100; o objeto2 depth = 80; o objeto2 terá seus sprites desenhados por cima do objeto1, não importando qual foi colocado primeiro na room.

Vamos fazer o reflexo da nossa personagem agora, crie um novo objeto e renomeio para objMayReflexo, no Evento Draw desse objeto adicione o seguinte código:

Código:: draw_sprite_ext(objMay.sprite_index, objMay.image_index, objMay.x, objMay.y + 42, 1, -1, 0, noone, 0.5);

Este código desenhará o sprite que estiver no objMay de cabeça para baixo, com 0.5 de transparência dando a impressão de ser o reflexo do personagem.

No Evento Create do nosso objMay adicione esse codigo no Evento Create:

Código:: instance_create(x, y, objMayReflexo);

Este código simplesmente criará o objMayReflexo assim que o objMay for criado.

Agora vamos executar o jogo para ver o resultado.
Nosso personagem deverá ficar como na imagem abaixo:
[Tutorial] Reflexo na água 2D Reflexo

Você deve está se perguntando, para que dois objetos, eu não poderia por esse código do objMayReflexo no evento draw do objMay? A resposta é não. cada objeto só pode ter uma profundidade(depth), e nos não queremos que o personagem e o reflexo estejam na mesma profundidade, senão veremos o reflexo do personagem na grama e etc mas queremos que o personagem seja refletido somente na água.

Vamos as camadas agora, teremos uma camada para água, outra para o reflexo outra para grama e outra para o personagem, como disse antes quanto menor o depth mais por cima ficará a imagem. As camadas ficarão nessa ordem:
Água - Depth = 1000000
Reflexo - Depth = 900000
Grama - Depth = 800000
Personagem - Depth = 700000

Vamos montar o cenário, vá na romMain, na aba tiles, selecione para usar o bkgTileset em Current Tile Layer, adicione as camadas Água e Grama, clicando no botão Add, em Depth coloque como descrevi anteriormente. Deverá ficar como na imagem abaixo.
[Tutorial] Reflexo na água 2D Layers

Não é preciso adicionar as camadas Reflexo e Personagem, porque a profundidade deles serão definidas nos próprios objetos.

Selecione o layer 1000000 e vamos adicionar a água, faça um retângulo com mais ou menos 3 x 6 no meio da room.
Agora selecione o layer 800000 faça a borda do lago e produza o restante do cenário. O meu ficou assim:
[Tutorial] Reflexo na água 2D Cenario

Agora vá no objMay, em Depth coloque 700000, vá no objMayReflexo em Depth coloque 900000. Execute o jogo e veja o resultado. O resultado será esse:
[Tutorial] Reflexo na água 2D Resultado

Bom é isso, espero que tenham gostado, tentei ser o mais explicativo possível para que qualquer um possa entender, ficou faltando um efeito de 'andar sobre a água' mais isso é o de menos, até o próximo tutorial.

por fbixd Ter 20 Mar 2012, 20:40

Cara acho que no DRAW do objMayReflexo é

Código:: draw_sprite_ext(objMay.sprite_index, objMay.image_index, objMay.x, objMay.y + 42, 1, -1, 0, noone, 0.4);

Pois sinão ele fica acima do objeto objMay...

Ops...
Diminui um pouquinho da transparencia!

por Klior Ter 20 Mar 2012, 22:18

fbixd escreveu:Cara acho que no DRAW do objMayReflexo é
Código:
draw_sprite_ext(objMay.sprite_index, objMay.image_index, objMay.x, objMay.y + 42, 1, -1, 0, noone, 0.4);
Pois sinão ele fica acima do objeto objMay...

Ixi, é que eu esqueci de dizer que tinha que por y = 20 no origin do sprite, mais para não ter que acrescentar isso no tutorial vou editar como você postou, obrigado.

por Conteúdo patrocinado

[Tutorial] Reflexo na água 2D

[Tutorial] Reflexo na água 2D

Re: [Tutorial] Reflexo na água 2D

Re: [Tutorial] Reflexo na água 2D

Re: [Tutorial] Reflexo na água 2D