Category Archives: Javascript

Brincando com canvas/HTML5

Tenho um brinquedo novo agora: trata-se do elemento canvas presente no HTML 5 e atualmente suportado por práticamente todos os browsers modernos (há uma lista de compatibilidade aqui). Bem: meu objetivo para 2011 é começar a atuar profissionalmente com jogos. Sendo assim, comecei com OpenGL e SDL, que estou estudando frenéticamente. Porém, vi alguns demos usando canvas e pensei: “ei! Quero fazer também!”.

Sendo assim, neste post vou expor três experimentos que fiz com este novo recurso do HTML 5. Em um post posterior, pretendo explicar o código fonte de cada um deles.

Experimento 1: Nanna Invaders

Essa Nanna… vive aprontando das suas! Neste experimento, tentei criar um jogo bem simples. A regra é besta: você deve destruir os terríveis invasores retangulares que tentam destruir a Terra. Esquerda e direita para movimentar-se, direcional pra cima para atirar. Não ligue para os gráficos (foi o meu primeiríssimo experimento, e ainda está portanto “atarístico”).

Experimento 2: Dilúvio de Papel

Após criar interatividade bem básica com Nanna Invaders, resolvi fazer experimentos estritamente gráficos. A idéia era ver o que eu poderia fazer usando, além das primitivas gráficas do canvas, as transformações também. Dilúvio de Papel é basicamente a aplicação da transformação rotação em “nuvens” que havia desenhado anteriormente.

Para minha surpresa, o resultado foi incrívelmente agradável. Diria até hipnótico. :)

Experimento 3: Fantasmas

Resolvi então ir um pouco além. Que tal criar personagens mais simpáticos que um retângulo? Foi quando surgiram fantasmas em minha cabeça. :)

Conclusões até agora

Ainda estou no início do aprendizado, mas o que pude observar é que trabalhar com canvas é muito mais fácil do que imaginava e, pra minha surpresa, a compatibilidade atualmente está bem boa. Vi minhas animações sendo executadas muito bem, com diferenças perceptíveis mas mínimas no IE8, Firefox 3.5 e Chrome (no Chrome o bicho BRILHA).

Outro ponto que me chamou a atenção foi a quantidade de código que precisei digitar. Repare no código fonte (é o que há de realmente bonito nestes experimentos). Ele é mínimo!

Já li alguns posts dizendo que o canvas irá matar o Flash. Minha opinião é que, ao menos no momento, isto é papo furado. O “animador” precisa saber programar e nem sempre (na realidade, quase nunca), este possui boas habilidades de desenho. Arrastar e soltar ou desenhar usando o mouse com o canvas ainda é sonho. Só vejo o canvas chegar próximo ao Flash se um dia surgir alguma IDE bacana (e esta, acredito, vai ser da própria Adobe :) ).

Por enquanto, é isto. Nas próximas semanas pretendo publicar mais alguns experimentos nos quais venho trabalhando (incluindo detalhes sobre o funcionamento). Estou MUITO animado com os resultados (ainda não publicados). E você? O que achou dos meus bichinhos?