Sign in to follow this  
Madhed

[WIP] UNIStyle - A CSS inspired system for Unity3D GUI styling

Recommended Posts

Hi there!
 
I've always found the styling process of UIs in Unity3D a bit frustrating.
 
For the last month or so I have been working on a system that let's you use CSS-like stylesheets to control every aspect of your UI design.
Colors, sizes, sprites, fonts, tweens, etc.

 

The stylesheets are a bit more advanced than "regular" CSS. You can use named constants that can be edited from within the Unity editor.

Also included are math functions like lerp(), max(), etc. to let you calculate colors/vectors/etc. based on multiple values.
 
It's currently WIP but already pretty usable.
I would love to know what you think of this and let me know if you have any suggestions!
 
Here are some gifs/videos of the system in action:
 
Editing styles while playing in editor

 

"Mines" demo:

160 lines of C#, 100 lines of CSS

 

Pt52hkH.gif

 

"Loot" Demo:

230 lines of C#, 100 lines of CSS

 

nMF2TqY.gif

Edited by Madhed

Share this post


Link to post
Share on other sites

Small update:

 

The parser and themeing system is now fully customizable.

Programmers can add new style properties, types and style sheet functions with a few lines of code.

 

The previously hardcoded parts are now rewritten to use this extension system themselves.

It's already nice to work with but will be refactored to reduce the needed code even more.

 

As a normal user of the system you won't have to touch this code, of course. It is geared towards developers who want to customize the system.

 

The default theme extension:

/// <summary>
/// The default extension for uGUI functionality and basic types
/// </summary>
public class DefaultExtension : ThemeExtension {
 
    public override void AddTypeHandlers(Theme t) {
        t.AddTypeHandler(new FloatTypeHandler());
    }
 
    public override void AddFunctionHandlers(Theme t) {
        t.AddFunctionHandler("lerp", new ColorLerpFunctionHandler());
        t.AddFunctionHandler("lerp", new FloatLerpFunctionHandler());
        t.AddFunctionHandler("lerp", new Vector2LerpFunctionHandler());
        t.AddFunctionHandler("lerp", new Vector3LerpFunctionHandler());
        t.AddFunctionHandler("vec2", new Vec2FunctionHandler());
        t.AddFunctionHandler("vec3", new Vec3FunctionHandler());
        t.AddFunctionHandler("rgba", new RGBAFunctionHandler());
    }
 
    public override void AddPropertyHandlers(Theme t) {
        t.AddTweenablePropertyHandler("font-size", new FontSizePropertyHandler());
        t.AddTweenablePropertyHandler("color", new ColorPropertyHandler());
        t.AddTweenablePropertyHandler("scale", new ScalePropertyHandler());
        t.AddPropertyHandler("font", new FontPropertyHandler());
        t.AddPropertyHandler("sprite", new SpritePropertyHandler());
    }
}

The lerp function for colors:

public class ColorLerpFunctionHandler : GenericParserFunction<Color, Color, float, Color> {
   protected override Color CalculateResult() {
       return arg1 + (arg2 - arg1) * arg3;
   }
}
Edited by Madhed

Share this post


Link to post
Share on other sites
Sign in to follow this