Spritesheeting makes 1px offset between objects

Problem Description

Here we go, i have a game where player must connect objects together, like puzzle, the puzzles are made as one object with different animations, they are different size, and the objects must connect between each other pixel perfectly to make a picture, and the player must never see that this picture is cutted into a pieces. I've done it well in code, you can see it in my capx example, the blocks connected well and 2 black blocks become like one giant block if they are connected.

It's okay in preview (even if previewing with cocoonjs launcher or chrome mobile), but the problem begins after export (I tried them all, cocoonjs, html5, crosswalk), the white line appears between two blocks, this ruins all the picture, i tried everything, exporting with none, standart and brute recompression, checking my code, pixel rounding, but nothing changes, white line still appears between blocks, so i guess the problem is in spritesheeting, it chooses the images ingame with some kind of 1 pixel offset.

Attach a Capx

[attachment=0:2yetw3r8][/attachment:2yetw3r8]

Description of Capx

2 black blocks on white background, drag one on another and on drop one is placed perfectly over another.

Steps to Reproduce Bug

• Step 1: Open the capx, preview it on mobile or anywhere else, connect the blocks, see no white lines.
• Step 2: Export to cocoonjs or crosswalk.
• Step 3: Open on mobile and connect the block, see a white line between them.

Observed Result

1 pixel offset between blocks.

Expected Result

No offset.

Affected Browsers

• Chrome: (YES)
• FireFox: (YES)
• Internet Explorer: (YES)

Operating System and Service Pack

Windows 7, 8 64 bit

Construct 2 Version ID

r178

To be absolutely sure, that this problem is caused by spritesheeting, if you open the attached capx, and edit the black block, you find that it has 2 different sized animations, A1 and A2, If you delete A2 and then export the project, you find that this object is not exported as spritesheet, c2 exports the perfectly cropped black picture, compile it and see a magic - No offset at all, figures are stacked together pixel perfectly and 2 black blocks are making a giant block, that's what i need.

I know that theres a workaround for that, just create different objects, not different animations in one, but i had so many other projects, that can not work without spritesheets, and this offset ruins them too.

I think this is a documented limitation of computers imprecisions in the cases of spritesheets, the normal way is to have 1 px transparency around the sprites, but for your particular issue, I do not know if it will work

The low quality setting may help but I cannot guarantee it.

Could be wrong but exporting as jpg may prevent spritesheeting

I think this is a documented limitation of computers imprecisions in the cases of spritesheets, the normal way is to have 1 px transparency around the sprites, but for your particular issue, I do not know if it will work

The low quality setting may help but I cannot guarantee it.

Could be wrong but exporting as jpg may prevent spritesheeting

You mean fullscreen quality or downscalling quality? Both don't help.

I can't export pictures as jpeg because it's a puzzle game, puzzle sprites has transparency, jpg does not support transparency.

I know how spritesheet works, it's okay that it stores pictures in a single file with a little offset, but this doesn't mean that this offset is needed in games, everything that's needed is just a little fix for a spritesheet's area of visibility in game.

You said it happens on all exporters, so I tried node-webkit, and I can't see a problem there. Can you post screenshots and demonstrate precisely what you mean by "connect the blocks" so I can make sure I'm doing what you're doing?

You said it happens on all exporters, so I tried node-webkit, and I can't see a problem there. Can you post screenshots and demonstrate precisely what you mean by "connect the blocks" so I can make sure I'm doing what you're doing?

Try export to mobile, crosswalk or cocoonjs, but it happens even on node-webkit see screenshot lower, just drag one block over another, make sure that they overlapping, then drop, the dropped one should appear over the lower block, in preview theres no space between them, after export to cocoonjs or crosswalk or webkit i can see the white line between them.

You can see that problem even in cocoonjs launcher, if you export the project and then open the .zip in launcher.

So, the blocks in preview, no export.

[attachment=2:27k49kkn][/attachment:27k49kkn]

After export. White line between blocks.

[attachment=1:27k49kkn][/attachment:27k49kkn]

And i found why you didn't get this on your side, i guess your node-webkit window was to small to saw that small line, it's not even 1px it's about 0.5 pixels. Here's the screenshot from my node webkit export, i resized the window a little.

[attachment=0:27k49kkn][/attachment:27k49kkn]

Ashley Here's another capx, no events, just two identical black sprites, without any space between them, they had two different animations A1 and A2.

[attachment=1:1z5z6hl2][/attachment:1z5z6hl2]

Open the capx, then export to node-webkit, open webkit project and resize the window until you see a line between the sprites or simply go fullscreen(maximize button). This offset appears on all sides of sprites, right, top, left, bottom.

Now open the capx again, edit the black sprite, delete A2 animation, export to node-webkit again, open webkit project, resize the window or go fullscreen(maximize button) and now there is absolutely no spaces between sprites, because sprite picture is now exported as a single black picture, not a spritesheet.

And another capx, that i guess explains the problem, the picture's edges becomes blurry in spritesheet? Here's 2 objects, Ground(Exports to spritesheet) and Ground2(Exports as single picture).

[attachment=0:1z5z6hl2][/attachment:1z5z6hl2]

Preview it in editor, and see that 2 sprites are okay, now export to node-webkit(or anywhere else) and open the exe, look at the left sprite(Ground). The spritesheet reduces the edges quality, that's where this offset is coming from.

Closing as not a bug, this is just a re-hash of the "adjacent objects not seamless due to floating point rendering" gotcha that lots of people run in to.

For adjacent objects to be exactly seamless, you must use letterbox integer scale, point sampling, and pixel rounding. Any other settings are liable to show seams between objects due to floating-point positioning or scaling.

Spritesheeting changes the way object edges blend: normally they clamp to the object edge color, but on a spritesheet they are surrounded by transparency so fractional positions can slightly blend with transparency. This is a normal result in computer graphics, and the tilemap object is similarly affected.

Closing as not a bug, this is just a re-hash of the "adjacent objects not seamless due to floating point rendering" gotcha that lots of people run in to.

For adjacent objects to be exactly seamless, you must use letterbox integer scale, point sampling, and pixel rounding. Any other settings are liable to show seams between objects due to floating-point positioning or scaling.

Spritesheeting changes the way object edges blend: normally they clamp to the object edge color, but on a spritesheet they are surrounded by transparency so fractional positions can slightly blend with transparency. This is a normal result in computer graphics, and the tilemap object is similarly affected.

I just dissapointed in the result like this, i had one thing in preview and another in result, i had other projects with physics and hd art, and this seams between objects is killing all the picture, and letterbox+point sampling+pixel rounding will make my projects look even uglier than with seams. Maybe there's something else that i can do to make this things to go away?

The other solution is to overlap by 1px instead of placing exactly adjacent. I'd point out you'd have this same problem in any engine that implements spritesheeting.

The other solution is to overlap by 1px instead of placing exactly adjacent. I'd point out you'd have this same problem in any engine that implements spritesheeting.

Maybe there's a way to avoid the spritesheet of current object? The 1px displacement is not gonna work because i have a physics game where you got to build the level, and even if the sprites lost 1px on edge, the collision poly remains the same, and the displacement will make something like this (red lines is the collision polygon). This will make the level unplayable.

[attachment=0:33pd4r5z][/attachment:33pd4r5z]

I tried to make my puzzle-like level parts bigger (2000x2000) so they don't export to spritesheet, and then after export crop the images and compile the project, but this is not working, because that was a stupid idea i guess

Forget it, i found a workaround.