Search Unity

  1. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

Best way importing pixel art with bilinear filtering

Discussion in '2D' started by Shaquita, Nov 30, 2017.

  1. Shaquita

    Shaquita

    Joined:
    Jan 28, 2014
    Posts:
    37
    Since i need my project to be able zoom in/out (smash bro cam style + use sub pixels) without pixel distortion sprites will be filtered Bilinear and i upscale the sprites by x4 (character is 32x32 * 4 = 128x128) in PS to reduce the blur and i hardly touch import settings.

    Was wondering any other methods of doing this so maybe i dont have to manually upscale by x4 in graphics editor.

    EDIT (Import settings):
    Sprites dimensions are kept at a power of 2.



    Everything in this lil scene is imported with those settings except the left character sprite, its on point filter @ 32x32 and PPU = 20 to scale up with the x4 sprites:


    EDIT:
    If i could be able to pixel perfect zoom and not be restricted by integers i would do that instead of bilinear filtering
     
    Last edited: Dec 2, 2017
  2. JohnC_Unity

    JohnC_Unity

    Unity Technologies

    Joined:
    Jun 7, 2017
    Posts:
    70
    I think you're always going to get this with sprites to some extent when zooming in close, no?
     
  3. QuinnWinters

    QuinnWinters

    Joined:
    Dec 31, 2013
    Posts:
    313
    I use Point (no filter) on all of my sprite sheets just for this reason. When making a pixel art game it's really the only option, at least that I know of.
     
  4. Shaquita

    Shaquita

    Joined:
    Jan 28, 2014
    Posts:
    37
    ty for your response and not exactly. If your camera has static dims then yes you dont need to do extra work, just make it pixel perfect but if its dynamic you would only want the camera to zoom in at integers which in my case would look sloppy with a smash bros camera zooming.

    I have no problem with bilinear filtering i was just wondering if there is another method of scaling the sprites up maybe at run-time (probably when initialized) so you dont have to scale each sprite in PS by 4 after your done with it.
     
  5. SiegfriedCroes

    SiegfriedCroes

    Joined:
    Oct 19, 2013
    Posts:
    565
    I think a script to upscale the sprites is your best bet. Look into Texture2D's GetPixels and SetPixels. If you don't know where to start I'd gladly help you out when I get home this evening :)
     
  6. QuinnWinters

    QuinnWinters

    Joined:
    Dec 31, 2013
    Posts:
    313
    I use an orthographic camera that I zoom with a float. Smooth as butter at high speed as far in or out as I want to go, pixel perfect all the way. Not static. Looks just like smash bros.
     
  7. Shaquita

    Shaquita

    Joined:
    Jan 28, 2014
    Posts:
    37
    Gif?

    Very nice, maybe load the sprites through resources folder and resize each texture x4 in /Resources/Sprites folder through a loop when game is initialized? Havent messed with texture functions too much.
     
  8. QuinnWinters

    QuinnWinters

    Joined:
    Dec 31, 2013
    Posts:
    313
    Here you go, this is a from a procedural space game prototype I made a couple of years ago. I used the SetPixels method on the planets in the same project and there's not a visible difference between the methods.
     
  9. Shaquita

    Shaquita

    Joined:
    Jan 28, 2014
    Posts:
    37
    Srry but u zoom in/out pretty fast hard to catch the distortion, i can make pixels with no point + pixel perfect script + zoom and go fast between the min/max value and see no distortion myself.

    So what all do you do with the cam to make sprites pixel perfect no mater the orthographic size.
     
  10. QuinnWinters

    QuinnWinters

    Joined:
    Dec 31, 2013
    Posts:
    313
    I'm not doing anything special with the cam, just modifying the orthographic size. The only really noticeable distortion I tend to get is when the zoom gets really far out or in areas with lots of close horizontal lines. There's an asset called Pixel Perfect that I haven't tried but looks like it would correct that issue. Edit: Here's the link: https://assetstore.unity.com/packages/tools/sprite-management/pixel-perfect-14498
     
  11. sngdan

    sngdan

    Joined:
    Feb 7, 2014
    Posts:
    1,012
    I am not sure if I understand the original intent. Do you want to achieve something like this?
    - Scale up pixel art from 32 x 32 to 128 x 128, where all integer scale factors are represented by a point filtered images
    - All non integer zooms are represented by a filtered image (i.e. bilinear or other algorithm?)
     
  12. Shaquita

    Shaquita

    Joined:
    Jan 28, 2014
    Posts:
    37
    See then there is distortion but with your art its ok cuz its not as noticeable my characters on the other hand would look terrible since low rez, eyes are only 1 pixel. For example i can do smooth zoom and not see much on the tree but with the player they would look extremely bad.

    Character:

    Tree:


    No i think im settling with bilinear but to reduce blur i resize the sprites through PS by 4 and was wondering if i could just resize the sprites at run time when game is initialized so i dont have to manually do it for each sprite. Im doing bilinear because the camera wont always be at an integer to keep things pixel perfect. The only game that i have seen accomplish that is Duck Game


    EDIT:
    If i could be able to pixel perfect zoom and not be restricted by integers i would do that instead of bilinear filtering
     
  13. SiegfriedCroes

    SiegfriedCroes

    Joined:
    Oct 19, 2013
    Posts:
    565

    That would work but it will make things like animations very complicated... Unless you make your own animation system so you can also upscale every frame easily at runtime.

    I also want to not that zooming in smoothly on pixel art will NEVER EVER be pixel perfect. Pixel art is only pixel perfect at integer scale factors :)

    I think the easiest way is just doing the upscaling in Photoshop.
     
unityunity