How to best work with SVG?

Phaser 3
1

I am converting a “game” I was writing in vanilla Typescript over to Phaser. I was previously drawing everything to the canvas directly using basic rectangles and also Path2D which let me render slightly more complex shapes as paths, essentially SVG as well. I was using this to draw some simple trees, a path for the tree trunk and one for the tree top, so it could be cut down.

When switching to phaser I noticed a few quirks I want to try to navigate around

1. It appears the load.pack command does not yet work with SVG, is this correct? It appears that load.svg does work though.

This was the content of my pack.json which didn’t appear to properly load SVG files. Like I mentioned, I work around this currently by using load.svg

{
  "prefix": "map",
  "path": "assets/images",
  "files": [
    {
      "key": "tree-top",
      "type": "image",
      "extension": "svg",
      "url": "../assets/images/tree-top.svg"
    },
    {
      "key": "tree-trunk",
      "type": "image",
      "extension": "svg",
      "url": "../assets/images/tree-trunk.svg"
    }
  ]
}

2. Because I was previously using a context2d I could draw paths directly, I understand that this is not possible in WebGL, and so we must work with bitmaps. That raises some questions for me about the geometry such as Rectangles which appear to maybe not be bitmap based.

The trees I am rendering are blurry when you zoom in with the camera, which as a bitmap would be expected. Is there a way to render a higher resolution version of the SVG when the camera is zoomed in? I suppose I could load the image with “zoom” based keys like tree-sm, tree-md, etc and then swap them in run time?

2
  1. I think the type must be "svg".
  2. I would look into the Graphics object. Or if you want to use context2d exactly like before use a Canvas Texture.