Trazendo o Atari para o browser usando HTML5

Assuntos Gerais
#1

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?

#2

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!!!

#3

Sensacional. Até twittei sobre o assunto.

#4

Muito show! :smiley:
Esse html5 promete!
Quem sabe eu faço uma versão para o “X-Man” do Atari. 8)

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

#5

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.

#6

Droga, acabei de matar a galinha hehe

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

Parabéns pelos jogos

#7

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

#8

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:

var invader_3 = [[0,0,5,0,0,0,0,0,5,0,0],
				 [5,0,0,5,0,0,0,5,0,0,5],
				 [5,0,5,5,5,5,5,5,5,0,5],
				 [5,5,5,0,5,5,5,0,5,5,5],
				 [5,5,5,5,5,5,5,5,5,5,5],
				 [0,5,5,5,5,5,5,5,5,5,0],
				 [0,0,5,0,0,0,0,0,5,0,0],
				 [0,5,0,0,0,0,0,0,0,5,0]]

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! :D)

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?

#9

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. :smiley: (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.

#10

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

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! :slight_smile:
  4. Pode explorar a OO super bem. Vocês vão ver o quanto persistência, ainda que com o Hibernate, prejudica a OO.
#11

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

#12

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

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

#13

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

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

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

#14

[quote=Mauricio de Mello][quote=kicolobo][quote=alexspe]http://jogosdeatari.com.br/game/river-raid
esse jogo era demais, me acabava nele
aposto que vários conhecem[/quote]

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

nossa, o river-raid foi desenvolvido com assembly ou c?[/quote]

Assembly, postei o código fonte em PDF logo acima :smiley:
É muito impressionante

#15

PQPPPP Assembly

#16

Parabéns pela pesquisa, os jogos ficaram bem legais.
Eu comecei a brincar com canvas um tempo atrás também, mas não cheguei a implementar nada desse tipo.

Testei no Chrome 8 e no Safari 5 e ambos o som funcionou, já no Firefox 3.6 o som não rolou. Fiz todos os testes no Mac OS 10.6.5

#17

O começo de tudo foi com experiências gráficas bem simples: http://www.itexto.net/devkico/?p=866

O que acham destas?

#18

Recentemente teve uma competição de $3000 sobre escrever uma aplicação com 10k de javascript usando funcionalidades do HTML5 como Canvas. Fiz um Tetris usando Canvas e um leitor de RSS estilo iGoogle
http://10k.aneventapart.com/Uploads/183/

Todas as aplicações enviadas (um bocado)
http://10k.aneventapart.com/

O melhor na minha opinião foi o cara que escreveu um rogue-like, mas ele só ganhou o prêmio secundário
http://10k.aneventapart.com/Entry/177

O massa é que pra economizar espaço de código ele codificou o código dentro duma imagem png (que é comprimida), leu os caracteres da imagem usando canvas e deu eval no código lido, escroto hehehehe

#19

[quote=victorcosta]Recentemente teve uma competição de $3000 sobre escrever uma aplicação com 10k de javascript usando funcionalidades do HTML5 como Canvas. Fiz um Tetris usando Canvas e um leitor de RSS estilo iGoogle
http://10k.aneventapart.com/Uploads/183/

Todas as aplicações enviadas (um bocado)
http://10k.aneventapart.com/

O melhor na minha opinião foi o cara que escreveu um rogue-like, mas ele só ganhou o prêmio secundário
http://10k.aneventapart.com/Entry/177

O massa é que pra economizar espaço de código ele codificou o código dentro duma imagem png (que é comprimida), leu os caracteres da imagem usando canvas e deu eval no código lido, escroto hehehehe[/quote]

Se eu soubesse disto antes, teria enviado o meu remake do Freeway (ele tem menos de 200 linhas): http://www.itexto.net/canvas/freeway.html :frowning:

#20

[quote=kicolobo]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.
[/quote]

Com certeza, por isso que eu ate hoje jogo muito mais meu atari, nintendo NES (8 bits), master, SNES, mega drive do que games novos.
Hoje em dia ta tudo praticamente na mao pra se fazer um jogo, antigamente o desenvolvedor tinha que ser otimo em programacao e ter criatividade pra fazer o jogo interessante com tao poucos recursos.
River Raid foi uma desenvolvedorA na verdade, Carol Shaw. River Raid eh um dos melhores jogos pra Atari 2600 e olha que tem muito jogo pra esse console.

Fora isso os jogos era mais desafiadores, hoje se vc comprar um jogo pra PS3 tipo em 15, 20 horas vc termina o jogo e nunca mais joga. Isso nao acontece com jogos antigos.

Se vc analisar vai ver que os jogos que estao fazendo muito sucesso sao os jogos baseados em modelos antigos, exemplo, Super Mario Bros Wii e o que saiu agora Donkey Kong Country Returns, eh tipo plataforma 2D com graficos melhorados. E esta aparecendo cada vez mais jogos assim! Muito legal!

Voltando ao topico, parabens pelos jogos, muito legal mesmo!

//Daniel