Game Development Community

Menu Screen: dealing with widescreen

by Rodney (OldRod) Burns · in Game Design and Creative Issues · 03/12/2008 (5:30 pm) · 3 replies

I'm making a menu screen for my project and it looks great in all the "standard" resolutions.

However, when I try it fullscreen on a widescreen monitor, it gets stretched horizontally and looks horrible.

I tried just making the menu background black and centering the actual image in the middle. If I set the sizing to "relative" it stretches it just like if it's the background image. If I set it to "center" then it keeps the image in the right aspect ratio, but in higher resolutions I have a small bitmap in the middle of a big black screen.

How do I handle this so it looks good in both standard and widescreen resolutions?
NextNext Thread
PrevPrevious Thread
More from Game Design and Creative Issues


Torque Owner Brian Carter
#1
03/12/2008 (7:07 pm)
LOL, talk about timing .. I just hit the same problem on my first game. What I think I will do is query the screen size (I know its available because the options dialog box uses it) and then work out if it's a standard 4:3 or a 16:9 ratio. Based on that I will probably create a widescreen version, and a non-widescreen version. Whats weird is that the sprites and game graphics look fine when you switch out resolutions, its just pre-rendered art work like menus.

Torque 3D Owner Rodney (OldRod) Burns
#2
03/13/2008 (8:36 am)
Is that able to be changed at runtime? I thought the gui files were compiled to .DSOs before running.

Torque Owner Brian Carter
#3
03/13/2008 (9:13 am)
I'm doing a bitmap change at runtime already, so I know it's feasible. You can code a check in the onWake callback of the GUI to check the current screen resolution and determine the aspect ratio. Then make a call to setBitmap(filename) to set the background/image to the correct one based on the ratio.


As a base example I have the following bitmap control in my GUI which is altered by a call to updateCharacterPortrait() :

%guiContent = new GuiControl(CharacterCreationGui) {
canSaveDynamicFields = "0";
isContainer = "1";
Profile = "GuiDefaultProfile";
HorizSizing = "right";
VertSizing = "bottom";
Position = "0 0";
Extent = "1024 768";
MinExtent = "8 2";
canSave = "1";
Visible = "1";
hovertime = "1000";

new GuiBitmapCtrl(CharacterPortrait) {
canSaveDynamicFields = "0";
isContainer = "0";
Profile = "GuiDefaultProfile";
HorizSizing = "relative";
VertSizing = "relative";
Position = "497 205";
Extent = "291 309";
MinExtent = "8 2";
canSave = "1";
Visible = "1";
tooltipprofile = "GuiDefaultProfile";
hovertime = "1000";
bitmap = "~/data/images/characterCreation/CharCreation_B_B_0.png";
wrap = "0";
};
};


function CharacterCreationGui::updateCharacterPortrait( %this )
{
%filename = "~/data/images/characterCreation/CharCreation_" @ $player_hairStyle @ "_" @
$player_hairColor @ "_" @ $player_rotation @ ".png";

CharacterPortrait.setBitmap( expandFilename ( %filename ) );
}


Hope that helps a little - I'm pretty sure its doable.