How to Obtain Pixel Perfect with Any Resolution

Development Asset Creation
, , , , , ,
1

In reading around, it doesn’t seem the UE4 community touches on this like the Unity community does. Maybe that’s because there are more 2D projects in Unity? Who knows? But I prefer UE4 regardless.

From my understand, given the screen height/resolution of the game/tests, the pixels per unit must be correct, otherwise the 2D image gets blurred or clipped ever so slightly. I’m having this happen as well. I’ve went for over a week now on the very small amount of posts touching this subject, and no avail, until I read on a site relating to Unity where they grab the screen height and sprite size to set the orthographic camera distance and get the pixels showing correctly by that:

long equation: cam size = x(((x/y)*2)*s)

shortened: cam size = y / 2s

where:
x = Screen Width (px)
y = Screen Height (px)
s = Desired Height of Photoshop Square (px)

(see here: Pixel Perfect Calculator for Orthographic Camera : Unity3D | Indie Hood Games)

I know UE4 works differently, as I’ve used Unity myself to test this out. UE4 uses the orthographic width to set everything. What I need to do is similar to the equation for Unity, but dynamically readjust the camera distance per the resolution/screen height so the 2D image (character actually) shows up correctly regardless of the screen height, for all 2D images all the time.

Is this possible to do in blueprints? Am I understanding this right? I don’t even know where to start to be honest. If I need to add more details or something just let me know in a comment and I can. This is an attempt for the “pixel perfect” settings, and it just seems not too many people have really talked about doing it this way, where it’s a way more common way in Unity. Maybe I’m missing something somewhere else, but this seems like the ultimate, correct approach.

Also to note, setting the orthographic camera width at 600, with a character that is inside a sprite box the size of 150x150, and pixels per unit is at 1, it shows up nearly perfectly. It’s in different screen sizes/resolutions that it distorts or blurs horribly, and with a PC game there are all sorts of different sizes to adjust to. I’d also prefer to use something larger than 600 to show more.

Any other solutions are welcome. When the screen size changes, if it’s not the “perfect size”, it blurs and distorts, and sometimes completely removes/condenses pixels on the 2D character. I just need to know a way to have this not happen, as plenty of people have tons of different monitors and different sizes, and would prefer all sizes and resolutions, which you’d figure an engine like UE4 could do. :frowning:

2

How would I get the camera from the player class into this class to change it? Right now it’s in the character class. Do I need to move it to the HUD class or is there a way to access it?

Apologies, I haven’t used UE4 too much and am still learning the API.

I also wanted to ask, after changing the orthographic width, aren’t I going to have to worry about the pixels per unit still to make sure it doesn’t shrink/expand or distort the textures/sprites? Is there a better way to do this? I’m just trying to achieve a Zelda: LttP camera that will work regardless of the players screen size or window size, because UE4 seems to love to ruin pixels if it’s not perfect.

3

This answered the above question: Accessing first person camera in level blueprint - Cinematics & Media - Unreal Engine Forums

(sorry for the double post, wanted to mark a new inquiry on the same topic though). This is still messing up the image for the character incredibly bad. It does seem the camera switches a bit, but my hopes for retaining the pixel quality did not work. Is there a way to adjust the pixels per unit per the viewport size? Would that not work either?

Honestly I’m incredibly stuck, because it seems even with 2D settings, this engine decides to screw up the images just because. I have other things, but really can’t move forward if the image quality will be jacked at different screen sizes.

4

in my HUD class, on eventRecieveDrawHUD, i check if a reference to the player is valid, and if its not, i get the playercontroller and set the reference variable in the hud.

getting the viewport size and dividing by an integer is the way to get the correct OrthoWidth. if you are using strange screen sizes, maybe you should floor the result, because i only tested my game on a couple of standard sizes, and nothing in between.

5

I can’t believe no one comments or answers this question.
Does this mean that there are not 2D developers using Unreal Engine?

I’ve been studying unreal for the past 6 months and came up with the same questions you have.
I don’t know how to properly set the orthographic camera for the 2D games.

6

Odd because there was a slew of comments on here, but it didn’t lead to any resolution, but had good practices.

I’m still having the same exact issues. The images stretch and/or blur. I need it to look the same period, whether playing on a small laptop or a large 24" screen full screen. I don’t understand why UE4 can’t handle this automatically, and am still having the same problems. I just had real life hit up again and haven’t had time to jack with it.

Let me know if you come up with a solution, or anyone else, please, help?

7

I would like to know this as well!?

8

Guys maybe u need to make Vectorial Image that is scalable. It will stretch in all direction of the screen so the image wont get pix-elated.
link text

I Hope this will help.

Regards Karlis

9

Working on a 2D game as well and I’m also wondering what the best solution is to the problem of ensuring pixel perfect graphics at a variety of resolutions. The lack of answers here doesn’t bode well for finding a solution though I fear…

10

The way I did pixel perfection is to make phone resolution scale up/down to meet my camera ortho width size.

mobile content scale factor formula = cam ortho / device native resolution

Down side of this is that you might get weird values such as 1.69, 1.44, etc which will reduce rendering performance.

11

Will try to check into this today.

12

How and where do you implement the formula, if you don’t mind explaining?

13

You have to manually calculate them for each device and put them in at “Window > Developer Tools > Device Profiles”

For iOS devices, heres the list of FULL native resolution:

**To get native resolution, divide FULL native resolution by 2

For example:

If your camera ortho width is 960 and you want to get pixel perfection on iPhone 6 (lets say landscape mode), the r.MobileContentScaleFactor will be:
= ortho width / iPhone 6 native resolution width
= 960 / 667
= 1.44

1.44 will be your MobileContentScaleFactor on your iPhone

EDIT: iPhone 5 must have either 0, 0.5, 1, 1.5, 2.0 as its r.MobileContentScaleFactor or it will have black screen (the game will run as sound and UI will work) - Unreal Bug

14

Thinking about this now, I think this still created a linked issue.

Because UE4 doesn’t distinguish width AND height of the ortho camera, changing the ortho on UE4 will zoom in/out as well, wouldn’t it?

I believe I’ve tried something where I changed the camera, but it made the character look either huge or tiny still, and that still blurred/distorted the image in the end.

15

This seems to be the way to go, if someone tries before I get to it please post results.

My brother does the graphics, I suck at it. When he gets to it I’ll put it up and put my results as well.

16

You have to determine the camera ortho width by yourself and see whats best for you. For my case I set it to 960 because I can downscale it for older devices and upscale it for newer devices.

The workaround I am using does not change the camera ortho width so it doesn’t zoom in and out but rather scale device resolution to match the ortho width. If you are doing portrait mode,

A few notes:

  • Set your aspect ratio of the camera to 0.5625 (16/9)
  • Go to Settings > Project Settings > Paper2D - Import and set “Default Pixels Per Unreal Unit” to 1.0

EDIT: For whatever reason I did not read that you are working on a PC game. I am sorry. The solution I am using is for mobile only, I am not sure if you can set scalefactor for PC. You can however make sure that your game runs on a few selected resolutions of your choice and letterbox them.

17

That was the original plan, until it only worked at one resolution period.

I really don’t understand why a conversion ration isn’t in place to compliment ortho width to resolution. I’ve developed on smaller ORPGs with it’s client (worked as a mod, but submitted entire servers as its own “game”) and this was never an issue. Viewport, or ortho, stayed the same, but you could change the window size to whatever you wanted. Just trying to achieve the same effect since there are thousands of monitor sizes, graphics cards, and preferences to players on window size.

I’ll keep working at trying to do that and set that aspect ratio though, and appreciate the help. :slight_smile: Maybe the mobile advise will still help someone out!

18

Correct me if I’m wrong (and I hope that I am wrong), but aren’t vector graphics not currently supported in UE4? I don’t see something like SVG files supported when trying to import a texture, and searches on google for importing vector art doesn’t seem to yield any fruitful results.

19

anyone figured this out yet? :confused:

20

I gave up some time ago with this engine unfortunately. I’d still be very interested if there was a solution to this.