I solved my issue via @Peethor's advice. I only kept track of the tiles that were occupied and drew a large green overlay over all the tiles, and drew smaller red tiles for all the occupied tiles

I think this only partially solves the problem. Id still have to iterate through each tile and determine which tiles have buildings on them and activate/deactivate overlays for those tiles when they come in and out of view. Wont that just be as slow?

I forgot to mention that. Yes, you can zoom into the tiles by doing a pinch gesture. By zooming in, only about 1/4 of the tiles that you see on that image are visible.

Ive basically tried all of this already. If I dont multiply Matrix.CreateTranslation(positionComponent.Origin.X, ...) it will just end up zooming in as the top right corner as the origin. If i update the origin, the zooming doesnt work quite right etc

I see how that works now. I'm still a bit confused how I'm supposed to handle bubbles that land directly on top of an other bubble. It doesn't make sense for the ball to be snapped to the left or right side . Maybe I'm just missing something here.....