Scaled Viewport renders unsharp! How can I fix this without changing the vieports size manually?

Question

Heyo,
recently I wanted to add a camera shake to my project so I added a Camera2d-Node but in this way my GUI does move too because the camera has impact on all nodes in the current scene.
This is why I moved the Game-Scene into one viewport (+container) and the menu into another viewport. This works perfectly at first, but as soon as I scale the window, the viewport does not.
What I mean:
I set the display/window/stretch/aspekt setting on keep so all nodes are automatically scaled and black corners appear if the window-relation changes, so the format keeps the same. The problem: the viewport is streched on a bigger amount of pixels but still renders the old format. In this way it seems unsharp.
When I do not implement any viewport at all the keep-setting works perfectly. Is there any setting for viewports that can handle the pixel stretch like the main scene does?
Mhm, I hope you see the problem,
thank you,
Olaf ;)

Answer 1

Yay, MrMrBlackDragon finally solved the problem:
I had to make the GUI a child of a different canvas layer - in this way the GUI is not shaken and I do not have to use the Viewport.
Thanks!

Comments

Errr... This should have been posted as a comment to the single answer to your question (the one from MrMrBlackDragon). Additionally, you should have selected his answer as Best Answer. Doing so will provide him with points for his volunteer efforts...

---

Oh, I did not know that.
I wanted to sum up the solution because we evalutated the problem in German.

---

Sure, understood. And, honestly, I'm not sure what's the best way of handling a case like this one. I just wanted to point it out for future.

Answer 2

If you scale a viewport up it will stay in its original resolution but is just bigger. The resolution of the viewport will stay the same if you scale up. It is like a photo on your smartphone, the more you zoom the more it will get unsharp. That si how a viewport behave.
If you could send some pictures of your work I might can help you :)

Comments

Okay thanks, I recently published my Game in a GameJam ;) --> "Bounty Rain"

So what I had first:
https://drive.google.com/file/d/1Wch9gR1oGPNvtw3TQpMqea9rhc8rv2XI/view?usp=sharing
--> The scene is rendered on the main viewport as the menu too.
--> Edges of the sprite-textures are very sharp and automatically change their resolution when the window size changes. I cannot manually change the resolution because the game runs in the Browser, so there is no OS.window_size - that is why I use the strech aspect project setting.
--> I cannot implement a Camerashake because it would shake the GUI too.

This is how I thaught it would solve my problem:
https://drive.google.com/file/d/1U2TSGKw3C4W7k4rwjPRpSPqY9nXgh0ZI/view?usp=sharing
--> Scene is now in a extra Viewport, so the shaking camera does not impact on the menu - works perfectly!
--> Sadly, as you can see, the sprite textures are unsharp - because the view in the editor is smaller than the actual resolution of the viewport. (As you say, the viewport is scaled)
In game, this problem gets even worse if you set the window size on a way bigger amount then the viewport resolution. Ofcourse this scales the viewport, so it is unsharp.
But how can I solve the problem? I cannot reset the viewport.rectsize in code because I have no OS.windowsize when I run the Game in the Browser! :)

Hope you have an idea? :)) And thanks.

---

Oh you speak german as well? :)
Einen ähnliche Viewporteffekt erziehlst Du, indem einfach statt der "Gameport"-Node eine Controlnode verwendest und dann bei "Clip to Content" ein Häckchen setzt. Siehe hier
Dann wird nur innerhalb der Contronode ein Bild gerendert und die Auflösung verschlechtert sich auch bei einem größeren Bildschirm nicht. Wenn Du "Mouse Filter" von "Stop" auf "Pass" oder "Ignore" stellst, sind weiterhin Interaktionen inerhalb der Controlnodes (z.B Klicks auf Buttons) möglich.Weiteres findest Du hier. Falls Du nur eine Kamera nutzt, ist das der einfachste Weg.

---

Yup ^^
Okay, das ist ne nette Funktion, die ich noch nicht kannte. :)
Aber das Problem löst es nicht - die Kamera lässt immernoch das gesamte Bild erzittern, obwohl die GUI nicht in diesem Controlnode enthalten sind.

---

Du kannst auch die ganze GUI an ein "Canvas Layer" hängen und dann den "Layer"-Wert auf 1 stellen. Dann ist die GUI über dem Spiel und verändert sich nicht, falls sich die Kamera bewegt. Vielleicht hilft Dir das weiter? :)

---

Danke, das hat jetzt tatsächlich das Problem gelöst! :)
Ich formuliere es nochmal auf Englisch, falls jemand anderes das Problem hat.
Vielen lieben dankööö! :))