• entries
    707
  • comments
    1173
  • views
    433328

UI Refactored and a Bad Choice

Sign in to follow this  
Programmer16

361 views

[font=verdana,geneva,sans-serif]

UI Changes

[/font]


[font=verdana,geneva,sans-serif]Well, I was tired of fudging about with theming UI elements when trying different looks, adding new controls, etc so I refactored a bunch of the code, moved it into my code base, and then added theming. I already had a small system in place that allowed me to change the background color and text color quite easily, but doing things like switching from a simple texture rendered over top the control (like the bones one I did a little while back) to a grid system was a major pain in the butt. Now, I'm not a huge fan of the simple way as it can be a pain if you need to change a panel or something, but it allows for a much better looking UI. The grid system is much easier to create skins for during development though, so I decided to include both.[/font]



[font=verdana,geneva,sans-serif]13May2012_184551.png[/font]



[font=verdana,geneva,sans-serif]The above is an example using the grid system. All controls can be setup independently, so some controls can be grid and some can be simple. The system also allows for different classes, so two different instances of the same control can had different themes. The image above shows an example of this; all of the controls showing the saved games are in a panel with a simple, transparent, colored pixel background texture. The inventory slots are also in a panel with no background. For comparison, here is a shot of the other theme I have setup:[/font]



[font=verdana,geneva,sans-serif]13May2012_190022.png[/font]



[font=verdana,geneva,sans-serif]Finally, here are the two theme files that are used to produce the above:[/font]


[font=verdana,geneva,sans-serif]




Simple
Center






Grid
ControlTexture2

Center




Grid
ControlTexture2

Center






Grid
ControlTexture2

MiddleLeft



Grid
ControlTexture2

MiddleLeft






Grid
ControlTexture2

Center




Grid
ControlTexture2

Center





UIFont
Grid
ControlTexture2






UIFont




UIFont
Simple
Pixel






Grid
ControlTexture2

Center



Grid
ControlTexture2

Center





Grid
ControlTexture2




Grid
ControlTexture2






Simple
SageCursors

1





Simple
SageCursors

1





Simple
SageCursors

1






Center










Simple
Center






Simple
Center
Pixel

1





Simple
Center
Pixel

1







Simple
MiddleLeft
Pixel

1




Simple
MiddleLeft
Pixel

1







Simple
Center
Pixel

1





Simple
Center
Pixel

1






UIFont
Simple
Pixel

1






UIFont
Simple





UIFont
Simple
Pixel






Simple
Center
Pixel

1




Simple
Center
Pixel

1






Simple
Center
Pixel

1




Simple
Center
Pixel

1






Simple
Center
SageCursors

1





Simple
Center
SageCursors

1





Simple
Center
SageCursors

1






Center



[/font]

[font=verdana,geneva,sans-serif]The theming system itself is completely optional; I can supply the themes instances (ControlTheme) to the controls via properties (DisabledTheme, Theme, etc.) However, loading and applying the theme is quite easy:[/font]
[font=verdana,geneva,sans-serif][/font]
[font=verdana,geneva,sans-serif]ThemeManager.LoadFile("dark"); // Load a theme file via XNA's ContentManager[/font]

[font=verdana,geneva,sans-serif]// create control; we'll use a Panel as an example:[/font]
[font=verdana,geneva,sans-serif]var Panel = new Panel();[/font]
[font=verdana,geneva,sans-serif]Panel.Position = new Vector3(10, 10, 0);[/font]
[font=verdana,geneva,sans-serif]Panel.Size = new Vector2(100, 100);[/font]

[font=verdana,geneva,sans-serif]// And apply the theme[/font]
[font=verdana,geneva,sans-serif]ThemeManager.ApplyThemes(Panel);[/font]
[font=verdana,geneva,sans-serif]
[/font]

[font=verdana,geneva,sans-serif]The ThemeManager class is a "singleton" in the sense that there is a common, global instance accessible by the program (via static functions), but instances can be created. This was done with a specific purpose in mind: the base control class (Control) has a virtual ApplyTheme() method that takes a ThemeManager. Calling the static ApplyThemes() method simple calls the control's ApplyTheme() method, passing in the singleton instance.[/font]


[font=verdana,geneva,sans-serif]

Bad Choice

[/font]


[font=verdana,geneva,sans-serif]I finally decided to actually try running the current build of SAGE on a non-development machine...and it didn't run. No crashing, just didn't run. After some playing around (missing C# 4.0? missing XNA runtime?) my content system came to mind. The way I have everything set up is that I have an interface, IAsset, that has methods common to all of my asset types: Import - read the asset from editor file (xml and whatnot), Export - write the asset to an editor file, Read - read the XNB file, and Write - write the XNB file. Now, the astute reader might already see the problem here; for the Read() and Write() methods to work properly I was passing in ContentTypeReader and ContentTypeWriter. ContentTypeReader was fine, but to use ContentTypeWriter I had to switch to the full C# 4.0. This was all good and well on my machine, but something I was unaware of: the assemblies required for ContentTypeWriter (Microsoft.Xna.Framework.Content.Pipeline I believe) are not installed into the GAC.[/font]



[font=verdana,geneva,sans-serif]Not really a "bad choice" per se, as it was quite easy to resolve (switch from ContentTypeWriter to BinaryWriter, include my Binary IO extensions, and change any calls to WriteObject and ReadObject), but something I really should have been aware of nonetheless.[/font]



[font=verdana,geneva,sans-serif]Back to work on A Man Haunted; trying to get some sort of demo worked together.[/font]




[font=verdana,geneva,sans-serif]

Beals Software

[/font]


[font=verdana,geneva,sans-serif]Facebook Twitter Youtube[/font]

Sign in to follow this  


0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now