Trazendo o Atari para o browser usando HTML5

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. 8)

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.

Droga, acabei de matar a galinha hehe

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

Parabéns pelos jogos

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:

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?

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.

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

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

alexspe:

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:

alexspe:

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:

kicolobo:

alexspe:

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

PQPPPP Assembly

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

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

O que acham destas?

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

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

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

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.

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

Vc deve estar falando de emuladores, né?
Porque se vc tiver todos estes consoles e cartuchos, e ainda por cima funcionando, eu vou ficar com muita inveja!

Eu tive alguns Atari(s) e um Phantom System… recentemente comprei um Phantom em um “sebo” de eletrônicos hehe comprei alguns clássicos como Double Dragon II e III, Battletoads, Ninja Gaiden III… realmente os jogos de antigamente possuem uma magia que os de hoje não tem. Vale mencionar as trilhas sonoras feitas com meia dúzia de vozes midi e super “inspiradas”… esses tempos vi no YT uma reportagem que fizeram com o criador da trilha do Contra (que por sinal mata a pau), onde deram pra ele ouvir a versão “plugged” das músicas criadas por ele há mais de 20 anos. O cara abriu um sorrisão na cara, muito legal… disse que era daquela forma que ele imaginava na cabeça dele hehe. Naquele tempo os compositores eram também programadores e vice-versa. Tenho inveja desses caras. É bom ver que ainda tem uns guerreiros como o que abriu este tópico, pois cada vez mais a galera só quer saber de alto nível e encher o bolso… vai chegar o dia em que ninguém mais vai saber realmente o que está fazendo, o que acontece a nível de máquina… aí pode ser que esse pessoal “dinossauro” da programação volte a ser mais valorizado.

Obs.: estou estudando Assembly (bem basicão) e meu queixo caiu quando disseram aqui que o River Raid foi feito com ela :lol:

Legal, meu primeiro jogo de Atari 2600 foi Enduro, aquela neblina era de matar :lol: :lol:

Sobre o SpaceInvaders, só achei a cor roxa sobre a preta, bem complicadinha de enchergar os tiros.

Vc deve estar falando de emuladores, né?
Porque se vc tiver todos estes consoles e cartuchos, e ainda por cima funcionando, eu vou ficar com muita inveja!

Nao sao emuladores nao, eu tenho os consoles mesmo e funcionando.

Ai no Brasil eu tenho Atari 2600, o primeiro modelo que foi lancado nos USA com 6 chaves e era feito parte em madeira, tenho NES americano, um Master System e um Mega Drive. O Mega e o Master infelizmente eu tenho 1 ou 2 jogos de cada, mas atari eu tenho quase 100 jogos (alguns repetidos) e NES mais ou menos uns 40 jogos.

Aqui na Suecia eu tenho um Atari Junior e um Super Nintendo europeu que eh o mesmo modelo do Super Famicon lancado no Japao. Eu tenho varios jogos de atari que estao na caixa lacrada como se estive saido da loja.

Os jogos antigos sao muito divertidos sempre que uma galera vai em casa pra tomar uma breja eles pedem pra eu ligar o Atari pra jogar.

//Daniel

Pra quem se impressionou com o fato de River Raid ter sido escrito em Assembly

RollerCoaster Tycoon (quem jogou sabe q é um jogo altamente complexo) foi escrito 99% em Assembly
Fiquei assim :-o quando li isso no site do criador

http://www.chrissawyergames.com/faq3.htm

What language was RollerCoaster Tycoon programmed in?
It’s 99% written in x86 assembler/machine code (yes, really!), with a small amount of C code used to interface to MS Windows and DirectX.

Bons tempos mesmo…
tava lendo esse post essa semana:

E como é raro ter um jogo hoje que não se zere rápido.E não falo dos RPG´s, falo de um bom e velho adventure mesmo…

Chrome realmente tá na frente em termos de desempenho, fiz um pequeno jogo em canvas, o resultado ficou legal, mas parei de estudar a plataforma. Acho que em segundo vem o FF ou Opera (não testei o Safari, portanto não pode opinar).

windsofhell:

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.

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

Vocês viram isso sobre a Carol Shaw? Ela foi a 1ª designer de games! :shock:
http://en.wikipedia.org/wiki/Carol_Shaw_(video_game_designer)

sinto um cheiro forte de saudosismo nesse topico

Pois eu to sentindo o gosto!

Muito bom, bigwolf. Se isso foi feito em menos de 24 horas imagina em 1 semana as melhorias que é possível de se colocar nesse negócio!

Aliás, o Google tem uma competição assim: http://googlecode.blogspot.com/2010/11/html5-games-jammed.html

Andre Brito:

Muito bom, bigwolf. Se isso foi feito em menos de 24 horas imagina em 1 semana as melhorias que é possível de se colocar nesse negócio!

Aliás, o Google tem uma competição assim: http://googlecode.blogspot.com/2010/11/html5-games-jammed.html

Uai! Gostei!
Ano que vêm to lá! Valeu pela dica!

massa

alexspe:

PQPPPP Assembly

claro vc queria oq? java? na decada de 80 a coisa éra no asm mesmo… o primeiro jogo a utilizar C se não me falhe a memoria foi o Doom…
o resto éra td asm na unha naquele tempo…

Cara, ficou muito maneiro.

Gratz.

A mensagem de derrota foi a melhor! Mauhauha