Movimento Custom TileBased
Parte II: Colisões
Introdução:
Olá pessoal o/. O FireSoul acabou não postando a segunda parte do tutorial ¬¬. Brincadeira, já agradeço a ele por ter feito a parte 1 ^^. Então, eu mesmo vou postar! Ayuupi!! Quêê?! Como assim não me querem como professor? Dane-se, eu que vou ensinar assim mesmo e.e.
Nessa parte do tutorial vamos aprender a fazer colisões. E depois disso, você já vai poder estar criando seus jogos de RPG! Tá bom, nem tanto, um jogo de RPG não é só isso hehe. Mas já é um começo não é? Então, bora parar de faladeira e ir ao que interessa o/
Criando os Detectores:
Antes de programar, temos de criar os detectores de colisão. É eles que vão... err... é algo bem complicado... como posso explicar? Detectar as colisões! Tcharaaaam! Cada detector vai precisar ter a mesma largura e altura dos tiles, e ser preenchido com uma cor diferente. Além disso, é importante nomear cada um, para saber qual é qual, porque saber só pelas cores é difícil o.O. Se você não sabe o que é um detector... O QUE VOCÊ TÁ FAZENDO AQUI?! VOLTA PRO NÍVEL BÁSICO CARAMBA!
Ajuste o HotSpot do Personagem para bem no meio, tanto na horizontal quanto na vertical (use QuickMove, é bem mais prático). O Hotspot do Detector Cima deve ficar em baixo (em relação à vertical) e no meio (em relação à horizontal). O do Detector Baixo deve ficar em cima (em relação à vertical) e no meio (em relação à horizontal). O do Detector Direito tem de ficar no meio (em relação à vertical) e na parte esquerda (em relação à horizontal). E o do Detector Esquerdo, por fim, tem de ficar no meio (em relação à vertical) e na parte direita (em relação à horizontal).
Agora vá no personagem. Conte quantos pixels ele tem do centro para a parte de cima. Aqui deu 8px. O Detector Cima deve ficar 1px acima dele, então, o Detector Cima deve ficar 9px acima do referencial (HotSpot) do personagem (no MEU caso), pois 8+1=9. Mas como no Plano Computacional para cima são valores negativos, não deve ficar 9px e sim -9px. Agora, conte quantos pixel ele tem do centro para baixo. Aqui deu 7px. Como o detector deve ficar 1px abaixo dele, então adiciono 1, ficando 8px. Então, conte quanto tem do meio para a esquerda. Aqui deu 8px, somando um... 9px. Para a esquerda, assim como para cima, também são valores negativos. Então, não deve ficar 9px, e sim -9px. E pra terminar, conte quanto tem do meio para a direita. Aqui deu 7px, somando 1px, fica 8px.
Cima: -9px
Baixo: 8px
Esquerda: -9px
Direita: 8px
Pronto, anotei os valores que vou precisar. Lembre-se, esses valores dependem do tamanho dos Tiles que você está utilizando! Esses que peguei servem para 16x16, que são os que EU estou usando! Vamos utilizar esses valores para posicionar os detectores ;P.
Programando os Eventos:
Ok, agora está tudo preparado para começarmos a programar. Vamos começar posicionando os detectores. Faça o seguinte evento:
Start of Frame
(Detector Cima) Set position at (0,-9) from ("Personagem")
(Detector Baixo) Set position at (0,8) from ("Personagem")
(Detector Esquerda) Set position at (-9,0) from ("Personagem")
(Detector Direita) Set position at (8,0) from ("Personagem")
Beleza! Isso vai fazer com que quando começar o Frame, os detectores vão para os seus devidos lugares, não importando onde estão! Agora, vamos criar um loop para ficar posicionando os detectores sempre. Vamos chamar esse loop de Detectores. Crie o seguinte evento, repetindo as ações do evento anterior e mudando apenas a condição:
On loop "Detectores"
(Detector Cima) Set position at (0,-9) from ("Personagem")
(Detector Baixo) Set position at (0,8) from ("Personagem")
(Detector Esquerda) Set position at (-9,0) from ("Personagem")
(Detector Direita) Set position at (8,0) from ("Personagem")
Repetimos o que fizemos no Start of Frame. A diferença é que, enquanto lá, era pra posicionar assim que o Frame começar, aqui, é pra manter esse posicionamento constante. Muito bem. Agora, vamos usar este loop.
Lembram destas condições, da aula passada?
Alterable Value A of ("Personagem") < 0
Alterable Value A of ("Personagem") > 0
Alterable Value B of ("Personagem") < 0
Alterable Value B of ("Personagem") > 0
Adicione a cada uma delas o seguinte evento:
Start Loop "Detectores" X times
X é o número de vezes que a repetição será feita. Coloque o mesmo número do tamanho dos tiles. No meu caso seria, então, 16 vezes, pois o tamanho dos meus tiles é 16x16.
Ok, agora lembra daquelas condições de movimento?
Repeat while ("Player 1") Moved right
X Repeat while ("Player 1") Moved left
Alterable Value A = 0
Alterable Value B = 0
Repeat while ("Player 1") Moved left
X Repeat while ("Player 1") Moved right
Alterable Value A = 0
Alterable Value B = 0
Repeat while ("Player 1") Moved top
X Repeat while ("Player 1") Moved bottom
Alterable Value B = 0
Alterable Value A = 0
Repeat while ("Player 1") Moved bottom
X Repeat while ("Player 1") Moved top
Alterable Value B = 0
Alterable Value A = 0
Então, adicione a todas elas a seguinte condição também:
X (Respectivo Detector) is overlapping a backdrop
Escolhendo o Detector Direito para o movimento para a direita, o Detector Esquerdo para o movimento para a esquerda, o Detector Cima para o movimento para cima e o Detector Baixo para o evento para baixo! Ficando, respectivamente, assim:
Repeat while ("Player 1") Moved right
X Repeat while ("Player 1") Moved left
X (Detector Direita) is overlapping a backdrop
Alterable Value A = 0
Alterable Value B = 0
Repeat while ("Player 1") Moved left
X Repeat while ("Player 1") Moved right
X (Detector Esquerda) is overlapping a backdrop
Alterable Value A = 0
Alterable Value B = 0
Repeat while ("Player 1") Moved top
X Repeat while ("Player 1") Moved bottom
X (Detector Cima) is overlapping a backdrop
Alterable Value B = 0
Alterable Value A = 0
Repeat while ("Player 1") Moved bottom
X Repeat while ("Player 1") Moved top
X (Detector Baixo) is overlapping a backdrop
Alterable Value B = 0
Alterable Value A = 0
Isso fará com que ele só ande se o detector não estiver detectando um obstáculo! E... pronto! Terminamos! Agora ele já colide! Só falta deixar os Detectores Invisíveis... Seria super estranho vários quadrados coloridos ao redor do personagem =P.
Always
(Detector Cima) Make Invisible
(Detector Baixo) Make Invisible
(Detector Esquerda) Make Invisible
(Detector Direita) Make Invisible
Agora sim! Seu movimento está pronto! Agora é só começar a criar seus jogos em RPG! Só uma observação, antes de você sair por aí criando jogos de RPG... Particularmente, sempre uso esse Active Object, o qual programamos o movimento, como uma Máscara de Colisão (também conhecida como Collision Mask), a fim de evitar bugs.
Máscara de Colisão é um objeto que controla o movimento, e as animações ficam em outro Active Object, á parte. Ou seja, eu crio outro Active Object, com as animações, e posiciono-o em cima da Máscara de Colisão. Daí, programo as animações nesse novo Active Object.
Pode parecer bobagem, mas fica a dica. Claro, não estou dizendo que você não pode fazer as animações direto no Active que o movimento está programado, mas, na minha humilde opinião, Máscaras de Colisão são bem melhores. Não vou explicar nesse tutorial como programar as animações, porque, nesse ponto, vocês já devem saber fazer isso sozinhos. Se não sabe, recomendo você dar outras lidas nas aulas...
Falow o/
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. Além disso, nessa parte 2, substitui um método pré-histórico de posicionamento que eu usava por Fast Loops. Isso significa que os exemplos 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.
