How to load "Collection of Images"

[Sairahcaz]

Hey guys,

have a non-sprite tileset (Type: Collection of Images).

Does anyone knows, how to load this kind of tileset?

Tried to load the single images like an array, but as expected it does not work...

game.resources = [
    { name: "Assets",  type:"image", src: ["data/img/asset1.png", "data/img/asset2.png", "data/img/asset3.png" ...] },
    ...
];

Googled around and couldn't find the answer.

Thanks,
fishbone

[Parasyte]

A collection of individual images will be bad for performance, especially with WebGL. There are a few different tools you can use to combine them into a single image, here's one such tool with a tutorial: http://renderhjs.net/shoebox/packSprites.htm

melonJS technically supports the "collection of images" tilesets. If you really have to use it (and performance does not matter much), you'll have to specify every image individually in the resources file, like this:

game.resources = [
    { name: "asset1", type: "image", src: "data/img/asset1.png" },
    { name: "asset2", type: "image", src: "data/img/asset2.png" },
    { name: "asset3", type: "image", src: "data/img/asset3.png" },
    ...
];

Make sure the `name` property matches the tileset metadata. It's most likely the same as the filename without extension.

[Sairahcaz]

Me again,

have now a asset sprite with 2 big mountains (each 1160x2320).

But the big mountain gets hidden, when the viewport (by moving the character to far from this point) leaves the tile I pointed (as seen in the screenshot).

How to handle these big assets? And how to avoid that it gets hidden?

Thanks,
fishbone

[obiot]

you are definitely hitting one of the limitation of our renderer, and mostly because this is one of the use case we don't actually test.... the reason being that as written earlier by Jason, using only independent/separated bitmap for your map is just a bad idea... (performances-and-size wise, especially if you later target mobile devices)

So i don't know why you choose to do it that way, but my recommendation would be to merge all these "big" assets together with the small ones into a tileset.

[Sairahcaz]

When I do it like u said, the mountain gets drawn in isometric style and looks very crappy...

[Sairahcaz]

If I take each tile at once and put it on the layer it works, but its very exhausting to do it like this. There must be another more efficient way?
Also I noticed some graphic bugs. Looks alpha specific caus it only affects the edges of the mountain with transparence.

[ldd]

So, since I briefly tried to do an isometric game (and failed), I think I can help with the problems that I myself faced, while using melonJS.

1) Mindset: Tiled is a great tool. Make absolutely sure that your set up is fine (from the pictures, I can see it is wrong. see this guy's video for guidance). 

So for instance, if you have 64x64 assets: your tiles should be added as 64x64, your map should be isometric 64x32, etc (In your pictures, your tiles are 64x32. Don't do that!) More importantly, the mountains are not isometric and do not match isometric view. 1 mountain should be 1 tile, same width as height, no parts. This is the critical mistake you are making. You are fighting Tiled, and melonJS. Don't do it.)

2) Don't fight the recommendation to use a tileset. Use something like TexturePacker (google it) and bash commands to call it when needed. It'll save you time. AND it'll make the tiles make sense. Seriously. JUST LISTEN AND DO. Please watch the video and follow those instructions.

3) You may need to customize the sorting of objects eventually. I believe melonJS defaults for normal 2d work, but follow this guide  if you ever need help

4) oh boy is this part the least of your problems

[Sairahcaz]

13 hours ago, ldd said:

So, since I briefly tried to do an isometric game (and failed), I think I can help with the problems that I myself faced, while using melonJS.

1) Mindset: Tiled is a great tool. Make absolutely sure that your set up is fine (from the pictures, I can see it is wrong. see this guy's video for guidance). 

So for instance, if you have 64x64 assets: your tiles should be added as 64x64, your map should be isometric 64x32, etc (In your pictures, your tiles are 64x32. Don't do that!) More importantly, the mountains are not isometric and do not match isometric view. 1 mountain should be 1 tile, same width as height, no parts. This is the critical mistake you are making. You are fighting Tiled, and melonJS. Don't do it.)

2) Don't fight the recommendation to use a tileset. Use something like TexturePacker (google it) and bash commands to call it when needed. It'll save you time. AND it'll make the tiles make sense. Seriously. JUST LISTEN AND DO. Please watch the video and follow those instructions.

3) You may need to customize the sorting of objects eventually. I believe melonJS defaults for normal 2d work, but follow this guide  if you ever need help

4) oh boy is this part the least of your problems

Thanks for point 1. I watched this video some weeks ago but forgot the "half height" thing...
You wrote: "1 mountain should be 1 tile, same width as height, no parts. This is the critical mistake you are making."
So its not possible to use a bigger mountain like in my examples? I think there must be a way, how to display it?

Point 2 is not clear for me. I just need to display a big mountain not a Texture Atlas like described here:
https://github.com/melonjs/melonJS/wiki/How-to-use-Texture-Atlas-with-TexturePacker
The mountain has no movement, I dont understand the sense of this point.

 

[ldd]

1) Of course that there are ways to 'make it work' with  tiles that are not MxM.

You could, for example, add whitespace to a MxN tile to make it MxM. (hint hint: take your mountains, use an image editor to add white space to make it MxM, retry and redo until you have the right whitespace, and you are done.

You could redo the art to be MxM ( harder, but still doable)

You could also do the math required to make things work (it's just trigonometry, and a little bit of knowledge on angles) but it won't display on Tiled properly (this is why I said you are fighting the tools you are using) but if you read about isometric projection you should come up with a solution. It'll take time though. This would be true regardless of the engine that you pick.

The critical thing is that a mountain = 1 'tile'. even if mxn, it is just 1 tile. Now, suppose that you want it to be more than one tile. Is that possible?

Of course. Most things are possible. They are just hard.  (relatively speaking)

2) In simple terms, the most expensive operation in Most (almost all?) games are: - physics -rendering. You always pick the least amount of physics operations, you avoid drawing things unnecessarily. When you have many images, you make your computer work more than if you have a single picture.

It's a complicated subject, and you should google it, but what it boils down to is that your pc is crazy good at cutting and pasting and modifying one single picture. (or a couple. it depends and this is why I said it's a technical topic with way too much information to digest in a lifetime. It humbles you).

Anyways, I hope you find a solution to your problem, but from my personal experience, simple is always better.

[Parasyte]

The trouble with tiles that draw outside of their bounds was supposedly fixed: https://github.com/melonjs/melonJS/issues/105 obiot mentioned this early as a known limitation ... It should be working, but could have regressed.

Performance-wise, there are two problems to keep in mind: 1160x2320 is an NPOT texture, and it uses at least 32MB of video memory. So best case scenario you get software rendering. Worst case it will cause other problems when you run out of VRAM.

[Sairahcaz]

Seems the problem is not "outside of bounds" but something with transparency or gradient.
Check out the screenshot if I add a background color, and the mountain edges has no transparency gradient it works fine:

[Parasyte]

(I know this is an old thread, but ...) I wanted to mention that the rendering bug you are seeing is an artifact that probably (?) doesn't show up in the WebGL renderer. I suspect it's caused by scaling, even the auto-scale feature would explain it.