Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Pixel art workflow

Discussion in '2D' started by diegzumillo, Nov 13, 2013.

  1. diegzumillo

    diegzumillo

    Joined:
    Jul 26, 2010
    Posts:
    418
    Hey there!

    Is anyone trying to make pixel art with unity? I started this project because I like pixel art and it looks easier and faster to work with, but it is very difficult to get it working properly. I'm talking about resolution, screen size, sprite size and all that stuff. If anything isn't right your sprites will appear distorted. How are you people dealing with this?
     
  2. popc

    popc

    Joined:
    Nov 13, 2013
    Posts:
    12
    For the pixel perfect, eg. if you set "Pixel To Units" in "Import Setting" of images to 40, set "Orthographic Size" of a camera to (Screen.height / 2 / 40).
     
    Last edited: Nov 13, 2013
  3. diegzumillo

    diegzumillo

    Joined:
    Jul 26, 2010
    Posts:
    418
    Thanks! Yeah, that's the correct relation to get everything to agree with each other in a pixel perfect condition.

    Now what if I want to rotate things or zoom them in and out? pixel perfect doesn't get me there, but I'm seeing this in current games, any advice on how to achieve this? My solution so far uses a sledge hammer: I resize all my sprites 4 times (using nearest neighbor) and they get rendered nicely in any distance and orientation, but if there's a better solution I'm all ears!
     
  4. DarkMarmot

    DarkMarmot

    Joined:
    Nov 13, 2013
    Posts:
    22
    also working on a pixel art project -- did you try changing the filter type of the texture to 'point'?
     
  5. bryantdrewjones

    bryantdrewjones

    Joined:
    Aug 29, 2011
    Posts:
    147
    You'll probably want to turn the "Pixel Snapping" feature on to ensure your sprites are aligned to the pixel grid. Create a new material and assign it the default sprite shader. You should then see a little check box to turn on pixel snapping. Assign your new material to your sprite renderer and you're good to go.
     
  6. Togglesworlh

    Togglesworlh

    Joined:
    Nov 12, 2013
    Posts:
    40
    You're my hero! I'd forgotten to do this and was wondering why my sprites were so messed up. It was driving me insane. I have nothing to add. Just wanted to say thanks!
     
  7. keely

    keely

    Joined:
    Sep 9, 2010
    Posts:
    967
    If you have Unity Pro, you would also need to set:

    Texture Type = Advanced
    Mesh Type = Full Rect

    The pixel grid snapping doesn't currently work with those tight meshes around alpha.
     
  8. Jessy

    Jessy

    Joined:
    Jun 7, 2007
    Posts:
    7,325
    I don't understand why this would have helped you. The pixel snapping isn't for pixel art; it's ostensibly mainly useful for GUI. That is, it snaps vertices to the render target (usually the screen) pixel grid. It doesn't know anything about the texel resolution of your pixel art. What did it improve for you?
     
  9. Togglesworlh

    Togglesworlh

    Joined:
    Nov 12, 2013
    Posts:
    40
    Sprites were distorted. I added this material. They were no longer distorted.

    Before: http://www.twigbits.com/wp-content/uploads/explosions/2013-11-17/before.bmp
    After: http://www.twigbits.com/wp-content/uploads/explosions/2013-11-17/after.bmp

    You can see that some of the blue triangles in the first screenshot look pretty messy. They're pixel perfect in the second screenshot. I don't understand why that doesn't make sense to you. Shouldn't it be solving the same problem with 2D sprites as it solves for 2D GUI? I dunno! Makes sense to me.

    It also fixed an issue where sometimes the sprite would shift one column to the left on the sprite sheet. This, I don't so much understand. That sprite up in the upper right corner? If I positioned it at exactly (2.8,3.8), which should have been the pixel-perfect position according to the camera and resolution, etc... It'd shift the texture grab one column to the left. If I positioned it at (3.79999, 2.79999), everything was fine. Very weird.
     
    Last edited: Nov 20, 2013
  10. Jessy

    Jessy

    Joined:
    Jun 7, 2007
    Posts:
    7,325
    This is more complicated than "press a button and everything is fixed"; I don't think it can just make intuitive sense. I understand what is going on in the vertex shader, for example, but I don't have the ability to tell you why you got the results you did without seeing your project; I haven't encountered this exact artifact before. Obviously we can both see that the "after" shot is improved, but can you define this "messy"?*

    I was under the impression that the "problem" is filtering artifacts, from which point filtered textures in "2D" don't suffer. Apparently it can be useful for something else.

    As I understand it, If the texel density of a "2D" object with point filtered texturing matches the pixel density of the render target, then snapping shouldn't do anything, except, as keely said, for most tight meshes. "Snapping" will occur automatically when pixels are rendered...

    *...but maybe this is related to your meshes not conforming to your texel grid?
     
  11. Togglesworlh

    Togglesworlh

    Joined:
    Nov 12, 2013
    Posts:
    40
    A sprite is nothing but a texture, right? Why wouldn't it suffer the same issues as the GUI, in this case? It's simply snapping the vertices of that texture to the render target, same as it does for GUI.

    The other issue I mentioned is obviously related SOMEHOW (maybe not quite directly), but I don't really have any idea why.

    I dunno, I won't pretend to be a graphics programmer. It just sort of makes sense to me on a surface level. In my mind, it's the same kind of artifacting you'd get from shrinking an image by about 10%. You'd notice some weird distortion on some of the lines (either horizontal or vertical or both, depending on just how you're shrinking it), because you're losing data. The difference here is the artifacting is a result of imprecise positioning, rather than shrinking an image by some weird percentage. But, like I said, ain't a graphics programmer, probably completely off!

    The other possibility, I suppose, is that there's something wrong with how Unity is grabbing the data from the texture itself, and THAT'S fixed by changing the material t use pixel snapping? But... if it were just that, why would the positioning in the scene even matter at all?

    The other other possibility is that it's a combination of both.

    I'm out of my league here, to be honest. I like this stuff, but don't understand most of it. :D