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

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 .
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.

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.
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á.

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

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.

consegui ver se sair pequena tenta salvar

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

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 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.

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

cara eu n entedi o tuto ficou muita bagunça

É 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?

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

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