Nesta parte 1 aprenderemos como inicializar o canvas e carregar e exibir imagens.

A primeira coisa que precisamos saber para criar jogos em HTML 5 é… bem, HTML! É necessário o conhecimento básico de tags e de como criar pelo menos uma página vazia para conter o jogo.

A segunda coisa é um pouco de CSS, que serve para configurar os elementos inseridos na página (bordas, cores, tamanhos, etc). Jogos mais avançados em HTML utilizam muitos elementos fora do <canvas>, que vamos ver nesse tutorial, tirando proveito de outros elementos HTML para apresentar dados e de CSS para formatar este dados.

Finalmente, precisamos saber também Javascript (JS) para fazer a programação da lógica do jogo. A sintaxe é parecida com Java ou C++ e oferece suporte a objetos, embora não seja de fato uma linguagem orientada a objetos. Não oferece, por exemplo, recurso para herança, embora seja possível simular isto com construções mais avançadas.

Vou assumir que você entende pelo menos o mínimo de HTML e CSS e que sabe incluir scripts em uma página. Mas a necessidade disto é tão pequena para este tutorial que é até possível você aprender o necessário só estudando os exemplos.

Dito isso, vamos em frente.

O elemento <canvas>

Uma das novidades que a versão 5 da HTML trouxe foi a tag <canvas>, que cria na página um elemento que permite o desenho direto. Antes disso, para exibir imagens era preciso inserir um elemento <img> para cada uma. Ess elemento cria um objeto gráfico no navegador para armazenar e apresentar a imagem – este tipo de objeto consome recursos do sistema. Se todas imagens fossem sprites animados, teríamos um página bem pesada para o navegador renderizar. Com o canvas, no entanto, podemos desenhar nele todas imagens necessárias e o navegador só vai renderizar o canvas – como se fosse uma única imagem.

Além disso, com o canvas podemos desenhar primitivas gráficas, como linhas, retângulos e texto, além de ter efeitos de composição na aplicação das imagens. A grosso modo, o canvas é como uma imagem cujo conteúdo pode ser modificado. Utilizamos ele como se fosse a tela, desenhando nele cada quadro do jogo.

A inclusão de um elemento canvas na página é feita com a tag <canvas>>. No exemplo de código abaixo temos uma página HTML que contém esta tag e também um elemento <div> acima do canvas, dentro do qual vai uma informação textual.

 
        <script src="aoj/aojcanvas.js"><!--mce:0--></script>
<div id="info">Abrindo o Jogo - exemplo de uso do elemento canvas</div>

Note que esta página inclui dois arquivos externos:

css/estilos.css: Contém o código CSS de formatação dos elementos. Esse código se refere aos elementos pelo seu ID, sendo que o div possui o ID “info” e o canvas possui o ID “Canvas1″.

O conteúdo deste arquivo é o seguinte:

body {
    margin: 0px;
    border: none;
    background-color: black;
}
#canvas1 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -480px;
    margin-top: -300px;
    background-color: white;
}
#info {
    background-color: blue;
    color: yellow;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    text-align: center;
}

Basicamente o código deste arquivo muda o fundo da página para preto, centraliza o canvas na tela e aplica estilo de fundo, cor e fonte ao div que apresenta o texto. É comum colocarmos os arquivos de estilo dentro de uma pasta “css”.

aoj/aojcanvas.js: este arquivo de script possui o código para inicialização e uso do canvas, contendo algumas rotinas criadas para facilitar a programação. Veremos como usar o canvas a seguir.

Usando o elemento canvas

Para obter uma referência ao elemento canvas, usamos o comando document.getElementById(), passando o ID que especificamos para nosso canvas. Obtemos a referência e atribuímos para uma variável, assim:

    var _aojCanvas = document.getElementById(canvasId);

Para desenhar algo nele, precisamos obter um contexto gráfico, o que é feito com o método getContext do canvas. Esse método requer um parâmetro que, atualmente, só pode ser “2d”.

Depois de obter o contexto, atribuindo ele a uma variável, usamos os métodos dele para desenhar. Veja abaixo:

window.onload = function() {
    var _aojCanvas = document.getElementById('canvas1');
    var ctx = _aojCanvas.getContext('2d');
    ctx.beginPath(); // inicia um desenho.
    ctx.fillStyle = 'blue'; // especifica a cor de preenchimento.
    ctx.strokeStyle = 'red'; // especifica a cor de contorno.
    ctx.rect(10, 10, 200, 100); // especifica um retângulo.
    ctx.rect(220, 10, 50, 50); // especifica outro retângulo.
    ctx.stroke(); // contorna o desenho (dois retângulos).
    ctx.fill(); // preenche o desenho (dois retângulos).
    ctx.beginPath(); // inicia outro desenho.
    ctx.strokeStyle = 'black'; // muda a cor de contorno.
    ctx.rect(50, 50, 100, 100); // especifica um retângulo.
    ctx.stroke(); // contorna o desenho (um retângulo).
}

O código acima desenha dois retângulos preenchidos de azul dentro do canvas. Cada desenho é iniciado com beginPath. Se este método não fosse chamado na segunda vez, o terceiro retângulo especificado ainda seria parte do primeiro desenho e o comando stroke iria contornar os três retângulos.

Perceba que o código foi colocado dentro de uma função atribuída ao evento onload da janela, para que seja executado apenas depois dela carregar completamente. Isso é importante porque se não for feito, o código executaria assim que fosse baixado – o que poderia ocorrer antes mesmo da declaração do canvas ter sido carregada – o que resultaria em erro porque o objeto canvas não existira ainda na página.

Métodos de atalho

A utilização do canvas para desenhar é algo de baixo nível. São precisos vários comandos para desenhar um retângulo na tela, por exemplo.

Para facilitar a programação, é interessante criar funções auxiliares que incluem todas chamadas necessárias para realizar determinadas ações. Assim criamos uma biblioteca própria. O arquivo aojcanvas.js é um exemplo de biblioteca deste tipo, embora incompleta.

Vejamos algumas funções deste arquivo para entender essa prática:

function aojSetCanvas(canvasId) {
    _aojCanvas = document.getElementById(canvasId);
}
 
function aojFillStyle(optionalNewValue) {
    var ctx = _aojCanvas.getContext('2d');
    if (optionalNewValue)
        ctx.fillStyle = optionalNewValue;
    return ctx.fillStyle;
}
 
function aojFillRect(x, y, w, h, optionalFillStyle) {
    var ctx = _aojCanvas.getContext('2d');
    ctx.beginPath();
    if (optionalFillStyle) {
        ctx.fillStyle = optionalFillStyle;
    }
    ctx.rect(x, y, w, h);
    ctx.fill();
}

A função aojSetCanvas() é usada para informar à nossa biblioteca qual elemento canvas desejamos usar – podemos ter mais de um canvas na nossa página. Passamos o ID como parâmetro e o elemento é obtido é armazenado em uma variável global, acessível para todas as demais funções.

aojFillStyle() permite obter o estilo de preenchimento atual, e também modificá-lo. Se for passado um parâmetro, ele é usado para modificar o estilo, que em seguida é retornado. Se não for passado o parâmetro, o estilo atual não é modificado, apenas retornado.

E a função aojFillRect() serve para desenhar um retângulo preenchido. Ela pode usar o estilo previamente definido, mas também aceita um quarto parâmetro opcional que, se informado, é usado como estilo para o retângulo.

Este tipo de comando permite mudar nosso exemplo para o seguinte:

window.onload = function() {
    aojSetCanvas('canvas1');
    aojFillRect(10, 10, 200, 100, 'blue'); // preenche um retângulo azul.
    aojFillRect(220, 10, 50, 50, 'blue'); // preenche outro retângulo azul.
    aojStrokeRect(10, 10, 200, 100, 'red'); // contorna um retângulo vermelho.
    aojStrokeRect(220, 10, 50, 50, 'red'); // contorna outro retângulo vermelho.
    aojStrokeRect(50, 50, 100, 100, 'black'); // contorna um retângulo preto.
}

Este exemplo ficaria ainda mais claro e resumido se criássemos uma função para desenhar um retângulo preenchido e já contornado. Até que ponto devemos ir na criação de nossa própria biblioteca de funções vai depender da natureza de cada projeto – aqueles procedimento que são repetidos muitas vezes são os que devem ser transformados em funções. Não recomendo tentar criar uma porção de funções de antemão porque você acabará com muitas que nunca vai utilizar, e mesmo assim não eliminará o risco de precisar de uma que não lembrou.

Desenhando imagens no canvas

É importante saber como desenhar primitivas gráficas no canvas, mas o principal recurso ainda é a apresentação de imagens, afinal, quase todo jogo é feito de sprites.

Para carregar uma imagem, basta criar um objeto do tipo Imagem e atribuir a URL do arquivo para o atributo “src”. Opcionalmente podemos atribuir uma função para o atributo onload – esta função será chamada quando o arquivo de imagem for carregado. Este é um recurso importante de usar em jogos com muitas imagens, para garantir que todas tenham sido carregadas antes de iniciar o jogo.

Novamente, para facilitar o trabalho, criamos uma função na nossa biblioteca:

function aojNewImage(imgURL, optionalLoadCallback) {
    var img = new Image();
    img.src = imgURL;
    img.onload = optionalLoadCallback;
    return img;
}

Esta função recebe a URL do arquivo da imagem e opcionalmente uma função de callback, que será chamada quando a imagem for carregada.

Para desenhar uma imagem no canvas, temos outra função:

function aojDrawImage(img, x, y) {
    var ctx = _aojCanvas.getContext('2d');
    ctx.drawImage(img, x - img.width / 2, y - img.height / 2);
    if (_aojShowImageCenter) {
        ctx.arc(x, y, 2, 0, 2*Math.PI, false);
        ctx.fill();
    }
}

Nesta função, apenas as duas primeiras linhas são responsáveis por desenhar a imagem no canvas. O IF é usado para desenhar um círculo no ponto (x,y) onde a imagem é desenhada, de forma a enxergarmos onde fica esse ponto. É útil para debugar posicionamento.

Transformações geométricas

O canvas oferece métodos para aplicar transformações geométricas no que é desenhado nele. Por exemplo, podemos rotacionar ou aumentar e diminuir uma imagem no momento de desenhá-la.

É importante saber, no entanto, que uma vez especificada uma transformação, ela fica em efeito para tudo que for desenhado depois. Portanto, depois de aplicar uma rotação, por exemplo, e desenhar a imagem desejada, é preciso aplicar a rotação inversa para deixar o canvas no estado normal antes de desenhar as próximas imagens.

Abaixo está uma função para desenhar uma imagem com transformação de escala. Como parâmetros ela recebe o objeto imagem, a posição (x, y) onde ele deve ser desenhado e os fatores de escala sx e sy.

Veja que para o efeito ser aplicado corretamente é preciso usar uma outra transformação em conjunto – a translação. Fazemos a translação para que a posição da imagem seja transferida para a origem (ponto (0,0)) e então a escala é aplicada. Depois de desenhada a imagem, desfazemos a escala e a translação aplicando estas transformações com o valor inverso.

function aojDrawImageScale(img, x, y, sx, sy) {
    var ctx = _aojCanvas.getContext('2d');
    ctx.translate(x, y);
    ctx.scale(sx, sy);
    ctx.drawImage(img, -img.width / 2, -img.height / 2);
    ctx.scale(1/sx, 1/sy);
    ctx.translate(-x, -y);
    if (_aojShowImageCenter) {
        ctx.arc(x, y, 2, 0, 2*Math.PI, false);
        ctx.fill();
    }
}

No arquivo aojcanva.js existem outras funções deste tipo. Este arquivo e os demais estão no Zip no final da página.

Conclusão

Neste artigo vimos o basico da utilização do canvas para mostrar imagens.

No site abaixo há um guia de referência do canvas para ser impresso, com todos os comandos. O Autor (Jacob Seidelin) também escreveu um livro sobre jogos em HTML 5.
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

No próximo artigo veremos como implementar um game loop e utilizar o teclado e mouse.

• Visualizar o exemplo funcionando
• Baixar o código fonte do exemplo

Depois de dedicar os últimos meses totalmente para minha faculdade, estou de volta.

Conforme prometido, inicio hoje o meu tutorial sobre o Blender. A ideia será postar vários vídeos tutoriais sobre como utilizar o software 3D em maior evidência no mercado atualmente.

Neste primeiro vídeo, veremos como modelar um personagem básico em low poly (poucos polígonos). Agora já de férias , em breve vou estar postando os outros capítulos.

Gostaram? Comentem as sugestões ou dúvidas .

Não deixem de conferir esta primeira parte, está muito legal.

Tutorial Pixel Art – Parte 1

Olá pessoal, meu nome é Luis Otávio e trago este artigo onde mostrarei como começar na programação de jogos usando o Game Maker. O Game Maker é um motor (Engine) desenvolvido para facilitar a criação de jogos de qualquer tipo. Com ele podemos fazer um Pac-Man ou até um Mega Man. Este motor também permite a criação de jogos 3D simples, porém para criar jogos mais complexos, como Age of Empires, você precisará dominar a linguagem do motor, denominada GML (Game Maker Language), não abordada neste meu primeiro tutorial por motivos didáticos.

Inicialmente vocês criarão jogos usando o sistema Drag and Drop (Arraste e Solte) que o Game Maker oferece.

Bom, para começar você precisa fazer o download do programa, ele pode ser baixado no endereço yoyogames.com. A instalação é bem simples, utilize a versão gratuita, apesar de possuir algumas limitações, nos possibilitará fazer jogos bem interessantes. A tela inicial do programa é mostrada abaixo:

Tela Inicial do Game Maker

Eu farei uma rápida introdução sobre a interface do programa, falando apenas sobre o necessário para o entendimento básico do Game Maker.

• Sprites
  • Nesta pasta você colocaráa as imagens dos personagens, itens e qualquer outra imagem que representara algo interativo no jogo.
• Sounds
  • Aqui irá os sons e musicas do jogo.
• Backgrounds
  • Nesta pasta você carregará os fundos de cenários e imagens que não são interativas no jogo, tais como logos, fundos de menus etc.
• Fonts
  • Nesta pasta você poderá colocar as fontes (tipos de letras) que serão usadas em seu jogo.
• Objects
  • Esta é sem duvidas uma das pastas mais importantes, é nela que fica tudo que for interativo no jogo é aqui que fica o funcionamento do jogo.
• Rooms
  • Aqui é onde ficam as salas do jogo, isso pode ser entendido como o local onde ficam a fase, a tela de game over ou a tela de título.

Para adicionar algum dos itens listados acima, você deve clicar com o botão direito sobre a pasta e selecionar Create. Vamos começar por Create Sprite.

Create Sprite

Logo surgirá a tela Sprite Properties (Propriedades do Sprite) como mostra a figura abaixo.

Load Sprite

Por enquanto não entrarei em detalhes sobre as propriedades do sprite, isto será abordado em um outro artigo. Vamos apenas clicar em Load Sprite, abrirá então uma janela de seleção de arquivos, selecione uma imagem qualquer para representar um personagem do jogo. Após selecionada a imagem, clique em ok. Repita o processo para selecionar um sprite que represente um obstáculo em nosso jogo, pode ser um cubo ou qualquer imagem que você preferir. Se você fez tudo certinho, veremos uma tela como a demonstrada abaixo.

Create Object

Por enquanto estes sprites não são nada além de imagens, ou seja, eles ainda não representam nada dentro do jogo, são apenas imagens que serão enviadas para a memória assim que o jogo iniciar. Para dar vida a nosso personagem, devemos criar um novo Object, utilizando o mesmo procedimento anterior, um clique com o botão direito sobre a pasta Objects. Ao selecionar Create Object, a janela abaixo será apresentada.

Propriedades do Objeto

Na janela de propriedades do objeto, você pode perceber que existem vários botões e abas, mas não se assuste, não será necessários ver todos eles neste momento. Bom, seguindo com a criação do personagem, na janela de propriedades do objeto, clique no botão na parte superior esquerda, referente a Sprite (marcado com um círculo verde), em seguida, selecione o que corresponde ao personagem. Agora temos um objeto com aparência, porém sem ação alguma. Para inserir movimento em nosso personagem, devemos clicar no botão Add Event, destacado na imagem acima com um círculo vermelho. As opções de ações serão apresentadas em uma nova janela, demonstrada abaixo.

Seletor de Eventos

Novamente não se assuste com a quantidade de ações, vamos nos deter apenas na opção Keyboard. Com isto, estaremos adicionando um evento que verificará se uma respectiva tecla está sendo pressionada. Quando você clicar no botão keyboard surgirá uma lista de teclas que podem ser verificadas, como na imagem abaixo.

Lista de Teclas

Selecione a opção <Left> (seta para a esquerda), desta forma, você adiciona um evento que ouvirá quando tecla for pressionada. Agora devemos vincular uma ação a este evento. Para isto, observe no canto superior direito da janela propriedades do objeto, na área que corresponde a movimento (Move), o primeiro botão (destacado em vermelho). Arraste-o para a parte em branco, correspondente a actions, marcada com um retângulo vermelho na figura abaixo.

Propriedades do Objeto

Assim que você soltar a ação selecionada, surgirá uma janela como a mostrada na imagem abaixo.

Move Fixed

Esta janela correspondente a ação Move Fixed. Esta ação faz com que o objeto se mova na direção e velocidade definidas nos campos correspondentes.

A próxima etapa será criar uma sala para testar o nosso objeto. Clique na pasta Rooms com o botão direito e selecione Create Room para criar uma nova sala, acionando a janela Room Properties, como demonstrado na imagem abaixo.

Create Room

Na janela propriedades da Room, você pode visualizar várias abas na parte superior esquerda, mas não entrarei em detalhes sobre todas, apenas a Objects. Clique no botão destacado para selecionar o objeto atual que será adicionado a sala. O próximo passo será adicionar seu personagem no mapa, para isto clique com o mouse sobre o local desejado na grade. Pronto, agora é só testar!

Para publicar/compilar seu jogos, basta clicar no botão de play verde na parte superior da interface.

Publicar/Compilar seu jogo

Assim que seu pseudo jogo começar, você poderá teclar seta para a esquerda e perceber o personagem movendo-se. Caso ocorra algum problema, revise o artigo até esta etapa. Se tudo funcionar direitinho, é horas de exercitar um pouco, faça seu personagem se movimentar também para as direções Direita <Right>, Cima <Up> e Baixo <Down>.

Conseguiu? Então vamos adicionar agora algum obstáculo para o personagem, clique com o botão direito sobre a pasta Objects e crie um novo objeto, marque-o para usar o Sprite correspondente ao obstáculo. Desta vez , marque a opção Solid , isso fará com que o objeto seja sólido.

Propriedades do Objeto Obstáculo

Apesar de estar marcado como sólido, o objeto ainda não representa um obstáculo para o personagem, isto ocorre porque não há ninguém detectando (ouvindo) a colisão. Sendo assim, precisamos adicionar um evento que verifica se objetos colidiram. Para isto, abra novamente seu personagem, adicione um novo evento clicando em Add Event e selecione Collision. Como demonstrado na imagem abaixo, surgirá uma lista com os objetos, marque o object1, referente ao obstáculo.

Adicionando Colisão

Após o evento de colisão ser adicionado, temos que vincular uma ação a ele. O processo será bem similar aos anteriores, porém ao invés de selecionar uma direção, você deve clicar no centro do direcional, além de configurar a velocidade para zero, observe na imagem abaixo.

Colisão com o obstáculo

Com isso você já tem um ambiente bem simples, monte um pequeno cenário, com o personagem no centro e vários obstáculos para experimentar. Após a sala criada, é só clicar no play para ver o resultado.

Bom, por enquanto é só, tente fazer outras modificações em seu pseudo jogo e vá tentando entendê-lo aos poucos, não tente fazer coisas muito complicadas sem primeiro entender o simples. Se você pretende ser um desenvolvedor de jogos, precisará aprender que só se pode passar para coisas mais complexas quando as simples estiverem completamente dominadas, falando em linguagem de games, jogue primeiro no Easy para depois experimentar o Hard .

Um grande abraço a todos do Abrindo o Jogo.

Luis Otávio