Trazendo o Atari para o browser usando HTML5

Olá a todos,

decidi que quero aprender a desenvolver jogos. E neste processo, topei com a tag canvas do HTML5, que me encantou na hora. Já havia desenvolvido alguma coisa usando OpenGL e Java2D, porém fiquei impressionado com o que também poderia fazer com este recurso.

Então, pra treinar, comecei a recriar alguns jogos do Atari usando apenas Javascript e os desenvolvendo de uma forma que fosse o mais próxima possível do código fonte original. Pra isto, dei uma estudada em alguns códigos de jogos para Atari (Pitfall e River Raid) e comecei a jornada.

Gostaria de saber a opinião de vocês.

Comecei com o Freeway, pois além de ter sido o meu primeiro jogo de videogame, também é o mais simples que conheço: http://www.itexto.net/devkico/?p=875

A partir dai, recriei o Space Invaders, BEM mais avançado que o anterior e que acabei de colocar no ar: http://www.itexto.net/devkico/?p=881

O que acham? Nâo é impressionante o que podemos fazer com o canvas? No caso, o que observei foi o seguinte: por enquanto Chrome domina, sendo assim, a experiência que vocês vão ter vai ser muito melhor com ele. Firefox 3.5+ fica em segundo lugar e, pra minha surpresa, Safari em último (talvez por incompetencia minha).

Não é legal?

Cara... muito legal essas novas funcionalidades implementadas no HTML5. Vendo seus exemplos até me interessei pelo assunto, vou dar uma pesquisada sobre essa tag pra "brincar" um pouquinho.

Valeu e continue firme!!!

Sensacional. Até twittei sobre o assunto.

Muito show!

Esse html5 promete!
Quem sabe eu faço uma versão para o "X-Man" do Atari.

Diz aí, quanto tempo vc tá levando para codar, e o que tá sendo mais chato na hora de programar os jogos?

Opa,

que bom que gostaram. Valeu!

No caso, o que está me tomando mais tempo mesmo é o planejamento da coisa. Desenvolvimento de jogos tira o desenvolvedor da zona de conforto que são os formulários né? Então gasto um bom tempo pensando em como representar gráficamente o modelo do jogo. A implementação em si é rápida: leva algo em torno de 3 a 4 horas.

A maior dificuldade que observei é ainda a compatibilidade entre browsers. Som, por exemplo, só está funcionando no Chrome por enquanto, pois ainda não há, pelo que pude observar até agora, um formato de audio padrão presente em todos os browsers. Sendo assim, visto que o objetivo é mais ver o que pode ser feito com o canvas, pra depois, quem sabe, aplicar os mesmos conceitos em outras plataformas (to de olho no XNA e no padrão C/C++ usando SDL/OpenGL também), acabei optando por focar inicialmente apenas no Chrome mesmo, que é o browser que apresentou a melhor implementação do canvas.

JWizard Membro desde: 23/02/2007 15:52:55 Mensagens: 2034 Offline

Droga, acabei de matar a galinha hehe

O meu primeiro jogo do Atari 2600 foi o space invaders =)

Parabéns pelos jogos

GUJ Master Membro desde: 20/05/2009 11:21:32 Mensagens: 1776 Offline

Quantos FPS vc esta conseguindo? Porque a jogabilidade ta muito ruim... só move 1 pixel por vez!?

mochuara wrote:Quantos FPS vc esta conseguindo? Porque a jogabilidade ta muito ruim... só move 1 pixel por vez!?

Oi mochuara, os FPS vão variar de acordo com o browser (não cheguei a medir). No Chrome é aonde o resultado tem se mostrado ordens de magnitude melhor.
No caso, com certeza o FPS está baixo, pois a técnica que estou usando pra renderizar os objetos não é a mais comum usando sprites, mas sim a que era adotada nos jogos originais do Atari, ou seja, estou usando matrizes de valores inteiros nas quais cada item representa uma cor,

tal, como no exemplo abaixo:

Aonde há o 5, é pintado, aonde é zero, é ignorado. Isto me da como vantagem o fato de obter um efeito de transparência/sobreposição práticamente gratuito né? Há algumas otimizações que precisam ser feitas neste código, por exemplo, a cada iteração do loop, a tela inteira é renderizada, o que contribui para a experiência ruim que você teve ai.

Porém, tentei também não obter um movimento fluido como nos consoles atuais (meu objetivo é emular o Atari, lembre-se). Neste sentido, a fluidez que obtive está bem próxima da que obtenho jogando o original no Stella. No caso, para obter esta "fluidez superior", eu poderia fazer o seguinte: diminuir o tempo de loop (está 100ms) para um valor menor e, na movimentação, não mover 3 pixels por vez, como está sendo feito, mas apenas 1 ou menos (no canvas, eu posso trabalhar com unidades semelhantes às do OpenGL, como por exemplo 0.3). Ai eu criaria uma impressão de melhor fluidez (mas perderia o "feeling Atari" que sempre foi o objetivo neste caso).

O curioso é que usando sprites convencionais, observei que a performance era ainda pior. Claro, eu estou apenas iniciando meus experimentos, acompanhando o crescimento que tive do Freeway e logo em seguida para o "Space Invaders", fica nítido que minha melhora está sendo grande, razão pela qual acredito que estes problemas devam melhorar no próximo experimento né? (assim espero!

)

Com relação à jogabilidade, bom: neste caso o objetivo não é tanto obter uma jogabilidade excelente, mas a mais básica possível. O objetivo é ainda ver o que posso fazer com o canvas, entende?

Aliás, eu recomendo demais a leitura dos códigos fontes do River Raid ( http://www.scribd.com/doc/5386334/Atari-VCS-2600-River-Raid-labeled-assembler-source-code ) e do Pitfall ( cujo link no Scribd infelizmente não pude encontrar).

É fascinante como que, com tão pouco, os caras conseguiam fazer tanto. Tá sendo uma aula pra mim.
Outra fonte de pesquisa MUITO importante tem sido o site AtariAge (http://www.atariage.com/2600/programming/index.html). Tenho aprendido HORRORES por lá.

Por que o meu raciocínio até o momento tá sendo o seguinte: quero aprender a criar jogos e, se possível (ou não), viver disto. Então estou começando pelo mais básico que posso encontrar, e este, é o Atari. Como sei que existem hoje bibliotecas maravilhosas como DirectX, OpenGL, SDL, OGRE, etc, que facilitam muito a minha vida, quero primeiro conhecer os conceitos mais fundamentais por trás desta arte. E o Atari é exatamente isto: jogos com regras incrívelmente simples, gráficos bossais e, no entanto, maravilhosamente funcionais, saca?

Confesso que faz muito tempo que não me divirto TANTO.

(recomendo d+ a experiência)

E, pensando bem, mesmo que você jamais escreva um único jogo, o mero estudo, vendo como as coisas eram feitas com tão poucos recursos já vai te tornar um programador melhor, BEM melhor.

kicolobo wrote:E, pensando bem, mesmo que você jamais escreva um único jogo, o mero estudo, vendo como as coisas eram feitas com tão poucos recursos já vai te tornar um programador melhor, BEM melhor.

Ótimo. Eu sempre recomendo a experiência, mas sou muito suspeito para falar.

Os principais motivos pelo qual eu recomendo que alguém implemente um jogo:
1. É uma aplicação de tempo real. Prepare-se para conhecer os desafios disso;
2. Não é orientada a formulários: Você vai conhecer mais sobre computação gráfica e como sua placa de vídeo funciona;
3. O resultado é muito mais interessante! Sua família e amigos irão se impressionar com ele!

4. Pode explorar a OO super bem. Vocês vão ver o quanto persistência, ainda que com o Hibernate, prejudica a OO.

Thread.start() Membro desde: 14/07/2010 13:03:52 Mensagens: 43 Offline

http://jogosdeatari.com.br/game/river-raid
esse jogo era demais, me acabava nele
aposto que vários conhecem

alexspe wrote:http://jogosdeatari.com.br/game/river-raid
esse jogo era demais, me acabava nele
aposto que vários conhecem

E sabe o que é mais legal nele? INTEIRO ocupava 4Kb. Os níveis eram gerados em tempo de execução. Incrível né?

kicolobo wrote:

alexspe wrote:http://jogosdeatari.com.br/game/river-raid
esse jogo era demais, me acabava nele
aposto que vários conhecem

E sabe o que é mais legal nele? INTEIRO ocupava 4Kb. Os níveis eram gerados em tempo de execução. Incrível né?

nossa, o river-raid foi desenvolvido com assembly ou c?

Mauricio de Mello wrote:

kicolobo wrote:

alexspe wrote:http://jogosdeatari.com.br/game/river-raid
esse jogo era demais, me acabava nele
aposto que vários conhecem

E sabe o que é mais legal nele? INTEIRO ocupava 4Kb. Os níveis eram gerados em tempo de execução. Incrível né?

nossa, o river-raid foi desenvolvido com assembly ou c?

Assembly, postei o código fonte em PDF logo acima

É muito impressionante

Thread.start() Membro desde: 14/07/2010 13:03:52 Mensagens: 43 Offline

PQPPPP Assembly

Notícias, artigos e o maior fórum brasileiro sobre Java