Spritesheeting makes 1px offset between objects

Bugs will be moved here once resolved.

Post » Thu Sep 11, 2014 1:11 pm

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
spritesheeting.capx


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
You do not have the required permissions to view the files attached to this post.
Last edited by Sisyphus on Thu Sep 11, 2014 1:35 pm, edited 2 times in total.
B
22
S
9
G
7
Posts: 421
Reputation: 6,543

Post » Thu Sep 11, 2014 1:27 pm

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.
B
22
S
9
G
7
Posts: 421
Reputation: 6,543

Post » Thu Sep 11, 2014 1:52 pm

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
Game design is all about decomposing the core of your game so it becomes simple instructions.
B
53
S
22
G
18
Posts: 2,122
Reputation: 17,123

Post » Thu Sep 11, 2014 2:07 pm

Aphrodite wrote: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.
B
22
S
9
G
7
Posts: 421
Reputation: 6,543

Post » Thu Sep 11, 2014 4:52 pm

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?
Scirra Founder
B
398
S
236
G
88
Posts: 24,428
Reputation: 194,625

Post » Thu Sep 11, 2014 5:04 pm

Ashley wrote: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.
Screenshot_2014-09-11-21-06-13.png


After export. White line between blocks.
Screenshot_2014-09-11-21-04-36.png




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.

nn.png
You do not have the required permissions to view the files attached to this post.
Last edited by Sisyphus on Thu Sep 11, 2014 5:59 pm, edited 1 time in total.
B
22
S
9
G
7
Posts: 421
Reputation: 6,543

Post » Thu Sep 11, 2014 6:43 pm

@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.
spritesheeting2.capx

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).
spritesheeting3.capx

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.
You do not have the required permissions to view the files attached to this post.
B
22
S
9
G
7
Posts: 421
Reputation: 6,543

Post » Fri Sep 12, 2014 2:29 pm

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.
Scirra Founder
B
398
S
236
G
88
Posts: 24,428
Reputation: 194,625

Post » Fri Sep 12, 2014 2:41 pm

Ashley wrote: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?
B
22
S
9
G
7
Posts: 421
Reputation: 6,543

Post » Fri Sep 12, 2014 3:24 pm

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.
Scirra Founder
B
398
S
236
G
88
Posts: 24,428
Reputation: 194,625

Next

Return to Closed bugs

Who is online

Users browsing this forum: No registered users and 6 guests