Weird z-index by using factory, animation from tilesource is buggy? (SOLVED)

I have a main collection, with 3 main game objects. Some of these 3 main objects have nested game objects, but I’ve made sure that all of the nested game objects has position z-index of 0.

3 main game objects: Map(z-index: -1), Character(z-index: 0), Spell(z-index: 1)
Inside of Spell GO, there is a Spell factory (with a reference to a external GO whose sprite is created from a tilesource with 0,0,0 position, blend mode alpha) . And I will create the sprite using factory.create("/spells#spellblockfactory", vmath.vector3(240, 240, z-index), nil, nil, 1), inside a script within then Character GO.

I was experimenting a few z-index. Trying it with 1, works with a transparent background on desktop(cmd+b). But when I bundle the app and install it on my Android phone, it renders the tilesource animation with a black background. This is the range of z-index I’ve tried:

    factory.create("/spells#spellblockfactory", vmath.vector3(16 * 1, 16 * 1, -1), nil, nil, 1) -- no
	factory.create("/spells#spellblockfactory", vmath.vector3(16 * 2, 16 * 2, -0.1), nil, nil, 1) -- yes
	factory.create("/spells#spellblockfactory", vmath.vector3(16 * 3, 16 * 3, 0), nil, nil, 1) -- yes
	factory.create("/spells#spellblockfactory", vmath.vector3(16 * 4, 16 * 4, 0.1), nil, nil, 1) -- yes
	factory.create("/spells#spellblockfactory", vmath.vector3(16 * 5, 16 * 5, 1), nil, nil, 1) -- yes
	factory.create("/spells#spellblockfactory", vmath.vector3(16 * 6, 16 * 6, 1.1), nil, nil, 1) -- no

Both results are the same for both desktop and mobile. Any reason why z-index can’t go more than 1, in this case? And what am I doing wrong such that the tilesource is rendered with a black background? Even the image looks weird, it should be blue instead of white.

The usual render range for z index is -1 to 1. so any thing that goes beyond this range will not be rendered.

1 Like

Got it, will be experimenting the z-indexes from -1 to 1 in the future.

Desktop ->
image

Mobile ->

Was trying factory.create between a sprite with animation from a tilesource and an atlas. Seems like the atlas renders the sprite animation properly. But the background is using tilesource as well for tilemap. Is there any properties or game project settings i need to tweak for Android?

I tried again this time with a static game object directly on the map in the same collection. It has the same issue. I don’t think it’s a factory-related issue, but this particular png perhaps?.

I’ve uploaded the .png for reference.

Block

Previously, the buggy alpha issue that looked like a z-index issue, seems to be a bug on the animation/sprite referenced from a tilesource. I split the tilesource into multiple png cutter using an online tool, then created an atlas from that, and then an animation/sprite. It rendered properly on Android.

I guess I’ll be staying away from tilesource for animations from now, until I have better understanding on how it works.

Is this the issue you are having? Samples not working correctly in browser (DEF-3339)

2 Likes

Try this version of the png. The problem is probably that your original is 8bits/channel and Defold doesn’t handle the conversion for this properly yet.

edit.zip (5.6 KB)

1 Like

I tried opening the file from assets > Block.png and save it in Mac’s Preview, it doesn’t work. Didn’t check if there’s a diff in the file. Not sure which editor would save it in the right format. But tried the file from @Pkeod and it started working again. Thanks! :slight_smile:

I probably named the title of this topic wrongly because of this issue which mislead me. Oops. Another thing, is there any image editor to recommend that would save the png correctly?

2018-10-14%2019_48_46-LNPOverlayWindow

I modified it with Photoshop CS6, but any advanced image editor should be able to do this.

There is probably some simple freeware tool for Mac that could do this for you again in the future.

And the editor will likely handle it on its own eventually.

Your best bet is to convert it to 8-bit/channel.
Currently, it’s a more esoteric 4-bit format:

$ file ~/Downloads/issueforum.png 
issueforum.png: PNG image data, 528 x 48, 4-bit colormap, non-interlaced

A quick way to convert files is to use sips:

$ sips -s format png ~/Downloads/issueforum.png --out fixed.png
/Users/mathiaswesterdahl/Downloads/issueforum.png
  /Users/mathiaswesterdahl/work/defold/fixed.png

$ file fixed.png 
fixed.png: PNG image data, 528 x 48, 8-bit/color RGBA, non-interlaced
6 Likes

Preview works fine. Just export to png and select 8 bits per channel:

5 Likes