Olá amigos! Esse é meu primeiro artigo para o iMasters e vamos conversar sobre um assunto que é no mínimo diferente: “Desenvolvimento de jogos em JavaScript”.
Isso mesmo. Algo que alguns consideram inviável, ou muito pesado, vou mostrar aqui técnicas para drawing, e também falarei sobre técnicas para desenvolvimento de jogos em geral.
Para começar nossa conversa, inicialmente iremos desenvolver jogos que rodam em “browsers compatíveis! “Ahn? Como assim?”. Eu considero compatíveis browsers como Firefox, Opera, Safari… em geral. Todos, menos o IE.
Para executar uma das principais partes do jogo, que é o processo de renderização (a parte que desenha as coisas na tela) nós usaremos um recurso chamado Canvas.
O canvas foi inserido no Firefox na versão 1.5, e também roda em Opera e outros. Eu testarei meus códigos em Firefox 2.0 e Opera 9. Existem algumas gambiarras que fazem algo semelhante em IE, mas não achei nada com suporte a desenho de imagens, que é algo essencial para nossos jogos. Então, infelizmente, ao menos por enquanto, nossos jogos não irão funcionar em Internet Explorer.
Até o final da série de artigos faremos um jogo de nave espacial com inimigos, vidas, itens e um bocado de coisa.
Deixando as histórias de lado, vamos ao que interessa!
Hoje vamos entender a base do recurso Canvas. Vamos aprender a fazer desenhos simples.
Canvas
Vamos ver como criar um canvas inicialmente na tela:
<html>
<head>
<title> Testando o Canvas </title>
</head>
<body>
<canvas id="mycanvas" width="300" height="200"></canvas>
</body>
</html> Ao executar esse belíssimo código acima, vamos ver uma “incrível” tela em branco.
Mas calma, nosso canvas está lá, mas precisamos desenhar nele para aparecer algo.
Vamos começar a fazer alguns testes (a brincadeira começa agora)
<html>
<head>
<title> Testando o Canvas </title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("mycanvas");
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillRect(10, 15, 30, 20);
}
}
</script>
</head>
<body>
<canvas id="mycanvas" width="300" height="200"></canvas>
</body>
</html>Agora sim, já temos alguma coisa. Temos um lindo quadrado desenhado.
Brincadeiras a parte, esse código serve para demonstrar o esqueleto padrão para usar o canvas, e também para ter uma idéia de como funciona o processo de renderização. Como visto acima, os métodos para drawing (para efetuar operações de desenho) não ficam diretamente no canvas, e sim num context, que é obtido a partir do método canvas.getContext(). O modo 2D é o único existente atualmente. Esse canvas segue o padrão do whatwg, e de acordo com o mesmo, o único contexto estabelecido por padrão é o 2D, e eles tem previsão de colocar um contexto 3D com implementação em OpenGL futuramente (aí você imagina as possibilidades futuras).
Vamos ver uma figura abaixo, apenas para ficar com uma noção melhor sobre as coordenadas que colocamos nos parâmetros do fillRect (como diz o nome, ele desenha um retângulo preenchido. Os argumentos são respectivamente: x, y, width, height).
Acho que, com essa figura, deu pra entender as coordenadas e medidas que usarmos. Essa figura foi extraída do site do Mozilla (não fui eu que desenvolvi).
Vamos agora ver os métodos para desenhar disponíveis no nosso contexto:
- fillRect(x, y, width, height) – Desenha um retângulo preenchido
- strokeRect(x, y, width, height) – Desenha as linhas de um retângulo
- clearRect(x, y, width, height) – Limpa uma área do desenho
- drawImage() – Desenha uma imagem (ela tem várias variações nos parâmetros de chamada, vou descrevê-los mais embaixo no artigo)
- beginPath() – Inicia o desenho de um caminho
Obs: todos os métodos abaixo devem ser chamados depois uma chamada ao beginPath
- moveTo(x, y) – Move a posição para desenho
- lineTo(x, y) – Desenha uma linha
- arc(x, y, radius, startAngle, endAngle, anticlockwise) – Desenha um arco
- quadraticCurveTo(cp1x, cp1y, x, y) – Desenha uma curva arredondada
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) – Desenha uma curva de bezier
- rect(x, y, width, height) – Desenha um retângulo no path
- closePath() – Faz a linha que liga ao inicio do path
- fill() – Termina um path preenchendo o conteúdo
- stroke() – Terminar um path desenhando as linhas
Pronto, eu postei os métodos apenas para demonstrar os recursos. Na criação de jogos, basicamente só iremos usar: fillRect e drawImage
Outra coisa interessante de conhecer é o fillStyle e strokeStyle. Com eles podemos definir várias coisas como cor de desenho, transparência, gradientes, patterns e outros. Está fora de escopo falar sobre todos eles aqui. Eu vou mostrar um exemplo mudando de cor. Quem tiver interesse e quiser ver todos os recursos do canvas, entre no site do Mozilla e leia um artigo completo e muito bom sobre o canvas: http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_usage.
Vamos ao nosso exemplo:
<html>
<head>
<title> Testando o Canvas </title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("mycanvas");
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFEAB6";
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Ciclo externo
ctx.fill();
ctx.strokeStyle = "#F00";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI,false); // Boca (clockwise)
ctx.stroke();
ctx.strokeStyle = "#00F";
ctx.beginPath();
ctx.arc(60,65,5,0,Math.PI*2,true); // Olho esquerdo
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Olho direito
ctx.stroke();
}
}
</script>
</head>
<body>
<canvas id="mycanvas" width="300" height="200"></canvas>
</body>
</html>Pronto. Com isso terminamos a cobertura básica do Canvas. A idéia foi apenas apresentar esse recurso para vocês, para não deixar esse artigo sobre jogos tão parado. Vamos fazer uma animação bem simples, só para ver algo em movimento. É um efeito de um espiral se formando de dentro para fora, só para ver algo se mexendo mesmo.
<html>
<head>
<title> Testando o Canvas </title>
<script type="text/javascript">
var raio = 0;
var mov = 0;
var ctx = null;
var center = null;
espiral = function() {
raio += .1;
mov += .04;
var x = center[0] + Math.sin(mov) * raio;
var y = center[1] + Math.cos(mov) * raio;
ctx.fillRect(x, y, 1, 1);
};
window.onload = function() {
var canvas = document.getElementById("mycanvas");
if(canvas.getContext) {
ctx = canvas.getContext("2d");
center = [canvas.width / 2, canvas.height / 2];
setInterval(espiral, 10);
}
};
</script>
</head>
<body>
<canvas id="mycanvas" width="300" height="200"></canvas>
</body>
</html>Terminamos por aqui.
Aprendemos como funciona o canvas, e como desenhar coisas simples nele. No próximo artigo vamos começar a falar de jogos realmente. Iremos criar o nosso GamePanel que é a base onde os jogos irão rodar, e também já começaremos nosso jogo fazendo o background.
Espero que tenham gostado do artigo. Nos vemos semana que vem.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?