1. Conhecendo a Tag <Canvas>
Hoje comecei meus estudos para desenvolvimento de jogos em HTML5. A primeira coisa que aprende é a tag Canvas, que é onde o jogo vai ser desenhado. Vamos pegar um exemplo de código:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="game" width=800 height=600>
Seu navegador não suporta HTML 5
</canvas>
</body>
</html>
Analisando esse código, temos os seguintes elementos:
- id: é o identificador da tag. É através dela que vamos estar referenciando a Canvas no código;
- width: a largura da Canvas;
- height: a altura da Canvas;
Também podemos definir uma borda para a Canvas usando CSS. Neste caso utiliza-se a propriedade border, como exemplo abaixo mostra:
<canvas id="game" width=800 height=600 style="border:1px solid #000000;">
Se executarmos o código, veremos que a Canvas está vazio, com apenas uma borda preta. Canvas é apenas um conteiner para as imagens que será desenhado, mas os desenhos tem que partir de um script, que é o que veremos agora.
2. Desenhando na Canvas
Antes de aprender a desenhar na canvas, temos que lembrar de como é o sistema cartesiano que geralmente os computadores usam. A origem, ou o ponto de referência, ou o ponto (0,0) é sempre no canto superior esquerdo e o eixo x vai aumentado para a direita, assim com o eixo y vai aumentando para direita.
Sabendo disso, agora podemos prosseguir, afinal, é a partir desses pontos de referências é que vamos desenhar na nossa Canvas. Utilizaremos o JavaScript para pintar na canvas, por isso criaremos a tag <script> abaixo da declaração da Canvas, afinal, só podemos utilizá-la depois que o navegador a criou.
2.1 Preparar Para Desenhar
A primeira coisa que precisamos fazer é pegar a referência do Canvas, fazemos isso com o seguinte comando:
var c = document.getElementById("game");
Em seguida, vamos pegar o contexto da Canvas:
var ctx=c.getContext("2d");
Então a partir daqui, podemos começar a desenhar na Canvas:
2.2 Desenhando um Retângulo
ctx.fillRect(0,0,150,75);
Isso criará um retângulo totalmente cheio na posição (0,0) com 150 de largura e 75 de altura. Lembrando que a altura vai aumentando para baixo.
Se quiser um retângulo que só tenha as bordas, utilize o método strokeRect:
ctx.strokeRect(0,0,150,75);
E também temos um comando que serve para apagar uma área retângular, que é o comando ...:
ctx.clearRect(0,0,150,75);
2.3 Desenhando Linhas
Para desenhar uma linha, utilizaremos os seguintes comandos:
ctx.moveTo(150,0);
ctx.lineTo(300,150);
ctx.stroke();
O primeiro comando é o ponto inicial da linha, neste caso, começara do ponto (150,0). O segundo comando indica onde acaba essa linha, ou seja, aqui, acabará no ponto (300,150). O terceiro comando, desenhará a linha na canvas, sem ela, os dois primeiros não surtirá efeito.
2.4 Desenhando Arcos/Círculo
Para desenhar um Arco/Círculo, usamos o seguinte código:
ctx.beginPath();
ctx.arc(95,150,40,0,2*Math.PI);
ctx.stroke();
A primeira linha indica o começo dos comandos. A segunda linha é a que vai gerar o círculo. O comando arc, os parâmetros são: os dois primeiros a posição x e y do centro do círculo, o terceiro parâmetro é o raio e os dois últimos são, respectivamente, o ângulo inicial e o ângulo final em radianos que é para ser desenhado (neste caso, o ângulo vai de 0 até 2PI, fechando a circuferência).
A última linha, é o que vai decidir se o círculo a ser desenhado vai ser preenchido ou não. Para não ser preenchido, utiliza o método stroke, se for um círculo preenchido, utiliza-se o método fill, como embaixo:
ctx.beginPath();
ctx.arc(195,150,40,0,2*Math.PI);
ctx.fill();
2.5 Inserindo Texto
Para inserir um texto na imagem é preciso primeiro configurar a fonte. Para isso, setamos o atributo font, dessa maneira:
ctx.font="30px Arial";
Agora podemos escrever o nosso texto, temos duas opções:
ctx.fillText("Hello World",310,50);
ctx.strokeText("Hello World",310,150);
Assim como no círculo, o fillText, escreverá o texto com letras cheias, enquanto o strikeText escreve somente as bordas das letras. Para ambos, os parâmetros são o mesmo, sendo o primeiro o texto a ser exibido e o restante a posição x e y do texto.
2.6 Alterando as cores
Note que a cor do retângulo gerado foi preto, essa é a cor padrão caso uma cor não foi especificada. Para especificar a cor de um desenho, alteramos o atributo fillStyle do contexto para indicar a cor. Por exemplo:
ctx.fillStyle="#FF0000";
ctx.fillRect(250,0,150,75);
Agora, o retângulo resultante será vermelho.
Também podemos criar um cor em gradiente, para isso criaremos um objeto Gradiente e atribuiremos ao fillStyle. Para criar um gradiente, existem dois métodos no contexto, que depende se você quer um gradiente linear ou radial. Mas vamos por partes, começando pelo linear:
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue");
A primeira linha é a criação do objeto gradiente, e os parâmetros que ele recebe descreve a direção do gradiente, neste caso, a direção começa do ponto (0,0) até (200,0), que forma uma linha horizontal. Se quisessemos, por exemplo, uma gradiente vertical, poderiamos iniciar do (0,0) até (0,200), resultaria nos parâmetros (0,0,0,200), o que daria uma linha vertical, e assim vai alterando.
A segunda e terceira linha usa o método addColorStop para inserir as cores que vai fazer parte do gradiente. O primeiro parâmetro indica a localização em que a cor estará 100%, e é especificada por um valor entre 0 e 1, sendo 0 o início e o 1 o final. O segundo parâmetro é a cor que você deseja. Por exemplo, se eu quiser adicionar mais uma cor, verde por exemplo, que fique no meio do gradiente, o código seria:
grd.addColorStop(0.5,"green");
Depois de configurar o gradiente, basta atribuir ao fillStyle:
ctx.fillStyle = grd;
E o resultado vai ser:
Para alterar o tipo de gradiente, para linear, basta substituir o método
createLinearGradient para:
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
Neste caso, os significados dos parâmetros são diferentes: o primeiro par de parâmetros é a posição do primeiro círculo e o terceiro parâmetro, o seu raio. O quarto e o quinto parâmetro é a posição do segundo círculo e o sexto parâmetro é o raio do segundo. O gradiente vai ocorrer num cone gerado pelos dois círculos, como mostra a imagem abaixo:
2.7 Inserindo Imagens
Primeiro, nós temos que carregar a imagem. de alguma forma, para isso nós utilizaremos a classe Image do Javascript:
var imageObj = new Image();
imageObj.src = "champz.png";
Aqui a classe Image é instanciada e setamos uma referência para uma imagem que está no mesmo diretório do arquivo html. Uma coisa importante é que antes de desenhar a imagem, a mesma tem que já estar carregada no computador do usuário, senão não aparcerá nada. Então, vamos criar um evento que será disparado quando a imagem estiver carregada, mas isso é assunto para outro post, por hora, se não aparecer a imagem, tente atualizar a página.
Depois de carregada no computador do usuário, basta desenhar no canvas:
ctx.drawImage(imageObj, 450, 50);
Neste comando, temos a imagem carregada como primeiro parâmetro, seguido das posição x e y do local onde será inserida.
3. Considerações Finais
O resultado desse tutorial é para sair algo parecido com isso:
Note que a imagem não coube inteiramente na Canvas, então a mesma exibe apenas o que está dentro do limite dela. Outra coisa que vale a pena falar é que se algo que você desenhou ficar numa região que já foi desenhada, o novo desenho vai cobrir essa região. Então, em caso de jogos, você sempre renderizará primeiro as imagens de fundo e deixarás as de primeiro plano por último.
Então pessoal, até a próxima!
Muito obrigada, me ajudou muito!
ResponderExcluir