screen ratio
by PeterB · in Torque Game Builder · 02/14/2009 (9:28 am) · 5 replies
Forgive me for essentially cross-posting (I posted under 'public' by mistake), but it is vital that we be able to show our student games to people outside of USC.
Projects have to run on monitors that are either 4:3 or 16:10 because evidently, the world is full of both. (To say nothing about 16:9). I'm sure every TGB user wants to know this.
I hope one of the following directions is worth pursuing.
A. In another post, Nikos recommened that I put black bars on the sides of my gui and design for 4:3, but since changing the screen resolution (that also changes the ratio) stretches the gui as well my side black bars stay in the same relative place, regardless of the horz and vertSizing settings, it doesn't do what I hoped. I've worked with Torque gui's for years and I still don't feel I know what I'm doing with them, so maybe I'm missing something.
-------
B. I see how making levels and gui's that are specific to the ratio works. At your menu screen, you ask the user if they are 4:3 or 16:10 and load levels and gui's accordingly. Players can then change to ANY resolution (even during the game), and things look good. But it is tough to tweak levels and gui's if you have to do two every time. What if I had 20 levels?
-------
C. Or I could pick two screen resolutions and use
------
D. Separately, I tried forcing the camera during runtime based on what resolution they choose:
-----
E. Also, I tried:
but that crashes the game. So I can't force a new camera size when players change the resolution during runtime.
----------
Please. Being able to distribute our projects is very important and if half of our audience sees our games as painfully distorted, that defeats the purpose of striving for quality.
Projects have to run on monitors that are either 4:3 or 16:10 because evidently, the world is full of both. (To say nothing about 16:9). I'm sure every TGB user wants to know this.
I hope one of the following directions is worth pursuing.
A. In another post, Nikos recommened that I put black bars on the sides of my gui and design for 4:3, but since changing the screen resolution (that also changes the ratio) stretches the gui as well my side black bars stay in the same relative place, regardless of the horz and vertSizing settings, it doesn't do what I hoped. I've worked with Torque gui's for years and I still don't feel I know what I'm doing with them, so maybe I'm missing something.
-------
B. I see how making levels and gui's that are specific to the ratio works. At your menu screen, you ask the user if they are 4:3 or 16:10 and load levels and gui's accordingly. Players can then change to ANY resolution (even during the game), and things look good. But it is tough to tweak levels and gui's if you have to do two every time. What if I had 20 levels?
-------
C. Or I could pick two screen resolutions and use
setScreenMode(1024,768, 32,1); or setScreenMode(1280,800, 32,1);...etc, assuming I like those resolutions. I would also have to change the camera at the same time (which I can only do with the level method in option B?). Plus the gui, so this would have to be done only at the menu (before game). And not give the user any further choices in runtime.
------
D. Separately, I tried forcing the camera during runtime based on what resolution they choose:
%x = getWord(sceneWindow2D.getCurrentCameraArea(), 0); %y = getWord(sceneWindow2D.getCurrentCameraArea(), 1); %w = getWord(sceneWindow2D.getCurrentCameraArea(), 2); %h = getWord(sceneWindow2D.getCurrentCameraArea(), 3); sceneWindow2D.setCurrentCameraArea(%x SPC %y SPC 128 SPC 80);...but that sizes the game screen down into the top left corner a way I don't understand...even when I choose the exact same width and height I started with.
-----
E. Also, I tried:
t2dScene.cameraSize = "128 80";
but that crashes the game. So I can't force a new camera size when players change the resolution during runtime.
----------
Please. Being able to distribute our projects is very important and if half of our audience sees our games as painfully distorted, that defeats the purpose of striving for quality.
About the author
#2
Next, I make two gui's. Notice, above in 'startGame' if we do need the 4:3 gui, I 'exec()' it. That way we can make all objects in our two guis have the same name. So if you affect the camera (sceneWindow2D) or do anything to the gui in runtime, the names are consistent regardless of the screen/gui situation. This should make it a little easier to have two guis. But importantly, notice the 'extent' and position' for the two are different. That's the whole point.
/game/gui/mainScreen.gui
/game/gui/mainScreenSD.gui
- next post:
02/15/2009 (12:36 pm)
----------Next, I make two gui's. Notice, above in 'startGame' if we do need the 4:3 gui, I 'exec()' it. That way we can make all objects in our two guis have the same name. So if you affect the camera (sceneWindow2D) or do anything to the gui in runtime, the names are consistent regardless of the screen/gui situation. This should make it a little easier to have two guis. But importantly, notice the 'extent' and position' for the two are different. That's the whole point.
/game/gui/mainScreen.gui
%guiContent = new GuiControl(mainScreenGui) {
canSaveDynamicFields = "0";
isContainer = "1";
Profile = "GuiBlackContentProfile";
HorizSizing = "width";
VertSizing = "height";
Position = "0 0";
Extent = "1280 800";
MinExtent = "8 8";
canSave = "1";
Visible = "1";
hovertime = "1000";
new t2dSceneWindow(sceneWindow2D) {
canSaveDynamicFields = "0";
isContainer = "0";
Profile = "GuiContentProfile";
HorizSizing = "width";
VertSizing = "height";
Position = "0 0";
Extent = "1280 800";
MinExtent = "8 8";
canSave = "1";
Visible = "1";
hovertime = "1000";
lockMouse = "0";
useWindowMouseEvents = "1";
useObjectMouseEvents = "1";
};
};/game/gui/mainScreenSD.gui
%guiContent = new GuiControl(mainScreenGui) {
canSaveDynamicFields = "0";
isContainer = "1";
Profile = "GuiBlackContentProfile";
HorizSizing = "width";
VertSizing = "height";
Position = "0 0";
Extent = "1024 768";
MinExtent = "8 8";
canSave = "1";
Visible = "1";
hovertime = "1000";
new t2dSceneWindow(sceneWindow2D) {
canSaveDynamicFields = "0";
isContainer = "0";
Profile = "GuiContentProfile";
HorizSizing = "width";
VertSizing = "height";
Position = "0 64";
Extent = "1024 640";
MinExtent = "8 8";
canSave = "1";
Visible = "1";
hovertime = "1000";
lockMouse = "0";
useWindowMouseEvents = "1";
useObjectMouseEvents = "1";
};
};- next post:
#3
/common/gui/options.gui
…I comment lines 323 to 424.
02/15/2009 (12:45 pm)
This last part is optional. I already bound the 'optionsDlg' to the 'o' key so people can adjust the resolution at any time. But I personally don't need or like the 'keybindings' tab, which is foregrounded when options appear. I want to see video setting immediately. So in the file:/common/gui/options.gui
…I comment lines 323 to 424.
#4
mainScreen.gui would look something like this:
one last thing, I don't understand why you need the black bars. why don't you detect the desktop resolution and set the game's screen mode to that? that should fill up the entire screen. of course, images broken out for 4:3 would look stretched on a 16:10.
Note that every time you change the screen mode (which basically sets the size of the canvas), the game window has to be resized to match the current screen resolution. this can be achieved by doing this:
02/16/2009 (6:04 pm)
you can also avoid maintaining a duplicate copy of mainScreen.gui by doing something like this:if((getWord(getDesktopResolution(),0) / getWord(getDesktopResolution(),1)) < 1.5 ){
// is the monitor around 4:3?
setScreenMode(1024, 768, 32,1);
}
else
{
setScreenMode(1280, 800, 32,1);
}
exec("~/gui/mainScreen.gui"); // one version of mainScreen.guimainScreen.gui would look something like this:
%guiContent = new GuiControl(mainScreenGui) {
canSaveDynamicFields = "0";
isContainer = "1";
Profile = "GuiBlackContentProfile";
HorizSizing = "width";
VertSizing = "height";
Position = "0 0";
[b]Extent = getWord(getRes(), 0) SPC getWord(getRes(), 1);[/b]
MinExtent = "8 8";
canSave = "1";
Visible = "1";
hovertime = "1000";
new t2dSceneWindow(sceneWindow2D) {
canSaveDynamicFields = "0";
isContainer = "0";
Profile = "GuiContentProfile";
HorizSizing = "width";
VertSizing = "height";
Position = "0 64";
[b]Extent = getWord(getRes(), 0) SPC getWord(getRes(), 1);[/b]
MinExtent = "8 8";
canSave = "1";
Visible = "1";
hovertime = "1000";
lockMouse = "0";
useWindowMouseEvents = "1";
useObjectMouseEvents = "1";
};
};one last thing, I don't understand why you need the black bars. why don't you detect the desktop resolution and set the game's screen mode to that? that should fill up the entire screen. of course, images broken out for 4:3 would look stretched on a 16:10.
Note that every time you change the screen mode (which basically sets the size of the canvas), the game window has to be resized to match the current screen resolution. this can be achieved by doing this:
sceneWindow2D.resize(0, 0, getWord(getRes(), 0), getWord(getRes(), 1));
#5
First, I don't want to set the games to 1920x1200, if someone has their desktop to that, but am fine with the same ratio - 1280x800. (If the graphics aren't high-res, isn't this smart?)
Yes, the black bars are to avoid a stretched look. If you want the camera to reveal exactly the same amount of the world regardless, don't you need black bars? (Just like a lot of DVD's on standard televisions).
Is the line:
I really like what you're doing with the single gui - 'getRes()', but I do want to avoid the squished or stretched situation.
Maybe I can use a single gui with 'getRes', but do need to do a little math to make scenewindow2d shorter than the whole gui object if the monitor is 4:3...by setting a global in 'startGame' depending on what ratio is decided upon...
02/16/2009 (6:50 pm)
Great.First, I don't want to set the games to 1920x1200, if someone has their desktop to that, but am fine with the same ratio - 1280x800. (If the graphics aren't high-res, isn't this smart?)
Yes, the black bars are to avoid a stretched look. If you want the camera to reveal exactly the same amount of the world regardless, don't you need black bars? (Just like a lot of DVD's on standard televisions).
Is the line:
sceneWindow2D.resize(0, 0, getWord(getRes(), 0), getWord(getRes(), 1));simply doing what your gui already is? So I don't need both?
I really like what you're doing with the single gui - 'getRes()', but I do want to avoid the squished or stretched situation.
Maybe I can use a single gui with 'getRes', but do need to do a little math to make scenewindow2d shorter than the whole gui object if the monitor is 4:3...by setting a global in 'startGame' depending on what ratio is decided upon...
Torque Owner PeterB
The game will fill a widescreen and put black bars on the top and bottom of 4:3 monitors.
On start, I detect the monitor's resolution in order to make a guess about it's physical (and ideal) ratio. So if someone has their widescreen monitor set to a 4:3 ratio for some reason, this will keep the game at 4:3, which isn't good or bad really since they already use the wrong ratio. (I could propt their favorite resolution on start, but this keeps it simple for people who already have their monitor's resolution correct).
I also assume most people are either at 4:3 or 16:10, and force the closest one if not. (I check to see if the ratio is greater or less than 1.5). If someone's monitor is already at, say, 5:4, then the game will be at 4:3, which is somewhat close. 16:9 = 16:10, etc.
Next, I make the options (video) available upon keypress that will let them switch it to another (higher?) resolution, or if their monitor is indeed 16:9, for example.
So I have two gui files. That is the only awkward part.
-------------
First adding the automatic screen switch:
/game/gamescripts/game.cs
I added to the end of 'startGame()' so it all now looks like this:
function startGame(%level) { //Canvas.setContent(mainScreenGui); Canvas.setCursor(DefaultCursor); new ActionMap(moveMap); moveMap.push(); $enableDirectInput = true; activateDirectInput(); enableJoystick(); //sceneWindow2D.loadLevel(%level); moveMap.bindCmd(keyboard, "o", "Canvas.pushDialog(optionsDlg);", ""); // screen options come up on key 'o' moveMap.bindCmd(keyboard, ESCAPE, "quit();", ""); // quit upon Escape key if((getWord(getDesktopResolution(),0) / getWord(getDesktopResolution(),1)) < 1.5 ){ // is the monitor around 4:3? exec("~/gui/mainScreenSD.gui"); // establish a new 'mainScreenGui', 'sceneWindow2D', etc. setScreenMode(1024, 768, 32,1); }else{ setScreenMode(1280, 800, 32,1); } sceneWindow2D.loadLevel(%level); Canvas.setContent(mainScreenGui); }* Remember, players can (with optionsDlg) change to say, 1920x1200 if they like, but we aren't making our graphics high res enough for it to matter.
- next post: