[SOLVED] Tilemaps + HTML5 => Tiles: transparent background replaced by black background

Questions
1

Hi!

I’m currently toying with tilemaps and just tried to create a HTML5 build (for fun).

Two annoying things happened:

1/ It’s not as fast as it is when I build on Defold (where it’s “perfect”). Is it normal?
edit: “fixed”, the html5 build runs smooth now… My computer was probably a bit tired the other day :thinking:

2/ More important at this point: one on my layers (well, maybe all of them but it’s super obvious with this one) doesn’t work as intended > The transparency is replaced by a black background:

image
image1279×901 144 KB

Why is that? Is this a known issue? :thinking:

Note (for both issues): the only unexpected thing I could have done is to increase the max nb of tiles (just to not be annoyed during my tests)

image
image348×189 2.72 KB

But my test tilemap only has 1000 tiles.

2

Not sure your exact issue but one observation is that it seems to only occur where tile objects are placed above the lower layer , maybe this is a clue. My first guess is some sort of z fighting going on.

1 Like
3

Hey, thanks for your answer! I’ll keep that in mind when “investigating” :slight_smile: (but quickly toyed with the layers and didn’t see improvements)

About the other issue: as mentioned in my (edited) original post, the html5 build runs smooth now.

1 Like
4

Is it all created using a tilemap or do you also have sprites for some of the objects?

5

100% tilemap except the character (added in Defold) in the main room.

But when I remove him, the issue remains.

6

Can you check the colour format of the PNG with the tiles and make sure it’s rgba 8 bits per pixel.

7

Xnview tells me that:
image

RGB, not RGBA… I don’t know if this makes a difference :thinking:

(and I don’t know how to change it… Looks like it’s a standard format)

edit: oh ok, just realized that the A means Alpha… :sweat_smile: It can come from that, indeed.

8

Note that each layer also can contribute to this.
But, we only count non empty cells, and I don’t see it reaching 10000 here.

Would it be possible for you to share a repro case project with us?

9

Hi

I just shared a public repo with a minimal version of the project (you can still scroll up/down but that’s all)

Note: the image quality in the HTML5 build doesn’t look as good as on Defold (different colors, “resolution” etc.)… Maybe the same issue? I don’t know

1 Like
10

Thanks for the repro case!

It seems there’s a difference between how the editor calls the texture generation function, compared to how bob.jar does it.
When copying the texture from an editor build to the bob built content, it works as expected.

I’ve added an issue here: Issue-6134

Currently, I don’t have a good workaround for you.

11

The image is using an indexed PNG and not an 8bpp RGBA image. If you resave it with the correct color format it works. This is a known issue that we’ll hopefully solve at some point.

Here’s an updated image:

tilemap-32x32-001
tilemap-32x32-001640×768 19.2 KB

3 Likes
12

One way to check this is to use ImageMagick tools:

users/ragetto/tilemap-issue $ identify -verbose tilemaps/retro_tilemap/tilemap-32x32-001.tga 12:02:42
Image:
Filename: tilemaps/retro_tilemap/tilemap-32x32-001.tga
Format: TGA (Truevision Targa image)
Class: DirectClass
Geometry: 640x768+0+0
Units: Undefined
Colorspace: sRGB
Type: PaletteAlpha
…

Unfortunately, we don’t support this format (yet), although it seems the editor actually can support it. I’ll leave the ticket open for now. We are happily accepting pull requests for fixes like this :slight_smile:

4 Likes
13

I just used this image and it didn’t work (same result as previously :cry:).

Which software do you use to save in the correct color format?

We’re talking about this HTML5 build?

image
image243×197 3.89 KB

edit: also tried to clear “cached images and files” of my browser (Chrome), but it still doesn’t work.

14

Just downloaded this software, but… all I can do is to resize/rotate/etc. the image :thinking: (and various basic transforms)

15

Not 100% sure of what I’m doing :grin: but I just went to the command prompt and “identified” the image (shared by Britzl) via magick:

image

Doesn’t look like a RGBA image? I don’t know

16

I used Aseprite, but almost any image editor should be able to change the color mode from indexed to RGB(A).

1 Like
17

You missed the “-verbose” flag to the tool: identify -verbose test_tilemap.png

I haven’t found how to use “convert” to convert the image from palette to truecolor though, which is a bit weird imho.

1 Like
18

I downloaded Gimp (since I don’t have a Photoshop license), exported the image to the correct format (8-bits RGBA) and now the HTML5 version works as intended.

Note: @britzl your updated image was not in the correct format :slight_smile:

Anyway, my issue is fixed (even though the source of this issue should be fixed so other users won’t be confused) and I learned a few useful things in the process.

Thank you both!

1 Like
19

Huh, strange. I wonder if the forum optimises the PNG on upload?

Happy to hear you finally found a workflow that works for you!

2 Likes
20

Yes , looks like when adding a .png image to the forum it converts from rgb(a) to indexed.

1 Like