Avatar do usuário
Tutoriais & Aulas
Colaborador
Colaborador
Autor
Mensagens: 174
Registrado em: Qui Abr 28, 2016 11:37 am
Karma: 240

[GRAF] [Tutorial] Reflexo na água 2D

Sex Abr 29, 2016 1:11 pm

Autor original: Klior


Reflexo na água 2D

Já viram pokemon ruby/emerald entre outros, onde o personagem é refletido na água ao passar por ela?
Imagem
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
Imagem Para Baixo
Imagem Esquerda
Imagem Direita
Imagem Para Cima
E o Tile set que iremos usar.
Imagem

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
Imagem
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:
Imagem

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:

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:
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:

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:

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:
Imagem

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.
Imagem
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:
Imagem

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:
Imagem

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.

Tags:
 
fireblaze987
Novato
Novato
Mensagens: 3
Registrado em: Ter Dez 13, 2016 6:03 am
Karma: 0

Re: [GRAF] [Tutorial] Reflexo na água 2D

Dom Dez 18, 2016 9:50 pm

com licença mais poderia me dizer como fazer um efeito espelhado em uma parede ?
Antes de sair reclamando por ai tente, tente de novo até sair certo
 
Avatar do usuário
Rodrigo Santiago
Colaborador
Colaborador
Mensagens: 279
Registrado em: Sáb Ago 22, 2015 8:17 am
Karma: 380

Re: [GRAF] [Tutorial] Reflexo na água 2D

Dom Dez 18, 2016 11:56 pm

Tutorial simples e eficaz , digno de ser repostado!
1

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 3 visitantes