Compiling - Spritesheet causing seams

Get help using Construct 2

Post » Fri Nov 08, 2013 12:00 pm

When I tile my sprites together, there'll be seams around the sprite edges. It doesn't happen in preview mode, only happens after exporting.
I've tried pixel rounding, point sampling and letterbox integer scale. Nothing seems to properly. They just reduce the seams, but there are still random visible lines in the background.


My sprites are all 512x512 so in older C2 versions they don't get packed into sprite sheets and everything's pixel perfect. This problem came up after the 2048x2048 and 1024x1024 sprite sheet implementation.


Is there anyway I can prevent my animation frames from packing into sprite sheets? Or any other ways to solve this?

Thanks in advanced.
B
9
S
1
Posts: 18
Reputation: 711

Post » Fri Nov 08, 2013 12:44 pm

Post a .capx - those settings should make it work fine.
Scirra Founder
B
403
S
238
G
89
Posts: 24,659
Reputation: 196,165

Post » Fri Nov 08, 2013 4:17 pm

Hi Ashley,

Here's the link to the capx.
dl.dropboxusercontent.com/u/82707324/test/test.capx

Here's the link to the exported version.
dl.dropboxusercontent.com/u/82707324/test/index.html


Maybe the problem lies with the scaling?

Thanks.
B
9
S
1
Posts: 18
Reputation: 711

Post » Fri Nov 08, 2013 6:22 pm

It doesn't seam in Chrome, IE or Firefox here, either in preview or in export. Looks fine.

However there's no point cutting it in to 512x512 tiles - you may as well have one big image. It's just up to the maximum widely supported texture size of 2048x2048.
Scirra Founder
B
403
S
238
G
89
Posts: 24,659
Reputation: 196,165

Post » Sat Nov 09, 2013 3:01 am

I think your screen size is too big. It usually happens when scaling down. I'm viewing it on a 13" laptop screen 1366x768 resolution.

The seams usually disappear when you up your screen resolution or screen size, but we cant guarantee everybody have such big screens or resolution.

Here's a screenshot.
dl.dropboxusercontent.com/u/82707324/seams.png

The reason why we cut BG images up is because we have some border backgrounds with alot of empty spaces in the middle. So cutting them up will save a lot of wasted memory. Smaller tiles usually can save more memory for odd shaped borders.

Also if the image is 2048x1536, it will waste 2048x512 of memory. So, its become a common practice for us now to cut them into 512x512.
B
9
S
1
Posts: 18
Reputation: 711

Post » Sat Nov 09, 2013 2:12 pm

It was scaled down, and I still didn't see any seams.

Seams can be tricky to avoid especially with floating point position/scale. You might use more memory but making a single texture will definitely not seam. Phones ship with 2 GB of memory these days, and a single 2048x2048 image will take up about 16mb of memory. As long as you don't have lots of them and aren't targetting really low-end devices, that's OK. If you still want to cut it up, square tiles isn't the best way to do it - a smarter way would be to cut out each item on the image (e.g. text, each building image, etc.). The background is a low-contrast gradient, which you can reproduce with linear sampling and scaling up a small sprite. That would probably use even less memory than the square tiles approach, it wouldn't seam, and you can then re-use the individual pieces of art throughout the project.
Scirra Founder
B
403
S
238
G
89
Posts: 24,659
Reputation: 196,165

Post » Sun Nov 10, 2013 3:40 pm

Yup, I guess we can try using alternative methods to avoid this problem, but the fact that is happens only when they are packed into spritesheet its kind of weird.

Previously when they were individual images none of this happened. Maybe when extracting images from spritesheet there's some slight measurement error?
B
9
S
1
Posts: 18
Reputation: 711


Return to How do I....?

Who is online

Users browsing this forum: pcfernandesjr and 25 guests