4 ms·

If redraw speed is a problem, perhaps in-browser vector graphics (SVG, VML) would be a better solution than raster (Canvas). There are probably a few libraries

by mryall 17y ago

If redraw speed is a problem, perhaps in-browser vector graphics (SVG, VML) would be a better solution than raster (Canvas). There are probably a few libraries around for this sort of thing, but the one I've had experience with is Raphael: http://raphaeljs.com/ http://raphaeljs.com/ It should mean less time redrawing the map because you can just reposition the elements on the screen dynamically.

jasonkester 17y ago
Never use a 3rd party library to do your core functionality. This guy's whole project is going to revolve around DOM and Canvas stuff in Javascript. He needs complete control over that, so relying on somebody else's library for it will kill him. If you're building a business app and need graphics for reporting, then sure, use a library. Use jQuery even. But if you're building a video game, you're going to need to do this stuff yourself.
- mryall 17y ago
  The author already mentioned that he uses ExCanvas for IE. I don't think it's a stretch to use a library for what would otherwise be tedious recoding of the same logic in both SVG and VML. If a library helps you deliver the software faster and better, use it. If it gets in your way, then consider using the layer underneath directly. But, regardless, my main point was to consider browser-based _vector_ graphics, which are several orders of magnitude faster than canvas for activities like this.
cellis 17y ago
I'm going to go with no. Vector graphics are only feasible as long as the shape bytes it would take to represent an image with nodes is less than using pixels. Because many of the items in his games have gradients, and depth, I think vector art would take a lot more space than simply using pngs. Of course this is only dealing with latency; I'm not quite sure of the vector vs. raster calculation tradeoffs but i can't imagine it being very much in vector's favor with relatively few calculations per frame.
- cellis 17y ago
  Edit: also because you are using an XML format with SVG, you'll need to be conscious of parse-time (vs. binary format which is handled natively). This is non-trivial (trust me, i've tried it). Most game developers don't think like web developers: optimization is at the forefront of the development, or should be, or else you're going to have major problems with playability.
- mryall 17y ago
  Fortunately, SVG and VML don't limit you to just vector graphics. You can render, transform and scale raster graphics within the vector graphics space. The graphic is just like a textured polygon that you can move around. Consider how 3D engines work, where they compute all the visible surfaces using vectors, and then transform and scale raster "textures" to apply on these surfaces. The XML issue isn't actually relevant either because normally the SVG/VML DOM objects will be generated at runtime by JavaScript, rather than serialized in the page and served up statically.
  - cellis 17y ago
    How do you describe the SVGs (i.e., the sprites) that get sent to the browser?
    - mryall 17y ago
      Here's an example of what I mean. It only works in Firefox, unfortunately, but shows the concept of using raster sprites within SVG: http://www.mattryall.net/demo/civ-svg/ http://www.mattryall.net/demo/civ-svg/ SVG is by no means a solid game development platform, but it is some interesting browser-based technology which might be useful for game developers to investigate.
      - cellis 17y ago
        Pretty smooth demo :). I see what you mean now, but i was going on the assumption that in a turn based game he wouldn't need to do much transformation, hence, my suggestion to just use pngs and allow the browser to redraw them.

by mryall 17y ago

jasonkester 17y ago

Never use a 3rd party library to do your core functionality. This guy's whole project is going to revolve around DOM and Canvas stuff in Javascript. He needs complete control over that, so relying on somebody else's library for it will kill him. If you're building a business app and need graphics for reporting, then sure, use a library. Use jQuery even. But if you're building a video game, you're going to need to do this stuff yourself.

mryall 17y ago
The author already mentioned that he uses ExCanvas for IE. I don't think it's a stretch to use a library for what would otherwise be tedious recoding of the same logic in both SVG and VML. If a library helps you deliver the software faster and better, use it. If it gets in your way, then consider using the layer underneath directly. But, regardless, my main point was to consider browser-based _vector_ graphics, which are several orders of magnitude faster than canvas for activities like this.

cellis 17y ago

I'm going to go with no. Vector graphics are only feasible as long as the shape bytes it would take to represent an image with nodes is less than using pixels. Because many of the items in his games have gradients, and depth, I think vector art would take a lot more space than simply using pngs. Of course this is only dealing with latency; I'm not quite sure of the vector vs. raster calculation tradeoffs but i can't imagine it being very much in vector's favor with relatively few calculations per frame.

cellis 17y ago
Edit: also because you are using an XML format with SVG, you'll need to be conscious of parse-time (vs. binary format which is handled natively). This is non-trivial (trust me, i've tried it). Most game developers don't think like web developers: optimization is at the forefront of the development, or should be, or else you're going to have major problems with playability.
mryall 17y ago
Fortunately, SVG and VML don't limit you to just vector graphics. You can render, transform and scale raster graphics within the vector graphics space. The graphic is just like a textured polygon that you can move around. Consider how 3D engines work, where they compute all the visible surfaces using vectors, and then transform and scale raster "textures" to apply on these surfaces. The XML issue isn't actually relevant either because normally the SVG/VML DOM objects will be generated at runtime by JavaScript, rather than serialized in the page and served up statically.
- cellis 17y ago
  How do you describe the SVGs (i.e., the sprites) that get sent to the browser?
  - mryall 17y ago
    Here's an example of what I mean. It only works in Firefox, unfortunately, but shows the concept of using raster sprites within SVG: http://www.mattryall.net/demo/civ-svg/ http://www.mattryall.net/demo/civ-svg/ SVG is by no means a solid game development platform, but it is some interesting browser-based technology which might be useful for game developers to investigate.
    - cellis 17y ago
      Pretty smooth demo :). I see what you mean now, but i was going on the assumption that in a turn based game he wouldn't need to do much transformation, hence, my suggestion to just use pngs and allow the browser to redraw them.