Canvas vs SVG for games

I understand that there are a lot of tutorials and sites and all that says "What is better for gaming applications?" Everyone says that SVG is not suitable for gaming applications, it is a canvas. But that bothers me.

  • As soon as something is painted on the canvas, it is forgotten.
  • SVG elements can be changed after creation without touching other visual elements in the game.
  • Canvas has no inline animation
  • SVG has built-in animations

So let me say that I'm creating a platformer. I want the main character to walk around the stage with a beautifully colored background. In Canvas, I either have to recreate her entire hitbox (redrawing the spot of each moving object), or make a separate canvas element, and use, perhaps, ctxChar, ctxBG, ctxItemsetc. On the other hand, SVG is built in. And I can even just put a tag <animate>inside its tag <use>, which changes its x position (or manually changes it via js) and another tag <animate>to change its sprite. And then the background should never be affected.

Regarding the animation of several elements at the same time, I do not see how this happens faster in Canvas than in SVG. What is wrong if you put svg elements in groups? Could it be slower than redrawing hitboxes backgrounds and redrawing the objects themselves for all objects?


Edit: I think my real question is not that SVG can work, but why do people think this is not possible.

+4
source share
1 answer

Canvas SVG V

, - SVG, . , . , , SVG . , , - .

SVG - SVG, , , Runes and Relics Prototype. .

, , . SVG.

SVG? . SVG - . , , , . , S VG . , , GPU . SVG .

Canvas? , , ++-, 10 * , Javascript/canvas. , , -, Javascript.

- - . 2D 3D webGL, . HTML5 API .

, , API, ( ). , .

Phaser - javascript, . , , . , . HTML5 JavasScript , , . , API- Game Game, , API HTML5 (, , API- HTML5 , 20- ), , .

+10

Source: https://habr.com/ru/post/1650943/


All Articles