Game Loop

O Game Loop é o que permite que o jogo continue sendo atualizado e renderizado a cada frame. Seria como um batimento cardíaco, que a cada batida realiza um conjunto de operações de atualização e renderização. A melhor forma de visualizar isso é através de um fluxograma, veja a Imagem 1.

Imagem 1

Perceba na Imagem 1 que entre início e fim temos operações a serem realizadas, essas operações podem ser de atualização e/ou renderização ou outra qualquer. Ao chegar ao fim, começa tudo de novo, realizando as mesmas operações de atualização e/ou renderização ou outra qualquer.

A Listagem 1  mostra uma implementação de Game Loop em JavaScript. Esta implementação conta com três métodos, loop, update e render, sendo que os mesmos serão invocados "infinitamente".

Listagem 1
Note que na Listagem 1 requestAnimationFrame é quem fará o trabalho de invocar o método loop, que por sua vez invocará os métodos update e render, respectivamente. Em cada um deles será impresso uma mensagem no terminal.

O projeto com o código apresentando pode ser baixado aqui.

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Colisões Bounding Box

Imagem
Bounding Box conhecido como bbox é uma técnica em que é feito o uso de retângulos para detectar colisões. Nos jogos 2D, essa técnica consiste em delimitar a área dos objetos do jogo através de retângulos, conhecido como retângulos de colisão. Existem dois tipos de bbox , o orientado e o alinhado aos eixos. O primeiro conhecido como obbox(Oriented Bounding Box) trata de colisões em que o objeto esteja rotacionado. Já o segundo tipo, conhecido como aabb(Axis-Aligned Bounding Box) trata de colisões em que o objeto não está rotacionado. Nesse artigo trataremos do aabb . A Imagem 1 mostra um cenário em que o jogador tenta coletar uma moeda. Imagem 1 criada através das imagens disponibilizadas por kenney , surt e por Tio Aimar . Acesso em 07/12/2017. Note a presença dos retângulos de colisão no personagem e nas três primeira moedas. Na maioria das vezes, um objeto com apenas um retângulo de colisão será suficiente, mas quando não for, poderá ser utilizado mais retângu...
Leia mais

Mapas em Jogos 2D - Parte I

Imagem
Mapas em jogos 2D é construído através do uso de matrizes. No segundo ano do Ensino Médio é ensinado o conceito de matrizes, que nada mais é que uma estrutura que serve para apresentar ou representar dados em forma de tabela, linhas e colunas. Em jogos 2D podemos fazer a mesma coisa, criar uma matriz que representa o mapa do jogo. A Imagem 1 mostra um exemplo de como representar um mapa 2D através de matrizes. Imagem 1 A Imagem 1 ilustra o uso de matrizes em jogos 2D, sendo a declaração do mapa feita em JavaScript. Nesse mapa os zeros poderiam representar espaços vazios, enquanto que os números  1  poderiam representar um terreno ou uma plataforma. Observe também, que a construção do mapa é feita através de um array de duas dimensões, o que significa que na linha 0 temos o array [0, 0, 0, 0, 0], enquanto que na linha 1 temos o array [1, 0, 0, 0, 0] e por aí vai. Para acessar uma célula no mapa é preciso informa a linha e a coluna. Por exemplo, ao acessar a linha...
Leia mais

Frames Per Second - FPS

Frames Per Second(FPS) é um termo utilizado para determinar a quantidade de quadros ou animações renderizados em um segundo. Em jogos digitais, 60FPS é uma boa taxa de renderização, sendo 30FPS um mínimo aceitável para manter uma qualidade razoável no jogo. Um jogo que opera a uma taxa de 60FPS implica que a cada segundo temos 60 frames renderizados. Ao dividirmos 1 por 60, obtemos aproximadamente 0,0166666, isso significa que cada frame precisa ser renderizado em apenas 0,0166666 de segundo, é um tempo muito pequeno, então para facilitar a vida é melhor trabalhar com uma outra unidade de tempo, o milissegundos. 1 segundo equivale a 1000 milissegundos, o que significa que 0,0166666 de segundo é aproximadamente igual a 16,666666 Milissegundos, basta multiplicar 0,166666 por 1000. Então podemos afirmar que em um jogo a uma taxa de 60FPS tem aproximadamente 16,66666 Milissegundos para renderizar cada frame. A Listagem 1 mostra a implementação de FPS em JavaScript. Listagem 1 ...
Leia mais