How to scale a tilemap, and black screen for SVG sprite in firefox

1

Dear Olivier (or whoever can help),

I have 4 questions:

  1. How do I scale a tilemap with SVG tiles i.e. the nominal tile width is 64x32 but e.g. I want to display it (or actually everything) at double the size e.g. 128x64?

  2. I’m displaying an animated sprite from an SVG spritesheet. It displays fine in Chrome. However, in Firefox, it displays as a black square. Any idea how to fix this?

  3. I’m loading a tsx tileset. I can’t use tsx extension due to the conflict with Typescript tsx files so I’m using XML extension. However, it cannot load despite me setting the type to tsx in the loader. I have to manually call TMXUtils.parse instead. Is there any way to force it to detect the file type as TMX based on the type of the resource as initially passed to the loader, rather than based on the file extension?

  4. I’d like to edit my tileset in tiled. However, to do so the image name has to be the filename with “.SVG” at the end. But I have to remove the extension because images loaded from the loader don’t work with file extensions in the name. Is there any way I can refer to an image specifically with the name “bla.svg” instead of “bla” when loaded with the loader (it seems to discard the file extension)?

2

Hi, see below :

  1. I would scale the tileset directly with an image editor, else it will screw things up with Tiled, even from the Tiled editor point of view, as it expect a fix tileset size when creating/editing the map
  2. does Firefox providers any error in the console ? have you tried adding me.loader.crossOrigin = "anonymous"; ? maybe it’s a cross-origin issue ?
  3. maybe export the tileset to JSON and then use the .tsj extension instead ?
  4. the loader does not discard the extension, it uses it to actually load the file, but the thing is that melonjs only use the filename (without the extension) to match with the name field in the TMX or TSX file. Im not sure understand though what you mean here? if you create a tileset in Tiled it will not remove the extension either ? does it ?

Hope this will help !

3

Merry Christmas and thanks for replying! Do enjoy your holiday, I’m going to ask more questions first but please don’t feel obliged to reply until you have the spare time.

  1. I decided to give up on the SVG and to scale the tileset because it just doesn’t work. So now I’m going to have fixed zoom levels of 1, 2, 4 and 8 and to agglomerate multiple tiles in the tilemap as 1 actual tile (so like if the zoom level is 2 then 1 game tile is 2x2 tiles in the tilemap). But now I am having a problem removing the tilemap when I want to change the zoom. When I call tilemap.destroy it does nothing and when I call melonjs.game.world.removeChild(tilemap) it gives the error “Child is not mine”. How do I remove the whole tilemap and add a new one?
  2. The problem was oversized texture. This has been solved by using Free Texture Packer in optimised mode instead of packing in a grid as I did previously. I also gave up on SVG for this as the SVG rendering was very blur in WebGL mode and there’s no apparent fix (the SVGs do work nicely with the Canvas renderer but I think that’ll make things slower).
  3. I’ll just continue using (melonjs.TMXUtils.parse(melonjs.loader.getTMX(‘tiles.xml’) as Document) as any).tilesets[0] for now.
  4. If I create the tileset in Tiled it refers to the source image with the filename e.g. with PNG or SVG extension, and the tileset then doesn’t work in melonjs unless I open the tileset in a text editor and delete the PNG or SVG extension. This is the case even if I try to call preload({name:‘bla.png’,type:‘image’,…}) because even if I specify the name as bla.png melonjs will only allow me to refer to the image as “bla”.