Criando jogos com CANVAS

Chegou a hora de animar o personagem usando uma sprite sheet. Vamos atualizar os conhecimentos adquiridos na parte 2 e dar vida ao astronauta. O conceito Aqui vamos criar um pequeno loop que vai variar o clipping da imagem do astronauta de tempos em tempos. O tempo da atualização será determinado pela variável velocidade. Segue o código: //Recupera o canvas var context = document.getElementById('output').getContext('2d'); //Posição X inicial var posicaoXOrigem = 0; //Posição Y não varia var posicaoYOrigem = 0; //Largura e altura serão os mesmos var larguraOrigem = 51; var alturaOrigem = 50; //O personagem será desenhado na mesma posição var posicaoXDestino = 0; var posicaoYDestino = 150; var larguraDestino = 51; var alturaDestino = 50; //A velocidade do personagem var velocidade = 80; //Armazena o último tempo de processamento var ultimoTempo = 0; //Carrega a imagem. Nada novo aqui var img = new Image(); img.src = 'spac...

Desenhar imagens no canvas é legal, mas, para ficar ainda mais bacana, precisamos aprender a técnica de clipping , ou recorte, de imagens. Conceito No jargão do desenvolvimento de jogos, um conjunto de imagens contida em um único arquivo é chamada de sprite sheet . É com esse grupo de imagens que criamos animações, que  não é nada além que um conjunto de imagens em sequência, dando sensação de movimento quando exibidas com um curto intervalo de tempo entre elas. Vamos usar como base a imagem desse astronauta aqui. Sprite sheet Uma sequência de imagens forma uma tabela de imagens, um sprite sheet, que contém linhas e colunas. Na imagem do astronauta, temos uma tabela com uma linha e oito colunas. Assim, cada quadro corresponde a 1/8 da imagem. Como a imagem possui 408 pixels de largura, então cada quadro (408/8) possui 51 pixels. A altura da linha é de 50 pixels. Usando esse conceito, então, caso eu queira acessar o 3º quadro da animação, basta fazer referência à posição...

Nos posts anteriores aprendemos como desenhar no canvas usando os variados métodos disponíveis. Hoje vamos um pouco mais além: vamos recuperar uma imagem e desenhá-la no canvas. A classe Image O Javascript dispõe de uma classe nativa para manipulação de imagens chamada Image. Instanciar uma imagem é moleza: var img = new Image(); E, depois, altere a propriedade .src para o endereço da sua imagem: img.src = 'endereco-da-imagem.ext'; Fácil assim. Desenhar essa imagem no canvas também é bastante tranquilo (considerando que o canvas foi carregado na variável "context"): context.drawImage(img, posicaoX, posicaoY, largura, altura); Segue o código completo: var context = document.getElementById('output').getContext('2d'); var img = new Image(); img.src = 'pulga.jpg'; context.drawImage(img, 30, 30, 96, 97); Daí você percebe que a imagem não foi carregada. Isso acontece porque o Javascript tentou desenhar a imagem ANTES de conseg...

Esse post requer o conhecimento dos seguintes posts: Um pouco mais sobre canvas Orientação a objetos - Parte 1: Classes Vamos unir os conhecimentos adquiridos até aqui para criar alguma coisa visualmente interessante. Já aprendemos a desenhar formas no canvas e a criar objetos com Javascript. Ainda não é possível criar um jogo, pois nos falta o conceito de colisão, mas isso não quer dizer que não podemos fazer nada. Fazendo acontecer Vamos criar um classe para desenhar uma bola de tamanho, cor e velocidade variada. Essa bola vai se mover pelo canvas. A classe Bola Bola será a classe que usaremos como base. O código é o seguinte: /* Determino o canvas que receberá o desenho */ var canvas = document.getElementById('output').getContext('2d'); /* Classe Bola. Desenha uma bola no canvas */ /* Parâmetros:    cor: a cor da bola    raio: o tamanho da bola    x: posição da bola no eixo X    y: posição da bola no eixo Y   ...

O desenvolvimento de jogos se dá muito bem com a orientação a objetos. Nesse post vamos discutir objetos com Javascript e considerar os pontos fortes dessa abordagem de programação. Conceito de objeto Na programação, um objeto é uma variável que possui características e pode executar ações. Em muitas literaturas sobre a programação orientada a objetos (POO daqui pra frente) o exemplo mais comum é o de um carro, que possui cor, número de vagas e velocidade máxima (características), e pode acelerar, frear, acender os faróis e buzinar (ações). Chamamos de atributos ou propriedades as características do objeto. Já as ações são conhecidas por métodos. Antes de existir um objeto existe uma classe, que é como  uma estrutura geral, um esqueleto. Então, em javascript, podemos criar a classe carro da seguinte maneira: /* Classe carro */ /* Construtor da classe recebe a cor, vagas e velocidade máxima */ var Carro = function(cor, vagas, velocidade) {   /* Atribui os valores passa...

O Canvas No post anterior vimos como escrever no canvas. Agora vamos aprender um pouco mais sobre ele. Propósito O canvas foi adicionado ao HTML para suportar desenhos em páginas web. Além de textos, é possível desenhar linhas, retângulos, círculos. É possível determinar cor ou cores para o desenho e, finalmente, criar animações, que é a base da criação de jogos. O código-base Usaremos o código-base definido no post anterior. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>Meu primeiro canvas</title> <meta name="viewport" content="width=device-width, user-scalable=no"> <link rel="stylesheet" type="text/css" href="default.css"> </head> <body> <canvas id="output" width="200" height="200"> Seu navegador não suporta o elemento canvas </canvas> <script> ...

O que precisamos saber? O HTML nasceu há muito tempo atrás, mais ou menos junto com a internet. Ele evoluiu e hoje está na versão 5. O HTML não trabalha sozinho, serve apenas para marcar lugares em um página. Para formatar o conteúdo das páginas, ou seja, torná-las mais bonitas e adaptáveis aos mais variados tipos de tela, temos o CSS, que também evoluiu muito, e atualmente está na versão 3. Por último, mas não menos importante, temos o Javascript. Ele também evoluiu muito, ganhou velocidade, e, principalmente, respeito. Ele é usado para trazer dinamismo às páginas, como efeitos e transição, controlar áudio, vídeo, entre outras coisas. Eles não trabalham sozinhos. Os três, unidos, nos dão superpoderes e, assim, podemos criar páginas web maravilhosas e, no nosso caso, jogos! O caminho para a criação de jogos não é difícil, mas é preciso dedicação, interesse, tempo, inspiração e persistência. Escrevendo códigos Olha, uma das coisas mais esquisitas do mundo é um código-fonte ...