[SOLVED] Bubble Witch Effect (ViewPort and RenderTarget problem)

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?


Here’s the similar bug I’m seeing… the map is drawn from a rendertarget, but moves the viewport to 0,0?

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.

The code is all spread out between a couple of different open source projects…

Here is where the render targets are created for the bloom effect:

Here is where the viewport is created for the rendering to a virtual resolution:

and here is where the rendertarget is used to draw scrolled content:

Could my problem be this line in GraphicsDevice.ApplyRenderTargets?
Looks like it’s resetting the viewport to the applied rendertarget?

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.


Isn’t this solution creating some overhead?
I’ve never had to do this on dx projects, why is it different on android?

idunno, it is in the core code, so opengl/directx doesnt make a difference. Maybe I’m using RenderTargets & Viewports in a different way than you are?

I did a quick blog post explaining how to recreate this effect in just a few lines of code:
Bubble Witch effect with MonoGame