Problem of visualization Chromiun/Firefox

[OscarDSanchezJ]

Describe the bug

A clear and concise description of what the bug is.

In Chrome the tile tileset lines appear that do not exist and in firefox the main character deforms without explanation of its original form.

Note: Nearest mode is activated, and image smoothing is disabled,

create an assets of sprites 8x8 and the config the screen is 256x256 Please double check that the bug is not already reported in the issues list.

To Reproduce

Steps to reproduce the behavior:

1. Go to 'Local Server or Upload itch.io to run the game'
2. Click on 'none.'
3. Scroll down to 'none'
4. See error, The first run of game view the problem

• Please include a link to a game if possible!

https://kalpar.itch.io/elinajump?secret=OgzoRlP8s34jYrUJYWtKPuVPzP4 passcode: 123

• If applicable, add screenshots to help explain your problem.

The main character deform to original form (firefox problem) https://media.discordapp.net/attachments/498823062184263680/631281422455406594/FailFirefox.png?width=400&height=250

In chrome tiles sprites seems like they don´t exist or should appear https://media.discordapp.net/attachments/258624088283545600/630851961624854588/raroitch.png?width=400&height=250

The Tiled Sprites

The mosaic

Other details

• Include any OS/browser version/smartphone that you're using

OS: i'm use Linux mint 19.1 Browsers:

Chromiun Version 76.0.3809.100 (Official Build) Built on Ubuntu , running on LinuxMint 19.1 (64-bit) Firefox Quantum 69.0

smartphone: none

• Which version of GDevelop are you using? The desktop app or the web-app?

  the version is Gdevelop5Beta 80

• Add any other context about the problem here.

for the moment nothing

[eon-s]

I was able to reproduce (briefly) the second effect on firefox on one laptop (ATI GPU), the screenshots look like bleeding on the tiles but what I saw looked like artifacts usually caused by subpixel positions.

[4ian]

Looks indeed like something related to subpixels rounding. @OscarDSanchezJ can you double check that your object are on rounded coordinates (e.g: y position is 243, not 243.12)?

[OscarDSanchezJ]

Looks indeed like something related to subpixels rounding. @OscarDSanchezJ can you double check that your object are on rounded coordinates (e.g: y position is 243, not 243.12)?

to all position of my objects is a integer number, i'm not understang the fail... or so that's what gdevelop says

[OscarDSanchezJ]

What would be my solution to round the pixels of all objects?

[OscarDSanchezJ]

Try delete the tiled sprite background and none of solve the problem

[OscarDSanchezJ]

i'm found with of the editor visualized the problem of gdevelop5 in the editor and browsers, more no in the previews of engine The Editor image, and browser export: The Preview:

[OscarDSanchezJ]

i'm shared the project folder, this is very weird https://github.com/4ian/GDevelop/files/3721892/ElinaJump_weird_problem.zip

[Jose-Moreno]

I can confirm having the same visual artifacts (apparent bleeding) under Windows 7 in the b79 Gdevelop standalone editor. It happens simply by panning and it's visible in any zoom% so it's not a rounding error in the display.

• I have reviewed the resources and the pixels are correctly painted in the sprites.
• Smoothing is turned OFF in the resource manager.
• Sampling mode is set to "nearest neighbour" in the game properties.
• The sprite positions are not in fractional steps, they are snapped to a 8 x 8 grid.
• Sprite tiles are made on power of twos (all of them are squared or place on squared textures, even the character)

This seems like a bug with how the textures are being displayed. Could it be a bug with Pixi.JS texture surfaces for small sized textures? @4ian

[zatsme]

Try this...

In the preferences...

and in the included event sheet...

By zooming into the scene the artifacts disappear.

[Jose-Moreno]

@zatsme I tried that right now but the in-editor artifacts didn't go away. (This is 512 x 512 as you suggested)

Also in the game editor preview they still appear when you collide with the tiles Edit: it seems to happen when you jump i've corrected my previous statement. See GIF below.

[4ian]

I think this is related to the rending of Tiled Sprites and Panel Sprites: https://github.com/4ian/GDevelop/blob/master/Extensions/TiledSpriteObject/tiledspriteruntimeobject-pixi-renderer.js https://github.com/4ian/GDevelop/blob/master/Extensions/PanelSpriteObject/panelspriteruntimeobject-pixi-renderer.js#L127-L171

This seems to be some rounding error while rendering, not sure where :/ I guess if some values are not exactly a round number, the graphics rendering will start to repeat the texture on screen. The "lines" you're seeing are the other half of the texture (i.e: the top of the texture if the line appears at the bottom) that start to be rendered.

You could almost try to work around this by adding an extra line of transparent pixels. Try and let us know if it's any better?

[4ian]

it seems to happen when you jump i've corrected my previous statement

On my Macbook Pro, it's showing when I'm on a platform going up/down in the air. I guess it make the position of the character not round on the Y axis and so I can see the artifacts at this time. Rest is ok though - so seems that's a somewhat dependent on the GPU?

[eon-s]

In the project, there is one resource with smooth enabled (terrain center I think), try turning that off and check again.

But all tiles are separated, not part of an atlas, unless gdevelop/pixi packs all in a single texture, the bleeding makes no sense, in that case the packing method may be messing up some things (like not adding offsets when needed).

[eon-s]

After looking it a bit more, if it is using a "nearest" method, it could be that rounding (mixed with global scale+browser scrolling) is giving the tiled sprites a bigger texture region, making them to draw the first row/column again, if there is an option to use something that does floor instead of round (what nearest may be doing) it may work for this kind of small textures that need high(?) precision.

[Bouh]

I have tested the example file provided above.

In preview mode the borders seem are fixed in dev version. @OscarDSanchezJ retry to catch this bug after the next release. For the rendering in the scene editor there are still borders, I don't understand where it comes from, the border is 1/10 of a pixel.