Hacker News Reader

Comment by babuskov | Hacker News Reader

Should you be using canvas directly?

I'm currently writing my 3rd HTML based game, and I'm so tired of using jQuery and DOM directly, so I want to replace it with canvas. Game is a turn-based strategy, so performance is not an issue (there will be some animations, but rare).

I looked at the canvas and then at a lot of 2D libraries that can speed the development and prevent me from reinventing the wheel. I'm overwhelmed with options. From some 20+ I investigated I narrowed the list down to these:

  - CanvasEngine
  - Cocos2D
  - MelonJS
  - Quintus
  - EaselJS

I have no idea which one to pick. Any tips?

View on HN

I recommend using canvas directly unless you specifically need features offered by a wrapper (for example, Cocos2D provides a scene graph of sorts).

Canvas has enough weird performance problems that you don't need a library adding more on top.

OTOH, if the authors of the library know more about the fast rendering paths on various browsers than you do, they can actually give you better performance than "coding to the metal," so to speak.

I've never actually found a canvas library that delivers consistently better performance, but it is possible. It's difficult because many of the canvas tradeoffs depend on your specific use-case so it's hard for a general library to deliver the best performance. (This is something that is particularly bad about Canvas when compared with other rendering APIs; the way it is specified and implemented makes it harder to work around the performance limitations)

In particular many perf workarounds rely on aggressive caching, and unless you know the workload well it is difficult to create a general-purpose cache that will deliver wins. This is made worse by most modern browsers' particularly low resource ceilings (and in the case of IE, an outright limit on how many canvases you can have)

I recommend checking out my Breakouts project, which is aimed at answering your question: http://city41.github.io/breakouts. It's the same idea as TodoMVC but for js game engines.

Thanks, I've already seen it. In fact, it was one of the factors that made me narrow the choice. Thank you for making it.

Do you have any plans to include CanvasEngine and/or Cocos2D in there as well?

Yeah, I'd like to add pretty much all engines. Currently I'm not dedicated any cycles to the project as we're in crunch mode getting our game done. But after that I plan to head back to it. First engines on my list are the various cocos2d variants.

Well, no tips, but I do have a question:

I'm a web dev who's been looking to start trying game development, particularly with canvas. However, I've hit a huge wall with any type of graphics programming. Have you found any particularly good resources while trying to learn canvas, or graphics programming in general? Or anyone else here? If you have something feel free to email it to mrjordangoldstein at gmail.com if it doesn't seem strictly relevant to this thread—and thanks!

Hey, you should visit http://html5gamedevs.com - we are an active community and I'm sure you will find help there :)

For my side/tinker/forever project, I've been using Three.js even though it's actually 2D (for now). Since you can set it to render orthographically, it might be useful (each sprite as a two-tri polygon).

Completely new to game development though, so this may be really really bad advice.

If you want a scene graph, have you evaluated fabric.js? It's a popular canvas library, providing mouse events, and import/export to SVG.

Caveat worth keeping in mind, since you mention SVG, is that Fabric is still rather picky about the SVG it handles. I was playing around with it for some very simple SVG symbols that rendered fine using built in SVG support in both Chrome, Firefox and rendered to PNG via rsvg, and loaded fine in Inkscape, and had to manually tweak the svg quite a bit before Fabric would handle it. (I don't remember the exact problem, but think it was an issue with stacking transformations including "translate"). I'm sure that will improve over time, but it was a bit of a nuisance.

Other than that, it seems to work great.

The browser already has a scene graph library, it's called the DOM.

Looks interesting. Thanks.

Games get dull without animation

Reply on news.ycombinator.com