SVG Question

0 favourites
  • 13 posts
  • Hi. For a large VERY simple shape (a red square that covers a third of the screen for example) is it better to use an SVG or just a tiny (32x32) scaled up .png sprite?

    I figure the SVG would just essentially become a large memory hungry bitmap once loaded in, whereas the tiny scaled png would still use very little memory. Is that correct?

    Thanks

    Tagged:

  • A third of the screen is a third of the screen as far as memory goes. The only difference is you can scale SVG to any size with no degradation.

    So in this case with no other requirements a vector will be the better solution.

  • Hmm, I think that's the case with SVG in other game engines, but I was under the impression from some of Ashley's posts that in C3 the SVG object re-creates the vector as a bitmap at runtime. Correct me if I'm wrong. Cheers

  • Everything is a bitmap in the render.

  • So why would using an SVG be a better solution?

    I read somewhere that a scaled up small sprite is far better than using a large sprite or large SVG.

    There seems to be some confusion which I'm trying to clarify. Cheers

  • A 32x32 sprite will be fuzzy when upscaled to a third of the screen.

    SVG can be scaled infinitely with no degradation as I said before.

    Generally speaking you can only upscale a raster image to 2 to 3 times its original size before it gets too blurry. It depends on the detail in the image.

  • Small sprites stretched larger will use less memory. Only the source image needs to be kept in memory; stretching it larger does not use more memory.

    That is not true of SVG though. SVG will be re-rastered at the draw size and use roughly as much memory as its displayed size requires.

    In general sprites are the fastest game design primitive in Construct.

  • Thanks Ashley for the clarification.

    Also, it seems that when scaling up a small square sprite (if its just a solid square) there is absolutely no degradation in quality or blurring of the sprite. Additionally, I can even make simple (and big) shapes from it using the mesh feature which all have crisp edges even when using a tiny image.

    So win win.

  • Thanks Ashley for the clarification.

    Also, it seems that when scaling up a small square sprite (if its just a solid square) there is absolutely no degradation in quality or blurring of the sprite. Additionally, I can even make simple (and big) shapes from it using the mesh feature which all have crisp edges even when using a tiny image.

    So win win.

    That's a corner case(literally?), and mesh is essentially the same as vector.

    Blurring happens when you have a texture with detail. If you round the corners on your square for example.

    Note if you switch the sampling to nearest and you're using pixel art most of the artwork will also scale infinity.

    ... as long as its square. If you change its angle to anything besides 90° artifacts will appear.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Cant see how mesh is the same as a vector. My vector uses a tiny image that i can see on my sprite sheet and I can scale and manipulate it fine in game.

    But are you saying that this is created AGAIN at runtime like vectors as a new bitmap?

    Maybe Ashley could clarify again. Thanks

  • No idea how much memory a mesh takes up. Points are the main factor there.

    These are all just minor variations that don't really matter in the use case.

    And we haven't even talked about Tiled Background, or 9panel.

  • A sprite is essentially a regular mesh with four points. If you make a mesh with 10 x 10 points, it has 100 points, which is roughly equivalent to 25 sprites in overhead. So the overhead of a mesh depends on how many points you use.

  • Great to know. Thanks Ashley!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)