Search Unity

  1. Get all the Unite Berlin 2018 news on the blog.
    Dismiss Notice
  2. Unity 2018.2 has arrived! Read about it here.
    Dismiss Notice
  3. We're looking for your feedback on the platforms you use and how you use them. Let us know!
    Dismiss Notice
  4. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  5. Improve your Unity skills with a certified instructor in a private, interactive classroom. Learn more.
    Dismiss Notice
  6. ARCore is out of developer preview! Read about it here.
    Dismiss Notice
  7. 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
  8. 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
  2. SangYun_Yi

    SangYun_Yi

    Unity Technologies

    Joined:
    Dec 6, 2017
    Posts:
    1
    Great~!!
     
    ShawnKim12345 likes this.
  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:
    212
    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:
    212
    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:
    212
    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:
    107
    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:
    107
    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:
    107
    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:
    212
    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,611
    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:
    107
    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:
    107
    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:
    107
    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,611
    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:
    212
    Works brilliantly
     

    Attached Files:

    Lars-Steenhoff likes this.
  21. Lars-Steenhoff

    Lars-Steenhoff

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

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    212
    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:
    107
    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:
    107
    Let us know what you think of it after you try.
     
  27. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    107
    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:
    107
    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:
    23
    Awesomesauce. Glad I peeked in here :)
     
  33. Kolyasisan

    Kolyasisan

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

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    107
    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:
    175
    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,611
    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:
    107
    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:
    107
    Yes, we are taking perspective cameras into account.
     
    NeatWolf likes this.
  39. crowbarkz

    crowbarkz

    Joined:
    Jun 23, 2018
    Posts:
    1
    I have a question - is there a way to "zoom in" the pixel perfect camera, other than changing its PPU ? something similar to changing "size" on normal camera
     
  40. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    107
    Currently no. Control of the orthosize of the camera is completely taken by the Pixel Perfect Camera component. We may add this zoom feature in the future if the demand is high enough, but bear in mind even if we add this, you should only zoom in/out at integer intervals (2x, 3x, 4x... but never 2.5x, 3.3x, etc.). Arbitrary zooming will destroy pixel perfectness thus should only be used temporarily (for example in a short animation).
     
  41. MetaMythril

    MetaMythril

    Joined:
    May 5, 2010
    Posts:
    144
    I think the use case for this would be for zooming out, for say, a boss room that has a large monster. Could definitely tolerate the non-pixelperfectness while the camera zooms to a proper integer interval. Currently I'm stuck with Unity 5.6.4 and I myself have struggled with getting pixel perfectness fully implemented there. I may see if it makes sense for me to try upgrading to Unity 2018 and see what falls out. Still, very interesting stuff!
     
  42. Lars-Steenhoff

    Lars-Steenhoff

    Joined:
    Aug 7, 2007
    Posts:
    1,611


    tital souls has zooming when shooting the arrow.
    the game is pixel perfect except the zooming is not.
     
  43. Ponoveave

    Ponoveave

    Joined:
    Jan 11, 2016
    Posts:
    17
    This I guess is easy to do by disabling the component while you are zooming it?
     
  44. Ponoveave

    Ponoveave

    Joined:
    Jan 11, 2016
    Posts:
    17
    how do you render the canvas element pixel perfect, I cant do it on overlay
     
  45. RainbowCemetery

    RainbowCemetery

    Joined:
    Sep 6, 2017
    Posts:
    2
    if the screen resolution is a noninteger scale of the base resolution, would it be possible to scale the rendertexture up higher than the screen resolution first before scaling it back down to fit, or at least have that as an option? that ends up looking better than a bilinear scale up, at least to me
     
  46. Kolyasisan

    Kolyasisan

    Joined:
    Feb 2, 2015
    Posts:
    212
    Overlay Mode renders the UI in display's native resolution. To achieve low-res pixel-perfect UI use ScreenSpace or WorldSpace canvas rendering modes.
     
    Ponoveave likes this.
  47. OtakuD

    OtakuD

    Joined:
    Apr 24, 2014
    Posts:
    27
    Love this feature but I see the version in 2018.2 does not have the upscale render texture feature?
     
  48. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    107
    That's an interesting request! I'll experiment with that idea and see how much better it looks and if it justifies the extra pixels we need to render.
     
    Lars-Steenhoff likes this.
  49. yuanxing_cai

    yuanxing_cai

    Unity Technologies

    Joined:
    Sep 26, 2014
    Posts:
    107
    It should have that option. A screenshot?
     
  50. RainbowCemetery

    RainbowCemetery

    Joined:
    Sep 6, 2017
    Posts:
    2
    a screens as an example



    the top one is 640x360 base res with 960x540 screen res on the pixelperfect camera with screen stretch checked
    the bottom is 640x360 base res w/ 960x540 screen res using https://ocias.com/blog/unity-pixel-art-camera/ that writes to a temporary 1280x720 rendertexture before drawing it to the screen. probably adds a lot of weight but i really like how it looks :<