Jump to content
Foomandoonian

Pixel imperfect: Why don't my tiled shapes line up perfectly?

Recommended Posts

This is something I have noticed in plenty of software over the years, but I'm posting here because I'm currently having this issue with Affinity Designer (desktop).

See attached image at full resolution for an example.

I am making a lot of tiled patterns that need to connect seamlessly. I create them with a grid and am careful to snap my points to the grid perfectly. The coordinates in the info panel confirm this. Yet my shapes do not always join and I can see the background between the hairline gaps that should not exist.

Why does this happen and is there anything I can do to fix it?

(I have been moving my points to ensure they overlap in the final product, but I consider this a hack; if I want to continue working on a pattern I then have to snap all of the points back into place manually.)

Notes:

  • As you can see in my attachment, sometimes the shapes DO connect seamlessly. There doesn't seem to be any reason why some places have the gap and others don't.
  • This isn't a factor of zooming. I can zoom right out and still see the hairline gaps.
  • This isn't just a AD display issue. I am exporting these as raster files and the gaps are still there in the finished product.
  • Another side effect of this is when I Boolean join my shapes, they often don't add together nicely. This is actually really annoying.

Screen Shot 2019-04-08 at 09.33.37.png

Share this post


Link to post
Share on other sites

Another quick example from the same pattern, showing my 'hack' fix.

Note you can also see overlapping borders that really shouldn't be apparent. Here I have an orange shape with a white shape inside. The white shape goes beyond the extents of the orange shape, yet an orange hairline fringe is still clearly visible. 

Screen Shot 2019-04-08 at 09.59.51.png

Share this post


Link to post
Share on other sites

Hi, Foomandoonian,

This issue has come up more than a few times. It appears when shapes of the same color are butted together. The 1st time I encountered the problem, the thread mentioned that it was an anti-aliasing routine problem. Essentially, the white of the background was being added into the color of the shape. 

There are 2 solutions. One is to turn "precise clipping" in the performance preference. The other is to add a centered stroke of the same color. I'm not sure how thin the stroke can be. I have a file open just now, and a stroke as thin as .04 pt works.

There have been some problems w. booleans when points have a particular geometry. My recollection is a thread where a diamond was being subtracted from a circle. When the diamond point was placed at the exact center of the circle, the subtract shape would vary between several different point positions. By moving the point a very small amount away from the center, the subtraction worked as expected.


iMac 27" Retina, c. 2015: OS X 10.11.5: 3.3 GHz I c-5: 32 Gb,  AMD Radeon R9 M290 2048 Mb

iPad 12.9" Retina, iOS 10, 512 Gb, Apple pencil

Huion WH1409 tablet

Share this post


Link to post
Share on other sites
25 minutes ago, gdenby said:

One is to turn "precise clipping" in the performance preference. The other is to add a centered stroke of the same color.

Thank you gdenby!

The precise clipping instantly fixed the fringes around the nested shapes. I also appreciate your tip about the stroke -- I may be able to use that in some places, but sadly it won't always be a solution for me.

Do you know if Serif have announced any plans to work on the problem?

I suspect (since I have seen the same issue in other software) that it is one of those issues that is surprisingly difficult to resolve. It seems like too obvious and significant of a bug to have not noticed or have deemed unimportant.

Share this post


Link to post
Share on other sites

For issues like this where there could be several reasons for the hairline gaps, it helps clarify things if users can post an example .afdesign (not just a png or whatever screenshot) file demonstrating the problem.

But since one isn't available here, I made blue tiles.afdesign based (more or less) on your first screenshot. I created each tile as a symbol instance so I could check how their edges matched up as I was editing any one of them, & to simplify things a bit I used rotation or flipping transforms to build one 'output' tile out of a set of 4 symbol instances, so for example my tiles 1 through 4 could be copied to a new .afdesign file & exported to a raster image format like png where that file type was needed:
273086338_bluetile.png.218dd40d1ec4f7e349eafcd538719925.png

Anyway, using this method the tiles line up seamlessly. There will appear to be gaps when in an Affinity app the zoom level isn't 100% or a multiple of that, but that is just a screen rendering issue. So maybe comparing my .afdesign file to yours will give you some ideas that help you 'mind the gap' ? ;)


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.3.155 & Affinity Designer 1.7.3.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.1.2

Share this post


Link to post
Share on other sites

THANK YOU R-CR!

2 hours ago, R C-R said:

There will appear to be gaps when in an Affinity app the zoom level isn't 100% or a multiple of that

^ I am certain that there have been instances where my patterns have not rendered properly AND they exported the same display issue. BUT I can't seem to reproduce that now, even on older files in which the problem was really pronounced. Now at 100% they look perfect, and export with no issues. 

Hopefully now I'm aware of a few new things I'll be better able to manage any similar issues should they arise again.

Its funny; with pixel art I'm acutely aware of the need to work in at multiples of 100%, but it never crossed my mind to try that here. 

Thank you for taking the time to help me. I really appreciate it.

Share this post


Link to post
Share on other sites

Hi there! I was having problems with a background tonight. I kept getting a random 1pixel off in different spots when I rendered the file out. To fix the problem, I simplified the symbol's geometry into one shape and then created the pattern manually and then combined all the geometry into one large shape. 

This is what my pattern renders were looking like:

1027587422_ScreenShot2019-04-14at9_57_39PM.thumb.png.54ba57c706e7abb63864e55ce08ced8c.png

 

To make sure everything lines up, I used the distribute buttons to make sure there is no space between. 

I'll attach the file with the symbol here.  The smaller pattern on Artboard1 is the file that I created by hand and stitched together with boolean operations.The symbol art is next to it on its own artboard. I am still getting the sliver of white on Artboard3, which is comprised of a symbol created from the art of Artboard1. That's the error that you are seeing above.

If you could take a look @R C-R and let me know if it's user error, I'd be forever grateful!

Thanks in advance!

So I did a little more searching on the file and discovered something. The file that I created was small and I only had the document set to 72ppi by accident. When I increased the doc's ppi to 300, the line goes away but it also increases the pixel size of the document. I tried increasing the ppi of the file to 300 and changing the file back to it's original size before accepting resizing changes. When I do that, the line comes back. There is definitely something her with regards to creating a pattern with a smaller file size and having this error appear.


This is screen grab of the larger file size and no white sliver:
1628977047_ScreenShot2019-04-14at10_51_06PM.thumb.png.c177c2760a96993a49d44afc68e7736d.png

I'm including a link for the Designer file. The file that I am including is the original/smaller 72 ppi file.

https://drive.google.com/file/d/15jnIiCgW37O8KVzgUyH6xaU2NfWgcVLG/view?usp=sharing

So I guess the work around for right now would be to work larger and then reduce?

Thanks in advance for any and all advice or help!

Best!

Stephen:)

 

Share this post


Link to post
Share on other sites
6 hours ago, segts said:

I kept getting a random 1pixel off in different spots when I rendered the file out.

This is because the 4 instances of the Artboard1 symbol in Artboard3 are not pixel-aligned on integer X origin (top left) values. To see this in the Transform panel, you may need to increase the decimal places displayed for the pixel unit type in Preferences > User Interface. I have it set to 2 places:
821700939_prefsUI.jpg.8e5de0e75ce1dff102478ee6137e1348.jpg

With that setting you can see that the X value of each of the 4 instances includes a 0.72 decimal fraction, like 4009.72 px or 5049.72 px. Increase the X value to the next larger integer number (4010 or 5050) & the white slivers should disappear. When you view the project at intermediate zoom levels like 62.5% or whatever, you may see them, but that is just a screen rendering artifact. Zoom to 100%, 200%, 500%, etc. & you will see that everything is seamless.

Just as a side note, you can simplify the background tile pattern symbol (your Artboard2 & the symbol named "Symbol") down to a curves object over a rectangle (or clipped to it). This involves subtracting the Curves object from a duplicate of the rectangle to 'cut away' the parts outside the rectangle, setting the color of the remaining rectangle to the color of the Curve objects. Then you can delete those 4 curves because they are no longer needed. This will significantly reduce the number of nodes in the pattern, which may improve rendering speed:
current.jpg.a98ec20ab2424a0cabd16e178984d81d.jpg  simplified.jpg.9c76f688b14c0adb51a3c310d8662523.jpg 

I did that in this simplified tile.afdesign file. The canvas size is 520 x 520 px, with one 130 x 260 px "tile" you can duplicate to verify that it tiles the canvas seamlessly.

Hope this helps!


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.3.155 & Affinity Designer 1.7.3.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.1.2

Share this post


Link to post
Share on other sites

Thanks @R C-R

It does! Is there anything you can do if you work on an iPad? I'm typing in 0 and it must be slightly off bc I can't get two decimals on iPad Designer. Is there a way to see two decimal places on an iPad? If not, is there a way to make sure a measurement is true? Thx!!!!!

Best!

Stephen:)

Share this post


Link to post
Share on other sites

BTW! Thanks again, @R C-R! I didn't realize that my artboard not being a whole number was throwing everything off slightly. I fix that and it worked like a charm! You're the best!!!!!

THX!
Stephen:)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.