GUI is not sizing properly on XBOX version
by Matthew Hoesterey · in Torque X 2D · 11/08/2008 (11:14 am) · 12 replies
Hi, I'm making a game that will display in 16:9 and thus should have letterboxing on a 4:3 tv screen. I'm having a few issues:
1) The gui displayes at the proper size and location on the pc but on my 4:3 tv screen the GUI is enlarged and misplaced
2) My letter boxing works perfect on my 4:3 tv screen but the screen is shifted up in window mode on the pc so that the black letter boxing bars are only on the bottem.
I was forced to set my backbuffer to 1280 x960 to get the letterboxing to appear on my tv. From what I've read I feel like setting the backbuffer to 1280 x720 should cause the app to letter box on a 4:3 display but this dosn't seam to be the case. Is my backbuffer set right? If not why dosn't my display letterbox when it is set to 1280x720?
Here are my Torque settings
Also here is a chunk of my gui code that dose not size appropriately on the xbox
1) The gui displayes at the proper size and location on the pc but on my 4:3 tv screen the GUI is enlarged and misplaced
2) My letter boxing works perfect on my 4:3 tv screen but the screen is shifted up in window mode on the pc so that the black letter boxing bars are only on the bottem.
I was forced to set my backbuffer to 1280 x960 to get the letterboxing to appear on my tv. From what I've read I feel like setting the backbuffer to 1280 x720 should cause the app to letter box on a 4:3 display but this dosn't seam to be the case. Is my backbuffer set right? If not why dosn't my display letterbox when it is set to 1280x720?
Here are my Torque settings
<GraphicsClearSettings> <ClearColor valueOf="Microsoft.Xna.Framework.Graphics.Color.Black"/> </GraphicsClearSettings> <WindowsGraphicsManagerSettings> <PreferMultiSampling>false</PreferMultiSampling> <PreferredBackBufferHeight>960</PreferredBackBufferHeight> <PreferredBackBufferWidth>1280</PreferredBackBufferWidth> </WindowsGraphicsManagerSettings> <XboxGraphicsManagerSettings> <PreferMultiSampling>false</PreferMultiSampling> <UseDisplaySizeForBackbuffer>true</UseDisplaySizeForBackbuffer> </XboxGraphicsManagerSettings>
Also here is a chunk of my gui code that dose not size appropriately on the xbox
//create a style for our play screen.
GUIStyle playStyle = new GUIStyle();
playStyle.PreserveAspectRatio = true;
playStyle.IsOpaque = false;
playStyle.Name = "GuiPlay";
Style = playStyle;
Size = new Vector2(1280, 720);
Camera = TorqueObjectDatabase.Instance.FindObject<T2DSceneCamera>("MainCamera");
GUITextStyle textStyle = new GUITextStyle();
textStyle.FontType = "arial16";
textStyle.TextColor[0] = Color.White;
textStyle.SizeToText = true;
GUIBitmapStyle imageStyle = new GUIBitmapStyle();
imageStyle.PreserveAspectRatio = true;
imageStyle.HasBorder = false;
imageStyle.SizeToBitmap = false;
//GUI Elements#################################################################
//Creating Current State Text for Debug
_currentStateText = new GUIText();
_currentStateText.Style = textStyle;
_currentStateText.Text = _stateP1;
_currentStateText.Position = new Vector2(60f, 60f);
_currentStateText.Visible = true;
_currentStateText.Folder = this;
_lifeSizeY = 8f;
_energySizeY = 8f;
switch (Game.Instance.NumberOfPlayers)
{
//1 Players
case 1:
_lifeSizeX = 400f;
_energySizeX = 300f;
_posXOffset = 600f;
//Createing Lifebars
//P1
_lifeBarP1 = new GUIBitmap();
_lifeBarP1.Style = imageStyle;
_lifeBarP1.Position = new Vector2(140f, 65f);
_lifeBarP1.Size = new Vector2(_lifeSizeX, _lifeSizeY);
_lifeBarP1.HorizSizing = HorizSizing.Left;
_lifeBarP1.VertSizing = VertSizing.Center;
_lifeBarP1.Bitmap = @"data\images\gui\hud\gui_hud_lifebar.png";
_lifeBarP1.Visible = true;
_lifeBarP1.Folder = this;
break;
}
#2
I assume that this is for a US resolutions (non pal) console...
There are three possible resolutions on the xbox - and the use of this line in your torque settings tells the app to use that console settings: they are 480 (standard definition), 1280x720 (HD) and 1920x1080 (HD)
480 - 1
720 - 1.5:1
1080 - 1.77:1
if you need more detail, let me know.
Sean
11/10/2008 (10:25 am)
Matthew - I assume that this is for a US resolutions (non pal) console...
There are three possible resolutions on the xbox - and the use of this line in your torque settings tells the app to use that console settings: they are 480 (standard definition), 1280x720 (HD) and 1920x1080 (HD)
<UseDisplaySizeForBackbuffer>true</UseDisplaySizeForBackbuffer>On your PC, you have set the heigh an width to an odd resolution - not any standard on the Xbox.
<PreferredBackBufferHeight>960</PreferredBackBufferHeight> <PreferredBackBufferWidth>1280</PreferredBackBufferWidth>You gui seems to use 720, the line: playStyle.PreserveAspectRatio = true; will simply resize (should resize) bitmaps used for the game on the multiple resolutions, it will not resize the postions of anything of the nature as you have hard coded values for position, width etc. You can use a quick algorithm (via aspsect calc) to change the sizes appropriately...even on the xbox.
480 - 1
720 - 1.5:1
1080 - 1.77:1
if you need more detail, let me know.
Sean
#3
I set the strange backbuffer to "trick" the xbox to letterbox on my 4:3 tv. for some reason when I set the back buffer to 1280x720 the xbox displayed full screen with no letterboxing. Sounds like I may have been doing something strange though. :).
It sounds like I need to drive my size/position values by a value that is modified based on screen resolution. I'll give that a go. :) thanks!
11/11/2008 (8:24 am)
Thanks for the info.I set the strange backbuffer to "trick" the xbox to letterbox on my 4:3 tv. for some reason when I set the back buffer to 1280x720 the xbox displayed full screen with no letterboxing. Sounds like I may have been doing something strange though. :).
It sounds like I need to drive my size/position values by a value that is modified based on screen resolution. I'll give that a go. :) thanks!
#4
I changed my backbuffer to 1280/720 and that is working nicely
On the down side I tried adding this code
while this code did get the ui to display in the right location it also caused my xbox to loose the letterboxing on a 4:3 display and stretch the image.
I also tried modifying this code
Changing this code didn't have the effect I was hoping for. The strangest part is that I can't change the Y position of my life bars on the xbox at all. It seams that any number I put in the 2nd vector argument doesn't change anything while I can change the X position normally.
Could you tell me what I'm doing wrong?
Thanks!
11/11/2008 (9:30 pm)
I'm still having a few issues. I think I'm missing something.I changed my backbuffer to 1280/720 and that is working nicely
On the down side I tried adding this code
#if XBOX
_clientHieght = _vidMode.DisplayHeight;
_clientWidth = _vidMode.DisplayWidth;
#endif
#if !XBOX
_clientHieght = Game.Instance.Window.ClientBounds.Height;
_clientWidth = Game.Instance.Window.ClientBounds.Width;
#endif
//create a style for our play screen.
GUIStyle playStyle = new GUIStyle();
playStyle.PreserveAspectRatio = true;
playStyle.IsOpaque = false;
playStyle.Name = "GuiPlay";
Style = playStyle;
Size = new Vector2(1280 *(_clientHieght/1280), 720*(_clientWidth/720));
Camera = TorqueObjectDatabase.Instance.FindObject<T2DSceneCamera>("MainCamera");while this code did get the ui to display in the right location it also caused my xbox to loose the letterboxing on a 4:3 display and stretch the image.
I also tried modifying this code
_lifeBarP1 = new GUIBitmap();
_lifeBarP1.Style = imageStyle;
_lifeBarP1.Position = new Vector2(140f*(_clientHieght/1280), 65f*(_clientWidth/720));
_lifeBarP1.Size = new Vector2(_lifeSizeX*(_clientHieght/1280), _lifeSizeY*(_clientWidth/720));
_lifeBarP1.HorizSizing = HorizSizing.Left;
_lifeBarP1.VertSizing = VertSizing.Center;
_lifeBarP1.Bitmap = @"data\images\gui\hud\gui_hud_lifebar.png";
_lifeBarP1.Visible = true;
_lifeBarP1.Folder = this;Changing this code didn't have the effect I was hoping for. The strangest part is that I can't change the Y position of my life bars on the xbox at all. It seams that any number I put in the 2nd vector argument doesn't change anything while I can change the X position normally.
Could you tell me what I'm doing wrong?
Thanks!
#5
I was under the impression that the GUI class was supposed to scale things for you? I feel like this is extremely hacky
Is this the way I need to resize my GUI to my display or am I missing something? I feel like there should be some kind of Matrix I can just resize to scale my entire GUI.
11/17/2008 (7:40 pm)
I'm still looking for a sollution to my resize problems. I can use this formula on all my bitmaps GUI Size ect.. to get things to work on the TV:Size = new Vector2(_clientWidth, _clientWidth/1.77f); Position = new Vector2(DesiredXPos *(_clientWidth/1280),DesiredYPos *(_clientHeight/720));
I was under the impression that the GUI class was supposed to scale things for you? I feel like this is extremely hacky
Is this the way I need to resize my GUI to my display or am I missing something? I feel like there should be some kind of Matrix I can just resize to scale my entire GUI.
#6
I found this block of code.
I don't understand whats going on with these lines:
Changing the newBounds.Width line to this fixes my problems for the most part:
My only issue now is that the letterboxing isn't centered and the viewable screen is high up on the tv.
Changing the position of my main control dosn't have an effect until extream numbers and then it just smashes.
Have I found a bug in the code or am I implementing my gui wrong? Any ideas?
11/19/2008 (8:07 pm)
I was digging through the engine code trying to figure out my problem.I found this block of code.
case HorizSizing.Relative:
if (oldParentExtent.X != 0)
{
float newLeft = (newBounds.X * newParentExtent.X) / oldParentExtent.X;
float newRight = ((newBounds.X + newBounds.X) * newParentExtent.X) / oldParentExtent.X;
newBounds.X = newLeft;
newBounds.Width = newRight - newLeft;
}
break;I don't understand whats going on with these lines:
float newRight = ((newBounds.X + newBounds.X) * newParentExtent.X) / oldParentExtent.X; newBounds.Width = newRight - newLeft;
Changing the newBounds.Width line to this fixes my problems for the most part:
newBounds.Width = (_bounds.X * newParentExtent.X) / oldParentExtent.X;
My only issue now is that the letterboxing isn't centered and the viewable screen is high up on the tv.
Changing the position of my main control dosn't have an effect until extream numbers and then it just smashes.
Have I found a bug in the code or am I implementing my gui wrong? Any ideas?
#7
I am understanding your correct you want to have a GUI in roughly the same spot in one of the three or more xbox resolutions? is that right - and want to have only one image?
I have nor read through al of your work here - however here is a simplistic way to accomplish the sizing for the Bitmap /GUI.
You could also simplify the location of buttons on that GUI via
where the vector in btnPosition represents a 720 location. i have not played with where to place the 480i images.
Does this help? I can dig up the conversion from 480 to the other res's if you want, but its not a good conversion as 480 is square compared to 1.77 - so you may just position those differently rather than convert.
Sean
11/21/2008 (8:16 pm)
Hey matt - I am understanding your correct you want to have a GUI in roughly the same spot in one of the three or more xbox resolutions? is that right - and want to have only one image?
I have nor read through al of your work here - however here is a simplistic way to accomplish the sizing for the Bitmap /GUI.
switch (Game.Instance.Window.ClientBounds.Height)
{
case 1080:
baseFrame.Size = new Vector2(1920, 1080);
break;
case 720:
baseFrame.Size = new Vector2(1280, 720);
break;
default:
baseFrame.Size = new Vector2(720, 480);
break;
}You could also simplify the location of buttons on that GUI via
where the vector in btnPosition represents a 720 location. i have not played with where to place the 480i images.
Vector2 btnPosition = new Vector2(560, 400);
switch (Game.Instance.Window.ClientBounds.Height)
{
case 1080:
btnPosition = new Vector2(btnPosition.X * 1.5f, btnPosition.Y * 1.5f);
break;
}Does this help? I can dig up the conversion from 480 to the other res's if you want, but its not a good conversion as 480 is square compared to 1.77 - so you may just position those differently rather than convert.
Sean
#8
case 480:
btnPosition = new Vector2(btnPosition.X / 1.77f, btnPosition.Y / 1.5f);
break;
effectivly you only have to position and size the 720 one, and all others should work just fine.
11/21/2008 (8:30 pm)
Actually the case statement for positioning of the 480 would be:case 480:
btnPosition = new Vector2(btnPosition.X / 1.77f, btnPosition.Y / 1.5f);
break;
effectivly you only have to position and size the 720 one, and all others should work just fine.
#9
Thanks for getting back to me :).
Let me ask just one question so that I make sure I'm understanding everything right.
From what I understand I need to change the size of my Base GUI image and then modify the position of each object individually, based on resolution?
I think I was battling with the code trying to get it to do something it's not supposed to do. I was under the impression that changing the size of the base GUI would reposition and scale things automatically.
I'm going to give it a go later today. Thanks for help! :)
11/22/2008 (8:45 am)
Hi Sean, Thanks for getting back to me :).
Let me ask just one question so that I make sure I'm understanding everything right.
From what I understand I need to change the size of my Base GUI image and then modify the position of each object individually, based on resolution?
I think I was battling with the code trying to get it to do something it's not supposed to do. I was under the impression that changing the size of the base GUI would reposition and scale things automatically.
I'm going to give it a go later today. Thanks for help! :)
#10
No worries, I hope that I assisted you - I am not 100% sure that the modification of the Base GUI should not actualy modify the position of the sub objects - I currently don't think it does. (but I could be wrong) I have just started implementing GUI resizing and bitmap movement - and the modification based on height is the approach I am using. It may (may not) be the best technique, but it is working for me.
oddly for 480 - it seems that
btnPosition = new Vector2(btnPosition.X / 1.77f, btnPosition.Y / 1.77f);
actually works better - however this is only on the pc, I have not tried it on the xbox yet.
Sean
11/22/2008 (3:07 pm)
@Matt,No worries, I hope that I assisted you - I am not 100% sure that the modification of the Base GUI should not actualy modify the position of the sub objects - I currently don't think it does. (but I could be wrong) I have just started implementing GUI resizing and bitmap movement - and the modification based on height is the approach I am using. It may (may not) be the best technique, but it is working for me.
oddly for 480 - it seems that
btnPosition = new Vector2(btnPosition.X / 1.77f, btnPosition.Y / 1.77f);
actually works better - however this is only on the pc, I have not tried it on the xbox yet.
Sean
#11
My final formula was
Also I discovered that the main parent scene view should not have it's size modified and GUIText should not have it's position modified.
The GUI Classes are a nightmare to work with and with no examples that work it was a tough thing to figure out. Couldn't have done it without your help though.
Thanks!
11/22/2008 (6:27 pm)
Heya Sean you where a big help. My final formula was
_uiSizeXMult = _clientWidth / 1280; _uiSizeYMult =(_clientWidth / 1.77f) / 720; And then in my UI class guiPlayHud.Size = new Vector2(1280f * Game.Instance.UISizeXMult, 720f * Game.Instance.UISizeYMult); _lifeSizeX = 250f * Game.Instance.UISizeXMult; _energySizeX = 185f * Game.Instance.UISizeXMult; _posXOffset = 375f * Game.Instance.UISizeXMult; _lifeBarP1.Folder = this.Folder; _lifeBarP1.Size = new Vector2(_lifeSizeX, _lifeSizeY); _lifeBarP1.Position = new Vector2(140f * Game.Instance.UISizeXMult, 65f * Game.Instance.UISizeYMult);
Also I discovered that the main parent scene view should not have it's size modified and GUIText should not have it's position modified.
The GUI Classes are a nightmare to work with and with no examples that work it was a tough thing to figure out. Couldn't have done it without your help though.
Thanks!
#12
Sean
11/22/2008 (6:41 pm)
Glad you got it worked out, even better that you were able to share back to the community!Sean
Torque Owner Matthew Hoesterey