TMX map and path to tile sets

[Stefan Forsberg]

Hello,

I'm new to both javascript and game.js so I'm sure I'm doing something silly but I can't quite figure out what.

When I try to use the tmx feature the image in the tileset seems to be cached with the full url in the key (e.g. "http://localhost:8080/images/map_sprites.png") instead of what I normally see (which in this case would be "images/map_sprites.png"). So the problem is when I preload the images I use the path ('image/map_sprites.png'). When I try to preload using the key expected for the tileset (http://localhost:8080/images/map_sprites.png) I get the error "Error: Error loading http://localhost:8080/http://localhost:8080/images/map_sprites.png".

So far all my other images it's working correctly but the tmx image loading feature seems to add the hostname etc to the cache key to. I've downloaded and tried the tmx map example and that works great. I've run the example using apache but my own app is using node. But that shouldn't matter for the game.js client side... I think?

Any help would be greatly appreciated

Thanks in advance

/Stefan

[Simon Oberhammer]

Hi Stefan,
this could be a bug, do you have a small code example highlighting the problem?

the tmx module *should* load the images relative to the mapUrl (the logic would, for example, totally break if the images are on a different host... needs a fix).

the relevant lines are somewhere around here: https://github.com/oberhamsi/gamejs/blob/master/lib/gamejs/tmx.js#L162

I'll look into it, if you have an example. How are you specifying the .tmx url? relative or absolute?

 simon

[Stefan Forsberg]

Hi Simon and thanks for the reply!

The preloading of the image is done in this format "images/map_sprites.png".

Tmx: var map = new gamejs.tmx.Map('images/map.tmx');

And in the tmx-file the tile set is defined like this: <image source="map_sprites.png" width="256" height="256"/>

So both the .tmx and the tile set png are in the folder images. 

I'll try to create a small sample and see if I can reproduce the problem. I'll get back to you

/Stefan

[Stefan Forsberg]

I think I know what the problem is.

The function makeRelative (https://github.com/oberhamsi/gamejs/blob/master/lib/gamejs/utils/uri.js#l72) will not make a relative path if the current document path points to a file rather than a directory. The easiest way to reproduce this is to look at the example tmxmap and instead of just browsing to the directory to also enter the /index.html.

I've used the following debug code (added in gamejs.ready in the main.js file in the tmxmap example):

   var url = gamejs.utils.uri.resolve(document.location.href, './data/example.tmx');

   var url2 = gamejs.utils.uri.resolve(url, 'tilesheet.png');

   var imageUrl = gamejs.utils.uri.makeRelative(url2);

   console.log(document.location.href);

   console.log("indexOf: " + url2.indexOf(document.location.href));

   console.log("url: " + url);

   console.log("url2: " + url2);

   console.log("imageUrl: " + imageUrl);

Output when browsing "http://localhost:8888/tmxmap/":

http://localhost:8888/tmxmap/

indexOf: 0

url: http://localhost:8888/tmxmap/data/example.tmx

url2: http://localhost:8888/tmxmap/data/tilesheet.png

imageUrl: ./data/tilesheet.png

Output when browsing: "http://localhost:8888/tmxmap/index.html"

http://localhost:8888/tmxmap/index.html

indexOf: -1

url: http://localhost:8888/tmxmap/data/example.tmx

url2: http://localhost:8888/tmxmap/data/tilesheet.png

imageUrl: http://localhost:8888/tmxmap/data/tilesheet.png

Hope this help!

/Stefan

[Simon Oberhammer]

Indeed, thanks for figuring it out. The whole `makeRelative()` function is embarrassingly naive.

I fixed that particular bug in: https://github.com/oberhamsi/gamejs/commit/c9d2364e5f74

But it will still not work if your images are higher up then your tmx file - afaiu that's not a problem for you.

utils.uri definitly needs more work overall.

  simon

[Stefan Forsberg]

Hello Simon and thanks for the fix, it now works as expected for me!