Although promised many times, Unity still does not have a decent UI layout engine. The process can be simplified with NGUI from the asset store, but its still tedious. For UnityRTS I opted to use a system similar to the built in GUILayout, but tried to make it much simpler to use for common use cases. It works off of a loose hierarchy of elements, with three main functions.
Most of the time, child elements will borrow a slice from their parents; removing that space from the parent and giving it to the child. This is done through WidthSlice() and HeightSlice(). Another common function is tables and grids, created through the Grid() function. After specifying the number of rows and columns, calling Cell() on a grid returns the next cell (iterating horizontally then vertically). The final function is a flow layout, though not integrated as nicely as it could be. This scales down items uniformly to fit the specified number of items in the allocated space; much like grid, but the item dimensions and count are provided, and item aspect ratios are preserved.
The UI in UnityRTS is modelled off of Age of Mythology. Two height slices cut the top and bottom bars, and various other functions allocate required space. Information is pulled from the game scene as required. Also made some pretty box art for things 😀
Webplayer | Download Project
I put a little more work into the UI viewer; moved it to WPF and added some slight editing capabilities (but no way to save the file back). It will let you see a number of different UI files at different resolutions, and see all of the hidden elements from the AOM alpha.
It does not yet capture all of the data in the files, so its not possible to save back without data loss. But its probably not worth finishing off.
Download (.Net 4 + Source)
Its been a while since my last post! I’ve been working on my study, but have recently had some time to work on this project and make some more progress. I’ve started to build some classes to load the AOM UI files. These files are XML-based with a hierarchy of “gadgets” used to display textures, text, buttons, etc.
Some things to note while writing a UI parser:
– Many hidden elements contain invalid data, resources from elements should be lazy bound, to avoid reading from data that does not exist
– UI resources should be looked up in textures2.bar, then in textures.bar
– Element bounds are always in screen-space, they are not transformed or offset by their parents rectangle
– The UI appears to be highly coupled to the engine – pressing the menu button calls “showGameMenu”, which then must unhide an element inside the same UI file, looked up by its name. These may be defined in an external xscript file that I have not yet found
– Similar to the last point, the contents of many elements seems to be driven by the engine, looking up that element by name and setting the appropriate data (ie. chat lines), other parts follow a data binding model (ie. resources)
– To load the correct image, you need to look for a [image name]_def.xmb file, check if a civilization specialization exists to be used instead, and then add .ddt to the end of the image path.
If I’m wrong on any of these points, please tell me!
Screenshot of the in-game UI displayed in XNA:
Screenshot with all elements visible:
I’m too lazy to create file locating stuff, so you’ll need to update the list of install directories before running it:
Download source and binaries (170KB)