Jump to content
XCOMUFO & Xenocide

Internal Ui Framework For Artists...


red knight

Recommended Posts

Hi all,

I am very proud to announce that Mamutas has already finished and did an internal release (to me) of the Xenocide UI Framework that will let this department to define the overlays (UI) for the WHOLE game.

So you can start right away with it....

This are the instructions sent to me by Mamutas:

[quote]Here is an internal release I intend out UI developers to use to test out UIs made with OGRE scripts.

Here is the readme I want to pass along with the distribution, which describes condition for Test UIs.

[b]How to create UIs so they can be tested with the Xenocide application:[/b][list]
[*]The UI must be written using OGRE scripts: [url="http://www.ogre3d.org/docs/manual/manual_15.html#SEC24"]http://www.ogre3d.org/docs/manual/manual_15.html#SEC24[/url].


[*]All the scripts must be located within resource locations as they are defined in xenocidegame\system\resource.cfg file.


[*]Your overlay must be named Xenocide/TestUI in order to be loaded when ?TestUI? button is pressed on the start screen.


[*]It is recommended that all the elements of the Test UI will be prepended with Xenocide/TestUI, as it will be easy to rename them when they are included in the game code.


[*]It is recommended that your UI would have a button named Xenocide/TestUI/Exit. This button will take you back to start screen, where you can exit the game by pressing ?Quit?. Otherwise you would need to kill the game from your Test UI in order to exit.
[/list][/quote]

The app has a very little defect in the geoscape introduced by me, when playing arround with a prototype, so if someone can redo the overlay (without the buttons defect), it will be very good indeed.

Enjoy and a big hoorray to mamutas for his awesome job...

The download link [b]IS[/b] [url="http://www.projectxenocide.com/redknight/uitestframework.rar"]http://www.projectxenocide.com/redknight/uitestframework.rar[/url] until Micah move it to an appropriate place (update this post when done :D )...

Greetings
Red Knight Edited by red knight
Link to comment
Share on other sites

I'm missing a file from my system, called msvcp71d.dll. I might have the file on my Visual Basic cd's, but my cd-rom drive is busted. Couldn't find it from the net either. Help, help!

I would certainly like to check it out. :D
Link to comment
Share on other sites

Thanks for the data... I will add it cause that is a file from the compiler... send me a pm with your mail to send it... cause It will take a little more to upload it...

EDIT: Uploading here while waiting to put it on the server.

Greetings
Red Knight Edited by red knight
Link to comment
Share on other sites

RK did me a great favor by uploading the file and posting the news here. Thanks, lad! :wave:

However, I feel obligated to provide more explanations...

After you downloaded the program and played with it until your mouse hurts, then you would probably wonder how you should do those UIs. Well, that is about the time to go here and read.

Note, that I do that explanation by my memory, so I might be slightly off for time being.

If you will look into the directory structure, you will see system and data directories. 'data' contains all the resources we are using in the game now. Under 'data' you will see a number of subdirectories with meaningful names. Except for 'overlay' maybe, but that is how OGRE calls a set of UI controls. The game itself is located under 'system' directory.

The game currently built in a such way, that when you press 'Test UI' button on start screen, it will attempt to loade an overlay named 'Xenocide/TestUI'. The current overlay is described in test.overlay file and it is the sample overlay from OGRE GUI sample.

Your task as the UI developer is to replace the contents of Xenocide/TestUI overlay with your own contents. Then the game will load your overlay without any recompilation needed.

As you may notice already Test overlay will refer to number of other resources, such as fonts, textures, etc. You are free to use whatever you need, but I would highly recommend to prepend all your resources with Xenocide/TestUI.

After you are done with your UI, I suggest following process. You take the overlay and all related resources and create a ZIP file with them. Then you send that ZIP file to the UI Review Board, which would validate the UI for conformance to Xenocide design guidelines. I suggest Deimos to be the lead of that board.

After the UI is approved by the UI Review Board, the ZIP is forwarded to me. I will review it from technical point of implementation, fix names if necessary to follow the naming convention, and then integrate the UI into the code (including the CVS).

Also, note that it is possible to use templates to abstract common properties of the controls, so it would be beneficial to see where it is possible to do and to reuse any existing templates.

I hope I cover everything now. Post here if you have any other comments and questions.

Happy Designing! :wave:
Link to comment
Share on other sites

When I get the chance to download and play these questions might be answered...

When a person makes a UI with these tools, are we going for just individual screens? So 1 of us could develop the buy/sell screen, another works on the research screen, etc? If so, is there a flowchat or some sort of diagram showing the links between screens at this point? So for example if I'm working on buy/sell, would there only be an OK button to go back to the previous screen I was in (baseview or planetview), or perhaps 2 buttons allowing the player to return to either view regardless of where they were? That type of design chart.

If that type of chart exists, it would help make sure each UI screen made would conform to some basic links and make sure designers don't forget a button when laying things out.
Link to comment
Share on other sites

Uh.... quick question, after opening the test.overlay file, I'm completely lost. I can't seem to find any location where it calls a texture nor can I find any path like this "Xenocide/TestUI/Templates/BasicBorderPanel" in the directory structure, It would be nice to have some comments in the file about what exactly all the paths mean and where I change infor to create new UI elements.
Link to comment
Share on other sites

"Xenocide/TestUI/Templates/BasicBorderPanel" is not a file system path, but rather name of some entry, in this case - the panel. The easiest way to find them is to do the search for such text in all files inside the data directory.

Some hints:

Textures are called materials and can be found in .material files in data/textures directory.

Overlay files can include other files (check the top of test.overlay). It is usually done to include templates - the common parameter definitinions which are inherited in the child controls. It is the case with "Xenocide/TestUI/Templates/BasicBorderPanel".
Link to comment
Share on other sites

ok a little progress... I can align text and kinda understand what parameters to change to get elements to move around.

creating new containers is still an enigma. Seems to require more coding than artistic ability.
Link to comment
Share on other sites

Yes, unfortunately there is no UI tool which would allow you to drag and drop while creating UIs... But scripts themselves are not that hard to learn, arn't they? Have you check the OGRE manual about scripts?

After all, I consider it more artistic job than coding. You can create you UI on the paper on some 800x600 grid. Then all you need to do is to divide X coordinate by 800 and Y coordinate to bring them in 0..1 range. That is for layout, but the most hardest part is getting textures right and that is truly artist's job.
Link to comment
Share on other sites

Mhh there is a somewhat experimental UI builder app in the OGRE forums, you can search for it and get it... I didnt try it myself so it may be still in an unusable form... Worth the try.

Greetings
Red Knight
Link to comment
Share on other sites

For anyone that wants it the zip file [url="http://www.projectxenocide.com/deimos/xenocide.zip"]here[/url] contains all the templates and work done so far on the UI. It is a large download coming in at around 11mb but it will help the art team build up UI elements from the original workpieces. Hope it helps.
Link to comment
Share on other sites

[quote name='mamutas' date='Apr 17 2004, 04:10 PM']Yes, unfortunately there is no UI tool which would allow you to drag and drop while creating UIs... But scripts themselves are not that hard to learn, arn't they? Have you check the OGRE manual about scripts?

After all, I consider it more artistic job than coding. You can create you UI on the paper on some 800x600 grid. Then all you need to do is to divide X coordinate by 800 and Y coordinate to bring them in 0..1 range. That is for layout, but the most hardest part is getting textures right and that is truly artist's job.[/quote]
I don't know how to code at all...What the heck are scripts? how do you do it? I have as little experience with coding as i have nuke-warheads, and i don't live in the US.
Link to comment
Share on other sites

Just take a look in the data directories and you will find lots of stuff... all are text files. Read them, take a look at the OGRE documentation (the scripts part of it), then Read them again... after that find one that you like to tweak to know how the heck it works... after that modify and see your changes... then Read them again and a new world will start to take shape...

In the meantime take a look in the OGRE forums for an Overlay Editor binary (it is already in there)...

Greetings
Red Knight
Link to comment
Share on other sites

Here comes some specifics about Ogre's font system, esspecially .fontdef files and metrics used there. As I have some experiance making fonts look nice in ogre, I want to share my researches.

[b].fontdef file[/b]
This is font definition file (hard to guess, isn't it?:wink:). One file can hold as many font definitions as you desire. Syntax is simple:

[code]<FontName>
{
   type <FontType>
   source <FileName>
   size <Size>
   resolution <Res>
}[/code]

You can have as many fonts as you want in one fontdef file, as I said, and you can define many fonts using only one file.

I strongly advice you to use TTF files (either TrueType or OpenType), becouse of much higher quality of them in comparition to bitmap fonts. You specify that you use TTF font by setting <FontType> to "truetype" (without quotes). Then you set <FileName> to your true type font file.

[b]Size and resolution[/b]
This is most tricky thing of making fonts look nice. You can't trust Ogre's manual about font scripts. Resolution can't be set to 72 nor 96 dpi. Why not? Test it for yourself. Use Mamutas uitest and change font for start screen from TrebuchetMSBold to Gotthard. I attach changed .overlay file, put it into data/overlays dir to see the change.

Why it's so crappy? Why the former font looked better?

Becouse Trebuchet font has size set to 32 and resolution set to 55, while Gotthard is 12/72. Since Gotthard definition is obviously more right looking from graphics point of view (since its 72 dpi is screen standard and 12 points is somewhat standard font size too), Ogre makes texture of that font with mipmap levels and then Ogre scales that texture again when it draws TextArea elements, and it becomes to look little crappy.

The only solution for that problem I know off is to experiment with size/resolution so that font looks nice. In example change Gotthard font's size from 12 to 36 and resolution from 72 to 42 (fontdef files are in data/fonts directory, Gotthard is defined in xenocide.fontdef), and then start uitest again. Much nicer look, isn't it? :)

[b]Many fonts in one file using one file[/b]
Yep, you can have many sizes of one font in fontdef file. In example I have defined myself another font, which I was tweaking to look good in Planetscape view:
[code]Gotthard
{
type  truetype
source  gotthard.ttf
size  36
resolution 42
}

GotthardSmall
{
type  truetype
source  gotthard.ttf
size  30
resolution 36
}[/code]

As you can see I'm using the same TTF file for two fonts in one fontdef, so can you ;). (Notice that GotthardSmall isn't tweaked with size/resolution so good as I would like it to be)

Ok enough talking, it's my first time so I hope I've been helpful.

Guyver
Link to comment
Share on other sites

Yes, it is really helpful!!!
I was not able to see Gotthard on my machine, that is why I used Trebuchet. I just saw rectangles instead of letters. Why was it? Is it because of the resolutions? Or my font installation?

I will try your advices about fonts the next time I have chance.
Link to comment
Share on other sites

:huh: I don't know why you couldn't see Gotthard, maybe it's problem with your freetype lib :unsure:. But i'm sure that it's not a problem with size/res, becouse even with badly set size/res you should be able to see that font.

Anyway, I'm downloading your uitest (cuz i compiled it myself with the freetype lib that also was compiled by me, and didn't have problem with displaying fonts), so I can test is it freetype lib problem.

Yep, looks like problem with freetype lib, i'm getting strange glyphs using that UI test and Gotthard.

Guyver
Link to comment
Share on other sites

Guest drewid
[quote name='mamutas' date='May 2 2004, 10:45 PM']Yes, it is really helpful!!!
I was not able to see Gotthard on my machine, that is why I used Trebuchet. I just saw rectangles instead of letters. Why was it? Is it because of the resolutions? Or my font installation?

I will try your advices about fonts the next time I have chance.[/quote]
sounds like you are typing characters that aren't in the font definition. but that seems a bit unlikely.
Link to comment
Share on other sites

  • 3 weeks later...
To help get this going, I'm going to dive into this for 100% of my time at home on the project (can't do it at work-darn!). I will focus on the X-Net interface, unless someone PMs me saying it's already started. I can't promise how long it will take me to figure it all out, but as we need this asap I'll do my best. I'll swallow my pride and try to post progress shots, no matter how ugly they are to begin. :D
Link to comment
Share on other sites

OK, I'm starting to learn the layout of things and how to reference items, but have hit a snag, perhaps Mamutas or someone else can make a suggestion. I pulled out the various chunks in the test UI, and just wanted to make the basic windows for the 3D model and text areas on the left, as well put some more buttons on the right, so I removed the games list and everything else from the test.overlay file. But when I try to open that window I get:

Error #: 7
Function: GuiManager::destroyGugetGuiElementElement
Description: GuiElement with name Xenocide/TestUI/AvailableGamesList not found..
File: c:\documents and settings\vlad\my documents\code projects\ogre\code\ogrenew\ogremain\src\ogreguimanager.cpp
Line: 143
Stack unwinging: <<beginning of stack>>

Looks like some files are missing like this cpp? Or should it even be called, since I don't have a reference to it in the interface to begin with? Below is the contents of my test.overlay file:


[code]// Ogre overlay scripts
#include <testtemplates.inc>


// Initial test draft of the X-Net interface.
Xenocide/TestUI
{
zorder 490
// Stats block
container BorderPanel(Xenocide/TestUI/BackPanel) : Xenocide/TestUI/Templates/BasicBorderPanel
{
 left 0
 top 0
 width 1
 height 1
 container BorderPanel(Xenocide/TestUI/3Dmodel) : Xenocide/TestUI/Templates/BasicBorderPanel
 {
 left 0
 top 0
 width 0.5
 height 0.65
 material Core/StatsBlockBorder

 }
 
 container BorderPanel(Xenocide/TestUI/TextArea) : Xenocide/TestUI/Templates/BasicBorderPanel
 {
 left 0
 top .65
 width 0.5
 height 0.35
 material Core/StatsBlockCenter

 }
   
 container BorderButton(Xenocide/TestUI/Craft) : Xenocide/TestUI/Templates/BasicButton
 {
 left 0.75
 top 0.15
 caption Xenocide/TestUI/Templates/BasicText Craft
 }


 container BorderButton(Xenocide/TestUI/xcaps) : Xenocide/TestUI/Templates/BasicButton
 {
 left 0.75
 top 0.30
 caption Xenocide/TestUI/Templates/BasicText XCAPs
 }

 container BorderButton(Xenocide/TestUI/weapons) : Xenocide/TestUI/Templates/BasicButton
 {
 left 0.75
 top 0.45
 caption Xenocide/TestUI/Templates/BasicText Weapons
 }

 container BorderButton(Xenocide/TestUI/Exit) : Xenocide/TestUI/Templates/BasicButton
 {
 left 0.75
 top 0.60
 caption Xenocide/TestUI/Templates/BasicText Exit
 }
   
 
}

}[/code]
Link to comment
Share on other sites

Breunor has found the first bug! Good job! :D

Apparently test UI code has a reference to a list control with "Xenocide/TestUI/AvailableGamesList" name. :whatwhat: If this control is not present in the overlay, you will get the error as described above.

The development team :Blush: is informed and will fix this bug ASAP. In the mean time here is a workaround:

Include list element named "Xenocide/TestUI/AvailableGamesList" in your overlay, but make it 0 size (or really really small), so it will not get on your way. When new code will be issued, you would be able to remove that element.

P.S.: The refernce in the code was to populate the list with entries. Without the code, the lists are going to be empty. Keep that in mind while desinging your UI.
Happy designing!!! :wave: Edited by mamutas
Link to comment
Share on other sites

By making the list as well as the content panels 0 in size, they disappeared nicely! Thanks Mamutas!

I've got the main menu buttons for X-Net done, and placed the 3D display and text area. Now I need to work on the graphics, so far only the buttons look right since I "borrowed" from the Planetview info. I mention this because I wanted to make sure here, we are going to use the same buttons and graphics betweens screens, right? If so, should there be a xenocide.material file which lists all the common graphic elements that might be used. Then each screen can have a supplemental material file for graphics unique to that interface. Something to consider I guess.
Link to comment
Share on other sites

BTW correcting the source in here I noticed that the new OGRE 0.14 version do check if there are multiple occurences of the same name, so for instance a Xenocide/UI/Geoscape/Label must only exists once.

EDIT: Here is the patch... Remember that you always have to have an Exit button to be able to get out (just unrar it in the same place). You have to execute xenoui instead of Xenocide.exe

Greetings
Red Knight Edited by red knight
Link to comment
Share on other sites

I've been following the planetview naming system, and replacing planetviewUI with TestUI for now, I'll be going back and making it something like XNetUI. Whenever I forgot to replace a name the code told me about it :D So long as each dialog box or interface has a unique name, that will keep these paths unique too. Thanks for the updated code!
Link to comment
Share on other sites

Thanks RK for fixing the code that quickly!

Breunor, I agree that we should consider common elements to be put in some reusable location and refer to them from all other UIs. That will make the UI look more uniform as well as save the duplication of the resources (and efforts to maintain them as well).
Link to comment
Share on other sites

This is going to be included in the next alpha release right?

If so dear art people we really gonna have to start nailing into this asap. Breu, has made a start but we all need to get working on this one, priority one.

What I suggest is that we break it up into chunks so that its not too daunting a task for one person to attack.

So for the planetview screen can someone work on the main screen, someone on buy and sell and so on and so on. If everyone jumps in on this we'll have so much more to include in the next alpha.
Link to comment
Share on other sites

Absolutely, breaking it up like that will help a ton. One person could work on the various small dialog boxes, like open/save, video settings, etc.

Just a heads up, the latest zip RK posted will need those 2 dll files, and the gotthard font entry needs the changes posted by guyver6 (size=36, res=42). To keep from editing existing files, I've been creating seperate ones as needed. xnet.material is an example. Templates I've used I've just put at the top of the overlay file. Since each material and template has an absolute name that includes the interface name, they should be moveable and could all be tossed into a xenotemplates.inc and xenocide.material files when each is approved.

The paths I've been using for templates is Xenocide/templates/xnet/XYZ and for materials is Xenocide/xnet/XYZ, pointing to textures named xnet_xyz.png. The X-Net's menu buttons are different than those used in the planetview, so there are no repeat materials yet.

I've got the conversion over to this setup pretty much figured out, and now need to get all the pieces together. Hopefully will have something looking decent by the end of the week. It looks like a material is either tiled on a panel, or stretched/shrunk if just 1 copy will fit. I expect we want to keep all sizing in relative percentages, rather than absolute pixel sizes, right?
Link to comment
Share on other sites

Yes, please keep sizingin in percentage. We need that if we will support other resolutions. OGRE will recalculate real pixels to fit the screen, but it will not do that with absolute values.

As far as the next release goes, I think as soon as we will have a number of pretty overlays, we should release.

Also, don't forget to put files in CVS as soon as they are approved.
Link to comment
Share on other sites

[url="http://www.xcomufo.com/forums/index.php?showtopic=3262"]http://www.xcomufo.com/forums/index.php?showtopic=3262[/url]
is the style guide.

The look of the ui has to be in line with the alpha 4 as that is going to be our final official layout. It took months of hard work to get a ui that everyone agrees on and likes so we won't be changing the style of it. Trust me you don't want to go through the design process again. :) Edited by Deimos
Link to comment
Share on other sites

hmmm... i've been reading up on the OGRE manual, specially the Overlay Scripts. later i'll try to convert some of the concepts we've got lying around of UI screens to an OGRE overlay script.
Link to comment
Share on other sites

Cool SupSuper, your D&D character will get extra goodies for that! :D (I just won't make him go insane as fast!)

Let us know which screens you plan to work on, so there's no overlap.
Link to comment
Share on other sites

  • 3 weeks later...
News from www.ogre3d.org:
[quote]Crazy Eddies GUI, which will be replacing our own inbuilt GUI in the next major version, is progressing apace, with it's Ogre render target working nicely. See this thread for updates.[/quote]

Translation: OGRE is going to drop the support for its current UI system - the one you used to create the UIs - in a month or so. In my opinion it would be better to start looking on the Crazy Eddies GUI implementation now to be prepared.
Link to comment
Share on other sites

  • 3 months later...
Just thought I would put in this link, because I guess not all artists are reading the Programming Forum. Scroll down to the bottom, there's a link to a TestUI-Framework based on CEGUI including a tutorial.

[url="http://www.xcomufo.com/forums/index.php?showtopic=5442&st=35"]-> Clicky <-[/url]

Rincewind
Link to comment
Share on other sites

×
×
  • Create New...