How to set up Tiled in Angular

[KrzyZyb]

Hi, i have a problem with paths for Tiled in my Angular ExcaliburJs project.
My project structure:

My excalibur component (engine.component.ts) imports as follows:
const tiledMap = new TiledMapResource("/assets/map.tmx");

My map.tmx contains
path: source="map.tsx"/>

And my map.tsx contains
<image source="assets/tilesheet.png" width="896" height="704"/>

In this approach i don't have any errors in browsers console but the map does not display. The hint for the reason is that if i try to edit the map directly it does not see the png file:

The obvious solution would be to adjust the path to the png file in map.tsx to:
<image source="./tilesheet.png" width="896" height="704"/>
or just:
<image source="tilesheet.png" width="896" height="704"/>

When i try to do that the png resources are visible during map editing but the browser console gives me error instead:

UPDATE:
Changing path in map.tsx from " to image source="assets/tilesheet.png" to image source="../assets/tilesheet.png" helped to solve the resources issue, both all of them are detectable but the map itself does not load to the canvas.

[eonarheim]

Hi @KrzyZyb thanks for opening a discussion!

Do you have a small example repo you can share?

My first guess is the angular CLI is maybe moving files around such that the path resolution isn't working at runtime. If that's the case you can work around the Tiled plugin's path resolution by overriding the convertPath function similar to this #2370 (reply in thread)

My other guess based on the first set of symptoms without modifying the tmx/tsx, is it's also possible the angular cli is mangling names, we've had problems with some bundlers mangling the constructor name or function names (this causes an internal instanceof check to fail and not actually add entities to the scene). excaliburjs/excalibur-tiled#344 (comment) perhaps this is happening in the angular cli?

I found this SO post that documents a way of preserving names in angular https://stackoverflow.com/a/70370992/839595

I've added an issue to look into ways of minimizing the instanceof impact (I know this is a problem for default Vite, but if it's also a problem with default Angular it definitely increases the priority 👍) #2436

[KrzyZyb]

@eonarheim thank you for your reply

This is te frontend part of the project in which angular and excaliburjs are included:
https://github.com/KrzyZyb/DnDeathmatch/tree/master/DnDeathmatchUi

answering the second part:

@KrzyZyb In your scene do you have any tilemaps?

engine.currentScene.entities if not, I strongly suspect the name mangling

It seems that no entities were loaded...

UPDATE:
After playing with paths, file placement and angular.json (you can see those changes im my repo) all files are properly loaded to resources and do not signalize any error in browser. Yet the engine.currentScene.entities remail empty when logging them.

[eonarheim]

@KrzyZyb good news! I was able to get your example running by updating the excalibur verisons in the package.json. I think maybe the version difference was producing the symptom I thought was caused by name mangling?

Also if you want to set the Tiled files back to their original state so they work in Tiled, you can override the convertPath to change how the Excalibur Tiled plugin looks for files. originPath is the path to the main tmx or tsx, and relativePath is each referenced png file in the tmx/tsx.

const tiledMap = new TiledMapResource("/assets/map.tmx");
// this works as long as everything is in the assets folder and no deeper
tiledMap.convertPath = (originPath, relativePath) => {
  const segments = relativePath.split('/');
  const filename = segments[segments.length - 1];
  return '/assets/' + filename;
}

map.tmx contains
path: source="map.tsx"/>

map.tsx contains
<image source="tilesheet.png" width="896" height="704"/>

[eonarheim]

@KrzyZyb I've uploaded my edits to a fork https://github.com/eonarheim/DnDeathmatch

[KrzyZyb]

My mind almost exploded when after merging your changes the entities still were empty...
Luckily it was just my amnesie because i forgot to npm install ;)

THANK YOU very much for your assistance @eonarheim, this works perfectly fine!

[eonarheim]

@KrzyZyb For sure! Glad I could help :)