Como fazer um jogo de plataforma - Parte 1

    Compartilhe

    jiraya
    Administrador
    Administrador

    Mensagens : 1299
    Credibilidade : 54

    Como fazer um jogo de plataforma - Parte 1

    Mensagem por jiraya em Ter Fev 08, 2011 5:24 pm

    Por:KJr

    Eu tenho acompanhado discretamente a seção de Game Maker no fórum, e vejo muitas dúvidas básicas, muitos pedidos de tutorial, especialmente de plataforma.
    Na falta de ideias pra um projeto, resolvi fazer este tutorial, de plataforma.

    Vou explicando o máximo possível, para que sirva pra quem é pouco experiente no Game Maker.
    Vou explicar alguns comandos, apresentar funções, dar dicas e macetes (digamos, atalhos), divulgar informações nunca antes compartilhadas (não por mim).
    Facilita bastante para quem estiver lendo se tiver alguma noção de GML ou qualquer linguagem de programação, ou até eventos de RPG Maker, que seja familiar com a lógica dos jogos ... eu não vou falar o que são variáveis, como funciona o if, etc ... isso talvez fique pra outro tutorial.
    E antes de começar o tutorial, brinque um pouco com o GM, os botões, descubra como criar sprites, objetos, eventos, ações, familiarize-se com a interface.










    O tutorial é dividido em 4 partes:

    - Movimentação: como criar as "plataformas", como mover o personagem, pulos.
    - Ataques: como fazer o personagem atacar: longa e curta distância.
    - Inimigos: como fazer inimigos, capazes de sofrer dano por ataques do herói, e capaz de atacar o herói, e que possuam um mínimo de falsa inteligência artificial.
    - Cenário: como construir uma fase simples, com gráficos razoáveis, usando Tiles.

    Depois das quatro partes, você vai saber em detalhes como fazer um sistema básico de plataforma.
    Aqui o link para download do projeto no final do tutorial, o resultado: DOWNLOAD.










    Parte 1 - Movimentação

    Antes de mais nada, baixe este arquivo que contém todos os gráficos que serão usados nesta parte do tutorial.

    Agora, abra o Game Maker (eu uso o GM 7 Pro -download da versão que eu uso). Vou usar algumas funções da versão Pro, então é bom usar a mesma versão que eu uso.
    Se você não usa o modo Avançado, passe a usar agora. Vá no menu File e marque a opção Advanced Mode.

    Vamos criar nosso primeiro sprite, o herói. Crie um novo sprite, dê o nome de spr_player, clique em Load Sprite e carregue a imagem spr_player.png, dos arquivo que eu baixei.

    Obs.: Os nomes dos arquivos são os mesmos dos sprites do jogo, então não vou citar os nomes de arquivo daqui em diante.



    Se tudo deu certo, você tem ums sprite de 4 frames (quadros de animação), 64x64. Clique no botão Center para centralizar as coordenadas de origem do sprite.

    Para essa primeira parte, só será necessário o jogador e a "plataforma", onde ele pode andar.

    Portanto, crie outro sprite, clique em Edit Sprite. Clique duas vezes na figura para abrir o editor de imagens do GM. Não faça nada, apenas dê OK, duas vezes.



    Você está novamente na janela de propriedades do sprite. Clique em Center, como da outra vez (crie o hábito de clicar nesse botão), e desmarque a caixa Transparent. Dê o nome de spr_block.

    Dê OK nos dois sprites (o herói e um quadrado verde). Agora é uma boa hora para salvar o projeto, se você ainda não fez isso (Ctrl + S).

    Terminados os sprites dessa parte, vamos criar o primeiro objeto, a plataforma.

    Crie um objeto com nome de block e marque a caixa Solid. Selecione o spr_block como sprite desse objeto. Dê OK.
    A única coisa que esse objeto faz é ser sólido. Simples assim. A parte complicada fica no herói.

    Crie um objeto com nome de player, e escolha o spr_player para ele.
    Adicione o evento Create, e uma ação Execute a piece of code (fica na aba Control).

    Obs.: Como vou fazer tudo usando GML, você vai sempre usar essa ação, então não vou repetir sempre.



    O evento Create é executado quando o objeto é criado, portanto aqui iremos definir as variáveis que usaremos depois, definir o estado inicial do objeto.

    Coloque este código:
    Código:
    Código:
    [font=Courier New]direita = true
    noChao = false[/font]

    Os nomes já se explicam sozinhos, mas a variável direita indica se o herói está olhando ou não para a direita.
    Já a variável noChao indica se o herói está ou não em uma plataforma.
    Aqui, um pequeno macete, digamos assim. Em GML, true vale 1, e false vale 0. Pra ser mais preciso, em GML, qualquer valor menor ou igual que 0 é FALSO, e qualquer valor maior que 0 é VERDADEIRO.
    Então, substitua o código acima por esse:
    Código:
    Código:
    [font=Courier New]direita = 1
    noChao = 0[/font]

    Mais rápido de digitar, e algumas facilidades na hora de programar.

    Agora, adicione o evento Step. O evento Step ocorre a cada frame, isto é, o tempo todo.
    Aqui vamos fazer com que, ao apertar as teclas direcionais, o jogador faça o personagem se mover horizontalmente, e depois, pular.

    Antes do código em si, preciso falar da função keyboard_check(tecla). Ela retorna verdadeiro se a tecla em questão está sendo pressionada.
    Para identificar as teclas existem constantes que começam por vk_(virtual key), ou a função ord(letra) para as letras do teclado. O Help do GM tem uma lista completa das constantes. Agora usaremos apenas vk_right e vk_left (teclas direcionais para direita e esquerda).

    Código:
    Código:
    [font=Courier New]if keyboard_check(vk_right) {
    direita = 1 //true
    x += 5
    image_speed = .3
    } else if keyboard_check(vk_left) {
    direita = -1 //false
    x -= 5
    image_speed = .3
    } else {
    image_index = 0
    image_speed = 0
    }[/font]


    O que foi feito é o seguinte:
    - Caso a tecla para a direita esteja sendo pressionada:
    - define direita como 1 (true);
    - move o objeto para a direita, alterando a coordenada X em um valor positivo (+5);
    - define image_speed como 0.3;
    - Caso a tecla para a esquerda esteja sendo pressionada:
    - define direita como -1 (false);
    - move o objeto para a esquerda, alterando a coordenada X em um valor negativo (-5);
    - define image_speed como 0.3;
    - Caso nenhuma das duas esteja pressionada, define image_speed e image_index como 0.

    Importante mencionar que image_speed controla a velocidade de animação, e image_index indica o quadro atual da animação do sprite.
    Do jeito que foi feito, o código garante que o sprite só "mexa os pés para andar", quando você estiver andando ... é mais fácil de entender quando você vê a coisa funcionando.

    Agora, vamos adicionar a gravidade no jogo.
    O princípio é o seguinte: se não houver nada sólido abaixo do herói, a gravidade acelera o herói para baixo, na vertical. Se houver algo sólido embaixo do herói, a gravidade pára.
    Como a gravidade pode atuar a qualquer momento do jogo, vamos fazer isso no evento Step.

    Embaixo do código que já tem no evento Step, coloque mais isso:

    Código:
    Código:
    [font=Courier New]if place_free(x,y+1) {
    gravity = .5
    noChao = 0
    } else {
    gravity = 0
    noChao = 1
    }[/font]

    A função place_free checa exatamente o que nós queríamos: se existe ou não um objeto sólido na coordenada especificada, nesse caso o X do herói, e o Y do herói mais 1, isto é, logo abaixo dele.
    Então, o código acima faz exatamente o que falamos antes, "ativa" a gravidade caso não tenha nada abaixo do herói, e "desliga" caso contrário.
    Além disso, ele define a variável noChao, que criamos antes, assim podemos usar essa variável para saber, a qualquer momento, se o herói está ou não "no chão", apoiado em uma plataforma.

    Mais uma coisa para que o sistema de "plataformas" funcione: caso o herói bata em uma plataforma, por cima, ele precisa "parar de cair".

    Simplesmente adicione o evento Collision > block, e coloque assim:
    Código:
    Código:
    [font=Courier New]vspeed = 0[/font]


    Isso zera a velocidade vertical do herói, causando o efeito que queríamos.

    Você pode testar o jogo agora, só pra ver o progresso. Crie uma room, coloque alguns blocos e o herói acima deles. Aperte F5 para testar.

    Você deve ter notado alguns problemas. O herói meio que "trava" na hora de andar e nunca olha para a esquerda.

    Antes de prosseguir, vamos corrigir estes dois problemas.

    Para o herói parar de travar, duas soluções: criar um sprite para servir como máscara de colisão (o efeito fica melhor, mas dá mais trabalho) ou editar as propriedades do sprite (simples e rápido).
    Vá no sprite do herói, spr_player, e desmarque a caixa Precise collision check. Pronto. Agora as colisões são feitas como se o sprite fosse um retângulo.

    Segundo problema, ele não olha para a esquerda. Hora de falar de um outro evento: Draw.
    O evento Draw é onde o sprite do objeto é desenhado. Você pode redefinir o evento, mas se não fizer isso, ele desenha o sprite.

    Nós vamos redefini-lo. Agora ele vai desenhar o sprite, mas levando em conta o fato de o herói estar ou não olhando para a direita.

    A função que desenha sprites é essa (versão Pro apenas):
    draw_sprite_ext(nome do sprite,quadro da animação,X,Y,xscale,yscale,rotação,cor,alpha)
    nome do sprite - bem, o nome do sprite a ser desenhado
    quadro da animação - o quadro da animação a ser desenhado, na animação padrão é o image_index de que falei antes
    X,Y - onde desenhar
    xscale,yscale - tamanho horizontal, vertical (valores negativos desenham o sprite "espelhado")
    rotação - rotação em graus (não vamos usar agora)
    cor - cor (pode-se usar para efeitos, o padrão é branco: c_white)
    alpha - transparência, entre 0 e 1

    Então, o evento Draw do objeto player fica assim:
    Código:
    Código:
    [font=Courier New]if direita {
    draw_sprite_ext(spr_player,image_index,x,y,1,1,0,c_white,1)
    } else {
    draw_sprite_ext(spr_player,image_index,x,y,-1,1,0,c_white,1)
    }[/font]

    Assim, ele verifica se o herói está olhando para a direita, e se sim, desenha o sprite com xscale valendo 1. Senão, usa xscale como -1, o que vai inverter o sprite horizontalmente, fazendo ele "olhar para a esquerda".

    Alguém com alguma noção de programação já deve ter percebido um atalho para esse código, em uma única linha.
    Note que o valor que eu uso para xscale quando ele olha para a direita, é 1, que é exatamente o valor da variável direita nesse caso (olhe o evento Step).
    Note também que o valor para xscale quando ele olha para a esquerda, isto é, quando direita é falsa, é -1, que, de novo, é exatamente o valor da variável direita nesse caso (olhe o evento Step).

    Então, para o mesmo efeito, substitua todo o evento Draw por isso:
    Código:
    Código:
    draw_sprite_ext(spr_player,image_index,x,y,direita,1,0,c_white,1)


    Agora usamos a variável direita no valor de xscale.

    Teste o jogo agora, o efeito é melhor, e dará uma motivação extra para ir até o final desta parte do tutorial. Só falta fazer o herói pular.
    Vamos lá, aperte F5 e veja.

    O pulo. Já vimos a existência de vspeed, que controla a velocidade vertical do herói. Vamos usá-la para fazê-lo pular.
    Faremos assim: se o herói estiver no chão (ele não pode pular sem apoio) e a tecla para cima for pressionada, ele pula.

    Voltemos ao evento Step. Embaixo do que já está lá, coloque isso:
    Código:
    Código:
    if noChao && keyboard_check(vk_up) {
    vspeed = -8
    }


    Simples. Se as condições (no chão e apertou tecla) forem atendidas, definimos a velocidade vertical com -8 (negativo, para cima no plano cartesiano).
    Assim que ele não tiver mais nada sólido abaixo dele, a gravidade começa a trabalhar e traz ele para baixo.

    Obs.: && representa o E (condição A E condição B - A && B).
    || representa OU (condição A E condição B - A || B).
    ! representa NÃO (condição A E condição B - A && !B).

    Só pra ficar mais interessante, vamos fazer com que o sprite do herói mude caso ele esteja pulando.

    Crie um novo sprite, chamado spr_player_jump. Use Load Sprite para carregar o arquivo.

    Agora no evento Draw, coloque a condição de que, se o herói estiver pulando, ou seja, não estiver no chão, o sprite desenhado não é o sprite spr_player, e sim o spr_player_jump.

    Vou deixar isso como desafio. A resposta vem no início da próxima parte do tutorial.
    Você também pode tentar fazer o herói se mover mais rápido, mais devagar, pular mais alto ou mais baixo, como exercício.










    Chegamos ao final, o herói se move e pula, como anunciado no início. Teste seu jogo, sinta-se orgulhoso.

    Eu sei que parece muito trabalho, um tutorial enorme só pra "mexer o bonequinho na tela".
    Quanto a isso, quando você começar a fazer as coisas você mesmo, com seus sprites, suas ideias, fica mais divertido.

    Dúvidas, comentários, sugestões, elogios, críticas, opiniões ... postem aí, ou mandem PM, muito provavelmente vou responder.

    Até a próxima parte, com tiros e pancadaria.

      Data/hora atual: Qua Dez 07, 2016 7:25 am