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?

4 thoughts on “Brincando com canvas/HTML5

  1. Bacana os exemplos! Eu nunca havia lido nada a respeito, mas já tinha vistos vários exemplos “do caralho”. Muito parecido com canvas em Java ou em Delphi, exatamente o tipo de coisa que os “flasheiros” não se dariam bem a princípio. Veio agora na cabeça, ouvir falar de um tempo atrás de um conversor de swf para HTML5! Coisa fina…

  2. Na realidade, o que me impressionou com o canvas é como ele se parece com o OpenGL. Então, de repente, se abriu um UNIVERSO pra mim. Eu queria começar a desenvolver jogos pra PC/Xbox/iPhone, etc. Com o canvas, eu consigo fazer quase isto com o mesmo código. Fascinante a parada!

    Eu estou trabalhando em algumas coisas e devo publicar nas próximas semanas a respeito. To ficando MUITO impressionado co os resultados.

  3. Pena que quase todo o HTLM5 não funciona no navegador mais atulizado atualmente, o IE8, não que eu goste de usar esse navegador, mas todo cliente quer que sua página funcione em qualquer navegador e isso é dor de cabeça pra quem programa para web, ate hoje não encontrei uma forma de utilizar o canvas no IE8, se alguem souber como fazer passa a dica pra nos.

  4. Cara, te digo uma coisa: este é O problema. Inclusive, nos testes que fiz no IE9, as coisas não são tão melhores quanto alardearam.

    A única “solução” que vejo é a mais tosca possível e difícilmente funcionaria: usar o “Google Chrome Frame”, que é um plugin pro IE no qual os sites são renderizados usando o engine do Chrome.
    Ai chega a pergunta: “mas as pessoas vão instalar isto?” E a resposta é “infelizmente não” :(

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.