Você está na página 1de 5
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3 IndieGamerBrasil.com Tutorial básico de games (c)
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3
IndieGamerBrasil.com
Tutorial básico de games
(c) 2013 by Cleuton Sampaio
Lição 3: NPCs
Você tem a liberdade de:
– Compartilhar — copiar, distribuir e transmitir a obra.
Com as seguintes condições:
• Atribuição — Você deve creditar a obra da forma especificada pelo autor ou licenciante
(mas não de maneira que sugira que estes concedem qualquer aval a você ou ao seu uso da
obra).
• Uso não comercial — Você não pode usar esta obra para fins comerciais.
• Vedada a criação de obras derivadas — Você não pode alterar, transformar ou criar em
cima desta obra.
Leia mais sobre esta licença em: http://creativecommons.org/licenses/by-nc-nd/3.0/br/legalcode.
www.indiegamerbrasil.com – Tutorial básico de games – Página: 1 de: 5
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3 Lição 3: NPCs NPC significa “Non-player
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3
Lição 3: NPCs
NPC significa “Non-player character” ou personagem não controlado pelo jogador. Geralmente, os
NPCs são os “inimigos” em um game.
Em nosso caso, os carros serão os NPCs, e precisamos controlá-los.
No exemplo desta lição, os carros “ignoram” a pessoa, pois o objetivo é apenas criar e controlar os
NPCs.
Criar carros
Inicialmente, precisamos criar alguns carros para que o jogo tenha “graça”. Isto é feito dentro de
“gameloop.js”, na função “iniciar()”:
carros = new Array();
criarCarros();
// Primeiros carros:
novoCarro(pista1Y);
novoCarro(pista2Y);
novoCarro(pista3Y);
Para facilitar a criação de carros, eu criei um vetor novo “carros”, que contém os objetos pré
criados, mas sem fazer parte do game. A função “criarCarros()” preenche este vetor, e a função
“novoCarro()” cria uma cópia de um carro e coloca dentro de “gameObjects”:
function novoCarro(pista) {
var indx = aleatorio(carros.length) - 1;
var novo = new GameObject();
novo.player = carros[indx].player,
novo.arqImagem = carros[indx].arqImagem;
novo.imagem = carros[indx].imagem;
novo.centroX = -6;
novo.centroY = carros[indx].centroY;
novo.velocidadeX = carros[indx].velocidadeX * (1 + Math.random());
novo.velocidadeY = 0;
novo.aceleracaoX = carros[indx].aceleracaoX;
novo.aceleracaoY = carros[indx].aceleracaoY;
novo.altura = carros[indx].altura;
novo.largura = carros[indx].largura;
novo.ativa = carros[indx].ativa;
novo.centroY = pista + 1;
www.indiegamerbrasil.com – Tutorial básico de games – Página: 2 de: 5
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3 armazenarCarro(novo); totalGO++;
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3
armazenarCarro(novo);
totalGO++;
setarUltimoPista(novo);
}
Note que eu criei uma função para retornar um número aleatório, variando de 1 até o limite
fornecido. Isto nos permite “escolher” um dos carros do estoque.
Depois, eu crio um novo carro e copio as propriedades do carro escolhido, alterando sua velocidade
e a pista (centroY) onde ele correrá.
Ao final, eu armazeno o carro em “gameObjects”. Quando um carro chega ao final da pista, ele é
eliminado do vetor “gameObjects”, e a sua posição é preenchida como null. A função
“armazenarCarro()” vai procurar uma posição vaga no vetor “gameObjects”, e, caso não exista, ela
acrescenta mais uma posição.
Eu controlo a quantidade de gameobjects ativos com a variável “totalGO”. Aliás, eu criei algumas
variáveis na função “inicializa()” (dentro de “inicializacao.js”) que controlam os carros:
MAXGO = 10;
totalGO = 0;
// Pistas:
pista1Y = 1.5;
ultimoPista1 = null;
pista2Y = 3.5;
ultimoPista2 = null;
pista3Y = 5.5;
ultimoPista3 = null;
MAXGO é o limite máximo de carros ativos. Eu coloquei em 10 porque é um limite razoável.
Quanto mais carros ativos, menor a performance do game. Também criei variáveis para apontar
para o último carro criado em cada pista. Isto permite saber se há espaço na pista para novos carros.
Atualizar os carros
Precisamos fazer o seguinte:
• Atualizar a posição dos carros;
• Verificar se dá para criarmos novos carros.
Para atualizar a posição, eu uso a velocidade, como fiz com a “pessoa”. Só que tem dois problemas:
www.indiegamerbrasil.com – Tutorial básico de games – Página: 3 de: 5
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3 1. Os carros podem sair fora
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3
1. Os carros podem sair fora da pista;
2. Os carros podem colidir com os que estão à sua frente.
Eu testo se os carros saíram da pista e se podem colidir com os da frente, na função “updateGO”:
function updateGO(go, intervalo) {
if (go.player) {
// Atualização exclusiva para o Player object
var deslocamentoX = velocidadeX * intervalo;
var deslocamentoY = velocidadeY * intervalo;
if (caminhoLivre(go,deslocamentoX,deslocamentoY)) {
go.centroX += deslocamentoX;
go.centroY += deslocamentoY;
}
else {
velocidadeX = 0;
velocidadeY = 0;
}
}
else {
var deslocamentoX = go.velocidadeX * intervalo;
go.centroX += deslocamentoX;
verificarSeSaiuDeCena(go);
verificarSeVaiColidir(go);
verificarSeCriaNovoCarro(go);
}
}
As três funções servem, respectivamente, para: verificar se o carro saiu da pista, verificar se ele está
muito próximo ao da sua frente, e verificar se pode criar um novo carro na mesma pista.
Quando eu crio um carro, eu posso aumentar sua velocidade normal:
novo.velocidadeX = carros[indx].velocidadeX * (1 + Math.random());
Isto cria um efeito bem interessante, pois os carros se movem em velocidades diferentes. Porém,
cria um problema: o carro de trás pode andar mais rápido do que o da frente, e, consequentemente,
passar por cima dele. Para evitar isso, eu criei a função “verificarSeVaiColidir()”:
function verificarSeVaiColidir(go) {
var resultado = false;
for (var x=1; x < gameObjects.length; x++) {
var inter = gameObjects[x];
if (inter == null) {
continue;
}
if (inter.centroY != go.centroY) {
continue;
}
if (inter.centroX <= go.centroX) {
www.indiegamerbrasil.com – Tutorial básico de games – Página: 4 de: 5
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3 continue; } var distancia = inter.centroX
www.indiegamerbrasil.com – Tutorial básico de games – Lição 3
continue;
}
var distancia = inter.centroX - go.centroX;
if (distancia <= 4) {
go.velocidadeX = inter.velocidadeX;
}
}
return resultado;
}
Ela procura os carros que estão à frente do carro atual, e verifica a distância entre os seus centros.
Se for menor que 4 metros, então torna a velocidade do carro atual igual à do que está a sua frente.
É como se o motorista diminuísse para não bater no carro à frente.
www.indiegamerbrasil.com – Tutorial básico de games – Página: 5 de: 5