57
\$\begingroup\$

If I decide to write a simple game both text and graphical (2d) what libraries would I use? (Assume we are using a HTML5 compatible browser)

The main things I can think of

  • Rendering text on screen
  • Animating sprites (using images/css)
  • Input (capturing the arrow keys and getting relative mouse positions)
  • Perhaps some preloading resource or dynamically loading resources and choosing order
  • Sound (but I am unsure how important this will be to me at first). Perhaps with mixing and chaining sounds or looping forever until stop.
  • Networking (low priority) to connect a user to another or to continuously GET data without multiple request (I know this exist but I don't know how easy it is to setup or use. But this isn't important to me. Its for the question).
\$\endgroup\$
3
  • 3
    \$\begingroup\$ Pretty complete list of html5 game libs github.com/bebraw/jswiki/wiki/Game-Engines \$\endgroup\$
    – oberhamsi
    Mar 7, 2011 at 9:30
  • \$\begingroup\$ What? You can do all that with just pure JavaScript. Socket.io for networking, though. \$\endgroup\$
    – jcora
    Dec 9, 2011 at 22:44
  • \$\begingroup\$ You may find Stage.js interesting (I'm its author). \$\endgroup\$
    – Ali Shakiba
    Nov 18, 2015 at 16:45

18 Answers 18

Reset to default
25
\$\begingroup\$

jQuery and MooTools are awesome JavaScript libraries; I prefer jQuery myself. Either one will assist you in your JS game development if you use the DOM. If you go with Canvas rendering, I still think you should use one of those libraries, but you will need to learn the Canvas functions. Here is a tutorial which introduces you to canvas by creating a Breakout clone, so it might be exactly the kind of thing you're looking for (and it uses jQuery).

Animating sprites is a matter of changing an image src, or preloading several images and swapping them out, or in a canvas just drawing frames of an animation. The above libraries can help with any of these cases. The libraries also help with input (look into events such as onkeypress and onmousemove).

For preloading resources, I've seem some games that use a single "sprite sheet" image (here is the one for Google's Pacman game). I believe they basically create a DIV of one tile size, with the CSS background-image property set to the sprite sheet and the background-position property set to the offset of the tile on the sprite sheet. I haven't seen a library that will do this for you, but jQuery or MooTools can help you as far as dynamically creating the DIV and manipulating its CSS. Otherwise, preloading images is a matter of creating <img> tags of the images you want preloaded, and not adding them to the page (or adding them invisibly). Here's a blog post that has some code for a function using jQuery to preload images for you.

SoundManager 2 seems to be the JS sound library to use; I know Vanthia uses it, and Google's Pacman used something similar (or at least the same technique, of using a hidden Flash file on the page to play sounds).

For networking, jQuery can handle AJAX for you, or if you want much more real-time networking (and have the server to do so), look into JavaScript sockets. I don't know if there's a stable library out there for it, but you might look into this or this. Essentially it uses a hidden Java or Flash file on the page so that you can do true socket communication with JavaScript, which is much quicker than AJAX polling and slightly more efficient than "AJAX Push". However, most likely, AJAX Push will be what you want, and APE (Ajax Push Engine) is probably the library to use.

Also, here is a Google tech talk about "Building a JavaScript-Based Game Engine for the Web". It looks neat.

\$\endgroup\$
5
  • 2
    \$\begingroup\$ This answer is a bit conservative; if he wants to use html5 browsers only then he can go for canvas and use one of the html5 libraries (see my comment on the question). Using DOM & CSS for games seems like a hack (though a workable hack in some cases). \$\endgroup\$
    – oberhamsi
    Mar 7, 2011 at 9:31
  • 2
    \$\begingroup\$ What makes it seem like a hack? Google had no problem using pure DOM & CSS with their PacMan logo and I quite like my pong game on my homepage. Actually to be honest, canvas seems like a hack, hacking a square of graphics rendering into a page otherwise dominated by the DOM. But alas with the push towards that and WebGL it's clear the browser will become the heavyweight do-everything app if it isn't already. I digress... \$\endgroup\$
    – Ricket
    Mar 8, 2011 at 2:33
  • \$\begingroup\$ If he wants to use audio, networking, text rendering he will have to use html5 ready browser. Alas canvas would be a good pick. If you stick with DOM&CSS you are limited in so far as these technologies already make up a presentation layer with certain assumptions (text flow, layering, kind of a scene graph for a text document). Whereas with canvas you can manipulate pixels in any way you see fit, which is closer to 'normal', raw game engines on top of SDL or opengl. \$\endgroup\$
    – oberhamsi
    May 6, 2011 at 7:51
  • \$\begingroup\$ The audio and networking libraries I provided don't require HTML5. And actually I see the text flow, layering and scene graph likeness as benefits. Most games are just sprites (images) being positioned and moved around and don't need direct access to pixels. It really needs to be evaluated based on the game that you want to make though, and also if you are personally more comfortable with canvas or DOM, if you want to support older browsers, if you need the extra power canvas provides, etc. \$\endgroup\$
    – Ricket
    May 7, 2011 at 16:47
  • 1
    \$\begingroup\$ yeah, it depends on the game. But he asks for HTML5 and your answer is mostly about Flash and DOM level 1 :) If he wants to do bleeding edge HTML5 development then don't lure him back. \$\endgroup\$
    – oberhamsi
    May 26, 2011 at 14:08
12
\$\begingroup\$

When I evaluated JavaScript engines a little while ago my favorite was Crafty:

http://craftyjs.com/

There were a loooot of options I had to consider, and some others I liked were:

http://easeljs.com/

http://www.limejs.com/

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

(Incidentally, another option that looks pretty slick initially is http://impactjs.com/ but considering it costs money and the other options I looked at were open-source engines there were some glaring omissions, like the inability to attach display elements in a heirarchy.)

UPDATE: It's been almost 2 years since I posted that answer and the situation has changed slightly (this is a nascent area of technology.) Although Crafty is still a great choice, in the past year EaselJS has picked up a lot of momentum (especially considering Adobe hopped on the EaselJS train.) I'm gonna switch to that tool for future projects (also note that it has a new website)

\$\endgroup\$
2
  • \$\begingroup\$ what you suggest today ? after 4 years \$\endgroup\$
    – Pooya Estakhri
    Jul 31, 2014 at 14:24
  • 1
    \$\begingroup\$ Well the Update was from 1.5 years ago, and I still suggest that. \$\endgroup\$
    – jhocking
    Jul 31, 2014 at 15:30
7
\$\begingroup\$

The Effect Games engine (javascript) is fantastic for 2d, tile/sprite-based games. The website doesn't do a very good job of describing what's so great about it, but as soon as you dig into the excellent documentation you'll see how much has been covered for you:

  • spriting
  • collision detection
  • level editing
  • asset management
  • audio
  • input and control
  • tileset creation and management
  • layering
  • animation
  • performance (lock to a framerate)
  • cross-browser support and abstractions
  • hosting
  • embedding
  • HUD support

I really can't provide an exhaustive list as it's so fully featured. One thing that's missing is the ability to create in-game menus and UI (eg. equipment managers etc), but it's supposedly on the todo list.

\$\endgroup\$
1
  • 4
    \$\begingroup\$ Unfortunately the effect engine appears to be completely abandoned. \$\endgroup\$
    – Letharion
    Dec 30, 2012 at 17:43
6
\$\begingroup\$

I maintain a canvas 2D game engine called JawsJS - http://jawsjs.com/

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

cliffnotes:

  • Readable, documented code
  • 12+ bundled documented examples
  • Useful constructors like Sprite(), SpriteSheet() and Animation()
  • Game states - Separate sections of your game for better organized code
  • Assets - Jaws will preload all your assets before the game starts
  • Does not depend on any other javascript library
  • Builds on lessons learned from years of developing Chingu, a Ruby game lib
\$\endgroup\$
4
\$\begingroup\$

Impact is going to be sick! Just take a look at the demo game, Biolab Disaster.

\$\endgroup\$
4
\$\begingroup\$

I've been doing some research in this area lately myself, so let me chip in my $0.02:

PlayN Is a cross platform library from Google, which compiles an object oriented game from Java to javascript/Flash/Android. It will handle JSON (AJAX), data models, and has sane semantics for updates and rendering. Very cool stuff.

Processing Is a simple to use library that is aimed at designers and artists. It's exceptionally simple to use and can give you great results. I've used the Java version for scientific modelling, and it is a delight to use. The 3D scenes will need WebGL, but the 2D scenes work without.

Three.js Has some great looking demos. It requires WebGL, but the result seem worth it. There are some exiting examples online too.

Here are some of the other items in my personal linkdumps that relate to WebGL:

\$\endgroup\$
3
\$\begingroup\$

Akihabara is a framework that I've seen come up in a number of places. A friend of mine also created a series of tutorials and documentation for the framework.

\$\endgroup\$
3
\$\begingroup\$

http://rocketpack.fi/ seems to have something coming up.

\$\endgroup\$
2
\$\begingroup\$

Another one I recently have been looking into with great interest is CreateJs. It is a collection of open source libraries to include...

Additional it EaslJs Plays well with Box2D JS

\$\endgroup\$
1
\$\begingroup\$

Pixie Plugins

The creators of Contrasaurus have released a lot of their individual components!!!

They have code to do matrix transformations, canvas abstractions and many many more interesting things.

Their code is great and their libraries are really useful.

\$\endgroup\$
1
\$\begingroup\$

Impact JavaScript Game Engine for iOS looks promising. The link shows a demo, but it has not been released, yet.

\$\endgroup\$
1
\$\begingroup\$

Strange that Google Closure Library hasn't been mentioned. It has a huge API, allows more object oriented coding style and has the compiler.

I have used so far only the compiler but I am planning to study rest asap.

\$\endgroup\$
1
\$\begingroup\$

I usually use jawsjs because it's really easy to set it up and start developing a game in minutes. It has lots of really useful default classes (Tilemap, Viewport, Sprite, and others) that really help with game development.

\$\endgroup\$
1
\$\begingroup\$

You've got plenty of them actually, but it first mainly depends on which kind of game engine you're looking for. I can give you some references of the most noteworthy.

2D Game Engines

  • Cocos2D tends to be a bit more fashionable at the moment. I saw Cocos2D questions popping up here and there on Stackoverflow recently.
  • Impact, you can see a benchmark running on the official website.

3D Game Engines

Mozilla foundation has been working on a 3D game engine named Paladin. It's Mozilla that it can't really hurt I guess.

\$\endgroup\$
0
\$\begingroup\$

There is also gameQuery, a jQuery based game engine. Has decent documentation on their API, as well as, a few sound wrapper APIs they link to on their site.

http://gamequery.onaluf.org/

\$\endgroup\$
0
\$\begingroup\$

Mozilla Gaming has a list on its Resources pages. It links to Diggy, which is a DHTML game engine I built a while back. Live demo here!

\$\endgroup\$
0
\$\begingroup\$

Matrix.js is good if you want to get Flash style matrix transforms.

\$\endgroup\$
0
\$\begingroup\$

Tom here from Scirra, we are a 2 man team that have created Construct 2, the HTML5 game maker. (Free version available).

You might want to consider an engine like ours as it does a lot of the legwork for you. For example to do collisions in code yourself can be really tricky (think polygon collisions). Everything on your list is easily achievable with Construct 2.

\$\endgroup\$