Search Unity

  1. Unity 2018.1 has arrived! Read about it here
    Dismiss Notice
  2. Scriptable Render Pipeline improvements, Texture Mipmap Streaming, and more! Check out what we have in store for you in the 2018.2 Beta.
    Dismiss Notice
  3. If you couldn't join the live stream, take a peek at what you missed.
    Dismiss Notice
  4. Improve your Unity skills with a certified instructor in a private, interactive classroom. Learn more.
    Dismiss Notice
  5. ARCore is out of developer preview! Read about it here.
    Dismiss Notice
  6. Magic Leap’s Lumin SDK Technical Preview for Unity lets you get started creating content for Magic Leap One™. Find more information on our blog!
    Dismiss Notice
  7. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

Pixel Perfect Preview Package

Discussion in '2D Experimental Preview' started by rustum, May 28, 2018.

  1. rustum

    rustum

    Unity Technologies

    Joined:
    Feb 14, 2015
    Posts:
    13
    Pixel Perfect with Art.gif
    We’re happy to share a preview of Pixel Perfect!

    The 2D Pixel Perfect package contains the Pixel Perfect Camera component which ensures your pixel art remains crisp and clear at different resolutions, and stable in motion.

    It is a single component that makes all the calculations needed to scale the viewport with resolution changes, removing the hassle from the user. The user can adjust the definition of the pixel art rendered within the camera viewport through the component settings, as well preview any changes immediately in Game view by using the Run in Edit Mode feature.

    Getting Started:
    1. Download and install the latest Unity 2018.2 beta, here: https://unity3d.com/unity/beta-download
    2. Get a project that includes samples and documentation here: https://github.com/Unity-Technologies/2d-pixel-perfect
    Please let us know about your experience with the features.
    What worked as expected?
    What didn’t?
    What workflows did we support correctly and what did we miss?

    Feel free to reply to this post or create a new post to discuss your experience.
     
    Last edited: May 28, 2018
    eses, AntonioModer, paultan and 16 others like this.
  2. Sangyun_UnityKorea

    Sangyun_UnityKorea

    Unity Technologies

    Joined:
    Dec 6, 2017
    Posts:
    1
  3. Cereal_Killa

    Cereal_Killa

    Joined:
    Oct 20, 2013
    Posts:
    190
    I bought an asset for this but happy for it to be in the default package. Excited for retro advances. And on that note, when will auto tile sets finally arrive?
     
  4. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    206
    This is absolutely incredible! I REALLY enjoy the features here so far! I am immensely happy with it. I am grateful to you guys from the bottom of my heart.

    One thing that kinda breaks stuff for me is that the component always returns bilinearly-smoothed image and doesn't alow us to choose the filtering setting. An option to have the bilinear filtering removed and have it in point mode would be very useful.

    What also might be useful is bilinear filtering as it was handled in Sonic Mania. Sonic Mania natively renders in 424x240. If you have a 1280x720 monitor and have Smoothing filter enabled, then the framebuffer would upscale from 424x240 to 1272x720 and only then perform the bilinear filtering. This ensures that even on high-resolutions the picture won't get too blurry from bilinear filtering.
     

    Attached Files:

  5. StigC

    StigC

    Joined:
    Aug 19, 2013
    Posts:
    1
    Can you zoom in and out with this?
     
  6. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    206
    Also one thing to note: UI rendering needs some workarounds. When rendering in pixel-perfect mode without stretching UI will cut off from that camera. Using overlay is not really an option for me here since it won't be low-res after that.
     

    Attached Files:

    cirocontinisio likes this.
  7. Zargy

    Zargy

    Joined:
    Jul 13, 2014
    Posts:
    6
    Haven't had time to download and test this yet, but if this only truly supports bilinear output, then I really can't say I'd use it, since the entire point of most pixel-art styles is to be crisp and clear, not blurry.
     
  8. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    206
    There's the reason behing that. I dug into it and I can see that bilinear filtering only enables if you use stratching to fill in the black bars. By modifying the code you can easily overwrite settings and get point-sampling, e.g. without bilinear filtering.

    However, there is a catch. If you stretch your image this way then you'll get bad pixel placement, e.g. some pixels will be longer than needed on your screen. It may be distracting and it's especially noticable on resolutions closer to the original rendertexture That's why the guys enabled the bilinear filtering since it fixes this problem. From here on out you must decide yourself how to handle it, modifying the script is very easy.
     
  9. Zyriab

    Zyriab

    Joined:
    Sep 1, 2017
    Posts:
    2
    Hey, thanks a lot for this, I was working on that very purpose for a month and you heard my prayers ;) Nice to know that there's a team working on the 2D aspect of Unity as we're talking :)

    Using this asset for a game I'm currently making, I had just one feedback.

    UI scaling : having a way to scale the UI to match the screen resolution would be a next step; I understand it's an enormous work. Working on it :'D

    Other than that it looks very promising, can't wait to try it with different type of pixel art and games !
     
    Last edited: May 28, 2018
  10. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    Do you mean explicit control over the zoom level of the camera? Currently the zoom level is calculated automatically from your screen resolution and reference resolution.
     
  11. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    Would like to know how exactly your UI canvas is setup to better understand the situation.
     
  12. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    That's exactly the reason why we enable bilinear filtering only when you want to fill up the entire screen. If we don't you will lose pixel perfectness when you screen resolution is not a multiple of the reference resolution.
     
  13. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    206
    Hm, nothing special really. It's set up as a Screen-Space canvas and is being targeted at the game camera. I use "Scale with screen size" option, the values are set to the desired low-res resolution.
     
  14. Lars-Steenhoff

    Lars-Steenhoff

    Joined:
    Aug 7, 2007
    Posts:
    1,570
    In line of this I wish for a built in retro post processing stack,

    + scanlines ( adjustable intensity and pixel perfect )
    + crt rgb filter as in sonic mania
    + limit color pallet to custom set
     
    Thorlar, chriscomeau and yuanxing_cai like this.
  15. Dunkelheit

    Dunkelheit

    Joined:
    Sep 3, 2013
    Posts:
    78
    This package gonna be default when you install an Unity version above 2018.1 or have I need to download it every time?

    Pretty awesome, thanks for support.
     
  16. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    OK thanks I'll try to reproduce the issue you had and see what we can do about it.
     
  17. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    Currently you have to manually edit your project manifest to get the package, but later you'll be able to do this through the Package Manager UI in the editor. We probably won't make it available automatically for fresh editor installs as it's not needed for every project.
     
  18. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    So the reason of UI being cut is the Canvas Scaler doesn't take viewport into account when doing canvas scaling, while the Pixel Perfect Camera will modify the VP to crop the frame. Attached is a modified version of Canvas Scaler that should fix the issue for you. Try replacing the built-in Canvas Scaler with this one and let me know if it works for your setup. I also talked to the UI team to let them consider making this viewport-aware scaler a built-in functionality.
     

    Attached Files:

    Last edited: May 31, 2018
  19. Lars-Steenhoff

    Lars-Steenhoff

    Joined:
    Aug 7, 2007
    Posts:
    1,570
    build in would be logical

    just a checkbox "pixel perfect" on the camera :)
     
    MCrafterzz and Saucyminator like this.
  20. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    206
    Works brilliantly
     

    Attached Files:

    Lars-Steenhoff likes this.
  21. Lars-Steenhoff

    Lars-Steenhoff

    Joined:
    Aug 7, 2007
    Posts:
    1,570
  22. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    206
    I have a question regarding the package now. Right now I can't figure out how to do Paralax Scrolling due to the fact that when I am using my script that does the scrolling in Update the Pixel Perfect Camera script makes those layers "wobble" back and forth. By digging inside the code I found that
    Experimental.U2D.PixelPerfectRendering.pixelSnapSpacing = m_Internal.unitsPerPixel;
    is causing this. Doing some other tests with it I determined that this feature prevents bad pixel placement/stretching on animated sprites when they are placed incorrectly relevantly to the camera (like here on the pic, see how the character's ear pixels are doubled on the X axis and thus wide).

    Turning this feature off is not reasonable, obviously. Thus comes the question: how can I design my parallax system so that it would not conflict with that line of code which is being executed in the OnPreRender?
     

    Attached Files:

  23. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    One thing you could try is the public method
    Code (CSharp):
    1. Vector3 RoundToPixel(Vector3 position)
    on PixelPerfectCamera. It will take any worldspace position and return a pixel-snapped position. Try snapping the positions of your parallax layers and see if it fixes the wobbling. If not, give me a simple repro scene and I'll look into it.
     
    bowserscastle likes this.
  24. Ratherjolly

    Ratherjolly

    Joined:
    Jun 5, 2012
    Posts:
    1
    BRILLIANT! Can't wait to use it xD
     
  25. Ursagames

    Ursagames

    Joined:
    Jun 25, 2014
    Posts:
    2
    I'm really excited for this as it's really easy to setup and use! Unfortunately I couldn't figure out how to make it quite meet my needs. My current solution is to have one camera render to a low resolution render texture that another camera is looking at. This allows me to rotate the in game camera and objects in the world and everything sticks to the pixel grid.

    This might be more of a stylistic choice though, some people prefer rotated pixels to maintain straighter lines instead of sticking to the grid. However, this solution does seem to have some artifacts with the floor tiles with the robot scene when rotating the view or tilemap, looks to be caused by the seams of the tiles.

    I am really tempted to switch over now anyways as this solution improves UI workflow and handles different resolutions better than what I've been using.

    Non grid aligned "tiny pixels" generated from rotation:
    HeroRotated.png
    Render Texture example:
    WitchRotated.png
    Rotated floor tiles:
    RoboRotated.png
     
  26. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    Let us know what you think of it after you try.
     
  27. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    Have you tried the "Upscale Render Texture" option? With that enabled we do render everything into a low res render texture, and it gives rotated objects this look:
    upload_2018-6-6_11-23-56.png
     
    Ethan_VisualVocal likes this.
  28. Ursagames

    Ursagames

    Joined:
    Jun 25, 2014
    Posts:
    2
    Ah, thank you! I must have overlooked that. That's exactly what I was going for and works great for objects. Rotating still seems to introduce artifacts on the seams of tiles in the Dungeon example. I can work around that though, since I really just wanted singular object rotation for my current project.
     
  29. Coffein

    Coffein

    Joined:
    Jan 22, 2016
    Posts:
    8
    Not exactly sure why, but these settings generate a billinear filtered image - shouldn't this get scaled per point?
     

    Attached Files:

  30. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    This shouldn't happen. For a quick sanity check, make sure your sprite textures are set to use point filtering and the PPU setting matches the one on the PixelPerfectCamera component (which is 1 in your screenshot). And if there are other camera scripts enabled in your scene, try disabling them.
     
  31. sporcehorrier

    sporcehorrier

    Joined:
    Feb 19, 2015
    Posts:
    2
    I have basic needs (like no rotations), but love how this works already. I had been using a plugin that used both camera and gameobject components, which got to be a pain. It also didn't have Stretch Fill, which I think is a lifesaver here. Before I was roadblocked with 16:9 quirks (1080p filled the screen, but 720p was always windowboxed); this fixes it and looks great.
     
    yuanxing_cai likes this.
  32. FocusedBit

    FocusedBit

    Joined:
    Jun 24, 2015
    Posts:
    18
    Awesomesauce. Glad I peeked in here :)
     
  33. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    206
    Will it work with LWRP in the future?
     
  34. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    No. Our plan is to have a dedicated 2D scriptable render pipeline and make Pixel Perfect Camera work with that RP instead.
     
  35. Jiraiyah

    Jiraiyah

    Joined:
    Mar 4, 2013
    Posts:
    171
    hmm, have a question, the tiles that i use in game are high resolution and not pixel art, but no matter what i try, i sometimes see the seems of empty vertices between the blocks while i see no such thing in scene view even if i zoom in to see a single pixel as big as a unit, would this pack help solving that? i already have the texture 2D set to point with 0 extrude and mip map off.
     
  36. Lars-Steenhoff

    Lars-Steenhoff

    Joined:
    Aug 7, 2007
    Posts:
    1,570
    some games use 2d orthographic camera in combination with a perspective camera for different layers.
    Hope 2d render pipeline also supports 3d cameras in the same scene
     
  37. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    It might help, but I can't be sure as I don't know what's exactly causing the seams to appear. The only way to find out is to actually try the package on your scenes.
     
    Jiraiyah likes this.
  38. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    92
    Yes, we are taking perspective cameras into account.
     
    NeatWolf likes this.