Official Pixel Perfect Preview Package

Alternatively, you should be able to control the render texture settings. Though if that's not possible, giving them 24 bit stencil depth and point filtering by default would be nice.

Also, is it a known issue that hot reloading causes the component to just not work anymore?

 

Is it possible to integrate a pixel ratio option into the script? I want to keep my game pixel-perfect but I also want to stretch every pixel cleanly to a height of 1.2, as was the appearance back in the nineties when mode h13 was in use (320x200 stretched to 320x240 effectively), there's more info on it here: http://doom.wikia.com/wiki/Aspect_ratio

if it's not possible to be integrated in the script itself, should I use a script before or after Unity's pixel perfect script to stretch the pixels? I have a couple of scripts that can stretch the camera projection anyways, I just want to know if it'll work with this or not.

 

My bad, had another script with the exact same name!

 

Hi there, excited to finally be trying this out. It does a great job on sprites and cropping the camera, but I've come across a couple issues.

1) When the camera is at a position like (0.2345f, 0, 0) the UI stretches or compresses instead of remaining pixel perfect. My pixel perfect setup is 100ppu, 320 x 180 res, with upscale render texture and crop frame (x and y) turned on. The UI canvas is Screen Space - Camera (pixel perfect is checked, but it doesn't seem to make a difference on or off) with a Canvas Scaler set to 100ppu as well.

2) Particles are not snapped to the pixel grid - will there eventually be support for this?

 

When i select Upscale Render Texture I get a really blurry output as if the render texture is set to bilinear filtering, I understand that point filtering at anything else that can be divided by the reference resolution will produce ugly artifacts, you can check if the current resolution can be divided by the reference resolution and switch to point/Bilinear accordingly

For example:

Code (CSharp):

1.        
2. if (Screen.width % referenceResolution.x == 0)
3.     renderTexture.filterMode = FilterMode.Point;
4. else
5.     renderTexture.filterMode = FilterMode.Bilinear;
6.  

Also an antialias effect like Retro AA can be used to filter out the stretched bilinear render texture and make it look sharper, here is a 960x540 render texture stretched to 180% it's size:



This is what I use right now and the game looks decent in any resolutions, i've even allowed the window to be resized, just some thoughts.

 

Here is a tool thats shows the results of pixel perfect particles.

and some examples:

https://codemanu.itch.io/particle-fx-designer


https://mobile.twitter.com/CodeManuPro/status/1021013681063317507/photo/1

https://mobile.twitter.com/DavitMasia/status/1020792040135766016/photo/1

https://twitter.com/DavitMasia/status/1020407148008943616?s=20

 

Sure thing, here's a small repro that shows a few things: text jitters, sliced UI image flickering, and the UI image position shifting by a pixel every so often. I've set the camera's start position so that you can see how the images are misaligned; if you reset the position to zero you'll notice them shift. The game resolution should be set to a fixed 640 x 360.

https://drive.google.com/file/d/1lrjzhkvmeiwB7djc_Ryim57YbbXZQL7u/view?usp=sharing

Also, here are a couple examples of the stretching that happens in my game. You might have to zoom in for these, but I've also marked where the issue is occurring with bright pink pixels.

1. This screenshot starts from the very bottom of the camera; the pixels to the left are 2x2 screen pixels because we're at 2x zoom, but the corner of the UI on the right side is raised off the bottom by 1 physical pixel, resulting in it being placed in the middle of a 2x2 pixel.


2. This time we're looking at a UI image that has one line stretched to 3 physical pixels when the grid is 2x2 physical pixels.


As for pixel perfect particles, I would be entirely happy with particles that don't need rotation or scaling, but snap to the pixel grid (although others may feel more strongly about those features. Particle FX Designer, mentioned in the post above mine is a great example of how I'd like to have pixel perfect particles).

 

Hey guys, I noticed an issue when using the pixel perfect camera with Cinemachine, can someone give some notice on the compatibility between these two packages? I was getting some distortion in rendering. I can add more info at a later time.

 

Hello, cannot figure out why my pixel perfect camera setup has artifacts...
"player" has his right "eye" distorted if i set his X to -0.74. (look at fullscreen screenshot)

All sprites are 32 ppu, pixel snap is on, game window has 1x scale, player sprite is 64x32 pixels, no scaling was made

It seems like in final build all looks good, just in game window

 

Any chance we could get Pixel Perfect snapping in edit mode when moving/aligning sprites in our scenes.

I tried using ProGrids package for this but doesn't work for 2D mode.

 

Is there a way get pixel perfect rotation?

I have a circular sprite i want to rotate but when it rotates the sprite gets modified.



See it's all messed up. I don't want it to modify the sprite i just want the sprite to rotate.


I want this result:

 

Snap Settings doesn't work with Rect Tool only Move Tool. Any plans to support Rect Tool? Also is there anyway to toggle snapping instead of holding down CTRL key?

 

Our game is split screen using 2 cameras that follows each character. We’re using the 2d pixel perfect component on each camera and it's repositioning the view port to only of the cameras and ignoring the other one. Any ideas around this or a better way to setup 2 cameras for this to work?

 

with p@yuanxing_cai
@dquek

I have fixed case 1061634.
The issue happens because on hot reload, your reference to PixelPerfectCameraInternal gets wiped, my current fix is to move the editor compiler checks inside the OnEnable and then run the awake method afterwards. This can also be optimized by not using GetComponent<Camera> if m_Camera is already set.

Code (CSharp):

1. private void OnEnable()
2.         {
3. #if UNITY_EDITOR
4.             if (!UnityEditor.EditorApplication.isPlaying)
5.                 UnityEditor.EditorApplication.playModeStateChanged += OnPlayModeChanged;
6. #endif
7.             //run awake again because m_Interal got reset
8.             Awake();
9.         }

Second bug I found happens when scaling. (User bug, see Edit 2)

If cropFrameX is true, and the offscreenRTHeight goes below the refResolutionX then OnPreCull() on the camera will not run, even after scaling up. This also happens if cropFrameXAndY is true. However, this does not happen if only cropFrameY is true.
I couldn't fix this myself because I have no clue what your magic code for OnPreCull() is, but I did try subscribing to the Camera.onPreCull delegate to see if there's any difference.

Edit: Happens in 2018.2.0f2 with package version 1.0.1
Edit 2: This issue happened because the renderTexture on the camera was assigned to another value during runtime in update.

 

Hello everyone!

I have a problem setting up the Pixel Perfect Camera, I don't know how to solve it, and I have been trying to figure out with different solutions but any of these has works.

I'm working on a Roguelike video game with Pixel Art and I want to achieve that the player always can play the game on fullscreen with a 16:9 resolution. I'm using a Pixel Per Unit of 64.

I have setting the Pixel Perfect Camera component like this:

​

As you can see I set up the reference resolution as 1024x576. I understand that I have to multiply my PPU by 16:9, so I supposed it would be like 64x16 and 64x9 to obtain the ideal reference resolution. Please let me know if this is wrong.

The first strange thing I noticed was the following:

​

As you can see in the image, the reference resolution (green dotted line) exceed the limits of visible area in the Game View (green solid line). I don't know if this is good.

Playing the game inside Unity and maximizing the screen with a 16:9 resolution. It shows the following:

​

Reading the documentation inside the package it says that the Crop Frame property allows cut off the camera borders and adjust what the camera see aligned with the reference resolution.

​

Playing the game it looks like this in fullscreen:

​

So here it comes my dilemma, I want that the game looks like the image above but in full screen, I mean that the room can filled up the screen. To achieve this I activated the Stretch Fill property:

​

When playing the game in Unity in full screen, the resolution of the game works well, that is, it is executed precisely as I want:

​

It looks good but the problem is that the pixels aren't clear and sharp, they look blurred. I have noticed this doing a zoom in the game window.

​

It should look like this:

​

My questions are:

• It is possible to run the game in a full screen with 16:9 resolution using the Perfect Pixel Camera?
• How to achieve that but with clear and sharp pixels?
• Did I set up all the parameters correctly?

I will be grateful if you can help me to solve this problem. This is the first time I have to deal with this kind of problem.

Note: Of course each Sprite of the game has its Filter Mode: Point and Compression: None, with its Pivot at: 32.32 (in the middle). I also set the snap settings by dividing 1 in 64 for each axis.

 

For the blurry pixels, I believe you can fix that by editing PixelPerfectCamera.cs's OnPostRender method and set the filter mode to always be FilterMode.Point


Also, regarding your reference resolution, this number should equal to the base size of the window (like SNES is 256x228), it should be smallest resolution possible to render all of your visuals. If your base is 1024x576, then scaling down below that will cause you issues. Ideally, if your base resolution is correct, then 1 pixel in the game will equal 1 pixel on the screen, like here.

 

How do I disable bilnear and use point filter for crop? Could eventually it be possible to antialias from the highest pixel perfect multiple and smooth up from there?

 

See my post above

 

That works great for integer, but how does it handle non integer sizes? Could a method such as this be incorporated? https://amp.reddit.com/r/gamedev/comments/6ay0qg/better_pixel_scaling_shader/

 

Wow! Thank you very much!
It works nice!

[BEFORE]

​

[AFTER]

​

 

How do I keep "screen space: camera" UI's pixel perfect? I've found using "align to geometry" and setting the pivot for x and y to 0 helps a lot, but if a sentence aligns itself on a weird point, the text get mushy. Here's two examples of pixels lining up:


And here's where the sentence got offset a bit (look closely at twig and Qilinbian):

How can the text object always align to perfect pixels? "Pixel perfect" mode in canvas doesn't do anything, really.

 

There's not a lot you can do with text artifacts in pixel art. The most you can do is offset it by 0.5 on the x if the preferred width of the text component is odd, and same for the y.

 

That's the kind of thing I was thinking. What kind of script could I use to force an offset if the width is odd? I have no idea what code is use!

 

Write your own.

Code (CSharp):

1. Text text = GetComponent<Text>();
2. transform.localPosition += Vector2.right * text.preferredWidth % 2 == 0 ? 0f : 0.5f;
3. transform.localPosition += Vector2.up * text.preferredHeight % 2 == 0 ? 0f : 0.5f;

 

I tried that and got some float errors, so I adjusted it to:

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.UI;
5.  
6. [RequireComponent(typeof(Text))]
7. class TextOddOffset : MonoBehaviour
8. {
9.     void Update()
10.     {
11.         Text text = GetComponent<Text>();
12.         transform.localPosition += Vector3.right * (text.preferredWidth % 2 == 0 ? 0f : 0.5f);
13.         transform.localPosition += Vector3.up * (text.preferredHeight % 2 == 0 ? 0f : 0.5f);
14.     }
15. }
16.  

but this happens:

Is there something I did wrong?

 

@Zebbi

If you run that in update, it will be constantly adding 0.5 to x and y if they're odd.
Your workaround is to store the original position in Awake, and in Update you write something like so:

position = originalPosition + offset

.

2nd workaround is to only set the position in Awake, or if the text value changes.

Code (CSharp):

1. [RequireComponent(typeof(Text))]
2. public class TextOddOffset : MonoBehaviour
3. {
4.     private Text text;
5.     private Vector2 originalPosition;
6.     private string lastText;
7.  
8.     private void Awake()
9.     {
10.         text = GetComponent<Text>();
11.     }
12.  
13.     private void Start()
14.     {
15.         originalPosition = transform.localPosition;
16.         Set();
17.     }
18.  
19.     private void Set()
20.     {
21.         transform.localPosition = originalPosition + Vector2.right * (text.preferredWidth % 2 == 0 ? 0f : 0.5f);
22.         transform.localPosition = originalPosition + Vector2.up * (text.preferredHeight % 2 == 0 ? 0f : 0.5f);
23.     }
24.  
25.     private void Update()
26.     {
27.         if(lastText != text.text)
28.         {
29.             lastText = text.text;
30.             Set();
31.         }
32.     }
33. }

 

Really appreciate that, it worked thanks! Strangely though, there's still pickled text issues (I can see it's working, some sentences move position to account for odd width/height) so I'm still not sure what's technically causing certain sentences to appear like this. Is there some part of the text component (not the canvas, pixel perfect seems to make it worse) that needs to match the pixel grid?

 

Did you ever try bitmap fonts?

 

I've never quite known how to set them up, I'm using fonts with a material. If I need textmesh for bitmap fonts, I'll probably have to use a script to interact it with a 3rd party asset that actually constructs the sentences. Would bitmap fonts probably solve this issue?

 

I tried using a Camera Perspective asset that stretches the projection from 1 to 1.2 vertically, but seemingly it happens BEFORE PixelPerfectCamera renders to an RT. I'd need to stretch the actual render texture vertically after it's been upscaled to get the correct aspect ratio. Is this possible at all to manipulate the scale height of PixelPerfectCamera's rendertexture, or at least the scale height once it's returned to the camera from an RT?

 

If you want to edit the logic for how the view port rect gets calculated, look at the CalculateCameraProperties method in PixelPerfectCameraInternal class. I've some modifications there of my own to get split screen to work, I didn't get it to work in certain situations but it's fairly easy if you can navigate their naming conventions.



The render texture actually get modified, it just gets rendered onto the screen using the viewport rect settings. You can also outright disable any vp rect manipulation by commenting out the lines that edit the rect in the PixelPerfectCamera class.

Also another thing to note if you want to have more than one camera, make sure to only use GL.Clear if the camera viewport changes. GL.Clear clears the screen and because of that you only get one camera to display, however, you can completely disable it, because if you change the settings so that no camera covers the negative space, you get clearing issues. So only use GL.Clear when you actually need to as opposed to every frame (in OnPostRender).

 

Ahh, so instead of using a separate component to stretch the render texture 1/5 taller vertically, I could add a bit more onto the viewport height in the PPC script?

 

Trying to look at the code for this, so if I need to scale the rendertexture height by 1.2; so if the viewport is 320x200, it needs to be stretched AFTER being up scaled to the screen size (1920x1080) so it becomes a 320x240 RT. As long as the rendertexture is stretched AFTER being upscaled, there won't be any pickled pixels since the x6 upscale will ensure the pixels appear with a 1.2 height (or 4:5 ratio). Can this be done by changing the code in PixelPerfectCamera? (And how?)

 

Hey everyone - I'm new to Unity (coming from Cocos2d-x) and have a basic question regarding this Pixel Perfect Preview Package.

I have my PPU set to 8 (I'm using 8x8 sprites/tiles based on NES specs), my reference resolution is 240x160 (resolution of the GBA and works perfectly as a base to support the smallest iPhone screen size at 4x). I have Upscale Render Texture enabled so that rotation of sprites are true to the reference resolution.

My question is - how can I position sprites via script using X/Y values that are based on the reference resolution? I can see how to convert from the world units to a 1:1 pixel position but I'm looking for the correct way to set a sprite using a position based on scale calculated by the PixelPerfectCamera.

For example - iPhone SE resolution of 1136x640 gives me a canvas of 284x160 using my reference resolution of 240x160 at a ratio of 4:1. I would guess a round about way to do this would be to get the pixel location and divide by the scaled value (4). Is there a helper function as part of the package for doing this? I'd just like to follow best practices before getting too far into coding something custom.

Thanks!

 

Easiest approach is to use a PPU of 1, so that each pixel is 1 unit. As for the canvas, thats not a scaling issue, its rather an aspect ratio issue. You will have to force the aspect ratio to be 230:160 on the canvas. I believe this is done with the CanvasScaler component.

 

Thanks! I was considering that as a possible solution. Are there any known issues with a setting the PPU to 1? I read in another forum that it might cause an issue with physics or collisions.

 

Yes, the physics by default assumes a PPU of 100, so with a PPU of 1, gravity is 1/100th. Which means that your objects will fall slowly, this can be mitigated by exploding the gravity vector in the physics 2d settings by a 100. Thats all.

You can also increase the gravity scale by a 100 on the rigidbodies individually.

 

Thank you for the excellent info - I have things all sorted with the PPU. I just wrote a helper function that'll do the position calculations which work with any PPU (I'm testing with 1, 8 and 16). The one thing throwing me off early was the .pixelRatio from PixelPerfectCamera was always returning a value of 1. It was because I was getting the value in the Start() method which was triggered before the camera calculations were done, so I moved it into Update(). Thanks again.

 

Just a quick idea I wanted to put here for consideration: How about introducing a PixelTransform to go along with the camera? Both GameMaker and Godot can work with pixel coordinates and it is very handy.

 

Another thing I noticed (and I think it was mentioned here already), is that the stretch function produces a very blurry result. I recorded a video of a thing I made in GameMaker to demonstrate how robust resizing the window is there. Sadly the video is a bit blurry, so it is hard to see, but no matter how I transform the window, the image stays sharp.

It would be nice if this was also achievable with the new pixel perfect toolkit.

 

Just checking to see if there is a better method to detect when the PixelPerfectCamera is fully initialized. In both Awake() and Start() methods the PixelPerfectCamera does not yet have the new size and pixel ratio calculated. Right now I'm watching for a pixel ratio change in Update() to determine when the camera is ready. Is there a better method to do this?