O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

Crie um jogo de plataforma com Arc Engine: Parte 3 – Organizando gráficos

Iniciado por MayLeone, 27/02/2015 às 15:25


[box class=catbg]Introdução:[/box]
Nessa parte do tutorial falaremos sobre os gráficos do personagem, como programar todos seus movimentos e suas mudanças de sprites.

[box class=catbg]Os Gráficos:[/box]
Primeiramente crie/ripe os gráficos do seu personagem e escolha quais eles serão.
No meu caso irei ter os gráficos do personagem andando para a direita e esquerda, abaixando, pulando, caindo, atirando um projétil e uma animação dele quando está parado.
Você também deve ter um gráfico do personagem levando dano (se preferir) mas não iremos utilizá-lo nesta parte do tutorial.
Gráficos de exemplo, respectivamente:



Nesta imagem de exemplo, perceba os três últimos gráficos antes da imagem do personagem levando dano: Esses são os sprites do mesmo numa animação quando o player não está pressionando tecla alguma durante o jogo e está parado. Claro, isto é opcional, porém dá um aspecto interessante ao jogo.
Tenha também o sprite do personagem "escalando" as escadas do seu jogo, por exemplo:



Esse sprite também é opcional se seu jogo possuir a possibilidade do personagem escalar os terrenos de "escadas" (ver tutorial anterior).


[box class=catbg]Organizando os sprites no template:

Para colocar os gráficos do personagem no template do RPG Maker VXACE é simples: Salve no seu computador o template do mesmo:



Se você for criar o charset do personagem andando, por exemplo, veja em cada um dos sprites do personagem andando, quem é o maior entre eles tanto em largura quanto em altura.
Para ver as dimensões das imagens do seu computador, clique com o lado direito do mouse sobre a mesma na pasta na qual ela está salva e vá em "propriedades" depois em "detalhes" e procure por "dimensões da imagem", lá você verá quanto sua imagem possui de altura e largura em pixels.
Você precisará das dimensões da imagem maior entre os sprites para posicioná-los corretamente no template.
Vamos ver um exemplo?
Para o personagem andando eu tenho os seguintes sprites:
     


Irei verificar quem tem as dimensões maiores entre eles, um à um.
Por fim, encontrei que o primeiro sprite do exemplo possui a maior dimensão entre os outros:



Então eu tenho para largura 60 pixels e para altura 108 pixels!
Com isso, pegue a calculadora de seu computador e multiplique por 3 a largura do personagem e por 4 a altura do mesmo.
Por exemplo: 60 * 3 = 180 e 108 * 4 = 432

Num editor de imagens da sua preferência, abra o template do RPG Maker VXACE e nele aplique as novas dimensões encontradas na calculadora, ou seja 180 pixels de largura e 432 pixels de altura.
Assim o template ficará nas dimensões exatas para encaixar perfeitamente todos os sprites, e como na maioria das vezes cada sprite possui dimensões diferentes, o mais recomendando é usar como modelo as dimensões do maior sprite para não correr o risco de alguma das imagens ficarem sobrando ou até mesmo de fora do template.
Depois de fazer tudo isso, posicione os sprites da seguinte forma no template:



Sim, na última linha do template adicione o gráfico do personagem escalando os terrenos de "escadas", pois a Arc Engine reconhece o gráfico do personagem nesse tipo de terreno na última linha do template.
Faça o mesmo com todos seus sprites de todas as posições, sempre colocando o gráfico do personagem escalando na última linha.
Quando terminar de editar seu charset, salve o mesmo em algum local do seu computador, não esquecendo de adicionar o cifrão ($) antes do nome do arquivo para que o RPG maker o reconheça corretamente.
Importe os gráficos do seu personagem para a pasta "characters" do seu projeto e vamos em frente.

[box class=catbg]Programando os movimentos:[/box]
Agora vem a parte da programação de nosso tutorial!
Primeiramente vá ao banco de dados e crie três eventos comuns:
Nomeie-os como quiser, eu os nomeei da seguinte forma:



Os nomes desses eventos comuns são auto-explicativos e você já deve imaginar para quê cada um serve, vamos lá:

Vá para o segundo evento comum "movimentos" e como condição de início deixe em processo paralelo e crie uma switch para este evento com o nome que preferir.
Agora iremos criar os comandos de movimentos livres do personagem, ou seja, ele andando para os lados, abaixando e etc.
Primeiramente crie uma condição que irá verificar se o personagem está ou não numa plataforma sólida.
Caso ele esteja numa plataforma, colocaremos os gráficos do mesmo andando e etc e tal, do contrário iremos colocar o gráfico dele caindo, pois se o personagem não está numa plataforma, ele só pode estar suspenso no ar, e o mais correto seria colocar um gráfico dele "caindo" no mapa.
Para criar este comando, coloque uma condição no evento comum e na página 4 das condições selecione a opção "script". Dentro do Box coloque o seguinte código:
!$game_player.free_cll?($game_player.ax,$game_player.ay + 1)

     
Esse código verificará se o personagem está ou não numa plataforma sólida.
Na excessão desta condição coloque o gráfico do personagem caindo.
Dentro da condição crie mais outra condição, que seria quando o player estiver pressionando a tecla "esquerda" no jogo. Na excessão desta condição, crie outra condição similar a esta só que com a tecla direita do teclado, e por fim, novamente na excessão dessa nova condição, crie mais outra condição referente a tecla "baixo" do teclado.
Agora na excessão da última condição, coloque para que uma nova switch com o nome que você desejar, fique ON. Essa switch será responsável por outro evento que fará a animação do personagem quando ele está parado, mas pensaremos nisso mais tarde, sim?
Seu comando deve estar assim:



Dentro de cada uma das condições (esquerda, direita e baixo) coloque para que aquela mesma switch responsável pela animação do personagem fique OFF, e claro, os gráficos do personagem de acordo com a tecla pressionada referente.
Dentro das duas primeiras condições o gráfico do personagem andando, e dentro da terceira o gráfico dele abaixando:



Esse evento comum está pronto, dê ok e vá para o evento comum "ciclo de animação".
Em condição de início, deixe esse evento em processo paralelo com a switch anteriormente citada, no caso do meu tutorial, a switch "ciclo".
Agora coloque os gráficos do personagem com a animação dele parado, separando-os por um intervalo de frames estipulado por você, no meu caso, cada animação tem uma pausa entre 30 frames, ou seja, meio segundo.
Por fim, crie três condições: Uma com o player pressionando a tecla esquerda, outra com a tela direita e a outra com a tecla baixo, e dentro de cada uma dessas condições, coloque para que a switch do evento comum "movimentos" fique ON:



Este evento comum também está pronto, dê ok e vá para o terceiro evento comum "pulo e projétil".
Esse evento comum é responsável pelo gráfico do personagem quando ele pula e quando ele irá atirar os projéteis (opcional).
Porém, não será neste tutorial que você aprenderá a criar os projéteis para o personagem, falaremos disso numa outra parte do tutorial.
Pois bem... Vá ao último evento comum, e em condição de início deixe em processo paralelo e escolha uma nova switch para a ativação desse evento.
Faremos agora com que o comando reconheça quando o jogador pressionar a tecla de pulo.
Crie uma nova condição com a opção "script" e insira o seguinte código:
Input.trigger?(:C)

Esse código é a condicional da tecla que o player irá pressionar, só que esse código lê o comando do player pressionando a tecla uma vez, e não a todo momento como é feito com a condicional comum de tecla do RPG Maker.
Assim, se o jogador ficar apertando a tecla de pulo sem parar o jogo não irá bugar, pois o comando vai interpretar que o jogador pressionou essa tecla apenas uma vez e só irá executar seus comandos uma vez também.
Para que o código fique à seu gosto, altere a letra "C" dentro do mesmo, para a tecla de pulo do seu jogo.
Agora dentro dessa condição, torne OFF as duas switchs responsáveis pelos eventos comuns anteriores, de movimentação e animação, em seguida coloque o gráfico do personagem pulando, adicione o comando de esperar frames e ajuste em 20 frames e depois torne ON as switchs dos eventos comuns de animação e movimentação:



O comando de mudança de gráfico ao pular está pronto,  mas ainda falta do gráfico do personagem ao atirar o projétil:
Dentro da excessão desta condição, crie mais outra condição de tecla inserindo o seguinte código:
Input.trigger?(:Y)


Novamente troque a letra dentro do parênteses pela tecla correspondente à ação do personagem de atirar um projétil, eu por exemplo, farei com que o personagem atire um projétil quando o jogador pressionar a tecla "S" no teclado ("Y" no RPG Maker).
Dentro dessa condição faça exatamente o mesmo que fez com a condição de pulo, só que ao invés de ser o gráfico do personagem pulando, será o gráfico dele atirando o projétil:



Esse comando está pronto, pode dar ok.
A única coisa que falta para que tudo fique perfeito é você ir ao primeiro evento comum "ciclo de animação" e fazer com que o comando também reconheça quando for ativar o comando de pulo e projétil:
Crie duas condições: Uma que reconhece quando o jogador pressiona a tecla de pulo e a outra que reconhece quando o jogador pressiona a tecla de atirar projétil.
Dentro de ambas condições, os comandos serão os mesmos: Torne OFF a switch do evento comum de movimentos e ON a switch do evento comum de pulo:



Faça o mesmo dentro do evento comum de movimentos, só que troque a switch que ficará OFF pela switch do evento comum do ciclo de animações:



Agora sim está tudo ok! Antes de testar o jogo ative a switch do evento comum de "movimentos", num evento no mapa em processo paralelo (não se esqueça de adicionar o comando "apagar evento" nesse comando, após ele ativar a switch) e tudo está feito.
Se tudo der certo e você fez tudo certinho, seu personagem irá se movimentar conforme as teclas que você configurou:



[box class=catbg]Final:

E essa parte do tutorial chegou ao fim, acompanhe os tutoriais posteriores para continuar aprendendo a programar um jogo de plataforma com a Arc Engine!
Até a próxima!

Ah outro belo tutorial xD, o que mais gosto sobre você em relação ao RPG Maker é isso, a vontade de explicar as coisas e a paciência de colocar tudo isso com palavras e organizar tudo.

Isso ajuda muito as pessoas conhecerem como alguns sistemas são poderosos digamos assim, e no caso o do Khas, parabéns pelas aulas de verdade.

Essa parte está recheada de informações ,mal posso esperar pela próxima parte, esta me ajudando a criar um game plataforma no rpg maker!  :wow:

 Parabéns May, é um excelente tutorial e vai ajudar muitas pessoas que ainda não sabem mexer nessa "engine" e também ensina alguns truques novos pra quem já usa a algum tempo.
Abração

Eu quem agradeço pelos comentários! Fico feliz em saber que estão gostando da séries desses tutoriais e que de alguma forma estou ajudando os makers!
Em breve postarei o restante, obrigada novamente.

Até mais.

Citação de: MayLeone online 27/02/2015 às 15:25


Essa parte ficou confusa, você usou 1 frame ou montou o set do char?

estou aguardando o próximo tutorial vou querer fazer um game estilo Broforce ; )

Eu tive que usar um charset para cada animação do personagem, isso porque o Arc Engine tem algo contra animações do mesmo set, utilizando o comando de 'mover evento'. Então tive que criar um charset para cada animação do personagem parado, entende?

Entendi  :XD: Vlw, gostaria de pedir para acrescentar aos tutoriais .... como se faz pra destruir cenários como no jogo Earthworm Jim, tem uma parte que ele atira nas "paredes"(na realidade é tipo terra), elas se destroem e criam um amontoado de detrito (de terra) para ele subir em cima e alcançar outros lugares.

Citação de: hategum rpg online 31/03/2015 às 00:02
Entendi  :XD: Vlw, gostaria de pedir para acrescentar aos tutoriais .... como se faz pra destruir cenários como no jogo Earthworm Jim, tem uma parte que ele atira nas "paredes"(na realidade é tipo terra), elas se destroem e criam um amontoado de detrito (de terra) para ele subir em cima e alcançar outros lugares.

Obrigada pela sugestão! Irei acrescentar esse tipo de sistema na parte 6 do tutorial ''Objetos de interação'', onde eu ensinarei a criar rampas, ''molas'', plataformas não estáveis e diversas outras coisas.
Até mais.

Acho que poderia detalhar melhor o final do tutorial e/ou colocar imagem inteira de todos os eventos necessários já finalizados, pois assim facilitaria o entendimento.  :ok:

Muito bom o tutorial MayLeone!

Não sei se seria o lugar certo para perguntar isso mas como o tutorial é sobre gráficos e estruturas, eu gostaria de saber se vc conhece algum script ou alguma "gambiarra" para usar charsets com mais frames que o padrão do ACE? Eu já tentei o Multi-Frames do Raizen e do Victor mas ambos ficam com os gráficos cortados quando vc os coloca acima do script da Arc Engine, e quando colocamos abaixo, os gráficos não ficam cortados porém só vão até o terceiro frame do charset.

Obrigado pelo tuto.
Att.

Citação de: Hugatzell online 23/06/2015 às 13:26
Muito bom o tutorial MayLeone!

Não sei se seria o lugar certo para perguntar isso mas como o tutorial é sobre gráficos e estruturas, eu gostaria de saber se vc conhece algum script ou alguma "gambiarra" para usar charsets com mais frames que o padrão do ACE? Eu já tentei o Multi-Frames do Raizen e do Victor mas ambos ficam com os gráficos cortados quando vc os coloca acima do script da Arc Engine, e quando colocamos abaixo, os gráficos não ficam cortados porém só vão até o terceiro frame do charset.

Obrigado pelo tuto.


Att.
poxa cara eu tenho o mesmo problema ...como eu faço para fazer um personagem multi-frame no arc engine....

Citação de: Hugatzell online 23/06/2015 às 13:26
Muito bom o tutorial MayLeone!

Não sei se seria o lugar certo para perguntar isso mas como o tutorial é sobre gráficos e estruturas, eu gostaria de saber se vc conhece algum script ou alguma "gambiarra" para usar charsets com mais frames que o padrão do ACE? Eu já tentei o Multi-Frames do Raizen e do Victor mas ambos ficam com os gráficos cortados quando vc os coloca acima do script da Arc Engine, e quando colocamos abaixo, os gráficos não ficam cortados porém só vão até o terceiro frame do charset.

Obrigado pelo tuto.
Att.

Também tentei alguns scripts mas não tive sucesso, porém creio que seja possível fazer isso por eventos seguindo a mesma lógica de "animação parado" deste tutorial.

Como muitas pessoas ainda me procuram com dúvidas sobre essa parte do tutorial em específico, eu decidi re-criá-lo porém agora em vídeo, talvez agora o entendimento fique melhor, mesmo porque o vídeo tem uma programação mais simplificada e o passo-passo é mostrado com detalhes.



Pretendo criar os outros tutorais em vídeo também, além deste.

Para quem perguntou sobre multi-frames... Atualmente não encontrei nenhum script que permitisse essa possibilidade sem causar bugs ou conflitos, infelizmente.