Movimento Custom TileBased
Parte I: Movimentação
FireSoul falando o/
Vou mostrar pra vocês como criar um movimento personalizado baseado em Tiles.
O que é um movimento baseado em Tiles?
Movimento baseado em Tiles é um movimento "quadriculado". Por exemplo, se os Tiles forem 32x32 e eu mover o personagem para direita, ele vai andar para direita até completar 32 pixels, e vai parar. Resumindo, é um movimento estilo RPG.
Agora, vamos em frente com o tutorial. Primeiro, crie um objeto e escolha um tamanho para os Tiles. Eu vou usar Tiles de 16x16 como exemplo. Os eventos serão bem básicos.
Movimentos Horizontais
Faça o seguinte evento:
Repeat While ("Player 1") Moved right
X Repeat While ("Player 1") Moved left
Alterable Value A ("Personagem") = 0
Alterable Value B ("Personagem") = 0
Set Alterable Value A ("Personagem") to 16
Explicando:
Este evento faz com que enquanto o jogador estiver pressionando para a direita, e a variável A for 0, mudar o valor da variável A para 16.
Modificamos o valor da variável A para 16 porque é o valor da variável A que vai determinar o movimento horizontal. E, como o tamanho dos tiles é 16x16, o personagem irá andar de 16 em 16 pixels. Logo, se o tamanho dos tiles fossem 32x32, deveríamos definir esse valor para 32. Se fossem 48x48, deveríamos definir esse valor para 48, e assim por diante.
Verificar se a variável B é igual a 0 serve para que o personagem não ande em diagonal. Isso pode ocasionar bugs mais tarde. E a condição negada, serve para que seja impossível andar para os dois lados ao mesmo tempo.
Verificar se a variável B é igual a 0 serve para que o personagem não ande em diagonal. Isso pode ocasionar bugs mais tarde. E a condição negada, serve para que seja impossível andar para os dois lados ao mesmo tempo.
Agora, o próximo evento:
Repeat While ("Player 1") Moved left
X Repeat While ("Player 1") Moved right
Alterable value A ("Personagem") = 0
Alterable value B ("Personagem") = 0
Set alterable value A ("Personagem") to -16
Explicando:
Quase a mesma coisa do evento anterior. Contudo, como queremos que ele ande para a esquerda, devemos definir a variável A para -16, um valor negativo. Como você sabe, no Plano Computacional, no eixo X (horizontal), a direção para a direita é representada por números positivos, e a direção para a esquerda, é representada por números negativos. Logo, 16 fará o personagem andar 16 pixels para a direita, e -16, fará o personagem andar 16 pixels para a esquerda.
Verificar se a variável B é igual a 0 , mais uma vez, serve para que o personagem não ande em diagonal, pelo mesmo motivo já citado. Novamente, a condição negada é para que ele não ande para os dois lados.
Verificar se a variável B é igual a 0 , mais uma vez, serve para que o personagem não ande em diagonal, pelo mesmo motivo já citado. Novamente, a condição negada é para que ele não ande para os dois lados.
Pronto, terminamos os Movimentos Horizontais. Note que, mesmo que tenhamos feito os Movimentos Horizontais, o personagem ainda não se move quando teclamos no jogo. Isso iremos resolver no final do tutorial, pois precisamos programar também o movimento em si.
Movimentos Verticais
Ok, beleza, quase a mesma lógica dos Movimentos Horizontais, mas vou explicar tudo de novo. Comece fazendo o seguinte evento:
Repeat While ("Player 1") Moved down
X Repeat While ("Player 1") Moved top
Alterable value B ("Personagem") = 0
Alterable value A ("Personagem") = 0
Set Alterable Value B ("Personagem") to 16
Explicando:
Este evento faz com que enquanto o jogador estiver apertando para baixo e a variável B do personagem for 0, mudar o valor da variável para 16.
O Alterable Value B = 0 só vai deixar com que o evento aconteça se o valor alterável B do personagem seja 0. Isso serve para que o movimento não saia do padrão.
Modificamos o valor da variável B para 16 porque é o valor da variável B que vai determinar o movimento vertical. E, como o tamanho dos tiles é 16x16, o personagem irá andar de 16 em 16 pixels. Logo, se o tamanho dos tiles fossem 32x32, deveríamos definir esse valor para 32. Se fossem 48x48, deveríamos definir esse valor para 48, e assim por diante.
Desta vez, é o contrário. O que faz o personagem não andar em diagonal, é o fato de verificarmos, agora, se a variável A (dos movimentos horizontais), e não mais a B, é igual a 0. Isso porque estamos trabalhando agora com a variável B como movimento, ou seja, a "intrusa" é a A. A intrusa a qual me refiro, é a cujo movimento é iniciado depois, sendo que a A representa os horizontais, e a B, os verticais. Isso significa que se o movimento horizontal já tiver sido iniciado, o vertical (intruso) não pode acontecer, e vice-versa. Já a condição negada, é para que ele não ande para cima e para baixo ao mesmo tempo.
Desta vez, é o contrário. O que faz o personagem não andar em diagonal, é o fato de verificarmos, agora, se a variável A (dos movimentos horizontais), e não mais a B, é igual a 0. Isso porque estamos trabalhando agora com a variável B como movimento, ou seja, a "intrusa" é a A. A intrusa a qual me refiro, é a cujo movimento é iniciado depois, sendo que a A representa os horizontais, e a B, os verticais. Isso significa que se o movimento horizontal já tiver sido iniciado, o vertical (intruso) não pode acontecer, e vice-versa. Já a condição negada, é para que ele não ande para cima e para baixo ao mesmo tempo.
Agora, vamos ao próximo evento:
Repeat While ("Player 1") Moved top
X Repeat While ("Player 1") Moved down
Alterable value B ("Personagem") = 0
Alterable value A ("Personagem") = 0
Set Alterable Value B ("Personagem") to -16
Explicando:
Quase a mesma coisa do evento anterior. Contudo, como queremos que ele ande para cima, devemos definir a variável B para -16, um valor negativo. Como você sabe, no Plano Computacional, no eixo Y (vertical), a direção para baixo é representada por números positivos, e a direção para cima, é representada por números negativos. Logo, 16 fará o personagem andar 16 pixels para baixo, e -16, fará o personagem andar 16 pixels para cima.
Novamente, verificamos se a variável A é igual a 0 a fim de impedir o movimento diagonal. A explicação é a mesma dos eventos anteriores. A Condição negada, mais uma vez, é para que ele não ande para cima e para baixo ao mesmo tempo.
Novamente, verificamos se a variável A é igual a 0 a fim de impedir o movimento diagonal. A explicação é a mesma dos eventos anteriores. A Condição negada, mais uma vez, é para que ele não ande para cima e para baixo ao mesmo tempo.
Com isso, terminamos o Movimento Vertical.
O Movimento em Si
Agora, iremos fazer o movimento em si. O que fizemos antes foi para criar as direções do movimento, mas isso não fará o personagem se movimentar de fato. Então, vamos lá. Faça o seguinte evento:
Alterable Value A ("Personagem") > 0
Set position X ("Personagem") to X("Personagem")+1
Sub 1 from Alterable Value A
Explicando:
Agora, se a variável A for maior do que 0 (ou seja, se apertar para DIREITA), vai mudar a posição X do personagem para a sua própria posição X, mais um, ou seja, irá aumentar a posição X do personagem em 1. Ao mesmo tempo, precisamos fazer com que a variável A fique voltando a 0 conforme o personagem anda, para ele parar o movimento (porque senão, ele fica andando pra sempre =P). Como aqui o valor é positivo, para fazermos ele voltar a ser 0, devemos subtrair 1 dele. Assim, a cada pixel que o personagem anda, 1 é subtraído da variável A, logo, quando ele tiver andado 16 pixels, já terá subtraído 16, e a variável terá voltado a ser 0. Então, ele irá parar.
Os valores que adicionamos na posição e subtraímos na variável tem de serem iguais, e, esse valor, é a velocidade do movimento. A velocidade tem de ser divisível pelo tamanho dos Tiles. 1 é divisível por todos os números, logo, sempre poderá ser utilizado. 2 é divisível por 16, logo, poderia ser utilizado. 3 não é divisível por 16, logo, não poderia ser utilizado.
Outro evento:
Alterable Value A ("Personagem") < 0
Set position X ("Personagem") to X("Personagem")-1
Add 1 to Alterable Value A
Explicando:
A mesma lógica do evento anterior, só que para andar para a esquerda. Quando a variável for menor que 0, diminuiremos 1 da posição X (lembre que, a direção esquerda é representada por números negativos). Ao mesmo tempo, faremos a variável A voltar a ser 0. Como aqui o número é negativo, para a variável voltar a ser 0, devemos adicionar 1 à variável. Daí, quando o valor voltar a ser 0, o personagem vai parar de andar, e isso vai ser exatamente quando ele tiver chegado ao fim do Tile.
O normal é que a velocidade das quatro direções sejam iguais. Mas se quiser fazê-las diferentes, faça. E lembre-se que a velocidade (no caso, o valor que deve ser subtraído na posição e adicionado na variável) deve ser divisível pelo tamanho dos Tiles.
Então, vamos ao próximo evento:
Alterable Value B ("Personagem") > 0
Set position Y ("Personagem") to Y("Personagem")+1
Sub 1 from Alterable Value B
Explicando:
A mesma coisa, mas com a posição vertical. Como está "Quando o valor for MAIOR que 0...", então o evento irá acontecer quando apertar BAIXO.
Alterable Value B ("Personagem") < 0
Set position Y ("Personagem") to Y("Personagem")-1
Add 1 to Alterable Value B
Explicando:
Agora estamos fazendo exatamente o oposto do evento anterior. Esse evento é para quando o jogador apertar para cima, afinal, a variável B está "Quando o valor for MENOR que 0...".
Ei, não tente fazer seu jogo agora, na próxima parte do tutorial irei explicar colisões, para seu personagem não atravessar a parede!
EXTRA!
Antes de terminar, vou ensinar como criar uma grade para posicionar corretamente seu personagem e os obstáculos! Isso é muito importante, pois se eles forem posicionados de forma errada, pode ocorrer algum bug no seu jogo. A grade ajuda a alinhar o personagem e os objetos corretamente!
O primeiro passo é abrir seu Paint. Vá em Imagem > Atributos. Coloque a largura e a altura dos tiles que serão utilizados no seu jogo em Pixels nos seus respectivos campos. No meu caso, 16 de largura e 16 de altura. Então, pinte de cinza a imagem toda. Daí, volte em Imagem > Atributos, e, dessa vez, dobre a largura. Como a largura dos meus tiles é de 16px, dobrando, fica 32 (16x2=32). Dê Ok. Agora vá em Editar > Selecionar Tudo e depois em Editar > Copiar. Vá novamente em Imagem > Atributos, mas dessa vez dobre a altura. Como a altura dos meus tiles também é de 16px, dobrando fica 32 de novo. Agora, clique na Lupa e selecione 8x, a fim de aumentar a imagem para ver melhor. Então, vá em Editar > Colar. Clique com o botão direito do mouse nessa nova parte da imagem, e clique em Iverter / girar. Escolha Inverter horizontalmente e clique em Ok. Depois, arraste a nova parte da imagem para abaixo da antiga e salve sua imagem como (*.PNG)! Daí é só adicionar no MMF2 como QuickBackdrop Object e utilizar como base! Note que para encaixar direitinho com o tamanho do frame, a largura do frame deve ser divisível pela largura do tile e a altura do frame também deve ser divisível pela altura do tile!
Bom, é isso!
That's all for now, Folks!
Download do Exemplo: Link Direto / MediaFire
Nota: Nos exemplos, pode-se andar em diagonais, e em dois sentidos "ao mesmo tempo", o que pode ocasionar alguns bugs. Isso significa que eles servem apenas para você ter uma base, e que não deve se espelhar totalmente neles. Entretanto, se você seguir o tutorial, obterá sucesso, com certeza.
