GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

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

Qualidade GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por joaoneto em Sab 07 Fev 2009, 09:56

Começo este novo tipo de lição com uma idéia em mente: para se construir um MMORPG, são necessários mais itens do que banco de dados, conexões TCP/IP, Clients e Listeners.
Para que eu possa oferecer material de qualidade, a construção de um MMO com outros elementos se faz necessária. com isso, estarei postando neste novo tipo de lição, a GM RPG.
A vantagem é que o que será ensinado aqui pode ser usado a parte, sem a necessidade de se contruir um jogo Online. Vamos lá.

Talvez uma das maiores dificuldades de se construir um RPG no GM vem exatamente do movimento dos chars. Se quisermos fazer jogos no Estilo Final Fantasy antigos, até não, mas jogos mais complexos, com chars isometricos, movimento de mouse, entre outros elementos sempre parece complicado demais. Seria, se não houvesse o GML para nos auxiliar !!

Antes de mais nada o char. Eu estarei usando como exemplo este char:

Qual a peculiaridade dessa imagem? a menina possui 8 direções. Sim, basta replicar as tres ultimas linhas e inverter. é trabalhoso, por isso eu vou dar o char dela já na forma como será usado na lição, para que você tenha idéia de como fazer os seus depois Happy.
Para facilitar a minha vida eu construí um aplicativo em .Net para montar as posições na ordem que eu preciso. Com certeza se eu terminar o aplicativo eu posto ele também:

e no final nossa imagem ficará assim:

Você pode tentar montar esta mesma sequência usando o Sprite Editor do GM. é um pouco mais trabalhoso mas dá.
Agora, crie um projeto novo no GM(6 ou 7), Adicione um Sprite. na tela do sprite Criado, chame-o de menina.
Clique no botão Edit Sprite. Na nova tela, vá no menu, Clique em File e em Create From Strip, Como na imagem:

Selecione nossa imagem da menina. Coloque as dimensões de 64x64(o tamanho de cada quadro) e divida por 33, como na imagem:

Você deve estar se perguntando porque 33. Sim, o ultimo quadro deve ficar em branco, para que a nossa contagem no código dê certo. feito isso, sua tela deve estar assim:

No final, centralize o char, e coloque a posição Y quase nos pés do char, como na figura:

Este passo acima é muito importante, ou o char não irá andar como se deve e nem parar aonde se clicou.
A parte fácil já foi. Agora vem a um pouco mais fácil. Happy

Crie um Objeto, e o chame de chrMenina. Adicione dois eventos, um Create e um Step. No evento Create, Coloque este código:
Código:
facing=0;
direcao=8;
velocidade=0.2;
moving=0;
target_x = x
target_y = y
image_speed = 0;
image_index = direcao;
Estas serão as variáveis usadas pelo movimento, e já setamos alguns parâmetros do nosso objeto.
O pulo do gato vem agora.
Como fazer para, ao clicar com o mouse, o char ande, até aonde se clicou,
olhando na direção que ele está andando, e ao não se clicar em nada, ele fique parado??

Usaremos alguns comandos do GML, combinado com nossas variáveis, algo bem simples. Primeiro, verificamos se houve o clique e logo após o release:
if mouse_check_button_released(mb_right)
Se sim, setamos as variáveis de posição:
target_x = round(mouse_x)
target_y = round(mouse_y)

Estaremos usando Round pois o GML acaba pegando valores decimais quando se recupera a posição do mouse, e precisaremos de uma posição
mais precisa. Após isso, fazemos uso do comando point_direction para descobrirmos a direção relativa do clique em relação ao nosso objeto:
facing = round(point_direction(target_x,target_y,x,y)/45)
Com isso, encontraremos um numero entre 0 e 8, apontando para a direção. Porém o 8 sai fora da nossa matriz de imagens, aí fazemos uma correção:
if ( facing = 8 ){facing = 0}
Agora eu defino a direção: direcao = (facing * 4). Porque estou multiplicando por 4? simples, é a quantidade de quadros de animação do nosso char. Happy
Definimos a direção então e iniciamos o movimento:
image_index = direcao;
moving = 1;
}

Após tudo isso nosso código ficará assim:
Código:
if mouse_check_button_released(mb_right) {
    //Recupero X e Y do Clique do mouse
    target_x = round(mouse_x)
    target_y = round(mouse_y)
    /* Faço um calculo arredondado da posição do mouse em relação ao objeto, e defino o lado que o char vai "olhar" */
    facing = round(point_direction(target_x,target_y,x,y)/45)
    //Acerto os valores, para ficar entre 0 e 7
    if (facing = 8){facing = 0}
    /* Defino a direção. Ex: olhando para baixo é 8, e neste caso o facing retornará 2 Então: 2 * 4 = 8 -> char olhando para baixo */
    direcao = (facing * 4)
    //Defino a direção inicial
    image_index = direcao;
    //E inicio o movimento
    moving = 1
}
Agora a parte de código que realmente movimenta:
Código:
if moving = 1 {
    image_speed = velocidade;
    if (distance_to_point(target_x,target_y) > 5) {
        move_towards_point(target_x,target_y,4);
        /* Este IF verifica se a animação está dentro da quantidade de quadros certa.
        Para que a contagem fique certa, os Strips de sprites possuem um quadro em branco a mais. */
        if (image_index >= direcao + 4) {image_index = direcao;}
    }
    else{
        //Ao verificar que chegou onde se clicou, para-se o movimento.
        speed = 0;
        moving = 0;
        image_speed = 0;
        image_index = direcao;
    }
}
// Parado
else {
    image_speed = 0;
    image_index = direcao;
}
Observe que usamos o comando distance_to_point para saber se ainda não chegou na posição passada nos parametros.
Como a distancia ainda é maior que 5(este numero pode ser aumentado, não diminuido, ou o char não vai parar), usamos
move_towards_point, que faz com que o objeto se mova na direção X e Y passadas. o Macete da animação vem logo abaixo:
if ( image_index >= direcao + 4 ) {image_index = direcao;}
Com o Comando acima, eu evito que se mostre outro tipo de quadro a não ser os que estão dentro do limite da animação, para aquela direção claro.
Ao se verificar que se chegou ao ponto, apenas zeramos velocidade de animação e o index do sprite, para mostrar a posição parada do char.

Feito isso tudo, adicione uma room, coloque o chrMenina nela e teste. Lembrando que é o Clique direito do mouse, e só quando você solta o botão.
Eu sei que devem haver milhares de formas de se fazer isso, e o movimento pode ser bem mais estilizado, colocando mais parametros para se mover apenas
em determinadas situações e tal, mas veja que com algumas linhas de código e a imagem feita da forma certa, foi extremamente simples.
Lembrando que para mudar a direção inicial do char, apenas mude a variável direção no evento Create para o Indice da imagem. As principais paradas são estas:


Left: 0
Down-Left: 4
Down: 8
Down-Right: 12
Right: 16
Top-Right: 20
Top: 24
Top-Left: 28


Próxima lição: Movimento de Inimigos. Até lá.

joaoneto

Número de Mensagens : 36
Idade : 39
Data de inscrição : 08/05/2008
Reputação : 7
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://www.deploy.net.br

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por igorfelipe em Sex 20 Fev 2009, 13:44

po cara tuto muito maneiro mesmo mais como faço com esse spriter tipo sem os movimentos cima baixo tras e frente porque esse spriter so tem diagonal como faço para ela mover vlw tuto muito show.........
essa menina que apostei abaixo como faço ela mover isometrico









caso a image não aparecer click no link abaixo e baixe em png
http://img22.imageshack.us/my.php?image=111ba7.png


Última edição por igorfelipe em Sex 20 Fev 2009, 14:12, editado 1 vez(es)

igorfelipe

Número de Mensagens : 29
Idade : 23
Data de inscrição : 21/01/2009
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por joaoneto em Sex 20 Fev 2009, 14:00

igorfelipe escreveu:po cara tuto muito maneiro mesmo mais como faço com esse spriter tipo sem os movimentos cima baixo tras e frente porque esse spriter so tem diagonal como faço para ela mover vlw tuto muito show.........
essa menina que apostei abaixo como faço ela mover isometrico


caso a image não aparecer click no link abaixo
http://img22.imageshack.us/my.php?image=111ba7.png

Desculpe mas não consegui ver a imagem, me mande ela por PM, que eu vejo o que se pode fazer.
O ideal é você montar as imagens, mesmo não tendo as De diagonal, com a mesma quantidade de quadros, substituindo as diagonais pelas laterais ou Cima/Baixo.

joaoneto

Número de Mensagens : 36
Idade : 39
Data de inscrição : 08/05/2008
Reputação : 7
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://www.deploy.net.br

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por igorfelipe em Sex 20 Fev 2009, 14:35

consegui ver se sair pequena tenta salvar

igorfelipe

Número de Mensagens : 29
Idade : 23
Data de inscrição : 21/01/2009
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por igorfelipe em Sex 20 Fev 2009, 15:07

aqui pelo 4shared so baixa
http://www.4shared.com/file/88659966/62a9cd7c/111111.html?dirPwdVerified=8ac9db7

igorfelipe

Número de Mensagens : 29
Idade : 23
Data de inscrição : 21/01/2009
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por CPinheiro em Dom 22 Fev 2009, 12:06

Gostei do tutorial em geral. Mas a parte de separar os sprites ficou ruim. Tipo, acredito que fique muito mais organizado um sprite para cada direção. Sem falar que se eu seguir o seu método, acredito que seja bem mais difícil de customizar. Olha como eu faço:

Código:

//Define variáveis:
sprcima=argument0; //Sprite para cima
sprbaixo=argument1; //Sprite para baixo
spresq=argument2; //Sprite para a esquerda
sprdir=argument3; //Sprite para a direita

if direction>=45 and direction<=135
{
sprite_index=sprcima
}

if direction>=225 and direction<=315
{
sprite_index=sprbaixo
}

if direction<=225 and direction>=135
{
sprite_index=spresq
}

if direction<=45 or direction>=315
{
sprite_index=sprdir
}

E para adaptar isso para adicionar sprites dos caras andando na diagonal não é difícil.

CPinheiro

Número de Mensagens : 1015
Idade : 20
Data de inscrição : 01/06/2008
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

http://supermariobrasileiro.blogspot.com

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por joaoneto em Dom 22 Fev 2009, 14:15

CPinheiro escreveu:Gostei do tutorial em geral. Mas a parte de separar os sprites ficou ruim. Tipo, acredito que fique muito mais organizado um sprite para cada direção. Sem falar que se eu seguir o seu método, acredito que seja bem mais difícil de customizar. Olha como eu faço:

Código:

//Define variáveis:
sprcima=argument0; //Sprite para cima
sprbaixo=argument1; //Sprite para baixo
spresq=argument2; //Sprite para a esquerda
sprdir=argument3; //Sprite para a direita

if direction>=45 and direction<=135
{
sprite_index=sprcima
}

if direction>=225 and direction<=315
{
sprite_index=sprbaixo
}

if direction<=225 and direction>=135
{
sprite_index=spresq
}

if direction<=45 or direction>=315
{
sprite_index=sprdir
}

E para adaptar isso para adicionar sprites dos caras andando na diagonal não é difícil.
Programação não é regra, e sim criatividade. Se você acha a sua forma melhor de fazer, ótimo, pois a idéia é que cada um tenha mesmo a sua forma de fazer. A minha simplifica o código, mas não significa que é a correta ou a melhor de se fazer.

joaoneto

Número de Mensagens : 36
Idade : 39
Data de inscrição : 08/05/2008
Reputação : 7
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://www.deploy.net.br

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por CPinheiro em Dom 22 Fev 2009, 15:03

Eu sei, só tava tentando arrumar uma forma mais simples de se fazer mesmo. Smile
É que, tipo, se eu deletasse sem querer um frame da animação bugaria TUDO, sacas?

CPinheiro

Número de Mensagens : 1015
Idade : 20
Data de inscrição : 01/06/2008
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

http://supermariobrasileiro.blogspot.com

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por chuck em Dom 28 Fev 2010, 12:39

cara eu n entedi o tuto ficou muita bagunça

chuck

Número de Mensagens : 18
Data de inscrição : 22/02/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Qualidade Tutorial

Mensagem por afonso_silva em Ter 01 Jun 2010, 16:06

É pá, o tutorial está bom, só que eu ñ percebi como é que a animação muda conforme a direcção ou seja, o meu sprite ficou sempre com a mesma animação.

Código:
    //Recupero X e Y do Clique do mouse
    target_x = round(mouse_x)
    target_y = round(mouse_y)
    /* Faço um calculo arredondado da posição do mouse em relação ao objeto, e defino o lado que o char vai "olhar" */
    facing = round(point_direction(target_x,target_y,x,y)/45)
    //Acerto os valores, para ficar entre 0 e 7
    if (facing = 8){facing = 0}
    /* Defino a direção. Ex: olhando para baixo é 8, e neste caso o facing retornará 2 Então: 2 * 4 = 8 -> char olhando para baixo */
    direcao = (facing * 4)
    //Defino a direção inicial
    image_index = direcao;
    //E inicio o movimento
    moving = 1
}
Isso põe-se no Step?

afonso_silva

Número de Mensagens : 147
Idade : 20
Data de inscrição : 29/05/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por alexs2195 em Ter 21 Set 2010, 19:54

Se o esprite sempre fica o mesmo normalmente é um nome errado

alexs2195

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

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por shaedol em Dom 26 Set 2010, 19:26

alguem tem otro sprite com movimento isométrico?
ou aonde consegue o char?

shaedol

Número de Mensagens : 45
Data de inscrição : 21/09/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Qualidade Re: GM RPG - 1º Lição - Criando um char com movimento isométrico de RPG

Mensagem por Conteúdo patrocinado Hoje à(s) 22:17


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