Fixing loading tilesets with spacing

[ttay24]

• Added a test map for tilesets with spacing in them
• Fixed loading of maps with spacing

Explanation on the fix:
The number of columns and rows were not being calculated correctly, which threw off which sprite it was pulling from the sprite sheet.
If we had a tileset with 3 tiles, 16px wide and 1px spacing, the width of the image would be 50px. We don't get clean numbers if we do 50 / (16 + 1) because there are only spaces between the tiles, but not before/after the first/last tiles. So we can just add the spacing to the height/width, and then divide by the tile width (or height) + spacing.
Ex:

(50px + 1px spacing) / (16px width + 1px spacing)
51 / 17 = 
3 tiles

Before

After

Tiled Map

[ttay24]

Also I bumped the package version, but that might be done as part of the build process...just lemme know, I can roll that back or make any other changes!

[eonarheim]

@ttay24 This is great, thanks for the PR! We can keep the package.json rev, this is definitely something I want to publish soon 👍

2 small changes

• Update the spacing coalesce to prevent NaN's
• Update integration test for this example test spacing to ex-tests.ts this does image diff testing to make sure this new feature will work in the future 👍

// ex-tests.ts
// note the mapTypes array all compare against the same expected image
await selectMap(page, 'test spacing');
await expectLoaded();
await expectPage('test spacing', `./test/integration/images/actual-test-spacing.png`).toBe('./test/integration/images/expected-test-spacing.png');

You can run the integration tests in "interactive mode" and it will ask to generate new expected test images that can be checked in.

npm run test:integration -- -i

[eonarheim]

We need to null coalesce here as well otherwise the addition will produce NaN's if spacing is null/undefined.

Perhaps into a constant?

const spacing = tileset.spacing ?? 0;
const cols = Math.floor((tileset.imagewidth + spacing) / (tileset.tilewidth + spacing));
...

[ttay24]

Yeah that makes sense! Just pushed these changes

[ttay24]

I'm having trouble with the integration test. Any ideas? I'm getting an unhandled promise rejection:

C:\development\games\typescript\excalibur-tiled>npm run test:integration -- -i

> @excaliburjs/plugin-tiled@0.26.2 test:integration
> webpack --config webpack.config.test.js && tsc ./test/integration/ex-tests.ts && ex-test -d ./example -t ./test/integration/ex-tests.js "-i"

assets by path dist/src/*.ts 27.1 KiB
  asset dist/src/tiled-types.d.ts 3.54 KiB [compared for emit]
  asset dist/src/tiled-tileset.d.ts 3.29 KiB [compared for emit]
  asset dist/src/tiled-map-resource.d.ts 3.13 KiB [compared for emit]
  asset dist/src/raw-tiled-layer.d.ts 2.67 KiB [compared for emit]
  + 12 assets
assets by path dist/test/unit/*.ts 84 bytes
  asset dist/test/unit/tiled-entity.spec.d.ts 12 bytes [compared for emit]
  asset dist/test/unit/tiled-layer-component.spec.d.ts 12 bytes [compared for emit]
  asset dist/test/unit/tiled-layer.spec.d.ts 12 bytes [compared for emit]
  asset dist/test/unit/tiled-map-resource.spec.d.ts 12 bytes [compared for emit]
  asset dist/test/unit/tiled-map.spec.d.ts 12 bytes [compared for emit]
  + 2 assets
asset example/game.js 1.4 MiB [emitted] (name: main) 1 related asset
asset dist/example/game.d.ts 12 bytes [compared for emit]
runtime modules 937 bytes 4 modules
modules by path ./node_modules/ 1.29 MiB
  modules by path ./node_modules/pako/ 214 KiB 16 modules
  modules by path ./node_modules/fast-xml-parser/src/*.js 44.2 KiB 9 modules
  ./node_modules/excalibur/build/esm/excalibur.js 1020 KiB [built] [code generated]
  ./node_modules/zstddec/dist/zstddec.modern.js 38.9 KiB [built] [code generated]
  ./node_modules/strnum/strnum.js 4.7 KiB [built] [code generated]
modules by path ./src/*.ts 60 KiB
  ./src/index.ts 578 bytes [built] [code generated]
  ./src/tiled-types.ts 12 bytes [built] [code generated]
  ./src/tiled-map-resource.ts 27.5 KiB [built] [code generated]
  ./src/tiled-map-parser.ts 15.7 KiB [built] [code generated]
  ./src/tiled-layer.ts 2.62 KiB [built] [code generated]
  + 11 modules
./example/game.ts 5.95 KiB [built] [code generated]
webpack 5.72.1 compiled successfully in 3716 ms
Running in interactive mode
Running against static files in directory: ./example
Current Dir: C:\development\games\typescript\excalibur-tiled
Loading C:\development\games\typescript\excalibur-tiled\test\integration\ex-tests.js
Loaded C:\development\games\typescript\excalibur-tiled\test\integration\ex-tests.js



node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "undefined".] {
  code: 'ERR_UNHANDLED_REJECTION'

[ttay24]

I am very dumb lol. I had another webpack dev server running with my game jam attempt, so it failed. Once I stopped that, it seems like it's working normally :D should have an update shortly

Edit: should be good to go now!

[eonarheim]

@ttay24 The integration tests should really pick a free port an run sorry about that! I have an open issue to fix it excaliburjs/excalibur-testing#2

[eonarheim]

@ttay24 Thanks again! This is fantastic!

[eonarheim]

@ttay24 New version is live @excaliburjs/plugin-tiled@0.26.2!

[ttay24]

@ttay24 New version is live @excaliburjs/plugin-tiled@0.26.2!

Awesome, thanks! I can get rid of my hacky packaged solution in my project lol