Quais são as boas bibliotecas JS para desenvolvedores de jogos? [fechadas]

56

Se eu decidir escrever um jogo simples, tanto em texto quanto em gráfico (2d), que bibliotecas eu usaria? (Suponha que estamos usando um navegador compatível com HTML5)

As principais coisas em que consigo pensar

  • Renderizando texto na tela
  • Animação de sprites (usando images / css)
  • Entrada (capturando as teclas de seta e obtendo posições relativas do mouse)
  • Talvez algum recurso de pré-carregamento ou carregamento dinâmico de recursos e escolha a ordem
  • Som (mas não tenho certeza de quão importante isso será para mim no início). Talvez com sons de mixagem e encadeamento ou loop para sempre até parar.
  • Rede (baixa prioridade) para conectar um usuário a outro ou para obter dados continuamente sem várias solicitações (sei que isso existe, mas não sei como é fácil configurar ou usar. Mas isso não é importante para mim. a questão).
user1047
fonte
3
Lista bastante completa de jogo html5 libs github.com/bebraw/jswiki/wiki/Game-Engines
oberhamsi
O que? Você pode fazer tudo isso apenas com JavaScript puro. Socket.io para redes, no entanto.
jcora
Você pode achar o Stage.js interessante (eu sou o autor).
Ali Shakiba 18/11/2015

Respostas:

25

jQuery e MooTools são incríveis bibliotecas JavaScript; Eu prefiro o jQuery. Qualquer um irá ajudá-lo no desenvolvimento do jogo JS, se você usar o DOM. Se você optar pela renderização do Canvas, ainda acho que você deve usar uma dessas bibliotecas, mas precisará aprender as funções do Canvas. Aqui está um tutorial que apresenta a tela criando um clone do Breakout, portanto, pode ser exatamente o tipo de coisa que você está procurando (e usa jQuery).

Animar sprites é uma questão de alterar uma imagem src, ou pré-carregar várias imagens e trocá-las, ou em uma tela apenas desenhar quadros de uma animação. As bibliotecas acima podem ajudar em qualquer um desses casos. As bibliotecas também ajudam na entrada (consulte eventos como onkeypress e onmousemove).

Para pré-carregar recursos, pareço alguns jogos que usam uma única imagem "folha de sprite" ( aqui está a do jogo Pacman do Google ). Acredito que eles basicamente criam um DIV de um tamanho de bloco, com a propriedade CSS background-image definida como a folha de sprite e a propriedade background-position definida como o deslocamento do bloco na folha de sprite. Não vi uma biblioteca que faça isso por você, mas o jQuery ou o MooTools podem ajudá-lo a criar dinamicamente o DIV e manipular seu CSS. Caso contrário, o pré-carregamento de imagens é uma questão de criar <img>tags das imagens que você deseja pré-carregadas e não adicioná-las à página (ou adicioná-las invisivelmente). Aqui está uma postagem no blog que possui algum código para uma função usando o jQuery para pré-carregar imagens para você.

O SoundManager 2 parece ser a biblioteca de sons JS a ser usada; Sei que Vanthia o usa, e o Pacman do Googleusou algo semelhante (ou pelo menos a mesma técnica) ao usar um arquivo Flash oculto na página para reproduzir sons.

Para redes, o jQuery pode manipular o AJAX para você ou, se você quiser muito mais redes em tempo real (e tiver o servidor para isso), procure nos soquetes JavaScript . Eu não sei se há uma biblioteca estável lá fora para isso, mas você pode olhar para esta ou esta . Essencialmente, ele usa um arquivo Java ou Flash oculto na página para que você possa realizar uma verdadeira comunicação de soquete com JavaScript, que é muito mais rápido que a pesquisa AJAX e um pouco mais eficiente que o "AJAX Push" . No entanto, provavelmente, o AJAX Push será o que você deseja e o APE (Ajax Push Engine) é provavelmente a biblioteca a ser usada.

Além disso, aqui está uma palestra técnica do Google sobre "Construindo um mecanismo de jogo baseado em JavaScript para a Web" . Parece arrumado.

Ricket
fonte
2
Essa resposta é um pouco conservadora; se ele quiser usar apenas navegadores html5, poderá usar a tela e usar uma das bibliotecas html5 (veja meu comentário sobre a pergunta). Usar DOM e CSS para jogos parece um hack (embora um hack praticável em alguns casos).
21811 oberhamsi
2
O que faz parecer um hack? O Google não teve problemas ao usar DOM e CSS puro com o logotipo do PacMan e eu gosto bastante do meu jogo de pong na minha página inicial. Na verdade, para ser honesto, o canvas parece um hack, invadindo um quadrado de renderização gráfica em uma página dominada pelo DOM. Mas, infelizmente, com o esforço para isso e o WebGL, é claro que o navegador se tornará o aplicativo pesado de tudo, se ainda não estiver. Eu discordo ...
Ricket
Se ele quiser usar áudio, redes, renderização de texto, ele precisará usar o navegador html5 ready. Infelizmente, a lona seria uma boa escolha. Se você aderir ao DOM e CSS, estará limitado na medida em que essas tecnologias já compõem uma camada de apresentação com certas suposições (fluxo de texto, camadas, tipo de gráfico de cena para um documento de texto). Considerando que, com o canvas, você pode manipular pixels da maneira que achar melhor, o que é mais próximo dos mecanismos de jogos brutos 'normais', sobre SDL ou opengl.
Oberhamsi #
As bibliotecas de áudio e de rede que forneci não exigem HTML5. E, na verdade, vejo o fluxo de texto, as camadas e a semelhança do gráfico de cena como benefícios. A maioria dos jogos são apenas sprites (imagens) sendo posicionados e movidos e não precisam de acesso direto aos pixels. No entanto, ele realmente precisa ser avaliado com base no jogo que você deseja criar, e também se estiver pessoalmente mais à vontade com canvas ou DOM, se desejar oferecer suporte a navegadores mais antigos, se precisar do poder extra que a tela oferece, etc.
Ricket
11
Sim, depende do jogo. Mas ele pede HTML5 e sua resposta é principalmente sobre Flash e DOM nível 1 :) Se ele quiser fazer o desenvolvimento de HTML5 de ponta, não o atraia de volta.
Oberhamsi # 26/11
12

Quando avaliei os mecanismos JavaScript há pouco tempo, meu favorito era o Crafty:

http://craftyjs.com/

Havia muitas opções que eu tinha que considerar e outras que eu gostava eram:

http://easeljs.com/

http://www.limejs.com/

http://code.google.com/p/casualjs/

(Aliás, outra opção que parece bastante lisa inicialmente é http://impactjs.com/, mas considerando que custa dinheiro e as outras opções que eu olhei foram mecanismos de código aberto, houve algumas omissões flagrantes, como a incapacidade de anexar elementos de exibição em uma hierarquia.)


ATUALIZAÇÃO: Já se passaram quase 2 anos desde que publiquei essa resposta e a situação mudou um pouco (esta é uma área incipiente da tecnologia.) Embora o Crafty ainda seja uma ótima opção, no ano passado o EaselJS ganhou bastante impulso (especialmente considerando que a Adobe entrou no trem EaselJS .) Vou mudar para essa ferramenta para projetos futuros (observe também que ele tem um novo site )

jhocking
fonte
o que você sugere hoje? após 4 anos
Pooya Estakhri
11
Bem, a atualização foi de 1,5 anos atrás, e eu ainda sugiro isso.
Jhocking 31/07
7

O mecanismo Effect Games (javascript) é fantástico para jogos 2D, baseados em blocos / sprites. O site não descreve muito bem o que há de tão bom nisso, mas assim que você pesquisar na excelente documentação, verá o quanto foi coberto para você:

  • spriting
  • detecção de colisão
  • edição de nível
  • gestão de ativos
  • audio
  • entrada e controle
  • criação e gerenciamento de tileset
  • estratificação
  • animação
  • desempenho (bloquear para uma taxa de quadros)
  • suporte e abstrações entre navegadores
  • hospedagem
  • incorporação
  • Suporte HUD

Eu realmente não posso fornecer uma lista exaustiva, pois é tão completa. Uma coisa que falta é a capacidade de criar menus e UI no jogo (por exemplo, gerenciadores de equipamentos etc.), mas supostamente está na lista de tarefas.

Rahul
fonte
4
Infelizmente, o mecanismo de efeitos parece estar completamente abandonado.
Letharion
6

Eu mantenho um mecanismo de jogo 2D de tela chamado JawsJS - http://jawsjs.com/

Fonte @ https://github.com/ippa/jaws

notas de penhasco:

  • Código legível e documentado
  • Mais de 12 exemplos documentados
  • Construtores úteis como Sprite (), SpriteSheet () e Animation ()
  • Estados do jogo - Seções separadas do seu jogo para um código melhor organizado
  • Ativos - o Jaws pré-carrega todos os seus ativos antes do início do jogo
  • Não depende de nenhuma outra biblioteca javascript
  • Aproveita as lições aprendidas dos anos de desenvolvimento do Chingu, uma biblioteca de jogos Ruby
ippa
fonte
4

O impacto vai ficar doentio! Basta dar uma olhada no jogo demo, Biolab Disaster .

user2418
fonte
4

Ultimamente, tenho pesquisado nessa área, então, deixe-me gastar US $ 0,02:

PlayN É uma biblioteca multiplataforma do Google, que compila um jogo orientado a objetos do Java para javascript / Flash / Android. Ele manipulará JSON (AJAX), modelos de dados e possui semântica sã para atualizações e renderização. Coisas muito legais.

Processamento É uma biblioteca simples de usar, direcionada a designers e artistas. É excepcionalmente simples de usar e pode oferecer ótimos resultados. Eu usei a versão Java para modelagem científica, e é uma delícia de usar. As cenas 3D precisarão do WebGL, mas as cenas 2D funcionam sem.

Three.js Tem algumas demos excelentes. Requer WebGL, mas o resultado parece valer a pena. Existem alguns exemplos existentes online também.

Aqui estão alguns dos outros itens nos meus linkdumps pessoais relacionados ao WebGL:

brice
fonte
3

Akihabara é uma estrutura que eu já vi surgir em vários lugares. Um amigo meu também criou uma série de tutoriais e documentação para o framework.

Alex Schearer
fonte
1

Pixie Plugins

Os criadores do Contrasaurus lançaram muitos de seus componentes individuais !!!

Eles têm código para fazer transformações matriciais , abstrações de telas e muitas outras coisas interessantes.

Seu código é ótimo e suas bibliotecas são realmente úteis.

DFectuoso
fonte
1

Estranho que a Google Closure Library não tenha sido mencionada. Possui uma API enorme, permite um estilo de codificação mais orientado a objetos e possui o compilador.

Até agora, usei apenas o compilador, mas estou planejando estudar o mais cedo possível.

Petteri Hietavirta
fonte
1

Eu costumo usar jawsjs porque é realmente fácil configurá-lo e começar a desenvolver um jogo em minutos. Tem muitas classes padrão realmente úteis (Tilemap, Viewport, Sprite e outras) que realmente ajudam no desenvolvimento de jogos.

David Gomes
fonte
1

Você tem muitos deles, na verdade, mas primeiro depende principalmente de qual tipo de mecanismo de jogo você está procurando. Eu posso lhe dar algumas referências dos mais notáveis.

Motores de jogo 2D

  • O Cocos2D tende a estar um pouco mais elegante no momento. Vi perguntas do Cocos2D surgindo aqui e ali no Stackoverflow recentemente.
  • Impacto , você pode ver uma referência em execução no site oficial.

Motores de jogos 3D

A fundação Mozilla está trabalhando em um mecanismo de jogo 3D chamado Paladin . É o Mozilla que realmente não pode doer, eu acho.

user14170
fonte
0

Há também gameQuery, um mecanismo de jogo baseado em jQuery. Possui documentação decente em sua API, bem como algumas APIs de wrapper de som às quais eles vinculam em seu site.

http://gamequery.onaluf.org/

numo16
fonte
0

O Mozilla Gaming tem uma lista nas páginas de Recursos . Ele está vinculado ao Diggy , que é um mecanismo de jogo DHTML que eu construí há algum tempo. Demonstração ao vivo aqui!

richtaur
fonte
0

Matrix.js é bom se você deseja obter transformações de matriz no estilo Flash.

Daniel X Moore
fonte
0

Tom aqui da Scirra, somos uma equipe de 2 homens que criaram o Construct 2, o criador de jogos HTML5 . (Versão gratuita disponível).

Você pode considerar um mecanismo como o nosso, pois faz muito trabalho braçal para você. Por exemplo, fazer colisões no código você mesmo pode ser realmente complicado (pense em colisões de polígonos). Tudo na sua lista é facilmente alcançável com o Construct 2.

Tom Gullen
fonte