Hacker News new | ask | show | jobs
by Zaskoda 2401 days ago
I'm current using Vue to manipulate a complex SVG as the foundation of my current game engine. It's not super snappy but it's effective and interesting. I've taken the concept pretty far and, thus far, I haven't see anyone else manipulating SVGs with Vue (or React or whatever) in this way before. Its surprising because it feels extremely intuitive.
6 comments

I've worked with hardware accelerated vector graphics engines (2D GPUs). It sounds like a good idea to do everything vector, because some things are very simple while retaining quality as you said. But in my experience, the vector operations are so expensive compared to raster ones that you go back to rasters to maintain framerate.
Yes, even my relatively simple scenes are expensive to render. I'm hoping I can optimize it enough to be playable.

An interesting plus side: I can export the SVG as a file and get an extremely high quality screenshot.

How "simple" are they? I remember so long ago, there was some amazing Flash graphics, so 10 years later, there's no way we can't get much more impressive ones.
I also use SVG from Elm for my simple games. Zoom and click-and-drag translation (and things like parallax) become trivial. And I love how you can put event listeners directly on objects.

Perfect for, e.g. board games!

I really love creating things with SVG + React! I usually will use that until things start to jank up, and then switch to Canvas, which is more annoying for interactions and debugging.

You can get pretty far before that happens - for example, here's a post representing every country in SVG. https://wattenberger.com/blog/d3#maps-and-globes

> I haven't see anyone else manipulating SVGs with Vue (or React or whatever) in this way before. Its surprising because it feels extremely intuitive.

It's not surprising because it's extremely slow! If you're doing a 2D game, Canvas will be waaaay faster and is much more appropriate.

I'm working on an app for a startup to build diagrams using SVG and React (...lots of ForeignObject elements to embed HTML forms in the SVGs, bezier curves joining stuff together, etc). It's a really nice way of building a responsive 2D diagrammatic UI.
I work with svg a lot, mostly with angularjs but also some vue recently. I have also made games with svg https://js13kgames.com/entries/spacetime