Here’s a piece of free game dev advice for yall: Whenever I have a question about mobile UI, the first thing I ask is “How did they do it on Bubble Witch Saga 3?” The answer is usually pretty solid, because it’s one of the most polished mobile games of all time.
So the question I had was “How to handle the resolution of the game on phone vs tablet?” Bubble Witch on phone is stretched to full screen (phones are usually 16:9ish), but on tablet is letterboxed (usually 3:4ish). This is pretty standard solution, and easy to do with the ResolutionBuddy nuget package, but Bubble Witch does something better… Instead of using black bars to letterbox the game, it has a blurred out image of the current background:
I tried to replicate this using a standard bloom shader, but the RenderTargets used by the shader seem to be screwing up the Viewport created for virtual resolution in the ResolutionBuddy:
you can see from the screenshot that the 16:9 viewport has been changed and now takes up the whole screen. I’ve noticed this in other places too, like a full screen rendertarget for a scroll window messes up the viewport too.
So my question is: What am I doing wrong? Am I misunderstanding something about viewports or rendertargets? Or is this a bug in MonoGame that they aren’t playing nice together?
Could you explain how you’re trying to achieve this effect, or maybe share your code? It’s hard to tell where things went wrong without knowing what steps you took.
Yeah that was totally it… just needed to call ResolutionAdapter.ResetViewport to reset the viewport on the GraphicsDevice after the bloom component does it’s thing.
The result looks really good, I’ll probably do a blog post how to recreate this effect:
So there you go: If you use a RenderTarget and a custom ViewPort, they don’t play nice together and you have to manage your viewport every time swapping out render targets.
