[Tutorial] Reflexo na água 2D

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

[Tutorial] Reflexo na água 2D

Mensagem por Klior em 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?

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
Para Baixo
Esquerda
Direita
Para Cima
E o Tile set que iremos usar.


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

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:


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:


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.

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:


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:


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.



Última edição por Klior em Ter 20 Mar 2012, 23:10, editado 3 vez(es)

Klior

Número de Mensagens : 426
Idade : 25
Data de inscrição : 07/03/2010
Reputação : 13
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: [Tutorial] Reflexo na água 2D

Mensagem por fbixd em 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!


fbixd

Número de Mensagens : 85
Idade : 17
Data de inscrição : 18/01/2012
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: [Tutorial] Reflexo na água 2D

Mensagem por Klior em 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.

Klior

Número de Mensagens : 426
Idade : 25
Data de inscrição : 07/03/2010
Reputação : 13
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: [Tutorial] Reflexo na água 2D

Mensagem por Conteúdo patrocinado Hoje à(s) 08:37


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