Designing the Galactic Civilizations 2 User interface. (1)

Useing DesktopX to make GC2 Screens Scale.

February 4, 2005 5:03 PM from

Designing the Galactic Civilizations 2 User Interface. Part 1:
I have been wanting to do a weekly blog on the progress of the Galactic Civilizations 2 user interface. Unfortunately I seem to have missed the first 12 weeks of it, so I will have to go back and cover some of the milestones of its design as time allows. One thing that is going to make things nice in Galactic Civilizations 2 is that the game and UI will be able to stretch to whatever resolution you want. How is it going to do this you ask? The major things that helps us do these screens is that I am using DesktopX Pro to design them. This should be an article unto itself so I won't go into it now, but lets just say is saves me hundreds of man-hours. And allows for some really incredible stuff. One of which is the subject of today's article. How we are using DesktopX to make our UI scaleable. The last few days I have spent on our new planet management screen. This is going to be very cool in the game, but as for how it works and why I will have to leave that to Brad and the other coders. Myself, I just have to make it look good. This is one of the most complicated screens in the game, and is presenting a challenge when trying to make it scale. (Please note this screen is not done and may not reflect the what will be in the final game.)
Here we have the planet screen as it appears in its DesktopX form:	Here is how it looks in the game at this point at the standard screen size of 1024x768.
Now as you can see this all works out fine as long as we are running a standard resolution, but what happens when I am running on my laptop at 1440 x 900, or my desktop and I want to get more real estate and run 1280 x 1024, or even 1600 x 1200. The good new is in GalCiv2 you can run at other resolutions and we wont just stretch the graphics. All the screens will scale properly, and you will get more useable space. Lets see an example.
Here we have the screen at a common widescreen resolution of 1280x768	And here we have the screen at the strange resolution of 1024x1024.
The only limitation to the sizing of the screens at this point is that you can't run below 1024x768. In theory though I don't have such a monitor, you could run this on a 30" LCD at 3400x1600 and it would work like a champ. Providing your video card could handle it. How are we doing this you ask? Well its quite simple in fact, thanks to DesktopX. DesktopX supports scripting of objects. I do some of this when I am skinning, but I am no great scripter. Thankfully I don't need to be for this. In each of the objects that needs to be repositioned on a screen size change I insert a simple script. Most of the time it is only 1 or 2 lines of basic math. Sample One: Object.Bottom = Object.Parent.Object.Height - 208 Object.Right = Object.Parent.Object.Width - 127 Here is something a bit fancier, But still simple: Object.Width = ((Object.Parent.Object.Width - 160) / 3) - 20 Object.Right = (Object.Parent.Object.Width) - ((Object.Parent.Object.Width - 160) / 3) - 15 Cari has written up a tool that takes our DesktopX pack, including its scripts, and creates the in-game screens. This allows the artist or designer of the screen to handle all the scaling, and saves our programmers for doing the much more difficult and complicated things that make the game more fun. I will try and write something more detailed about how DesktopX helps us make these screen as soon as possible.

20,666 views 3 replies