[RELEASED] Essential UI Kit

[abnu]

Hi guys,

I often found that the UI in games felt like it was just added as an afterthought. And that’s sort of understandable since the game play should be central to the game and is what we like to focus on most. But since UI is the first thing the player sees and interacts with it has the potential to drag the whole experience down from the start.

To help your game avoid that mistake I made the Essential UI Kit to help you create a great UI for your game with a set of ready-to-use elements for faster prototyping, custom elements for lots of extra functionality and Editor Helpers that help improve your workflow, allow you to edit and add easing to your animations etc…
I’ve been working on this asset for a while now and I’m very excited that it’s on the Asset Store now. Here is the link.

Before I give you the rundown of some of the features you might want to check out a Demo first.

Complex UI elements:
A number of commonly used UI elements that create, extend or add new functionality to the basic UI elements Unity ships with. Below is a list of some of the more important elements:

• Page scrollers
• Lists
• Inventory
• Canvas Element 3D (Scales meshes to fit inside Rect Transforms)
• Modals & Notifications
• Slider Pop-Ups
• Dials
• Validated Input Fields

Check out the Demo to see them in action. The elements use the new(-ish) Unity UI released with Unity 4.6 and the Unity Eventsystem so that the elements work on Desktop and Mobile.

Animation and Easing:

Key to any good User Interface is animation. And there is no such thing as a sweet animation without some easing on it ;). So this kit comes with a complete easing library featuring all the usual easing functions: quartic, elastic, bounce etc… There is a number of ways you can use it:
First there is an editor that allows you to add easing to almost any curve on your existing animations.

Secondly the easing library is heavily used by most of the complex elements and often you can just select the desired easing from a drop-down:

And last but not least you can also ease or tween from code (with a number of convenient extension functions provided for animating transforms or other commonly used elements).
Example:
csharp** **transform.MoveTo(Vector3 target, 3f, EasingTypes.BounceIn);** **

Prototyping:

Sliced & other sprites for all the basic elements are included so you can quickly mock up your own User Interface . There are also Prefabs for the more common UI elements (buttons, sliders etc.) that are already set up with Sprites & Animations.
In addition to that there are numerous helpers to help streamline your workflow. You can create Color Schemes for example so that you can create them once and keep 'em consistent across your Project/ Team. Or combine a sequence of pngs into a spritesheet directly in Unity so you can save yourself the Photoshop detour.
I’ve also included some good UI sounds that I’ve selected (for all the clicks & bops you need ). They’re not made by me, but released under a CC 0 - License which means that you’re not required to mention the author (but you’re certainly welcome to and I’ve included info about the author in case you do want to do that).

How to use it:

Showing is better than telling (especially with UI) so I’ve included many examples of the elements that you can look at, copy, hack or use however you like. (All the scenes in the Demo are for example included in the Package with a short scene descriptions about what elements are included, what you could use them for etc…). The Source Code is commented (of course) and there is a generated Code Documentation included for people who like that sort of thing. I’ve also started putting up short videos on my Website on how one would use and/or set-up elements. There are a few there already and I’ll be adding a lot more starting next week.

And of course don’t hesitate to contact me if you have any questions, problems, improvements or anything else regarding the Essential UI Kit. I hope you have fun trying it out and I’m really looking forward to hearing about what you think of the Kit.

[Duffer1231]

@abnu ,

How flexible is the Inventory UI and to how many uses could I put it in rpg context…?

[abnu]

@Duffer123_1
The Inventory is pretty flexible in the sense that it just works with any Mono Behaviours. So as an (RPG-themed) example:
Say you have a big chest with all your Weapons then you would create a Weapon Mono Behaviour

public class Weapon : MonoBehaviour{
public string weaponname;
public int damage;
public int cost;
}

and your “Weapon” Inventory would accept all "Weapon"s and derived classes. So let’s say we have a second Inventory that’s just for ranged weapons like bows, crossbows etc.

public class DistanceWeapon : Weapon{
public int range;
}

Now the first Inventory would still accept them because they are weapons but the second inventory would only accept those weapons that really are Distance Weapons (or derived). Accept means that you can drag them to any of the free slots in the Inventory, you get notified when a new item is added or an item is removed and of course you can always access all the items currently in the inventory.

To sum up: it has basic inventory functionality(Drag & Drop (with easing) inside and between Inventories, storing and accessing items) while trying to give you maximum flexibility in how your items are made and what you do with them.

Honestly though, if you you’re mainly after an inventory for a rpg-game then there are probably other assets that are just designed for the rpg-context and have more set-up for you.

[Duffer1231]

@abnu ,

Thanks for the quick response…

[ViCoX_1]

Hi,

For the Canvas 3D object it would be nice to get “stretch” option. (match width and height) I bought the asset thinking it would do that basically - now I have to do my own implementation.

[abnu]

Hi,
the reason that “stretch” is not an option is that you’re trying to find an appropriate size for a 3D object (the mesh) to fit into a 2D rectangle. But there is no natural way to determine the scale in the third (z-dimension). The Canvas Element 3D has a function called “calculateScaleFactor” which will return a Vector 2, x will be the scale to fit the width of the rect transform, y will be the scale to fit the height of the rect transform but z has to be determined by you. You could for example take either the x scale or the y scale or the average of the two.