Pixel Perfect Preview Package

@yuanxing_cai if you get a chance to check out https://forum.unity.com/threads/pixel-perfect-preview-package.533433/page-3#post-3717724 post, if you have any further suggestions?

 

I would, but the problem is that the whole thing is terribly hacked together atm. I made a complete copy of both PixelPerfectCamera and PixelPerfectCameraInternal classes, to have full access to the pipeline and experiment with it, and make changes directly inside of them. But i think it can be done nondestructively, without changing existing classes. I need to look into it some time later.

 

How do I get pixel perfect textmesh pro?

 

Sure thing, I'll PM it. Do you have an example of using a non-square pixel ratio with PPC? I'd love to know if you've managed to implement it in the script successfully.

 

Here is a basic scene with PPC and the currently broken aspect stretch script on the camera: https://www.dropbox.com/s/opyp84ecu72eclu/exampleforcamera.zip - you'll see a familiar image in the scene, and all I need to do is stretch the camera viewport height by 20% to make it appear correctly (as it does in ScummVM with aspect ratio mode on). Ignore the pillarbox for now, the image is aligned correctly centrally and at the top, the pixels just need stretching vertically by 1.2.

 

I don't know if somebody already mentioned this, but there is a warning when you have an odd numbered height screen that it won't work correctly. Sadly on mobile this is a thing(iphone X for example). Any thoughts on this? Could there be some way to just not use the last row of pixels or something sneaky like that?

 

Let me know if you manage to get around to looking at this, thanks!

 

The pixel perfect package is working great for us. Thanks!

I have a question, though. How do I get/calculate the cameras world space extends?

The usual way, ie

Code (CSharp):

1. vertExtent = Camera.main.GetComponent<Camera>().orthographicSize;
2. horzExtent = vertExtent * Screen.width / Screen.height;

does not seem to yield correct results.

 

I've had the pixel perfect camera in my game for a while now and it's working great, nice work!

I see there was some discussion on pixel perfect particle systems. Is there any word if this is going to be supported? It would be super cool to have this also.

 

I have ppu at 100 and a reference res of 400x180. No upscale, pixel snapping or cropping.

 

Sure thing.

 

I've created a thread for this in the 2D section already, but maybe this is a better place for it:

I've been using the "2D Pixel Perfect 1.0.1-preview" package and it's working like a charm. But this
week I started using the "Shader Graph 3.0.0-preview" package, this package required that I created a render pipeline asset, I chose a "lightweight pipeline asset". Creating shaders is working fine and shader graph really blew my mind!!! But now my pixel perfect camera is broken. It no longer shows pixel perfect graphics and the button on the camera, "Run In Edit Mode" no longer works either.
Is there anyone who has experienced this before? Maybe the devs of either package know what causes this?

 

Hmm, I hoped that at least the devs would know the answer to this one, back to the drawingboard I guess.

 

Apparently they plan to create a custom RP, not sure what the status of it is...

https://forum.unity.com/threads/pixel-perfect-preview-package.533433/#post-3535150

 

What about games that use pixel perfect elements mixed with 3d elements, will these work with the custom 2d pipeline?
( perspective camera layered with orthographic )

 

I hope that will fix it, I also hope it doesn't take too long for releasing it, otherwise I will have to go back to programming shaders, but I think that will take too much time for my project.

 

I've tried it in update and it still just does a weird squashing the screen into a slither until it disappears into black. I've also tried negative values and it kind squashes the viewport down until it becomes black. Do you have any suggestions as to how I can just stretch the final upscaled image on screen vertically?

 

@yuanxing_cai here's another example:


As usual, this is 4:3, so it's a bad example, but you can see how shrinking the viewport after it has been upscaled allows for rectangular pixels. Now, I'm trying to do this for a 16:9 that has rectangular pixels, and I don't want pillarboxing, so shrinking the viewport won't be an option. So we need to start with:

• A 320x180 (16:9) pre-scaled viewport area.
• Scaled by 6x for 1920x1080, which is the most popular resolution so we'll imagine that's generally what it'll be.
• Then we need to stretch it post-scale so each pixel is 1:1.2, or 5:6.
• So we need to resize the height from 180*6 to 216*6.
• As long as the stretching occurs after it has been upscaled , it will appear okay.

Since shrinking the viewport width would result in black bars (as the rendertexture can't see any further than it knows), it would probably be best to start with a screen that's designed to have 20% of blank empty at the bottom, so it can be stretched down. So:

• For 320x180, we'll shave off 20% of the height, which is -36 pre-scaled pixels.
• Begin with a pre-scaled imaginary viewport of 320x144 (that's 36 blank pre-scaled pixels at the bottom), but PPC will still have a viewport of 320x180.
• Upscale to 1920x1080, but our imaginary viewport is now 1920x864 (that's 216 upscaled blank pixels at the bottom)
• Then stretch that image outside of the PPC viewport to a pixel ratio of 1:1.2, or 5:6 so it becomes an imaginary height of 1080 stretch pixels that are 1.2 taller than they are wide

Here's how it would appear on a screen without 1:1.2 un-scaled or 5:6 scaled pixel aspect ratio (note the 36 unscaled or 216 scaled extra pixels at the bottom):

The blue section under the screen is the extra blank pixels (36 unscaled, 216 scaled by 6x)

ScummVM and Dosbox generally have games that are 4:3 going inside a 16:9 screen, so they can afford to simple scale up 6x and shrink the width by 20%, as you saw earlier, but we can't do that as we still want to use the full widescreen ratio, we just want each pixel to be 1.2x taller than it is wide, and this could only be done if PPC could actually overscan into the rendertexture, which I don't believe it can, nor am I sure it should.

Here is a project with a scene called stretched.unity that shows a pixel-perfect example of what I have shown above, with the extra space all set-up: https://www.dropbox.com/s/yt50yykz0tue6rl/exampleforcamerastretch.zip?dl=0

If anyone knows how to get the extra space offscreen and the pixel height stretched to 1.2, please be my guest!

PS: I'm using 384x216 as my 16:9 base resolution for my games, upscaled by 5x to 1920x1080. The principle will still be the same for this, except it requires a 5x upscale for 385x216 to become 1920x1080, just as anyone running 1600x900 monitor would require a 5x upscale for 320x180.

I would be using:

• 384x216, we'll shave off 20% of the height, which is -44 pre-scaled pixels.
• Begin with a pre-scaled imaginary viewport of 384x172 (that's 44 blank pre-scaled pixels at the bottom), but PPC will still have a viewport of 384x216.
• Upscale by 5 to 1920x1080, but our imaginary viewport is now 1920x908 (that's 172 upscaled blank pixels at the bottom)
• Then stretch that image outside of the PPC viewport to a pixel ratio of 1:1.2, or 5:6 so it becomes an imaginary height of 1080 stretch pixels that are 1.2 taller than they are wide

Once it's been upscaled, it still looks fine, and I want to just add that I'm hoping to find a solution to stretch pixels for any base resolution and/or aspect ratio. I merely used 320x180 as a good big pixel-art example!

 

Thanks for this package! It's definitely the best/cleanest implementation of this I've seen.

One issue we've noticed though is that it doesn't work with Lens Flares.

I managed to get it working by commenting out:

Code (CSharp):

1. if (m_Camera.activeTexture != null)
2. {
3.     Graphics.SetRenderTarget(null as RenderTexture);
4.     GL.Viewport(new Rect(0.0f, 0.0f, Screen.width, Screen.height));
5.     GL.Clear(false, true, Color.black);
6. }
7.  

and adding this in Awake():

Code (CSharp):

1. UnityEngine.Rendering.CommandBuffer commandBuffer = new UnityEngine.Rendering.CommandBuffer();
2. commandBuffer.name = "Clear Black Bars";
3. commandBuffer.SetRenderTarget(null as RenderTexture);
4. commandBuffer.SetViewport(new Rect(0.0f, 0.0f, Screen.width, Screen.height));
5. commandBuffer.ClearRenderTarget(false, true, Color.black);
6. m_Camera.AddCommandBuffer(UnityEngine.Rendering.CameraEvent.AfterHaloAndLensFlares, commandBuffer);

But I'm not sure if that's the best way to handle it. Any tips?

Thanks!

 

Hi,

My apologies if this question has already been asked, but, is this compatible with Cinemachine?

In a current project I have used tilemap and am suffering from a 1px gap in the background.

I started with this video:

From the comments I ended up at this Unity blog:
https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/

Which was when I spotted the link at the top offering a fix for the issue, which is how I ended up here.

Reading the blog I did try manually changing the orthographic camera size, it wouldn't remain, I realised I had cinemachine in place which was overriding the setting. Having entered a value which worked and the gaps disappeared all was well, right up until cinemachine performed a zoom in, at which point the orthographic size changed again and all the gaps (lines) appeared in the background again.

So, with the above package, is this compatible with cinemachine or are they likely to clash?

Any info would be really appreciated, thanks in advance

 

Thank you SO MUCH!! I'm going to play with this right now and play with the pixel ratio (with that setting, I get post-scaled pixels of 6x7 and scummvm is 4x5, so my base pixel size is obviously larger and needs tweaking). I can't thank you enough for helping me with this issue, can these values be used as adjustable parameters in PPC? I'd LOVE to see this incorporated in the next version! Thanks again, REALLY can't tell you how happy I am about this; I'll post if I find anything after some playing around!

EDIT: For pixel size of:

• 6x7 use 320x144
• 5x6 use 384x174 (round up to 174 from 172.8 NOT round down to 172)
• 4x5 use 462x206 (testing this)

 

@yuanxing_cai so very close! I just need a little help with figuring the exact matching size, and I'm not sure if it's the script changes or the pixel ratio. Here is a scene from Fate of Atlantis, directly captured using Fraps from ScummVM:

Link to image: https://i.imgur.com/6uXQKCV.png (1020x1080)

Here is my attempt at matching the pixel ratio using 462x206:

Link to image: https://imgur.com/p0tZtAE.png

However, if I overlay the two, you'll notice the pixel ratio is slightly different as my image is a bit smaller:

Link to image: https://imgur.com/QmuTx9L.png

I'm trying to basically make it so each pixel appears exactly as large physically on-screen as they do in ScummVM, including the exact same stretched pixel height; I'm just trying to add a little extra image to the left and right, so it becomes 16:9 instead of 4:3. Is there a reason why using these sizes I can't get the same upscale ratio, or am I using the wrong reference resolution? As far as I'm aware, the actual pixels-per-unit have no effect if both the sprite image and the PPC pixels-per-unit match. I've found 428x200 is giving the closest pixel ratio to ScummVM, and I'm also finding that using a 1.2 instead of 1.25 gets a closer ratio. Here's a project for playing with: https://www.dropbox.com/s/0qypphwcmb4mfsc/exampleforcameraIndy.zip?dl=0

PS: Why is the height stretch by 1.25 instead of 1.2?

 

I'm making my own and aiming as closely as possible, and using ScummVM as a reference so I can get as close a match as possible.

I've tried in the past to upscale at 1x, and it always resulted in incredibly visible distortion, whereas ScummVM always seemed graceful. I still can't understand why, as from that example you posted, Guybrush looks terrible when stretched pre-upscale.

In ScummVM this is definately not how he appears, so it seemed logical to use a post-upscale stretch.

As I posted in the edited post above, I've found that using 428x200 gives a very close pixel match, and using a 1.2 stretch instead it sits pretty much perfectly and looks great. I kinda gave up on the math and just played with the two numbers, screenshotted and overlayed until it looked okay!

So thanks again for an incredible job, I'll look forward to porting my games over to this awesome new look and really hope it becomes an integrated feature in a future update! Now, to wait on Aseprite for an update that allows custom pixel ratios so I can draw the art in it's intended pixel aspect!

UI Question: Should I be using different settings if I'm using a UI with in camera space with the new stretching? I'm matching my reference resolution to my camera reference resolution, but it only appears correctly if I use a different size; for instance, my camera reference resolution is 428x200 but the UI looks best if the custom scaler is set to 384x200.

 

The lens flare doesn't render with the script enabled on the camera, and it does render without it.

Without the Pixel Perfect Camera script:



With the Pixel Perfect Camera script:

 

Here's a really simple example: https://www.dropbox.com/s/ipfjwi1h64wwt08/exampleforcamera2.zip (stretched.scene), I'm not sure how to get the UI to display as pixel-perfect. The script obviously changes the size of the UI, but I'm not certain if the custom canvas scaler should be the same as the reference resolution, or different? I'm also not certain of what size the panel should be, as I can't seem to come up with any size that scales pixel-perfect (with 1.2x height)

EDIT: I think the custom scaler is stretching the UI out from 428 to 516 (*1.2) and the height from 57 to 70?

EDIT EDIT: I'm so stupid, use custom scaler and set it to full height match instead of width, then it works awesomely: https://www.dropbox.com/s/iptxh4drputadw1/exampleforcamera3.zip?dl=0

 

@yuanxing_cai Spoke too soon, it messes up the raycasting on the UI :/ Is there a way for raycasting to be taken into account with the extra stretching?

 

Any word on if it's possible to add zooming similar to orthographic size? Or is there a current work around? I'm fine with losing the pixel perfect during zoom.

 

Do you have any idea when the 2D scriptable renderer will be added to the LWRP?
What I can make up from combining the pixelperfect and LWRP is that the OnPreCull, OnPreRender and OnPostRender functions are not called, are there other callbacks defined in LWRP that can be used instead of these?

 

Since playing around with this more, my big feature wish would be to change the crop frame color, preferably to clear. I'm making a vertical-screen arcade-style game with a "wallpaper" behind the main game viewport, and having no color covering the screen would be perfect. Naturally I tried editing this in the script, but yeah, protection levels...

 

Regarding the broken raycasting, here is an example of how the raycasting eventsystem works before the aspect mod:

and here is how it functions after:

here's how non-UI elements behave:

as you can see, it is referring to the position of the raycasts of the scene before it gets adjusted by the aspect ratio mod, it is totally ignoring all pixel-perfect camera adjustments as made by the mod to the viewport.

it appears to be a scaler issue or a camera issue:

Here is the example scene above: https://www.dropbox.com/s/rur4glrfjxw76f3/examp.zip?dl=0
Here's my modified pixel-perfect package:

my changes are in PixelPerfectCamera.cs make line 189:

Code (CSharp):

1. activeRT.filterMode = m_Internal.useStretchFill ? FilterMode.Point : FilterMode.Point;

in PixelPerfectCameraInternal.cs make lines 156-190:

Code (CSharp):

1. internal Rect CalculatePostRenderPixelRect(float cameraAspect, int screenWidth, int screenHeight)
2.        {
3.            // This VP is used when the internal temp RT is blitted back to screen.
4.            Rect pixelRect = new Rect();
5.  
6.            if (useStretchFill)
7.            {
8.                // stretch (fit either width or height)
9.                float screenAspect = (float)screenWidth / screenHeight;
10.                if (screenAspect > cameraAspect)
11.                {
12.                    pixelRect.height = screenHeight;
13.                    pixelRect.width = screenHeight * cameraAspect * 0.8f;
14.                    pixelRect.x = (screenWidth - (int)pixelRect.width) / 2;
15.                    pixelRect.y = 0;
16.                }
17.                else
18.                {
19.                    pixelRect.width = screenWidth;
20.                    pixelRect.height = screenWidth / cameraAspect * 1.2f;
21.                    pixelRect.y = (screenHeight - (int)pixelRect.height) / 2;
22.                    pixelRect.x = 0;
23.                }
24.            }
25.            else
26.            {
27.                // center
28.                pixelRect.height = zoom * offscreenRTHeight;
29.                pixelRect.width = zoom * offscreenRTWidth;
30.                pixelRect.x = (screenWidth - (int)pixelRect.width) / 2;
31.                pixelRect.y = (screenHeight - (int)pixelRect.height) / 2;
32.            }
33.  
34.            return pixelRect;
35.        }

If PPC can't be fixed, could it be hacked? By adding

Code (CSharp):

1. target.x *= 1.2f;

to the move-to script in the example, it positions it correctly, so theoretically if the input position was scaled by *1.2, it might work:

 

Hello, I have an issue, when I attach the script to my main camera I get the error "Assertion failed on expression: 'IsNormalized(normal, 0.001f)'" and my sprites are not shown. I am using Unity vesion 2018.3.0f2 and package version 1.0.1. The size of my orthograpic camera is 162, PPU is 1 on all my sprites and Reference Resolution is set to 576 x 324. (I also selected Upscale Render Texture). Thanks in advance

 

I tried using this in case where user is able to zoom in and out by changing Camera's size property and it didnt work as expected. How should i handle this case where i want camera to remain pixel perfect while im changing the size property?
Thanks

 

Hello,

I'm trying to get the corners of the camera in world space.

Both 'ViewportToWorldPoint' and 'ScreenToWorldPoint'
give different results when the PixelPerfectCamera is turned on.

Could anyone provide advice to solve this issue?

 

I'm having very strange behaviour with sprite masks that are caused by the PixelPerfectCamera script on Android devices only (I have only tested the game on PC and Android and it is only being released on Android):

As you can see, the sprite mask does not work properly for some reason when stretch fill is disabled.
What could be the solution to fix this? It is annoying because I have an option in the Options menu to disable stretch fill if the user wants to, as it is a bit of a performance hit (I'm pretty sure) for older phones to have stretch fill enabled.

Please let me know how to go about fixing this! I will reply as promptly as I can.

Edit:
Might as well try and kill two birds with one stone here...
Another issue I'm experiencing with the camera script on all platforms is when stretch fill is enabled it seems to get rid of the "crisp pixel look" and instead adds an "anti-aliased/bilinear-filtered look" on the graphics, as you can see here:

What I want to achieve is the "crisp pixel" look.

I was able to dive into the code actually achieve this by changing this line of code:

Code (CSharp):

1. activeRT.filterMode = m_Internal.useStretchFill ? FilterMode.Bilinear : FilterMode.Point;

I modified "FilterMode.Bilinear" to "FilterMode.Point", and it worked, however, I noticed it made my phone screen's actual pixels seem to have a weird grid effect and very pronounced. This effect is noticeable in the very first attached image. Any way to solve this?

 

Can anyone help me out? Please see my above post...