Question

Hey guys, I am working on a game, and wanted to add a screen that would open when the user clicked on certain objects. The screen would be laid out to have an image on the left, a title on the top right, and text below the title.

I have a few problems with this,
1) How would I create the popup box? (preferably with rounded edges)
2) How would I wrap the text (in front of the picture, but not outside the popup-box, I may even need vertical scroll bars)
3) How would I account for different screen resolutions (would they even make a difference?)

Thanks for any and all help,
Max

Answer 1

the rounded edges etc can be handled best by making an image of what you want the popup to look like and styling it how you want.

lets say that you made a box, 300px by 300px

then from there you would want to wrap your text within, and possibly have it scroll or however you want to handle it by checking the text height and width to find where to wrap the text…

for example you could make a function like this which would take your full text and wrap it based on some measurements.

private string WrapText(string text)
{
  string[] words = text.Split(' ');
  StringBuilder sb = new StringBuilder();
  float linewidth = 0f;
  float maxLine = 250f; //a bit smaller than the box so you can have some padding...etc
  float spaceWidth = spriteFont.MeasureString(" ").X;

  foreach (string word in words)
  {
    Vector2 size = spriteFont.MeasureString(word);
    if (linewidth + size.X < 250)
    {
      sb.Append(word + " ");
      linewidth += size.X + spaceWidth;
    } 
    else
    {
      sb.Append("\n" + word + " ");
      linewidth = size.X + spaceWidth;
    }
  }
  return sb.ToString();
}

if your text is to much for a top to bottom view – you would have to come up with some sort of scrolling text, or a “continue” button press to load the next page of text for example.

finally as far as resolution goes, it depends on the platform, you want to build your game and art towards the platform for example a 300×300 image for a dialog box probably wont work that great if this is something you are building in XNA 4 for a phone, but would be fine for an xbox build, and most logically the pc build. Though with viewports you probably could use the same art (just might be worth it to use smaller images for a much smaller screen.

for resolution kind of questions you probably want to look at some things like tile safe area, and read a bit about viewports. It’s also suggested that you set your game to run at 1280 x 720 which is a 720p native resolution that should work on all tvs and gives you a reference for your art.

public Game1()
{
    graphics = new GraphicsDeviceManager(this);

    this.graphics.PreferredBackBufferWidth = 1280;
    this.graphics.PreferredBackBufferHeight = 720;

    Content.RootDirectory = "Content";
}

that should hopefully at least push you in the right direction.