Graças ao leitor Otávio Ortiz, temos o primeiro Leitor no Controle de 2012. Expert no assunto, Otávio traz dicas de como montar um game side scrolling utilizando o engine Game Maker, que aliás recentemente ganhou uma nova versão compatível com HTML5.

Reforço que os demais leitores podem – e devem, seguir o exemplo do Otávio enviando o seu artigo ou tutorial para contato@abrindoojogo.com.br

Como fazer o efeito side scrolling no game maker

E é isso, agora é só executar e ver a câmera seguindo o seu objeto,  este efeito é conhecido com side scrolling. Espero ter ajudado, um abraço a todos e qualquer sugestão utilize os comentários. Para dúvidas sobre esta técnica ou qualquer outra, utilizem o fórum  do AoJ, lá tem um área só sobre Game Maker a qual sou moderador. Até

Otávio Ortiz

Veremos como separar a lógica do jogo da renderização, fazendo a lógica rodar a uma taxa fixa (e baixa) e atualizando a tela o mais rápido possível. Embora esta seja uma técnica genérica, útil em qualquer tecnologia, é especialmente aplicável em jogos HTML onde o ideal é atualizar a lógica do jogo mais lentamente.

Continuaremos com o exemplo da parte anterior, sendo que os arquivos aojcanvas.js e aojinput.js permanecem inalterados. Nossa maior modificação não será no motor em sí, mas na própria página do jogo, onde temos a divisão do pulso em update() e render().

No entanto o motor recebe uma pequena modificação. Iniciaremos por ela.

Substituindo setInterval por setTimeout

Na conclusão da parte anterior, comentei sobre um problema que pode afetar o jogo caso a lógica demore muito para executar. No caso, o problema ocorre se a lógica levar mais tempo para executar do que o esperado para cada pulso.

Imagine que o pulso está agendado (com setInterval) para ser chamado a cada 50 milisegundos, mas por algum motivo nossa lógica leva 60 milisegundos. Ela ainda vai estar executando quando for disparado um novo pulso, iniciando novo processamento da lógica do jogo. Isso gera duas execuções em paralelo, diminuindo ainda mais a performance, piorando o prolema.

Para resolver isso, trocamos o uso de setInterval por setTimeout. A diferença entre elas é a seguinte:

• setInterval agenda chamadas contínuas para a rotina informada. Ou seja, fica chamando a rotina automaticamente a cada X milisegundos.
• setTimeout agenda apenas um execução da rotina. Ou seja, chama a rotina daqui a x milisegundos e só. Para executar a rotina novamente, precisamos agendar com um novo setTimeout.

A mudança que faremos, então, consiste em trocar a chamada de setInterval presente em aojStartGameLoop(), como também adicionar uma chama semelhante dentro de aojPulse. Veja abaixo.

function aojStartGameLoop() {
       ... // mesmo código de antes
       setTimeout('aojPulse()', 0); // trocamos setInterval por setTimeout
       // isso vai chamar aojPulse apenas uma vez, então dentro dela precisamos de outros setTimeout
}
 
function aojPulse() {
        ... // mesmo código de antes
        setTimeout('aojPulse()', 0); // adicionamos uma chamada a setTimeout - a cada pulso agendamos outro
    }
}

Bem, se você tiver prestado atenção, percebeu que o código acima não é exatamente equivalente ao que tínhamos antes. Estamos passando zero milisegundos para o setTimeout, o que faz com que a próxima execução seja agenda para imediatamente – ou, na prática, para tão logo seja possível. Ou seja, não respeitamos mais o limite de FPS informado, rodando, ao invés disso, na velocidade máxima possível.

Se colocarmos esse game loop nos exemplos anteriores, sem modificá-los, teremos a ação deles acelerada, porque neles a lógica roda a cada pulso, sem nenhum filtro. Mas a modificação que faremos nos exemplos dará conta disso.

Separando update() e render()

Vamos lembrar como era a relação entre nosso pulso e as rotinas update() e render() no exemplo anterior.

function pulse() {
    update();
    render();
}
 
function update() {
    ... // lógica do jogo
}
 
function render() {
    ... // atualiza a imagem na tela
}

Não poderia ser mais simples. A cada pulso executamos um update e um render. Vejamos agora o que muda. O código está abaixo e logo após a explicação.

var _lastMilisecond = 0;
var _updatesCount = 0;
var _updatesInLastSecond = 0;
var _lastUpdateMilisecond = 0;
var _frameCount = 0;
 
function pulse() {
    var d = new Date();
    if (d.getTime() - _lastMilisecond > 50) {
        _lastMilisecond = d.getTime();
        update();
        _frameCount = 0;
    }
    _frameCount ++;
    render(_frameCount / (_aojPulsesInLastSecond / _updatesInLastSecond));
}
 
function update() {
    _updatesCount ++;
    var d = new Date();
    if (d.getTime() - _lastUpdateMilisecond > 1000) {
        _lastUpdateMilisecond = d.getTime();
        _updatesInLastSecond = _updatesCount;
        _updatesCount = 0;
    }
    ... // lógica do jogo
}

Vamos analisar a rotina pulse() primeiro. Em linhas gerais, agora ela executa update() a cada x milisegundos e executa render() sempre, ou seja, a cada pulso. O filtro para update é feito com o seguinte algoritmo:

1. A cada pulso é obtido o tempo atual;
2. Se a diferença entre o tempo atual e o tempo armazenado anteriormente (_lastMilisecond) for maior do que 50 milisegundos:
   1. Armazenamos o tempo atual em _lastMilisecond;
   2. Zeramos _frameCount (explicada abaixo);
   3. Chamamos update();

O efeito disto é que update() é chamado a cada 50 milisegundos. Ignorei a rotina de informar o FPS desejado e utilizei o valor fixo 50, mas poderia ter feito algo configurável. Executando um update a cada 50 milisegundos terei 20 updates por segundo. Na realidade, teremos um pouco menos, porque a estes 50 milisegundos somamos o tempo de execução da própria rotina update().

O código colocado dentro da rotina update é comum e serve para contar quantas vezes por segundo ela é chamada. É o mesmo código que tínhamos dentro de aojPulse() no exemplo anterior.

A variável _frameCount serve para contar quantos frames (que nesse caso são iguais a pulsos) ocorrem entre duas chamadas de update. Por isso é zerada quando ocorre um update e a partir daí vai sendo incrementada a cada pulso.

Veja no gráfico abaixo como se comporta essa variável. Vamos assumir que a duração aqui seja 1 segundo, ou seja, temos 20 pulsos por segundo. As linhas vermelhas mostram os pulsos onde update é chamado (aqui temos apenas 4 updates por segundo, para simplificar).

Já a chamada de render é feita sem nenhum controle, ou seja, é chamada em todos pulsos. E veja que ela recebe um valor como parâmetro. Vejamos o que ele significa.

Esse valor é calculado da seguinte forma: primeiro a quantidade de pulsos ocorridos no último segundo é dividida pela quantidade de updates no mesmo período. Na figura acima, que representa 1 segundo, ocorreram 20 pulsos e 4 updates. Então temos 20/4 = 5.

Esse número (5) é a quantidade de pulsos que ocorre entre dois updates – e vem a ser a quantidade de vezes que render() é chamada entre dois updates.

Para completar o valor do parâmetro de render, dividimos o valor de _frameCount pela quantidade de pulsos entre dois updates, de forma a obter um valor normalizado entre 0 e 1. Por exemplo, quando _frameCount é 1, teremos 1/5 = 0.2; quando _frameCount é 2, teremos 2/5 = 0.4; quando _frameCount for 5, teremos 5/5 = 1. Veja na figura abaixo.

Interpolação

A interpolação consiste em obter valores intermediários entre dois valores conhecidos. Por exemplo, dados os valores 10 e 20, se fizermos a interpolação entre eles com três passos, teremos os valores (12.5, 15.0, 17.5). Se fizermos com 7 passos teremos (11.25, 12.5, 13.75, 15.0, 16.25, 17.5, 18.75).

Nosso objetivo aqui é interpolar as posições dos nossos sprites de forma a gerar posições intermediárias que não são calculadas pelo update. Por exemplo, digamos que no último update ocorrido nosso sprite tenha ficado na posição x=150 e no próximo update, ele vá para a posição x=180. Se nada for mudado em render, veremos nosso sprite saltar diretamente da posição 150 para a 180.

Lembre-se que entre estes dois updates tivemos (conforme a figura acima) 5 chamadas a render. Se não tivermos interpolação implementada, o que ocorre é que as cinco chamadas vão mostrar o sprite na posição 150, até que ocorre o próximo update e a posição muda para 180 – e os próximos cinco render mostrarão ele na posição 180, e assim por diante.

Com a interpolação, no entanto, calcularemos dentro de render posições intermediárias. Sabemos que são 5 render entre os updates. Assim, o primeiro render deverá mostrar o sprite a 1/5 (0.2) do caminho entre 150 e 180; o segundo update mostrará a 2/5 (0.4) do caminho; e o quinto mostrará a 5/5 (1.0) do caminho, ou seja, bem no 180.

Os valores 0.2, 0.4, etc, como vimos, são aqueles passados para render no parâmetro, que chamaremos de delta. Como usamos esse delta para afetar o x do sprite? Basta multiplicar o delta pela distância entre as duas posições (180 – 150 = 30) e somar na primeira posição (150).

Ou seja, a fórmula é essa: x = x1 + (x2 – x1) * delta, onde, no exemplo, x1=150, x2=180 e delta = 0.2, 0.4, 0.6, etc.

Os valores de x serão assim:

1. Primeiro update
   x = 150 + (180-150) * 0.2;
   x = 150 + 30 * 0.2;
   x = 150 + 6;
   x = 156;
2. Segundo update
   x = 150 + 30 * 0.4;
   x = 150 + 12;
   x = 162;
3. Terceiro update
   x = 150 + 30 * 0,6;
   x = 150 + 18;
   x = 168;
4. Quarto update
   x = 150 + 30 * 0,8;
   x = 150 + 24;
   x = 174;
5. Quinto update
   x = 150 + 30 * 1,0;
   x = 150 + 30;
   x = 180;

Veja como este recurso é poderoso: ele nos permitiu mostrar o sprite em 6 posições diferentes (150, 156, 162, 168, 174 e 180), embora a lógica do jogo tenha calculado apenas duas (150 e 180). Isso nos permite rodar o jogo a uma baixa taxa de updates, mas mostrar uma animação suave, tanto mais suave quantos forem os frames entre os updates.

Quanto melhor o desempenho do computador do jogador, mais vezes render vai ser chamada entre os updates e assim mais passos teremos em nossa interpolação, melhorando a animação.

Vejamos, então, como ficou o código da rotina render:

function render(delta) {
     aojFillRect(0, 0, aojCanvas().width, aojCanvas().height, 'gray');
     var x = carro.lastX + ((carro.x - carro.lastX) * delta); // x = x1 + (x2-x1) * delta
     var y = carro.lastY + ((carro.y - carro.lastY) * delta);
     aojDrawImage(carro.sprite, x, y);
     aojFillRect(57,5,50,20, 'blue');
     aojSetFont('');
     aojDrawText(_updatesInLastSecond + ' tps', 65, 20, 'yellow');
}

Mas que atributos são esses: “lastX” e “lastY”? Bem, estes são atributos adicionados ao sprite para armazenar a posição anterior dele – afinal, agora precisamos de duas posições para fazer a interpolação. Sempre que update muda o valor de x, armazena o anterior em lastX. Veja abaixo o código completo de update:

function update() {
      _updatesCount ++;
      var d = new Date();
      if (d.getTime() - _lastUpdateMilisecond > 1000) {
           _lastUpdateMilisecond = d.getTime();
           _updatesInLastSecond = _updatesCount;
           _updatesCount = 0;
      }
      carro.lastX = carro.x;
      carro.lastY = carro.y;
      carro.x += carro.dx;
      carro.y += carro.dy;
      if (carro.x < 0 || carro.x > aojCanvas().width) {
           carro.dx *= -1;
      }
      if (carro.y < 0 || carro.y > aojCanvas().height) {
           carro.dy *= -1;
      }
}

Está implementada assim a interpolação da posição do sprite entre updates, criando um movimento mais suave e contínuo do que tínhamos no exemplo anterior.

Conclusão

Como dito no início deste post, a interpolação é uma técnica genérica, que pode ser utiliza em qualquer motor para melhorar a aparência do movimento dos sprites. Mas é especialmente bem vinda em jogos para navegadores, já que o desempenho do javascript ainda não é tão alto. Assim, é bom podermos rodar o jogo a uma taxa de atualização mais baixa, dando mais tempo para a lógica dentro de update ser executada, sem, no entanto, ter a animação prejudicada.

Uma coisa interessante de notar nessa técnica é que o que vemos na tela está sempre um passo atrás da lógica do jogo. Veja vem: quando o update coloca o sprite na posição 180, recém inicia a apresentação dele entre 150 e 180. Quando ele chegar no 180, já teremos outro update que colocará o sprite mais para frente, digamos x=210. Agora o render vai interpolar entre 180 e 210.

Isso não causa nenhum problema visível na maioria dos jogos, mas naqueles cuja ação é muito rápida (geralmente shooters), poderão ser percebidas discrepâncias com relação aos controles – afinal, o input está sendo processado pelo update, levando em conta a posição atual, enquanto o render vem atrás, interpolando a partir da posição anterior.

Nesses casos extremos não podemos usar a posição atual com relação à anterior. É preciso, de alguma forma, usar a posição atual com relação à próxima, que ainda não foi calculada! Para isso usamos a extrapolação ao invés da interpolação – basicamente é seguir o calculo da interpolação passando do valor de destino. Mas essa já é outra história. Fica como lição de casa…

• Visualizar o exemplo do game loop
• Visualizar o exemplo de input
• Baixar o código fonte do exemplo

Nesta segunda parte ampliaremos nossa biblioteca adicionando um motor simples, com um gameloop bem básico e tratamento de entrada (mouse e teclado).

Na parte anterior criamos um biblioteca básica para utilização do <canvas>, a qual ficou em um arquivo chamado aojcanvas.js. As rotinas dela servem de atalhos para procedimentos que requerem mais de uma linha de código, como desenhar um retângulo preenchido ou desenhar uma imagem rotacionada na tela.

No entanto isso tudo referia-se apenas ao uso básico do objeto canvas, sem nada que lembrasse um jogo de fato.

A arquitetura comum de um jogo sempre consiste em uma repetição onde temos o tratamento da entrada, atualização da lógica do jogo e atualização da parte visual (mostrar o jogo na tela). Estes procedimentos ficam sendo repetidos indefinidamente, até que o jogo seja desligado. A esta repetição chamamos de game loop e cada volta que este loop dá chamamos de pulso.

Dito isso, vejamos como criar um game loop em javascript para rodar no navegador.

Game loop

O nosso “motor”, por assim dizer, ficará em um arquivo chamado aojgame.js e nele teremos o código abaixo.

var _aojFPS = 25;
var _aojPulseCallback = null;
var _aojPulsesCount = 0;
var _aojPulsesInLastSecond = 0;
var _aojLastMilisecond = 0;
 
function aojFPS(optionalNewValue) {
    if (optionalNewValue) {
        _aojFPS = optionalNewValue;
    }
    return _aojFPS;
}
 
function aojSetPulseCallback(callbackFunction) {
    _aojPulseCallback = callbackFunction;
}
 
function aojStartGameLoop() {
    if (!_aojPulseCallback) {
        alert('É preciso especificar a função a ser chamada a cada pulso, com aojSetPulseCallback. GameLoop não iniciado.');
    } else if (!_aojCanvas) {
        alert('É preciso especificar o canvas a ser usado, com aojSetCanvas. GameLoop não iniciado.');
    } else {
        _aojLastMilisecond = new Date().getTime();
        setInterval('aojPulse()', 1000 / _aojFPS);
    }
}
 
function aojPulse() {
    if (_aojPulseCallback) {
        _aojPulsesCount ++;
        var d = new Date();
        if (d.getTime() - _aojLastMilisecond > 1000) {
            _aojLastMilisecond = d.getTime();
            _aojPulsesInLastSecond = _aojPulsesCount;
            _aojPulsesCount = 0;
        }
        _aojPulseCallback();
        aojFillRect(6,5,50,20, 'blue');
        aojSetFont('');
        aojDrawText(_aojPulsesInLastSecond + ' fps', 10, 20, 'yellow');
    }
}

Temos apenas quatro rotinas, sendo as duas primeiras apenas de configuração.

aojFPS() serve para indicar qual a taxa de frames por segundo desejada para o jogo. Importante notar que este motor simples não tem separação entre update e render – ele chama apenas uma rotina de pulso.

O nome da rotina de pulso é definido por você, fora do motor, e passado como parâmetro para a segunda rotina de configuração que temos: aojSetPulseCallback().

Callback é como chamamos a técnica de, ao chamar uma rotina (geralmente de uma biblioteca), passar para ela uma rotina nossa para que seja chamada de volta (daí o nome call back). No caso deste nosso motor, a rotina informada em aojSetPulseCallback será chamada a cada pulso.

A terceira rotina do código acima é aojStartGameLoop(), que verifica se temos um callback e um canvas especificados e em caso positivo, utiliza o método setInterval (padrão do Javascript) para agendar a execução do método aojPulse a cada X milisegundos.

X, neste caso, equivale a 1000 dividido pela taxa de FPS informada, resultado no tempo de duração de cada pulso. Por exemplo, se informamos 20 FPS, X será 1000/20 = 50 milisegundos. Ou seja, ocorrerá um pulso a cada 50 milisegundos para manter a taxa de 20 por segundo.

Note que não é a nossa rotina de callback que é passada para o setInterval, mas sim outra rotina, interna ao motor, chamada aojPulse(). De dentro de aojPulse é que é chamada nossa callback.

Isso é feito assim porque o motor tem algumas ações a serem feitas a cada pulso, além de chamar nossa rotina própria. Estas ações consistem em calcular a taxa real de frames por segundo e mostrar essa informação na tela.

A contagem de pulsos é feita da seguinte maneira (conforme podemos ver no código de aojPulse):

1. A cada pulso incrementamos um contador (_aojPulsesCount);
2. A cada pulso obtemos o tempo atual e verificamos sua diferença para o tempo armazenado anteriormente (_aojLastMilisecond). Se a diferença é maior que 1000, ou seja, se 1 segundo se passou, então:
   1. Armazenamos o tempo atual em _aojLastMilisecond;
   2. Armazenamos a quantidade de pulsos contada pelo contador na variável _aojPulsesInLastSecond;
   3. Zeramos nosso contador, reiniciando a contagem para o próximo segundo.

Veja que após fazer isso, a rotina aojPulse chama a callback (que vai executar a lógica do jogo) e depois mostra o valor de _aojPulsesInLastSecond na tela com aojDrawText.

Usando o game loop

Para usar este game loop, criamos uma página HTML e inserimos os dois scripts que temos até agora:

<script src="aoj/aojcanvas.js"><!--mce:0--></script>
<script src="aoj/aojgame.js"><!--mce:1--></script>

E dentro da tag <body> declaramos a tag <canvas> com o ID que desejarmos (no exemplo abaixo usei “canvas” mesmo).

Se tiver dúvidas sobre isso, reveja a primeira parte do tutorial.

Na página HTML declaramos também uma seção de script para a lógica específica do nosso jogo. Veja o exemplo abaixo (que está disponível dentro do ZIP no final do post).

        <script type="text/javascript"><!--mce:2--></script>

Vamos analisar este código. Inicia com a declaração de um objeto chamado carro, que contém variáveis utilizadas para manter a posição e a direção de movimento de um sprite na tela.

Em seguida vem uma rotina chamada pulse(). Esta é nossa rotina de callback, que será chamada pelo motor. Dentro dela chamamos duas outras, update() e render(), que utilizamos para separar a lógica da parte de desenho na tela.

Dentro de update temos o código clássico para mover o objeto, fazendo ele rebater nas extremidades da tela. Cada coordenada do carro (x e y) são incrementadas com seu incremento correspondente (dx e dy). Quando atingem o limite da tela, dx (ou dy) tem o sinal invertido e o movimento naquela direção se inverte. Assim temos o efeito de rebater no canto da tela.

Dentro de render() limpamos a tela com aojFillRect() e desenhamos o sprite com aojDrawImage(). O sprite é desenhado na posição (x, y) armazenada no objeto carro.

O próximo código do script é a definição de uma função para ser chamada no evento onload da janela. Nela utilizamos aojNewImage() para carregar a imagem do carro. Lembre-se que esta rotina recebe uma outra como callback, que será chamada quando a imagem for completamente carregada. Nossa rotina de callback para esse caso é imagemCarregada() (a última do script).

Dentro de imagemCarregada() temos o código de inicialização, que consiste em informar o FPS desejado, a callback do pulso, o canvas a ser utilizado e finalmente dar o start no game loop.

Importante notar como essa inicialização não é feita no onload da janela, mas sim após a imagem carregar. Sempre precisamos primeiro carregar as imagens (e outros recursos) do jogo antes de colocar ele para rodar. Isso evita que o game loop começe, eventualmente chamando render() que tentaria desenhar o sprite que ainda não teria sido carregado.

Veja esse exemplo em execução aqui.

Entrada com teclado e mouse

Passamos para a parte de input. Os navegadores expõem alguns eventos em Javascript para obtermos acesso ao teclado e mouse (em breve teremos para controles de jogo também). Estes eventos são:

• document.onkeydown, chamado sempre que uma tecla é pressionada. Neste evento vamos armazenar o código da tecla pressionada em uma variável;
• document.onkeyup, chamado quando uma tecla é solta. Neste evento limparemos a variável que tinha o código desta tecla.
• document.onmousedown, quando o botão esquerdo do mouse é pressionado. Neste evento armazenaremos essa informação em uma variável;
• document.onmouseup, quando o botão do mouse é solto. Neste evento limparemos a variável acima;
• document.onmousemove, ocorre quanto o mouse se move. Neste evento vamos atualizar duas variáveis que armazenarão a posição X e Y do mouse.

Veja que quando ocorrem os eventos acima, não executamos nenhuma lógica de jogo. Ao invés disso, armazenamos as mudanças de estado das teclas em variáveis. Estas variáveis serão depois acessadas em nosso update, para saber o estado de determinadas teclas.

Para armazenar o estado das teclas (solta ou pressionada), ao invés de um monte de variáveis soltas teremos um array com 6 posições. Armazenaremos as setas, um botão de ação e o botão do mouse.

Para saber em qual posição do array está cada informação, definimos algumas variáveis da seguinte forma:

var AOJ_KEY_UP = 0;
var AOJ_KEY_DOWN = 1;
var AOJ_KEY_LEFT = 2;
var AOJ_KEY_RIGHT = 3;
var AOJ_KEY_ACTION = 4;
var AOJ_MOUSE = 5;
var _aojKeys = new Array();

A posição do mouse é armazenada em um objeto chamado _aojMousePos que contém as propriedades x e y.

var _aojMousePos = {
    x:0,
    y:0
};

Para facilitar o uso, criamos rotinas para retornar o estado das teclas e posição do mouse. São elas:

function aojIsPressed(key)
{
    return _aojKeys[key];
}
 
function aojIsReleased(key)
{
    return !_aojKeys[key];
}
 
function aojMouseX() {
    return _aojMousePos.x;
}
 
function aojMouseY() {
    return _aojMousePos.y;
}

Estas rotinas apenas retornam o valor armazenado no array. Quem modifica este valor são as rotinas dos eventos listados acima. Sua implementação completa é simples e pode ser vista no arquivo aojinput.js que está no ZIP no final do post.

Utilizando o input

No ZIP temos também uma página HTML que utiliza o teclado para controlar o sprite do carro. O código da página é igual ao do exemplo acima, com diferença apenas no objeto do carro e na rotina update(). Ah, e claro, ele inclui o script que contem as rotinas de input:

<script src="aoj/aojinput.js"><!--mce:3--></script>

O objeto carro possui algumas propriedades a mais, para armazenar a rotação (direção em que o carro se moverá) e a velocidade de movimento.

A rotina update(), ao invés de mover o sprite rebatendo pela tela, agora utiliza a leitura da entrada para determinar para onde mover o carro.

function update() {
    if (aojIsPressed(AOJ_KEY_UP) || aojIsPressed(AOJ_MOUSE)) {
        // se tecla para cima pressionada, aumenta a velocidade do carro
        carro.speed += 0.5;
        if (carro.speed > 10) // limita a velocidade em 10
            carro.speed = 10;
    } if (aojIsPressed(AOJ_KEY_DOWN)) {
        // se tecla para baixo pressionada, diminui a velocidade do carro
        carro.speed -= 0.5;
        if (carro.speed < -5) // limita em -5 - com velocidade negativa o carro vai dar marcha ré
            carro.speed = -5;
    } else {
        // se nem acima nem abaixo estão pressionadas, diminui um pouco a velocidade.
        carro.speed -= 0.1;
        if (carro.speed < 0)
            carro.speed = 0
    }
    if (aojIsPressed(AOJ_KEY_LEFT)) {
        // Se pressionada para esquerda, muda a rotação de acordo
        carro.rotation -= Math.abs(carro.speed) / 100;
        if (carro.rotation < 0)
            // Se o angulo diminuir de zero, recomeça em uma volta inteira (2 * PI radianos)
            carro.rotation = Math.PI * 2;
    }
    if (aojIsPressed(AOJ_KEY_RIGHT)) {
        carro.rotation += Math.abs(carro.speed) / 100;
        if (carro.rotation > Math.PI * 2)
            carro.rotation = 0;
    }
    // calcula a nova posição aplicando rotação ao ponto
    carro.x += Math.cos(carro.rotation) * carro.speed;
    carro.y += Math.sin(carro.rotation) * carro.speed;
}

O código é padrão para movimento de veículos, com velocidade e rotação. Se você tiver dificuldades para entender, dê uma olhada nos nosso posts sobre rotação e aceleração.

Conclusão

Neste artigo vimos um motor de pulso muito básico feito em Javascript. Atenção para o fato de não termos um loop de fato, mas sim um agendamento utilizado o recurso de timer do navegador (setInterval). Um loop real (for, while), infinito como teria que ser, não é aceito pelo navegador. Sempre que encontra um loop destes, que tem o potencial de trancar o processamento da página, o navegador aborta o script. É uma questão de segurança, para impedir o uso deste recurso por páginas maliciosas.

No entanto o setInterval não é a melhor forma de fazer isso. Usei-o aqui por ser mais simples, porém ele apresenta um problema em máquina mais lentas (ou jogos mais pesados). Entenda porque: o setInterval agenda chamadas regulares à rotina aojPulse(), a cada X milisegundos. Até aí tudo bem, é isso que querermos para que nosso jogo pulse a cada X milisegundos.

Mas o que ocorre se a máquina for lenta a ponto da rotina aojPulse demorar mais de X milisegundos para executar? Uma nova chamada será feita a ela e por alguns milisegundos teremos duas aojPulse rodando – o que vai deixar a coisa ainda mais lenta. Com isso, dalí a X milisegundos, outra vez será chamada a rotina e isso vai acabar causando um acúmulo de rotinas em paralelo que vão degenerar totalmente o desempenho do jogo. Sem falar que as cópias da rotina rodando em paralelo estarão acessando as mesmas variáveis globais, e isso certamente vai causar todo tipo de comportamento estranho na lógica do jogo.

Na próxima parte veremos como fazer isso de uma forma diferente. Veremos também como melhorar a aparência do movimento mostrado na tela. Faremos isso deixando o render() independente do update() e utilizando interpolação das posições. Isso nos permitirá roda a lógica do jogo a taxa baixas enquanto a atualização da animação roda no máximo que a máquina permitir.

Até lá.

• Visualizar o exemplo do game loop
• Visualizar o exemplo de input
• Baixar o código fonte do exemplo

Nesta parte 1 aprenderemos como inicializar o canvas e carregar e exibir imagens.

A primeira coisa que precisamos saber para criar jogos em HTML 5 é… bem, HTML! É necessário o conhecimento básico de tags e de como criar pelo menos uma página vazia para conter o jogo.

A segunda coisa é um pouco de CSS, que serve para configurar os elementos inseridos na página (bordas, cores, tamanhos, etc). Jogos mais avançados em HTML utilizam muitos elementos fora do <canvas>, que vamos ver nesse tutorial, tirando proveito de outros elementos HTML para apresentar dados e de CSS para formatar este dados.

Finalmente, precisamos saber também Javascript (JS) para fazer a programação da lógica do jogo. A sintaxe é parecida com Java ou C++ e oferece suporte a objetos, embora não seja de fato uma linguagem orientada a objetos. Não oferece, por exemplo, recurso para herança, embora seja possível simular isto com construções mais avançadas.

Vou assumir que você entende pelo menos o mínimo de HTML e CSS e que sabe incluir scripts em uma página. Mas a necessidade disto é tão pequena para este tutorial que é até possível você aprender o necessário só estudando os exemplos.

Dito isso, vamos em frente.

O elemento <canvas>

Uma das novidades que a versão 5 da HTML trouxe foi a tag <canvas>, que cria na página um elemento que permite o desenho direto. Antes disso, para exibir imagens era preciso inserir um elemento <img> para cada uma. Ess elemento cria um objeto gráfico no navegador para armazenar e apresentar a imagem – este tipo de objeto consome recursos do sistema. Se todas imagens fossem sprites animados, teríamos um página bem pesada para o navegador renderizar. Com o canvas, no entanto, podemos desenhar nele todas imagens necessárias e o navegador só vai renderizar o canvas – como se fosse uma única imagem.

Além disso, com o canvas podemos desenhar primitivas gráficas, como linhas, retângulos e texto, além de ter efeitos de composição na aplicação das imagens. A grosso modo, o canvas é como uma imagem cujo conteúdo pode ser modificado. Utilizamos ele como se fosse a tela, desenhando nele cada quadro do jogo.

A inclusão de um elemento canvas na página é feita com a tag <canvas>>. No exemplo de código abaixo temos uma página HTML que contém esta tag e também um elemento <div> acima do canvas, dentro do qual vai uma informação textual.

<html>
    <head>
        <script src="aoj/aojcanvas.js"></script>
    </head>
    <body>
        <div id="info">Abrindo o Jogo - exemplo de uso do elemento canvas</div>
        <canvas id="canvas1" width="960" height="600"></canvas>
    </body>
</html>

Note que esta página inclui dois arquivos externos:

css/estilos.css: Contém o código CSS de formatação dos elementos. Esse código se refere aos elementos pelo seu ID, sendo que o div possui o ID “info” e o canvas possui o ID “Canvas1″.

O conteúdo deste arquivo é o seguinte:

body {
    margin: 0px;
    border: none;
    background-color: black;
}
#canvas1 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -480px;
    margin-top: -300px;
    background-color: white;
}
#info {
    background-color: blue;
    color: yellow;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    text-align: center;
}

Basicamente o código deste arquivo muda o fundo da página para preto, centraliza o canvas na tela e aplica estilo de fundo, cor e fonte ao div que apresenta o texto. É comum colocarmos os arquivos de estilo dentro de uma pasta “css”.

aoj/aojcanvas.js: este arquivo de script possui o código para inicialização e uso do canvas, contendo algumas rotinas criadas para facilitar a programação. Veremos como usar o canvas a seguir.

Usando o elemento canvas

Para obter uma referência ao elemento canvas, usamos o comando document.getElementById(), passando o ID que especificamos para nosso canvas. Obtemos a referência e atribuímos para uma variável, assim:

    var _aojCanvas = document.getElementById(canvasId);

Para desenhar algo nele, precisamos obter um contexto gráfico, o que é feito com o método getContext do canvas. Esse método requer um parâmetro que, atualmente, só pode ser “2d”.

Depois de obter o contexto, atribuindo ele a uma variável, usamos os métodos dele para desenhar. Veja abaixo:

window.onload = function() {
    var _aojCanvas = document.getElementById('canvas1');
    var ctx = _aojCanvas.getContext('2d');
    ctx.beginPath(); // inicia um desenho.
    ctx.fillStyle = 'blue'; // especifica a cor de preenchimento.
    ctx.strokeStyle = 'red'; // especifica a cor de contorno.
    ctx.rect(10, 10, 200, 100); // especifica um retângulo.
    ctx.rect(220, 10, 50, 50); // especifica outro retângulo.
    ctx.stroke(); // contorna o desenho (dois retângulos).
    ctx.fill(); // preenche o desenho (dois retângulos).
    ctx.beginPath(); // inicia outro desenho.
    ctx.strokeStyle = 'black'; // muda a cor de contorno.
    ctx.rect(50, 50, 100, 100); // especifica um retângulo.
    ctx.stroke(); // contorna o desenho (um retângulo).
}

O código acima desenha dois retângulos preenchidos de azul dentro do canvas. Cada desenho é iniciado com beginPath. Se este método não fosse chamado na segunda vez, o terceiro retângulo especificado ainda seria parte do primeiro desenho e o comando stroke iria contornar os três retângulos.

Perceba que o código foi colocado dentro de uma função atribuída ao evento onload da janela, para que seja executado apenas depois dela carregar completamente. Isso é importante porque se não for feito, o código executaria assim que fosse baixado – o que poderia ocorrer antes mesmo da declaração do canvas ter sido carregada – o que resultaria em erro porque o objeto canvas não existira ainda na página.

Métodos de atalho

A utilização do canvas para desenhar é algo de baixo nível. São precisos vários comandos para desenhar um retângulo na tela, por exemplo.

Para facilitar a programação, é interessante criar funções auxiliares que incluem todas chamadas necessárias para realizar determinadas ações. Assim criamos uma biblioteca própria. O arquivo aojcanvas.js é um exemplo de biblioteca deste tipo, embora incompleta.

Vejamos algumas funções deste arquivo para entender essa prática:

function aojSetCanvas(canvasId) {
    _aojCanvas = document.getElementById(canvasId);
}
 
function aojFillStyle(optionalNewValue) {
    var ctx = _aojCanvas.getContext('2d');
    if (optionalNewValue)
        ctx.fillStyle = optionalNewValue;
    return ctx.fillStyle;
}
 
function aojFillRect(x, y, w, h, optionalFillStyle) {
    var ctx = _aojCanvas.getContext('2d');
    ctx.beginPath();
    if (optionalFillStyle) {
        ctx.fillStyle = optionalFillStyle;
    }
    ctx.rect(x, y, w, h);
    ctx.fill();
}

A função aojSetCanvas() é usada para informar à nossa biblioteca qual elemento canvas desejamos usar – podemos ter mais de um canvas na nossa página. Passamos o ID como parâmetro e o elemento é obtido é armazenado em uma variável global, acessível para todas as demais funções.

aojFillStyle() permite obter o estilo de preenchimento atual, e também modificá-lo. Se for passado um parâmetro, ele é usado para modificar o estilo, que em seguida é retornado. Se não for passado o parâmetro, o estilo atual não é modificado, apenas retornado.

E a função aojFillRect() serve para desenhar um retângulo preenchido. Ela pode usar o estilo previamente definido, mas também aceita um quarto parâmetro opcional que, se informado, é usado como estilo para o retângulo.

Este tipo de comando permite mudar nosso exemplo para o seguinte:

window.onload = function() {
    aojSetCanvas('canvas1');
    aojFillRect(10, 10, 200, 100, 'blue'); // preenche um retângulo azul.
    aojFillRect(220, 10, 50, 50, 'blue'); // preenche outro retângulo azul.
    aojStrokeRect(10, 10, 200, 100, 'red'); // contorna um retângulo vermelho.
    aojStrokeRect(220, 10, 50, 50, 'red'); // contorna outro retângulo vermelho.
    aojStrokeRect(50, 50, 100, 100, 'black'); // contorna um retângulo preto.
}

Este exemplo ficaria ainda mais claro e resumido se criássemos uma função para desenhar um retângulo preenchido e já contornado. Até que ponto devemos ir na criação de nossa própria biblioteca de funções vai depender da natureza de cada projeto – aqueles procedimento que são repetidos muitas vezes são os que devem ser transformados em funções. Não recomendo tentar criar uma porção de funções de antemão porque você acabará com muitas que nunca vai utilizar, e mesmo assim não eliminará o risco de precisar de uma que não lembrou.

Desenhando imagens no canvas

É importante saber como desenhar primitivas gráficas no canvas, mas o principal recurso ainda é a apresentação de imagens, afinal, quase todo jogo é feito de sprites.

Para carregar uma imagem, basta criar um objeto do tipo Imagem e atribuir a URL do arquivo para o atributo “src”. Opcionalmente podemos atribuir uma função para o atributo onload – esta função será chamada quando o arquivo de imagem for carregado. Este é um recurso importante de usar em jogos com muitas imagens, para garantir que todas tenham sido carregadas antes de iniciar o jogo.

Novamente, para facilitar o trabalho, criamos uma função na nossa biblioteca:

function aojNewImage(imgURL, optionalLoadCallback) {
    var img = new Image();
    img.src = imgURL;
    img.onload = optionalLoadCallback;
    return img;
}

Esta função recebe a URL do arquivo da imagem e opcionalmente uma função de callback, que será chamada quando a imagem for carregada.

Para desenhar uma imagem no canvas, temos outra função:

function aojDrawImage(img, x, y) {
    var ctx = _aojCanvas.getContext('2d');
    ctx.drawImage(img, x - img.width / 2, y - img.height / 2);
    if (_aojShowImageCenter) {
        ctx.arc(x, y, 2, 0, 2*Math.PI, false);
        ctx.fill();
    }
}

Nesta função, apenas as duas primeiras linhas são responsáveis por desenhar a imagem no canvas. O IF é usado para desenhar um círculo no ponto (x,y) onde a imagem é desenhada, de forma a enxergarmos onde fica esse ponto. É útil para debugar posicionamento.

Transformações geométricas

O canvas oferece métodos para aplicar transformações geométricas no que é desenhado nele. Por exemplo, podemos rotacionar ou aumentar e diminuir uma imagem no momento de desenhá-la.

É importante saber, no entanto, que uma vez especificada uma transformação, ela fica em efeito para tudo que for desenhado depois. Portanto, depois de aplicar uma rotação, por exemplo, e desenhar a imagem desejada, é preciso aplicar a rotação inversa para deixar o canvas no estado normal antes de desenhar as próximas imagens.

Abaixo está uma função para desenhar uma imagem com transformação de escala. Como parâmetros ela recebe o objeto imagem, a posição (x, y) onde ele deve ser desenhado e os fatores de escala sx e sy.

Veja que para o efeito ser aplicado corretamente é preciso usar uma outra transformação em conjunto – a translação. Fazemos a translação para que a posição da imagem seja transferida para a origem (ponto (0,0)) e então a escala é aplicada. Depois de desenhada a imagem, desfazemos a escala e a translação aplicando estas transformações com o valor inverso.

function aojDrawImageScale(img, x, y, sx, sy) {
    var ctx = _aojCanvas.getContext('2d');
    ctx.translate(x, y);
    ctx.scale(sx, sy);
    ctx.drawImage(img, -img.width / 2, -img.height / 2);
    ctx.scale(1/sx, 1/sy);
    ctx.translate(-x, -y);
    if (_aojShowImageCenter) {
        ctx.arc(x, y, 2, 0, 2*Math.PI, false);
        ctx.fill();
    }
}

No arquivo aojcanva.js existem outras funções deste tipo. Este arquivo e os demais estão no Zip no final da página.

Conclusão

Neste artigo vimos o basico da utilização do canvas para mostrar imagens.

No site abaixo há um guia de referência do canvas para ser impresso, com todos os comandos. O Autor (Jacob Seidelin) também escreveu um livro sobre jogos em HTML 5.
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

No próximo artigo veremos como implementar um game loop e utilizar o teclado e mouse.

• Visualizar o exemplo funcionando
• Baixar o código fonte do exemplo

Depois de dedicar os últimos meses totalmente para minha faculdade, estou de volta.

Conforme prometido, inicio hoje o meu tutorial sobre o Blender. A ideia será postar vários vídeos tutoriais sobre como utilizar o software 3D em maior evidência no mercado atualmente.

Neste primeiro vídeo, veremos como modelar um personagem básico em low poly (poucos polígonos). Agora já de férias , em breve vou estar postando os outros capítulos.

Gostaram? Comentem as sugestões ou dúvidas .

Não deixem de conferir esta primeira parte, está muito legal.

Tutorial Pixel Art – Parte 1

Olá pessoal, meu nome é Luis Otávio e trago este artigo onde mostrarei como começar na programação de jogos usando o Game Maker. O Game Maker é um motor (Engine) desenvolvido para facilitar a criação de jogos de qualquer tipo. Com ele podemos fazer um Pac-Man ou até um Mega Man. Este motor também permite a criação de jogos 3D simples, porém para criar jogos mais complexos, como Age of Empires, você precisará dominar a linguagem do motor, denominada GML (Game Maker Language), não abordada neste meu primeiro tutorial por motivos didáticos.

Inicialmente vocês criarão jogos usando o sistema Drag and Drop (Arraste e Solte) que o Game Maker oferece.

Bom, para começar você precisa fazer o download do programa, ele pode ser baixado no endereço yoyogames.com. A instalação é bem simples, utilize a versão gratuita, apesar de possuir algumas limitações, nos possibilitará fazer jogos bem interessantes. A tela inicial do programa é mostrada abaixo:

Tela Inicial do Game Maker

Eu farei uma rápida introdução sobre a interface do programa, falando apenas sobre o necessário para o entendimento básico do Game Maker.

• Sprites
  • Nesta pasta você colocaráa as imagens dos personagens, itens e qualquer outra imagem que representara algo interativo no jogo.
• Sounds
  • Aqui irá os sons e musicas do jogo.
• Backgrounds
  • Nesta pasta você carregará os fundos de cenários e imagens que não são interativas no jogo, tais como logos, fundos de menus etc.
• Fonts
  • Nesta pasta você poderá colocar as fontes (tipos de letras) que serão usadas em seu jogo.
• Objects
  • Esta é sem duvidas uma das pastas mais importantes, é nela que fica tudo que for interativo no jogo é aqui que fica o funcionamento do jogo.
• Rooms
  • Aqui é onde ficam as salas do jogo, isso pode ser entendido como o local onde ficam a fase, a tela de game over ou a tela de título.

Para adicionar algum dos itens listados acima, você deve clicar com o botão direito sobre a pasta e selecionar Create. Vamos começar por Create Sprite.

Create Sprite

Logo surgirá a tela Sprite Properties (Propriedades do Sprite) como mostra a figura abaixo.

Load Sprite

Por enquanto não entrarei em detalhes sobre as propriedades do sprite, isto será abordado em um outro artigo. Vamos apenas clicar em Load Sprite, abrirá então uma janela de seleção de arquivos, selecione uma imagem qualquer para representar um personagem do jogo. Após selecionada a imagem, clique em ok. Repita o processo para selecionar um sprite que represente um obstáculo em nosso jogo, pode ser um cubo ou qualquer imagem que você preferir. Se você fez tudo certinho, veremos uma tela como a demonstrada abaixo.

Create Object

Por enquanto estes sprites não são nada além de imagens, ou seja, eles ainda não representam nada dentro do jogo, são apenas imagens que serão enviadas para a memória assim que o jogo iniciar. Para dar vida a nosso personagem, devemos criar um novo Object, utilizando o mesmo procedimento anterior, um clique com o botão direito sobre a pasta Objects. Ao selecionar Create Object, a janela abaixo será apresentada.

Propriedades do Objeto

Na janela de propriedades do objeto, você pode perceber que existem vários botões e abas, mas não se assuste, não será necessários ver todos eles neste momento. Bom, seguindo com a criação do personagem, na janela de propriedades do objeto, clique no botão na parte superior esquerda, referente a Sprite (marcado com um círculo verde), em seguida, selecione o que corresponde ao personagem. Agora temos um objeto com aparência, porém sem ação alguma. Para inserir movimento em nosso personagem, devemos clicar no botão Add Event, destacado na imagem acima com um círculo vermelho. As opções de ações serão apresentadas em uma nova janela, demonstrada abaixo.

Seletor de Eventos

Novamente não se assuste com a quantidade de ações, vamos nos deter apenas na opção Keyboard. Com isto, estaremos adicionando um evento que verificará se uma respectiva tecla está sendo pressionada. Quando você clicar no botão keyboard surgirá uma lista de teclas que podem ser verificadas, como na imagem abaixo.

Lista de Teclas

Selecione a opção <Left> (seta para a esquerda), desta forma, você adiciona um evento que ouvirá quando tecla for pressionada. Agora devemos vincular uma ação a este evento. Para isto, observe no canto superior direito da janela propriedades do objeto, na área que corresponde a movimento (Move), o primeiro botão (destacado em vermelho). Arraste-o para a parte em branco, correspondente a actions, marcada com um retângulo vermelho na figura abaixo.

Propriedades do Objeto

Assim que você soltar a ação selecionada, surgirá uma janela como a mostrada na imagem abaixo.

Move Fixed

Esta janela correspondente a ação Move Fixed. Esta ação faz com que o objeto se mova na direção e velocidade definidas nos campos correspondentes.

A próxima etapa será criar uma sala para testar o nosso objeto. Clique na pasta Rooms com o botão direito e selecione Create Room para criar uma nova sala, acionando a janela Room Properties, como demonstrado na imagem abaixo.

Create Room

Na janela propriedades da Room, você pode visualizar várias abas na parte superior esquerda, mas não entrarei em detalhes sobre todas, apenas a Objects. Clique no botão destacado para selecionar o objeto atual que será adicionado a sala. O próximo passo será adicionar seu personagem no mapa, para isto clique com o mouse sobre o local desejado na grade. Pronto, agora é só testar!

Para publicar/compilar seu jogos, basta clicar no botão de play verde na parte superior da interface.

Publicar/Compilar seu jogo

Assim que seu pseudo jogo começar, você poderá teclar seta para a esquerda e perceber o personagem movendo-se. Caso ocorra algum problema, revise o artigo até esta etapa. Se tudo funcionar direitinho, é horas de exercitar um pouco, faça seu personagem se movimentar também para as direções Direita <Right>, Cima <Up> e Baixo <Down>.

Conseguiu? Então vamos adicionar agora algum obstáculo para o personagem, clique com o botão direito sobre a pasta Objects e crie um novo objeto, marque-o para usar o Sprite correspondente ao obstáculo. Desta vez , marque a opção Solid , isso fará com que o objeto seja sólido.

Propriedades do Objeto Obstáculo

Apesar de estar marcado como sólido, o objeto ainda não representa um obstáculo para o personagem, isto ocorre porque não há ninguém detectando (ouvindo) a colisão. Sendo assim, precisamos adicionar um evento que verifica se objetos colidiram. Para isto, abra novamente seu personagem, adicione um novo evento clicando em Add Event e selecione Collision. Como demonstrado na imagem abaixo, surgirá uma lista com os objetos, marque o object1, referente ao obstáculo.

Adicionando Colisão

Após o evento de colisão ser adicionado, temos que vincular uma ação a ele. O processo será bem similar aos anteriores, porém ao invés de selecionar uma direção, você deve clicar no centro do direcional, além de configurar a velocidade para zero, observe na imagem abaixo.

Colisão com o obstáculo

Com isso você já tem um ambiente bem simples, monte um pequeno cenário, com o personagem no centro e vários obstáculos para experimentar. Após a sala criada, é só clicar no play para ver o resultado.

Bom, por enquanto é só, tente fazer outras modificações em seu pseudo jogo e vá tentando entendê-lo aos poucos, não tente fazer coisas muito complicadas sem primeiro entender o simples. Se você pretende ser um desenvolvedor de jogos, precisará aprender que só se pode passar para coisas mais complexas quando as simples estiverem completamente dominadas, falando em linguagem de games, jogue primeiro no Easy para depois experimentar o Hard .

Um grande abraço a todos do Abrindo o Jogo.

Luis Otávio