www.indiegamerbrasil.

com Tutorial bsico de games Lio 1

IndieGamerBrasil.com
Tutorial bsico de games
(c) 2013 by Cleuton Sampaio
Lio 2: Limites e tamanhos

Voc tem a liberdade de:

Compartilhar copiar, distribuir e transmitir a obra.

Com as seguintes condies:

Atribuio Voc deve creditar a obra da forma especificada pelo autor ou licenciante
(mas no de maneira que sugira que estes concedem qualquer aval a voc ou ao seu uso da
obra).

Uso no comercial Voc no pode usar esta obra para fins comerciais.

Vedada a criao de obras derivadas Voc no pode alterar, transformar ou criar em

cima desta obra.

Leia mais sobre esta licena em: http://creativecommons.org/licenses/by-nc-nd/3.0/br/legalcode.

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 1 de: 8

www.indiegamerbrasil.com Tutorial bsico de games Lio 1

Lio 2: Limites e tamanhos

Ok, voc j conseguiu colocar uma bolinha vermelha na tela e faz-la se mover... Eu sei que pouca
coisa, mas temos que ir devagar.
Temos dois problemas com nosso jogo:
1. A bola se move para fora dos limites da arena do jogo;
2. A pista no est desenhada.
Vamos remediar isso.

Limites
Precisamos estabelecer limites para a bola se mover. Isto possvel com uma pequena alterao no
nosso gameloop (gameloop.js):
function updateGO(go, intervalo) {
if (go.player) {
// Atualizao 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;
alert("limite");
}
}
}

Para comear, introduzimos uma condio ANTES de alterar a posio do nosso gameobject.
Precisamos verificar se o caminho est livre, na direo do prximo movimento, antes de realmente
movimentar o objeto. Note que inclumos uma propriedade player no gameobject, mas vamos
falar disso mais adiante. A funo caminhoLivre verifica se o prximo movimento da bola no vai
coloc-la fora dos limites:
function caminhoLivre(go, desX, desY) {
// Verifica se o caminho est livre para o gameobject

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 2 de: 8

www.indiegamerbrasil.com Tutorial bsico de games Lio 1

var
var
var
var
var
var
var
var

retorno = true;
desXpixels = desX * metroPixels;
desYpixels = desY * metroPixels;
goPixels = toPixels(go);
newTopo = goPixels.topo + desYpixels;
newEsquerda = goPixels.esquerda + desXpixels;
newBaixo = newTopo + goPixels.altura;
newDireita = newEsquerda + goPixels.largura;

if (newTopo < 0) {
// Vai ficar alm do limite superior?
retorno = false;
}
else if (newBaixo > retangulo.altura) {
// E do limite inferior?
retorno = false;
}
else if (newEsquerda < 0) {
// E do limite esquerdo?
retorno = false;
}
else if (newDireita > retangulo.largura) {
// e do limite direito?
retorno = false;
}
return retorno;
}

s verificar se o topo vai ser menor que zero, ou se a parte de baixo vai ser maior que a altura da
janela de jogo. Depois, verificamos se os limites esquerdo e direito tambm so vlidos. Antes de
calcularmos limites, importante transformar as coordenadas do gameobject em pixels, e o que a
funo toPixels() faz:
function toPixels(go) {
// Converte as coordenadas do modelo em pixels
var
var
var
var
var
var
var
var
var

posX = go.centroX * metroPixels;

posY = go.centroY * metroPixels;
paltura = go.altura * metroPixels;
plargura = go.largura * metroPixels;
ptopo = posY - (paltura / 2);
pesquerda = posX - (plargura / 2);
pbaixo = ptopo + paltura;
pdireita = pesquerda + plargura;
goPixels = {x : posX,
y : posY,
altura : paltura,
largura : plargura,
topo : ptopo,
esquerda : pesquerda,
baixo : pbaixo,
direita : pdireita}
return goPixels;

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 3 de: 8

www.indiegamerbrasil.com Tutorial bsico de games Lio 1

}

Ns criamos e retornamos um objeto JSON contendo as coordenadas do gameobject calculadas em

pixels.
Com isto, se tentarmos mover o gameobject para alm dos limites, o movimento vai parar e um
alerta ser mostrado:
else {

velocidadeX = 0;
velocidadeY = 0;
alert("limite");

Tamanhos
Bom, temos um problema... A nossa pista tem 5 faixas distintas:

De cima para baixo, temos: uma calada, 3 pistas para automveis e mais uma calada. Como
vamos acertar as propores corretas?
A primeira coisa a fazer tornar a pista proporcional. E fizemos isto no Draw:
www.indiegamerbrasil.com Tutorial bsico de games Pgina: 4 de: 8

www.indiegamerbrasil.com Tutorial bsico de games Lio 1

Tornamos nossa imagem proporcional. Assim, cada calada ter 1,5 metros, e cada pista ter 2,0
metros. Quando convertermos em pixels, tudo ficar proporcional.
Porm, temos que fazer algumas alteraes na nossa inicializao (inicializacao.js), de modo a
alterar um pouco a proporo metro / pixels (para 5% da largura da tela), e calcular a altura da
arena proporcionalmente altura da pista (9 metros):
function inicializa() {
larguraJanela = window.innerWidth;
// Calcula a proporcao metro-tela: 1 metro = 10% da tela
metroPixels = Math.round(larguraJanela * 0.05);
// Prepara a "canvas" do game:
conteudo = document.getElementById("conteudo");
// Calcula tamanhos e posiciona a canvas:
/*
* A
* * * *
*/

altura do "Canvas" tem que seguir a proporo da tela:

calada superior: 1,5 m
calada inferior: 1,5 n
pista
: 3 * 2m

var alturaPista = 9.0;

alturaJanela = alturaPista * metroPixels;
var textoCanvas = "<canvas id=\"tela\" " +
" width=\"" + larguraJanela * 0.98 + "\"" +
" height=\"" + alturaJanela + "\"" +
"></canvas>";
conteudo.innerHTML = textoCanvas;
retangulo = {altura : tela.clientHeight, largura : tela.clientWidth};
contexto = tela.getContext("2d");

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 5 de: 8

www.indiegamerbrasil.com Tutorial bsico de games Lio 1

retanguloMetros = {altura : tela.clientHeight / metroPixels, largura :
tela.clientWidth / metroPixels};
// Cria o vetor de gameObjects e outras variveis de controle:
gameObjects = new Array();
idGameLoop = null;
tempo = new Date();
velocidadeX = 0.0;
velocidadeY = 0.0;

// Pistas:
pista1Y = 1.5;
pista2Y = 3.5;
pista3Y = 5.5;

Alm de tornar a altura proporcional, criamos o deslocamento das trs pistas de automveis.
Tive que alterar o estilo (estilo.css) para retirar o tamanho fixo que eu atribu ao Canvas:
#tela {
position: fixed;
top: 15%;
left: 1%;
border: 2px solid black;
background-color: gray;
}

Game Objects
Eu pretendo carregar alguns carros, logo, mudei o nome do script e da classe pessoa.js para
gameobject.js, pois ele no vai carregar s pessoas:
/* Tutorial basico de games
* www.indiegamerbrasil.com
* (c) 2013 by Cleuton Sampaio
*
*/
// pessoa.js
var templateGO = {
player : false,
arqImagem : "images/pessoa.png",
imagem : null,
centroX : 0,
centroY : 0,
velocidadeX : 1.0,
velocidadeY : 1.0,
aceleracaoX : 0.0,

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 6 de: 8

www.indiegamerbrasil.com Tutorial bsico de games Lio 1

aceleracaoY : 0.0,
altura : 1,
largura : 1,
ativa : true};
function GameObject() {
this.player = templateGO.player,
this.arqImagem = templateGO.arqImagem;
this.imagem = templateGO.imagem;
this.centroX = templateGO.centroX;
this.centroY = templateGO.centroY;
this.velocidadeX = templateGO.velocidadeX;
this.velocidadeY = templateGO.velocidadeY;
this.aceleracaoX = templateGO.aceleracaoX;
this.aceleracaoY = templateGO.aceleracaoY;
this.altura = templateGO.altura;
this.largura = templateGO.largura;
this.ativa = templateGO.ativa;
}

Agora, a classe que representa a pessoa e os carros se chama GameObject, e tem uma nova
propriedade player, que indica se o gameobject um Player Object (controlado pelo jogador) ou
um NPC Non-Player Character (controlado pela IA do game).
E tambm separei a funo updateGO() para atualizar apenas o movimento do player, pois os
carros eu atualizarei mais tarde:
function updateGO(go, intervalo) {
if (go.player) {
// Atualizao exclusiva para o Player object

Finalmente, eu adicionei alguns carros, mesmo parados, s para ver como ficariam:
function iniciar() {
// Carrega o fundo
fundo = new Image();
fundo.src = "images/pista.png";
// Posiciona a pessoa
pessoa = new GameObject();
pessoa.player = true;
pessoa.centroX = retanguloMetros.largura / 2;
pessoa.centroY = retanguloMetros.altura / 2;
pessoa.imagem = new Image();
pessoa.imagem.src = pessoa.arqImagem;
gameObjects[0] = pessoa;
idGameLoop = window.setInterval("gameLoop()", 50);
// Carrega alguns carros, s para mostrar

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 7 de: 8

www.indiegamerbrasil.com Tutorial bsico de games Lio 1

carro1 = new GameObject();
carro1.imagem = new Image();
carro1.imagem.src = "images/carro1.png";
carro1.altura = 1.5;
carro1.largura = 2.0;
carro1.centroY = pista1Y + 1;
carro1.centroX = 3.0;
gameObjects[1] = carro1;
carro2 = new GameObject();
carro2.imagem = new Image();
carro2.imagem.src = "images/carro2.png";
carro2.altura = 1.5;
carro2.largura = 2.0;
carro2.centroY = pista2Y + 1;
carro2.centroX = 3.0;
gameObjects[2] = carro2;
carro3 = new GameObject();
carro3.imagem = new Image();
carro3.imagem.src = "images/carro3.png";
carro3.altura = 1.5;
carro3.largura = 4.0;
carro3.centroY = pista3Y + 1;
carro3.centroX = 3.0;
gameObjects[3] = carro3;
}

Resultado
Com as novas alteraes, nosso game ficou assim:

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 8 de: 8