[ANSWERED] How do I Make Display Screen Size & Back-Buffer Size Independent from Each Other

I am working on a 2D game where I need the back-buffer to be larger than the actual displayed screen so that I can draw relatively large maps while using the actual display with a camera to scroll left, right, up, and down.

However, I have found that the PreferredBackBufferWidth & PreferredBackBufferHeight are connected to the actual screen width and height.

How do I separate the two?

Thank you…

Render the map to a RenderTarget, then draw a section of the RenderTarget to the back buffer. A RenderTarget is simply a specialized Texture2D.

I think you might be mistaken either in terminology or conceptually misunderstand something. The back buffer is what is displayed. That’s why MonoGame forces the back buffer and window size to be the same.

Thank you both for your assistance… :relaxed:

Yes, I have been starting to research the RenderTarget component and as a result was beginning to lean in that direction.

However, I am currently using a camera to scroll my map-board tiles. How then would I use the RenderTarget to provide the same capability?

Do I instead use the camera, if that is possible, against the RenderTarget instead? Or do I calculate which set of tiles are to be displayed from the RenderTarget to the BackBuffer?

Admittedly, I am a little confused here…

Once you have drawn the map to the RenderTarget, you don’t need to render the map again unless it changes.

When you are drawing the RenderTarget to the back buffer, offset the position of the RenderTarget by the negative amount you would have moved the camera. For example, if you would have moved the camera +10, -5, offset the position of the RenderTarget by -10, +5. This will move the RenderTarget in the opposite direction with the camera staying still, giving the same effect as if the RenderTarget was stationary and the camera moved.

Thank you, KonajuGames… :relaxed:

I believe I am starting to get the idea. Do you know of any sample code available that can illustrate scrolling a RenderTarget in C#?

This is just off the top of my head. Say you have a RenderTarget of 4096x4096 and a screen size (back buffer size) of 1280x720.

To show the top left corner of the RenderTarget (represented by a field rt in the code below)

spriteBatch.Draw(rt, new Vector2(0, 0), Color.White);

To show the bottom right corner of the RenderTarget

spriteBatch.Draw(rt, new Vector2(-rt.Width + 1280, -rt.Height + 720), Color.White);

If you want to scroll it, add a Vector2 to your class, say it’s called mapPos.

Vector2 mapPos = Vector2.Zero;

Now add the per frame movement each Update. This will move the map to the left giving the appearance of the camera moving right.

mapPos.x -= 1.0f;

And use mapPos when drawing the RenderTarget

spriteBatch.Draw(rt, mapPos, Color.White);

So the RenderTarget can be used in place of a Texture2D in the SpriteBatch.Draw method since it inherits from the Texture2D class?

Also, if I am implementing left, right, up, down scrolling I would need to extract from the RenderTarget that rectangular selection that is indicative of the tiles in the direction they are being scrolled in the same manner as I am currently using the default Camera. However, you are showing two different draw methods for two different aspects of the RenderTarget.

Are you showing then that if I want the map to begin from the upper-left hand corner of the tile-set in the RenderTarget (which is what I am currently doing) that I would use the first SpriteBatch.Draw method subsequently adding a Vector class to simulate scrolling?

Sorry for the continuous questions but I have been doing a lot of research on my own and the information is quite scant for game development in general unless one is subscribing to a standard game genre, which strategy games do not appear to be well represented as a result… :disappointed:

I have found a book, which has a section on hexagonal tile maps, which I just ordered… :relaxed:

Thank you again for your help with this… :relaxed:


I made a sample project that might clarify this some more :slight_smile:
It’s on GitHub: https://github.com/Jjagg/mg-map-explorer

Thank you so much Jjagg. It is really appreciated…


1 Like

Hi Jjagg…

One quick question on the code provided. I have reviewed it and understand everything you provided except for the sizing of the actual displayed BackBuffer to the user.

Where are you setting the actual displayed screen size to 800x480 or are you just using the internal defaults?

If so, I would want to start with a set screen display, then allowing the user to go to full-screen mode…

Thank you…

Ah, yes. That is the default. You can change it by setting the PreferredBackBufferWidth and Height on the GraphicsDeviceManager. If you change this outside of your Game1 constructor you need to call ApplyChanges on the GraphicsDeviceManager for the size change to take effect.

Thank you again, Jjagg… :relaxed:

That is exactly what I suspected but I wanted to confirm it with you…

1 Like