Jump to content

Isometric 2:1 projection grid does not match pixel grid. How can I fix that?

Recommended Posts

Hi PanthenEye,

You're right, as a frequent user of 2:1 isometric grids (Not in AD) I can definitely say that the grid system in AD does not work! But when fixed it has the potential to be one of the better ones out there.

As mentioned in a previous post:


If you look at the image above you can clearly see that the 2:1 grid does not align with the guides set to 5 and 20 mm (the bottom of the axis handles is set to 10x10mm) which IMO is absolutely useless because that means it is not a 2:1 grid.

If AD could fix that it would probably be the argument for me to switch from Ai to AD.





Share this post

Link to post
Share on other sites

Since the pixel grid and "force pixel alignment" was doing more damage than good I disabled it completely and left only grid snapping enabled.

test tile.png

In this quick test, It's better but it's still not pixel perfect, you can see a slight, subpixel line that separates both brown planes even though they're perfectly aligned with the 2:1 Isometric grid. Furthermore, this gap between planes only appears in the export. I don't see it in the editor when I zoom in. 


So I'm a bit stumped here - I can't use the pixel grid and I can only use grid snapping to an extent. Why is this considered "by design" if it doesn't do what it's supposed to?

A short term fix is adding 1-2px outline in the same color as the fill. But it introduces a completely unnecessary complexity requiring me to sync colors for fill and outline, as well as throwing off my measurements and significantly increasing the time I need to edit the tile or create new tiles.


Share this post

Link to post
Share on other sites

So that subpixel gap does appear at certain zoom levels. But there's nothing I can do about it. No matter how many times I re-snap the planes to the grid, the gap is still there. 



Share this post

Link to post
Share on other sites

I've now spent hours trying to get this thing working. It's so close yet so far. A 1px outline on the brown planes plugs that damn gap between them. But it creates issues with brown corners sticking on top of the green plane. So now the green plane needs a 2px outline to compensate which ruins the regular size of the image and makes it unusable. I can only assume the export persona's final result has a significant difference from what the editor shows me since I can't see any of these issues in the editor. At least not to the extent I'm seeing it in the final export. 

The outline workaround does not really work:


Now I'm experimenting with larger uniform shapes that take the whole space of the tile which kinda works for brown planes. There are still some subpixels between the green and brown planes but they are way less noticeable. Maybe in game, it wouldn't matter. 




So I guess that's what I'll stick with for now. I still can't get the right size I need for the tile in the editor but that doesn't matter as much as long as the aspect ratio is correct. I can always run a Photoshop script or something to resize all tiles to the exact size I need. And with some trial and error, I could probably get ADs grid to the right size I need via importing the correctly sized tile in the editor first, then adjusting the grid to fit it. 

All of these "workflows" are really backward though. I wish it just worked out of the box and wouldn't require me hacking this thing for hours to get something usable out of it.

Share this post

Link to post
Share on other sites

Scratch that, it's all for nothing when it exports this abomination. I can't fathom the point of an isometric grid that doesn't align with the pixel grid. For anything precise this tool is unusable. The general workflow is so nice, I just wish it would be useful for things that require more precision than an illustration. The marketing of this feature said it's useful for games too yet clearly it's not.



Share this post

Link to post
Share on other sites

Ok, so I finally got something usable out of it. A proper 256x256px tile. The solution was to ditch the isometric grid completely, enable back everything related to pixel snapping. Scale up the object to the final dimensions I need via Transform panel. Then add guides for pixel-perfect precision (because the export was still 1px longer for some random reason even though the object was precisely 256x256px). After doing all that it sorta works.

So the workflow now is:

  1. Create a 2:1 isometric grid. Grid size doesn't matter much since it doesn't reflect the final image size in any way. So do what looks comfortable. 
  2. Disable pixel snapping, enable grid snapping
  3. Create the asset on the isometric grid (note that grid only snapping leaves subpixel gaps between separate planes which are glaringly obvious once the asset is exported. So the background shape needs to be flat and uniform and cover the whole tile to fill these gaps)
  4. Disable grid snapping and the grid itself, turn back on pixel snapping
  5. Add guides for pixel perfect export
  6. Scale your object via Transform window to the tile size you need 
  7. Export
  8. Hope you don't have to do any major asset edits because the grid does not fit the asset anymore



Share this post

Link to post
Share on other sites

This isn't 3D. It is 3 flat trapezoids on one plane, not 3 squares in 3D space, making up the three sides of a cube. 

MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 10.14.6

Affinity Designer 1.8.4 | Affinity Photo 1.8.4 | Affinity Publisher 1.8.4 | Affinity Designer Beta | Affinity Photo Beta | Affinity Publisher Beta

Share this post

Link to post
Share on other sites
On 6/25/2019 at 10:26 PM, Old Bruce said:

This isn't 3D. It is 3 flat trapezoids on one plane, not 3 squares in 3D space, making up the three sides of a cube. 

Did I say this was a 3D grid? What I expect from a feature like this is some measure of precision - actual metrics I can use to determine the parameters of the project to get the result I need. Currently, that's simply not possible without considerable extra effort. I have to eyeball it as well as hack around it to get something usable out of it. The workflow generally is really great if it worked as advertised, but the tool's design is imprecise and flawed for anything that is not an illustration.

  • The isometric grid does not match the pixel grid. So if both pixel and grid snapping is enabled I get unexpected, random results all over the place when trying to move shapes with precision. So I can only have one or the other enabled at a time. This should not be the case.
  • If only grid snapping is enabled, after moving the shapes perfectly in place according to the grid there are still subpixel gaps between these shapes which are hard to spot in the editor and only show up at certain zoom levels (such as 900%) but are glaringly obvious once the asset is exported. I counter this by placing a single flat shape as a background gap filler. It's not hard but this should not be necessary.
  • Because the isometric grid does not align with the pixel grid if I export an asset aligned with the isometric grid, it doesn't properly strip all white space giving me an unusable, imprecise asset. I have to disable grid snapping, enable pixel snapping. Add guides and move the asset to fit the pixel grid, so it can properly export the asset with all white space stripped via Export Persona. The workaround is usable but now the asset is not aligned with the grid anymore. None of this should be necessary.
  • The grid size parameter does not relate to the asset in question in any reasonable manner. A 2:1 isometric projection with a grid size parameter of 143.1px was the closest fit I could eyeball for a 256x256px asset which is a common asset size but it's still off. Why can't it simply ask for the height or the width of a single cell so I can actually set up the grid with precision? I can't create the correct grid size I need from the get-go so I have to resort to using the transform panel to resize the asset to the precise dimensions I need which again misaligns the asset from the grid. 

Great tool for digital only illustration but it sorely lacks precision for anything video game or print related. 

Share this post

Link to post
Share on other sites
22 hours ago, PanthenEye said:
  • The isometric grid does not match the pixel grid.

In general, it can't. This is because the 2:1 grid is a mathematical construct with immutable geometric properties.

23 hours ago, PanthenEye said:

The grid size parameter does not relate to the asset in question in any reasonable manner.

The grid size relates to the pixel dimensions in the only possible manner permitted by the geometry. The diagram below should make this clear.


Affinity Photo 1.8.4, Affinity Designer 1.8.4, Affinity Publisher 1.8.4;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 40GB RAM; macOS 10.15.6
Affinity Photo & Affinity Designer for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.3.1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. 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.