4 ms·

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 w

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?

kevingadd 14y ago
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.
- CamperBob2 14y ago
  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.
  - kevingadd 14y ago
    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)
tlarkworthy 14y ago
Games get dull without animation
thetabyte 14y ago
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!
- chris_engel 14y ago
  Hey, you should visit http://html5gamedevs.com http://html5gamedevs.com - we are an active community and I'm sure you will find help there :)
euroclydon 14y ago
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.
- plutr 14y ago
  The browser already has a scene graph library, it's called the DOM.
  - deleted 14y ago
    [deleted]
- babuskov 14y ago
  Looks interesting. Thanks.
- vidarh 14y ago
  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.
city41 14y ago
I recommend checking out my Breakouts project, which is aimed at answering your question: http://city41.github.io/breakouts http://city41.github.io/breakouts. It's the same idea as TodoMVC but for js game engines.
- babuskov 14y ago
  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?
  - city41 14y ago
    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.
warfangle 14y ago
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.

kevingadd 14y ago

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.

CamperBob2 14y ago
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.
- kevingadd 14y ago
  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)

tlarkworthy 14y ago

Games get dull without animation

thetabyte 14y ago

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!

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

euroclydon 14y ago

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.

plutr 14y ago
The browser already has a scene graph library, it's called the DOM.
- deleted 14y ago
  [deleted]
babuskov 14y ago
Looks interesting. Thanks.
vidarh 14y ago
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.

city41 14y ago

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

babuskov 14y ago
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?
- city41 14y ago
  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.

warfangle 14y ago

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.