Pixel Perfect GUI

[dreamy tide]

Hi all!

So, ideally I need the GUI in my game to be pixel-perfect so that I could deform elements, use particle systems or incorporate a bit of 3D geometry into my GUI without the pixel effect vanishing. Would also be nice to stop worrying about snapping everything that moves in the UI to prevent things from going between pixels.

And I also need to process GUI with a simple shader — effectively, applying a color in Soft Light blending mode to the whole GUI layer.

Basically, everything I've tried falls into two families of experiments:
• Adding Pixel Perfect Camera component to the GUI camera
• Getting the GUI camera to render to texture and then outputting this texture to a RawImage or to a separate Quad

After doing any of these, everything breaks: the GUI is misaligned, the cursor position is either completely off or just slightly off, semi-transparent areas of the GUI are always displayed incorrectly, the Pixel Perfect Camera's output, in addition to being broken in at least one way, is also not pixel perfect...

Has anyone tried achieving/achieved this in PQ, and what is the best way to attack the problem? Achieving just the "shader on top of GUI" part would also go a long way (shader itself is not the problem, only the setup)

[warm umbra]

Are you using unitys Guis on a canvas or the powerquest ones?

If the latter I think it should work with way you describe. Off the top of my head at least

The main problem is you lose any parallax and smooth scrolling in the game.

But I think you ended up not using these for foxtail in the end?

[dreamy tide]

Just using PQ controls and derivatives, yup. And yeah, parallax and scrolling are not used at all. But those don't affect GUI anyway, right?

[warm umbra]

No, but since the GUI cam is on top is the game cam if you make that pixel perfect it'll make the game camera too, including smooth scrolling and parallax. But yeah, that's not the issue here

I can do some experiments myself later if you're not having any luck. Nothing off the top of my head I can think to try though

[dreamy tide]

Hm. I feel like my approach was not the same you're describing, because in my case all of GUI acted as a sort of layer on top of the game (often misaligned at that). Don't think the game itself was affected 🤔 But maybe it was and I didn't see it because we don't use parallax, hahah

[dreamy tide]

This would be awesome, thanks a lot!

[warm umbra]

I'm used to any shaders on the GUI camera effecting the game too...

So you'd untick the game pixel camera in powerquest settings if you're adding one to the gui

[dreamy tide]

Oh. Now that's something I definitely haven't tried!

I'll also try experimenting with that then 🙂

[warm umbra]

You can do pixel perfect just by having the GUI cam render to a 320x180 texture, then having another camera point to a quad displaying that (on its own new layer)

That's how I used to do it before using the shader thing

But sounds like you already tried that, so i dunno

[dreamy tide]

Hm. I think I tried it differently, I was trying to add the quad in front of the game and render the output of the GUI camera onto it. But that resulted in so many weird effects that I gave up reverse engineering them

[warm umbra]

Ah ok. Yeah you've got to put the quad on a different layer. And have the final camera only render that layer

[dreamy tide]

(things are going well 😅 )

[dreamy tide]

I think my problem here is: where exactly do I put the quad, which camera is the "final camera" (Is it QuestCamera, or should I create a new one?). Also, the in-game cursor starts behaving as if the actual mouse position is converted from screen space to a space that's several times bigger and then back (i.e. it matches in lower-left corner and then proportionally darts off-screen). I vaguely understand the nature of some of these problems and I was briefly able to make it almost look correctly (it was all most likely still wrong or redundant under the hood), then it all fell apart when I switched rooms 😄

[warm umbra]

You have to create a new object layer and set the quad on that layer, and the new camera should only render that layer. You can set the camera order too so the game camera is first, then GUI camera, then the new one

[warm umbra]

Had a fiddle, it was indeed more fiddly than I thought (at least without changing core PQ to point at the new cameras)

Here's my fix though. Basically leaves the existing cameras there but not rendering anything so they can still be used to scale the mouse coordinates. It's pretty hacky

letterboxing and camera shake still work, only thing that doesnt is screenshots for save games since they use the old game camera. If you're using that you could fix it in GuiSave's script by hacking the old camera to render the "Default" layer again before the save is done and changing it hack after.

[dreamy tide]

Thanks for doing this, this is incredible! Can't wait to try your solution, this task has been haunting me for ages 😄

[dreamy tide]

Almost everything works, although I did stumble upon a few errors.
For one, on a single room transition (that seemingly doesn't differ from others much) this happens

Apparently it happens here, so the camera gets destroyed somewhere maybe? I'm too confused by PQ cameras at this point to understand what's going on 😄

Also, QuestGuiCamera's culling mask is now "[Water]", and it works, and I have no idea why, because I don't have anything in that layer. Effects didn't appear, so I extended the mask to be "[Water, FX]" just to try, and it worked, and it's scary 😆

[dreamy tide]

Ah. Apparently it happens during room any transition, but only some of the time...

[warm umbra]

Oh sorry I forgot to say, I used the water layer because I assumed you wouldn't be using it. Usually id make a specific layer for that 😛

So there's a prefab for the cameras which is in every room. If you've edited them in the room you might need to go and revert changes back to the prefab ones

There's one placed in every room so you can hear l test from every room. But they persist between rooms too, so it deletes the unneeded one

So 'water' camera only renders the quad with the pixel image on it. (Since that's also in the water layer). Your FX should be rendered by the actual game camera presumably, so it's at pixel res

Not sure about the error off the top of my head, but reverting prefabs might help

[dreamy tide]

Yup, when I found the ActualGameCamera I figured that out 🙂 Visually everything seems to work and make a bit more sense now

As for the errors, I don't have any prefab overrides in these rooms (also it seems to be happening during transitions between any two rooms, and if it happens there's no guarantee it will happen again here

So, for example:

1. I start in room A, walk to room B, go back to room A and get the error
2. If I launch the game again now and go A-B-A, error again
3. I start in B, do B-A-B-A, no error
4. I start in A and attempt 1), no error
5. The error happens elsewhere randomly

[serene cipher]

anyone getting unity freezes and unkillable task

[warm umbra]

I can check it, what line does the error happen on?

The one you highlighted?

[dreamy tide]

Yep

Just had it again, so here's more info 🙂

[warm umbra]

Oh, I see why it'd do that. since I just chucked those camera underneath each other, if it deletes one, it'll still go through the others that'll have been deleted because they're nested under it...

Add this and it shoud lfix it and work fine. I'll add the same in next update