Habitica: Split pixels in avatar/mount templates relative to backgrounds
General Info
- UUID: 9fe7183a-4b79-4c15-9629-a1aee3873390
- Browser: Firefox 51.0.1 (32-bit)
- OS: Windows 10
Description
Avatar/mount templates seem to split pixels (due to 3x size where each pixel is upsized to 3x3 pixels for sprites) relative to backgrounds. Backgrounds do not appear to be the cause of the issue, after testing of many backgrounds. Many Gen 1 mounts also appear to have split pixels relative to the avatar template. This does not appear to be an issue with quest mounts.
Pets do not appear to have alignment issues with the backgrounds.
If this is an issue with the sprite files themselves (it appears to be for the flying pig at least? There is only a 2-pixel space where it should be 3 between the right edge of the wing and the edge of the template, as tricksy.fox has pointed out in Pixels in Progress) then Artisans may be able to help!
Example screenshots:
Avatar alone:
Gen 1 Mounts:
Wolf does not split pixels relative to avatar, but does relative to background:
The following mounts do split pixels relative to the avatar AND the background.
Quest Mounts (split pixels relative to background but not to avatar)
beffymaroo
All 10 comments
So I think it's been mentioned somewhere at some point before, but I think some of the backgrounds are splitting not because they are split in regard to their own grid (whereas the flying pig, for example, has splits relative to itself), but because of the "expand to 3x and remove one row of pixels from the side" rule in creating backgrounds. It's not, to my knowledge, clearly specified which single line of pixels should be removed, so if artists are inconsistent, things won't always line up, and can be off by one row, column, neither, or both, depending on which they picked.
tricksyfox
on 21 Feb 2017
I've noticed this too. If a critter splits pixels relative to the avatar, it's likely a problem with the pet/mount; if the avatar doesn't line up on the background grid, that suggests it's a problem with the background.
SabreCat
on 21 Feb 2017
If there's an issue with background alignment relative to the avatar template, that must be true for every background, since I haven't found one that doesn't have this issue yet after testing 20+ . The splits also seem pretty consistent from one to another, though this is difficult to be precise about.
beffymaroo
on 21 Feb 2017
Looks like the backgrounds all need to move one pixel down and to the right, whereas the splitting mounts, as far as I recall, all need to move one pixel up and to the left.
If I recall correctly, the only gen 1 mount that's splitting is the flying pig. At least, that's the only one I remember having to move. I noticed when I was making the glow mounts because of the border, and with the pig I didn't have enough space.
tricksyfox
on 21 Feb 2017
What does "splits pixels" mean?
khipkin
on 25 Feb 2017
@khipkin: Habitica's sprites use a 3x scale. To produce the pixelated look of the images on the site, you take a tiny image
and scale it up to three times its size without any interpolation:
In order for this effect to look consistent across the site, however, all images need to be lined up such that these 3x pixels (I like to call them "chunky pixels," hehe) perfectly overlap one another when layered. If two sprites are misaligned such that when placed atop one another, there's a one- or two-pixel gap in places instead of the proper 0 or 3, they're said to "split pixels".
Maybe the easiest examples to see above are in the middle series, the avatar riding a cotton candy blue wolf / white flying pig / base tiger / cotton candy blue penguin. Look at the space between the avatar's Horned Helm and the tree on the left, where you can see the pink cherry-blossom background. The gap is only 1 pixel wide. If everything lined up correctly, there would be no gap there leaving the Helm flush with the tree bark, or there would be an amount of cherry blossom visible equivalent in size to the black dot in the avatar's eye.
SabreCat
on 27 Feb 2017
OH! I see what you mean! Thanks for explaining it. :blush:
khipkin
on 27 Feb 2017
This runs a bit deeper than just needing to scoot the backgrounds around a bit--even the background _template_ is wrong. Backgrounds are currently 140x147, which is evenly divisible by 3 vertically, but not horizontally. I fear they would all need to be updated to a more fitting size (go square, 147x147?) to fix this long-term.
SabreCat
on 7 Mar 2017
Yikes! How complex!
Right now the pixel artists are instructed to do the art on a 47x49 canvas, export at 3x, and then shave off a pixel so it's 140x147. Does anybody know why this came to be? Because 141x147 (while not square) IS divisible by 3.
It also looks like there's an issue with the templates on the pixel art trello -- I just downloaded the bg templates, and the one with the mount and the one with the mount AND pet are both 47x49, but the one with just the avatar is 70x50. So I imagine that could have thrown some of the proportions off at some point or another for a few of them, if somebody used that template and not the other two.
tricksyfox
on 7 Mar 2017
We're internally fixing this bit by bit, so I'm closing this ticket.
lemoness
on 7 Dec 2017
Related issues
Frownigami1
路
4Comments
thebadwolfgirl
路
4Comments
Alys
路
3Comments
kantamablade
路
4Comments
aksteele
路
3Comments
Most helpful comment
@khipkin: Habitica's sprites use a 3x scale. To produce the pixelated look of the images on the site, you take a tiny image
and scale it up to three times its size without any interpolation:
In order for this effect to look consistent across the site, however, all images need to be lined up such that these 3x pixels (I like to call them "chunky pixels," hehe) perfectly overlap one another when layered. If two sprites are misaligned such that when placed atop one another, there's a one- or two-pixel gap in places instead of the proper 0 or 3, they're said to "split pixels".
Maybe the easiest examples to see above are in the middle series, the avatar riding a cotton candy blue wolf / white flying pig / base tiger / cotton candy blue penguin. Look at the space between the avatar's Horned Helm and the tree on the left, where you can see the pink cherry-blossom background. The gap is only 1 pixel wide. If everything lined up correctly, there would be no gap there leaving the Helm flush with the tree bark, or there would be an amount of cherry blossom visible equivalent in size to the black dot in the avatar's eye.