Torque 2D/StandardTutorials/Basics/GuiResolution

From TDN

This tutorial is for people who do not know how to get their GUIs to re-size properly when the game's resolution is changed. I am going to show you how to get GUIs, images in GUIs, and text in GUIs to scale properly for different game resolutions.

When someone tries to play your game on a computer with a smaller resolution than you have specified for your game, TGB will automatically change the resolution of your game so that it will fit on the user's monitor. Okay, so most of us are computer geeks, and we have insane boxes with insane resolutions. Unfortunately, lots of our users do not have our fancy setups, and if you give them something that does not look good on their computer, they will tell at least 10 people that your game sucks. That could be a real bummer for sales.

If you are confused about what resolution is, here are some popular monitor resolutions: 640x480, 600x800, 1024x768. Sound familiar? I hope so! To see your resolution (PC only), click Start > Control Panel > Display > Settings.


Contents

[edit]

Set the default resolution for your game

  1. In your Torque Game Builder directory, navigate to games\common\preferences.
  2. Open prefs.cs in a text editor.
  3. Enter your resolution for this line: $pref::Video::resolution

Example:
In this example, the default resolution is 1024x768 with 32-bit color depth.
$pref::Video::resolution = "1024 768 32";

[edit]

Auto-size your GUIs

All GUIs have an attribute called HorizSizing and VertSizing.

Go through your entire project and change the value for these attributes to "relative". This will also ensure that images used in GUIs are re-sized.

Your GUI files are located in this directory: games\[your game]\gui


Example: 

  new t2dSceneWindow(sceneWindow2D) {
     canSaveDynamicFields = "0";
     Profile = "GuiContentProfile";
     HorizSizing = "relative";
     VertSizing = "relative";
     position = "0 0";
     Extent = "1024 768";
     MinExtent = "8 8";
     canSave = "1";
     Visible = "1";
     hovertime = "1000";
     lockMouse = "0";
     useWindowMouseEvents = "1";
     useObjectMouseEvents = "1";
  };
[edit]

Auto-size your text

Next, we need to auto-size your text.

  1. In your Torque Game Builder directory, navigate to games\common\gui.
  2. Open profiles.cs in a text editor.
  3. At the top of the file, paste the following code under the line $Gui::fontCacheDirectory = expandFilename("~/data/fonts"); 
    %fontRes = GetWords($pref::Video::resolution,0,0);

if (%fontRes == 1680)      { $fontbase = 4; }
else if (%fontRes == 1440) { $fontbase = 4; }
else if (%fontRes == 1280) { $fontbase = 3; }
else if (%fontRes == 1024) { $fontbase = 3; }  //default resolution
else if (%fontRes == 800)  { $fontbase = 2; }
else if (%fontRes == 720)  { $fontbase = 2; }
else if (%fontRes == 640)  { $fontbase = 2; }

$font0 = $fontbase * ?;  
$font1 = $fontbase * ?; 
$font2 = $fontbase * ?;

    Note: If you look closely, you can see that the last three lines have ?s in them. Ignore these for now. We will replace them in a later step.

  4. Scroll down and look for the text profiles that you want to auto-size. When you find them, note the fontSize values. For example: 
    if(!isObject(GuiProfileE0)) new GuiControlProfile (GuiProfileE0)
{
   fontSize = 14;
   fontColor = "51 51 51";
};

if(!isObject(GuiProfileE1)) new GuiControlProfile (GuiProfileE1 : GuiProfileE0)
{
   fontSize = 20;
   justify = "center";
};

if(!isObject(GuiProfileE2)) new GuiControlProfile (GuiProfileE2 : GuiProfileE0)
{
   fontSize = 8;
   justify = "center";
};
  5. On a peice of paper, write down the font sizes you want to change (from the previous step). For example: 
    fontSize = 14;
fontSize = 20;
fontSize = 8;
  6. Get your $fontbase value for your default resolution. -If your default resolution is 1024 x 768, your $fontbase value is 3. -If your default resolution is 800 x 600 or smaller, your $fontbase value is 2. -If your default resolution is 1440 x 900 or higer, your $fontbase value is 4.
  7. Get the percentage of change between the $fontbase value and the fontSize values. For example (resolution: 1024 x 768, $fontbase = 2, fontSize = 14, 20, 8): 14/2 = 7 20/2 = 10 8/2 = 4
  8. Go back to the top of profile.cs and replace the question marks with the new values. For example: 
    $font0 = $fontbase * 7;  
$font1 = $fontbase * 10; 
$font2 = $fontbase * 4;
  9. Scroll down and look for the text profiles that you want to auto-size. When you find them, replace the fontSize values with the $font0, $font1, $font2 variables. For example: 
    if(!isObject(GuiProfileE0)) new GuiControlProfile (GuiProfileE0)
{
   fontSize = $font0;
   fontColor = "51 51 51";
};

if(!isObject(GuiProfileE1)) new GuiControlProfile (GuiProfileE1 : GuiProfileE0)
{
   fontSize = $font1;
   justify = "center";
};

if(!isObject(GuiProfileE2)) new GuiControlProfile (GuiProfileE2 : GuiProfileE0)
{
   fontSize = $font2;
   justify = "center";
};
  10. You're done! Double-check your work to make sure it looks like this: 
    $Gui::fontCacheDirectory = expandFilename("~/data/fonts");

%fontRes = GetWords($pref::Video::resolution,0,0);

if (%fontRes == 1680)      { $fontbase = 4; }
else if (%fontRes == 1440) { $fontbase = 4; }
else if (%fontRes == 1280) { $fontbase = 3; }
else if (%fontRes == 1024) { $fontbase = 3; }  //default resolution
else if (%fontRes == 800)  { $fontbase = 2; }
else if (%fontRes == 720)  { $fontbase = 2; }
else if (%fontRes == 640)  { $fontbase = 2; }

$font0 = $fontbase * 7;  
$font1 = $fontbase * 10; 
$font2 = $fontbase * 4; 

if(!isObject(GuiProfileE0)) new GuiControlProfile (GuiProfileE0)
{
   fontSize = $font0;
   fontColor = "51 51 51";
};

if(!isObject(GuiProfileE1)) new GuiControlProfile (GuiProfileE1 : GuiProfileE0)
{
   fontSize = $font1;
   justify = "center";
};

if(!isObject(GuiProfileE2)) new GuiControlProfile (GuiProfileE2 : GuiProfileE0)
{
   fontSize = $font2;
   justify = "center";
};
    [edit]

    Generate your Font Files

    Now that you have defined your text profiles, you need to ensure that the fonts and font sizes that you have specified are also available for your users. Just because the fonts show up on your computer when you test your game does not mean other users will see these fonts. The following code will help you properly build your font UTF files.

    1. In your Torque Game Builder directory, navigate to games\[your game].
    2. Open main.cs in a text editor.
    3. Add the following line under function initializeProject(): populateFonts();
    4. Add the following function at the bottom of main.cs: 
      function populateFonts()
{      
      %font = "Arial";      
      %sizes = "18 24 32 36";      
      for (%i = 0; %i < getWordCount(%sizes); %i++)            
            populateFontCacheRange(%font, getWord(%sizes, %i), 32, 126);      
      writeFontCache();
}
    5. In the function above, replace Arial with the name of your in-game font. For example, Raidar.
    6. In the function above, replace the font sizes with all of the font sizes you are using in your font profiles.
    7. Save main.cs.
    [edit]

    Test your game in different resolutions.

    Sometimes the resolution you enter in the TGB editor does not get updated in your pref.cs file. Therefore, I suggest you change the resolution directly in the pref.cs file.

    1. In your Torque Game Builder directory, navigate to games\common\preferences.
    2. Open prefs.cs in a text editor.
    3. Enter your resolution for this line: $pref::Video::resolution
    4. Save the file.
    5. Test your game.
Retrieved from "http://tdn.garagegames.com/wiki/Torque_2D/StandardTutorials/Basics/GuiResolution"