kissUI - A Simple UI Builder

kissUI
version 0.1.5.5

​

Asset Store: Click to See it in the Asset Store
Alternate Download: Click Here to Download unity package
Package Installation: Watch Instructions (2 minutes)

WebPlayer Demo 1: Desktop (Windows 7'ish)
WebPlayer Demo 2: Drag n Drop (within a ScrollView)
WebPlayer Demo 3: Styling, with Ctrl+Tab Focusing
Getting Started: View PDF Here
Reference Manual: Here (WiP)
Requires Unity Ver: 5.0.2+ Personal... or Pro (w/ Light Skin)


About:

For anyone who wants to Build a UI by...
# adding objects in a Parent / Child setup to the Scene Hierarchy,
# using Rows and Columns to Reposition and Resize children like a table layout might.
# test your UI in the GameView, without having to press Play at all.

Features:

# Create your UI using...
Image, Text, Group, Layout, Camera

# Image State support for...
Normal, Pressed, Hover, Focused, Disabled

# Image State Mirroring...
Pass the images State to other images / texts. (ex: text color can change when hovering over an image)

# Input Handling (w/ Reflection) for...
Mouse, Keyboard, Touch (WIP)

# Multiple Input Handling entries can be added from the Inspector...
- Get values from Variables in any Components,
- Alter those values, then
- Set Variables to the new value.
- As well as, Call Functions in any Components and passing in parameters, using values Saved from previous calls.
- Simple operations can be performed All without needing to create a new User Script.


Screen shots:

​

​

​

​

​

​

​

​

How to use it:

1st, show the Tools and Controls windows from the Menu.
Tools -> kissUI -> Tools, Controls. Any new kiss Object can be created with the kissUI Controls window now just by clicking on the controls. The best way to get up to speed is to sit through tutorial videos and follow along in Unity.

Videos:

Forums shrink video player to 500 x 270. Actual video size is 640 x 360.​

Please post all feedback you might have.
Thank you for trying out kissUI.

 

Just finished making this Intro to kissUI Basics video, part 1.

Enjoy.

 

Finished making this Intro to kissUI Basics video, part 2.

Enjoy,
Izzy.

 

I got a response from Unity...



Ohhh... No More Details?

 

Looks powerful, maybe it conflicts with uGUI? I would contact the support to make it clear.

 

it's always hard to be decline with no information about why

 

Looks like you are using iPhone buttons in your design, that's probably the major reason for your asset being denied.

 

Getting Started PDF available Here.

 

just testing extra Toolbars at the bottom/top in the Scene view.

 

version 0.1.0.4 is rdy for DL.

 

quick update:

Adding things like.. a Toolbox, where you can drag and Drop structures from the scenes Hierarchy view... and its automagically made into a reusable control from then on.



also.. small icons for each of the sub-sections for a control in the Inspector view:


(tabbed on the right is a Hint for whats the values are/is for the most used settings)

preferences now uses the same style as the Inspector views...
(which also animates Expand/Collapse of a sub-section too)


Scene view Toolbar 2, has Zoom to Fit, and Zoom to 1x... which zooms the scene view to an almost* pixel perfect representation of what the Game view is.

very very close... 99.9% accurate. Yes, 100% is very difficult. :/
also, Outlines dropdown lets you pick which immediate objects it should draw an outline for, in relation to the currently selected object of course.

example of using a kiss Image style:

and changing it to another style:

when possible, almost all fields can be overridden to use, or not to use, Style settings.


just by right clicking a label field for an entry, and changing the 'Is Styled' option from the context menu. Hmm.. kinda reminds me a little of css.

etc...
more to come...

Can't predict exactly when the next iteration will be released, but it's kinda Soon.

Thanks,
Izzy.

 

super quick webplayer demo of Drag n Drop.

ex:

link: http://kissui.izzysoft.com/Examples/WebPlayer003.html

also user can middle press and drag on the green background to Pan the scrollview.

 

super simple style switching... very basic atm.

webplayer demo: http://kissui.izzysoft.com/Examples/Styles101.html

 

Version 0.1.5 is ready for Download.
See Original Post at the top.

 

Working on Tabbing between Window panels.



I have a rough example here:
WebPlayer Demo: http://kissui.izzysoft.com/Examples/FocusGroup 401.html

Usage:
Press Tab to switch the focus to the next control.
Press Ctrl + Tab to switch the focus to the Next Window.

For either of those two, hold Shift also to go Backwards through the list of Controls or Window panels.

 

Update: version 0.1.5.1

Fixes:
- SceneView: Camera Handles work now when Width/Height are set to CustomSize.

Added:
- UI Styles example now shows how Focus Groups works with Ctrl + Tabbing.
..and webplayer demo of example: http://kissui.izzysoft.com/Examples/FocusStyles101.html

ToDo List:
- A screencast video showing how to setup Style Switching.
...

 

Great that this Open Asset and free still alive. When i got to start working in the UI for my project, I'll give a try to your UI builder.

 

Thank you. Any constructive feedback is welcome, as its still in development, but in the second phase now.

 

Great, any time i start i will start leaving some feedback.

 

Hello,
Whoo that seem a very good work !

But...
To test KissUI, I create a new project under the last version of Unity and I just add KissUI.

Just after, when I want to begin to use it, I have this error :

System.NullReferenceException: Object reference not set to an instance of an object
at kissUtilityEditor+ForAssemblyReload..cctor () [0x00000] in <filename unknown>:0
UnityEditor.EditorAssemblies:SetLoadedEditorAssemblies(Assembly[])




What's Happen ?


More, I try to use the drag & drop scene. I add more "Drag Source" and when I drag and drop to an area occuped by an other "Drag Source", they are together... like 2 layers.
You haden't develop a function to block that or to switch ? Or I do a mistake ?


Your work seems to be exactly that I need... Thanks to help me please.

 

hello inovatio,

thank you for trying kissUI.

I have to admit that I'm guilty of not trying kissUI in the latest version of Unity3D yet. I'm still afraid of all the user reported bugs. Maybe I'll try it in this release. Less complaints now.

Multiple Drag Sources?
Sorry, I haven't added any code yet to check if a Drop Target already has a Drag Source as a Child.

This should Check it:

Code (CSharp):

1.  
2. using UnityEngine;
3. using kissUI;
4.  
5. [ExecuteInEditMode]
6. public class ReparentSourceOnMouseDrop : MonoBehaviour
7. {
8.     kissImage _img = null;
9.  
10.  
11.     // ---- Unity Events ----
12.  
13.     void OnEnable()
14.     {
15.         _img = GetComponent< kissImage >();
16.      
17.         if( _img != null )
18.         {
19.             _img.OnMouseDrop += onMouseDrop;
20.         }
21.     }
22.  
23.     void OnDisable()
24.     {
25.         if( _img != null )
26.         {
27.             _img.OnMouseDrop -= onMouseDrop;
28.         }
29.     }
30.  
31.  
32.     // ---- kissUI Events ----
33.  
34.     public void onMouseDrop( kissImage imgDropTarget, kissMouseButton Btn, kissModifier KeyMod, Vector2 Pos, kissImage imgSource )
35.     {
36.         //Debug.Log( "ReparentSourceOnMouseDrop:   onMouseDrop()", imgDropTarget );
37.  
38.         bool hasDragSource = HasDragSource( imgDropTarget );
39.         if( hasDragSource )
40.         {
41.             Debug.Log( "This Drop Target already has a Drag Source.  Aborting Drop!", imgDropTarget );
42.             return;
43.         }
44.  
45.         SiblingToFront s2f = imgSource.GetComponentInParent< SiblingToFront >();
46.         if( s2f != null )
47.             s2f.RemoveMouseDownHandlerFor( imgSource );
48.  
49.         imgSource.PosOffset = new Vector3( 0f, 0f, -.1f );
50.         imgSource.ParentTo( imgDropTarget );
51.  
52.         s2f = imgSource.GetComponentInParent< SiblingToFront >();
53.         if( s2f != null )
54.         {
55.             s2f.AddMouseDownHandlerFor( imgSource );
56.             kissObject s2f_ko = s2f.GetComponent< kissObject >();
57.  
58.             if( s2f_ko != null )
59.                 s2f_ko.SetSiblingToLast();
60.         }
61.      
62.     }
63.  
64.     // ---- Other Funcs ----
65.  
66.     bool HasDragSource( kissImage imgDropTarget )
67.     {
68.         bool hasDragSource = false;
69.  
70.         for( int i = 0; i < imgDropTarget.Node.Children.Count; i++ )
71.         {
72.             kissObject ko = imgDropTarget.Node.Children[ i ].obj;
73.  
74.             if( ko.ObjectType == kissObjectType.Image )
75.             {
76.                 kissImage img = ko as kissImage;
77.                 if( img.DragDropKind == kissImage.DragDropType.DragSource )
78.                 {
79.                     //BINGO! Found One!
80.                     hasDragSource = true;
81.                     break;
82.                 }
83.             }
84.         }
85.  
86.         return hasDragSource;
87.     }
88.  
89. }
90.  
91.  

 

Thank you to answer as soon !

Really you do a good work.
Some little things are not perfect but your work is really impressive and thanks for this new script that worked !
With the time, this UI can be a "Must Have" for lot of people.

An other things. When I use Drag and drop, sometimes when I drag a "DragSource", It moves (float) behind the other instead of move over.
Ideally, the dragged item always above all others...
I don't understand how exaclty is defined this variable in the code.

 

thanks inovatio,

Having the Drag Source always over is not always easy, but there might be ways to do that.
Drag Drop Demo was made very fast (1 day)... and needs more work.

The important thing is the Position Offset (a Vector3), in particular the Depth (z value).


For the Drag Source Image, the EnableHoverOnDropTarget script has a line in the onMouseDown() event:

Code (CSharp):

1. ....
2. imgSelf.PosOffset = new Vector3( imgSelf.PosOffset.x, imgSelf.PosOffset.y, -10f );
3. ...

You most likely need to change z, -10f, to a larger value. Its hardcoded to -10f right now.

And onMouseUp() event it should set the Depth (z) back to "-.1f". Ooops. :]

Code (CSharp):

1.  
2.     public void onMouseUp()
3.     {
4.         //Debug.Log( "onMouseUp()" );
5.  
6.         //bool isMouseOverDropTarget = hi.img_Hit == null ? false : hi.img_Hit.DragDropKind == kissImage.DragDropType.DropTarget;
7.  
8.         //imgSelf.PosOffset = new Vector3( 0f, 0f, imgSelf.PosOffset.z );       //OLD
9.         imgSelf.PosOffset = new Vector3(0f, 0f, -0.1f);                         //NEW
10.  
11.         for( int i = 0; i < dropTarget.Count; i++ )
12.         {
13.             kissImage img = dropTarget[ i ];
14.             kissImageData hoverData = img.StateData[ (int) kissState.Hover ];
15.  
16.             if( hoverData != null )
17.             {
18.                 hoverData.isStateEnabled = false;
19.                 img.ActiveState = kissState.Normal;
20.                 img.Update_State();
21.             }
22.         }
23.     }
24.  

 

Very interesting project.
Any chance you could fix the error for latest version of the editor. Or perhaps have a paid version that includes source code.
I cant use it as is since, the project would be at mercy of you keeping the project updated with latest versions of Unity. But again it seems like a real handy tool.

Code (csharp):

1.  
2. System.NullReferenceException: Object reference not set to an instance of an object
3.   at kissUtilityEditor+ForAssemblyReload..cctor () [0x00000] in <filename unknown>:0
4. UnityEditor.EditorAssemblies:SetLoadedEditorAssemblies(Assembly[])
5.  

 

Sorry about that. I'm almost done with the minor update.
I know i shouldn't ask anyone to download Unity 5.0.2 to try kissUI, but thats what I've been doing.

I know what the issue is and have a Fix... but need a week to release anything.

Issue is with the change Unity Team made to how Prefabs are Initialized... more precisely the Children.. in later versions.

In ver. 5.0.2... the root GameObject for the Prefab is instantiated 1st, Awake(), Start(), etc... then the children under the Prefabs root.

In ver. 5.3.+ (not exactly sure which version), the Prefabs root isnt instantiated 1st. Learned that its no longer like that.

Sorry for the inconvenience. :/
Working on the next update ASAP.

 

Thanks for replying so fast. Would really like to use your system. All example scenes seems to work in 5.3(latest) just that error. From what I could dig up on Google it might be related to Visual Studio, perhaps VS Tools for Unity.

Read in another thread that 5.4 will fix that ancient annoyance of OnEnable() running before Awake() as well. Not tried the 5.4 beta myself. Might be worth noting when doing a lot of UI stuff.

No problem, glad you are still working on the project. It will be real good for UI heavy projects.

 

Submitted an updated version to the Asset Store. Not sure when it will be available from them.

If you cant wait... you can grab the .unitypackage right now from: Here
Create a new project and import it.

Thanks for the feedback. Much appreciated.

 

in ver 0.1.5.2, I also Added:

 

Thanks!
I got busy on other areas of the game. But thanks for so fast response. Looking forward to downloading the update

 

Update:
short intro showing kissUI's features

 

Hello,

this is a very cool project!

Unfortunately, using Unity Version 5.4.0.f3, I get this error:
InvalidCastException: Cannot cast from source type to destination type.
kissUtilityEditor..cctor ()
Rethrow as TypeInitializationException: An exception was thrown by the type initializer for kissUtilityEditor
kissUtilityEditor+ForAssemblyReload.OnEnable ()

I get this, when opening the tools menu and also, when I try to use the example.

Is there a possibility that you release the project with the newest version of Unity?

Thanks a lot in advance and keep up the good work.
Best regards,
Jürgen

 

Sorry, was busy working on a few new features. forgot to check here.

Just downloaded v5.4.0f3, and i see what UT changed. Might take a few days to get these issues sorted out.
Will post here when kissUI ver. 0.1.5.3 is ready.

Thanks for trying out kissUI. Its so much fun working on it.
I hope users have fun using it too.

 

I wonder if anyone would like to have something similar to jQuery's transitions between CSS styles?

ex: (look at the yellow 'Button 1' at the bottom)

 

kissUI ver 0.1.5.3 was updated and pending review. It should work with Unity ver. 5.4.0+.

If you don't want to wait, you can get the .unitypackage here:
http://kissui.izzysoft.com/Downloads/kissUI_2016-08-19.unitypackage

I hope you enjoy playing with kissUI.

 

making much progress with Content sizing.

ex: Upper levels can easily fit to children with Content sizing

 

kissUI ver 0.1.5.4 was updated and pending review.

If you don't want to wait, you can get the .unitypackage here:
http://kissui.izzysoft.com/Downloads/kissUI_2016-08-31.unitypackage

Just completed adding Full support for Multi level Content Sizing.
(animated gif in post above this one, shows how it looks)

I hope you enjoy playing with kissUI.
Thanks.

 

Work In Progress:

Radio Groups can use, but not require, multiple images to act as a single toggle.

 

This is done. Just need to test it.

ex: Layout - Flowing Columns (and Rows, just not shown in this gif)

 

another example of Flowing Layouts on Toggle controls:

 

W.I.P. Record and Playback of User Input

 

kissUI ver 0.1.5.5 was updated and pending review.

If you don't want to wait, you can get the .unitypackage here:
http://kissui.izzysoft.com/Downloads/kissUI_2017-02-08.unitypackage

- Added Demo Recording. Mouse and Keyboard. (just raw events a.t.m.)
- Added Percentages for Sizing. (Width & Height)
- Added Flowing options to the `kiss Layout` object. (so making ListViews is a bit easier)
- Added Radio Groups (Plus, a Radio toggle can consist of many images, and possibly* Multiple states)

I hope you enjoy playing with kissUI.
Thanks.

 

WIP: Input Handler function parameters now accepts an Enum.

 

WIP: Making a virtual Desktop example.

 

kissUI ver 0.1.5.6 was updated and pending review.

If you don't want to wait, you can get the .unitypackage here:
http://kissui.izzysoft.com/Downloads/kissUI_2017-03-11.unitypackage

- Added example scene: 401 Desktop ( WebGL example: http://kissui.izzysoft.com/support/index.php?action=demos;sa=401Desktop )

I hope you enjoy playing with kissUI.
Thanks.

 

question - is it at all possible to create custom Editor Window UIs using kissUI, or is this only Game View based? asking because Editor Inspector customization as well as custom editing windows are currently somewhat difficult to set up in Unity. your product could go pretty far towards helping developers to create usable interfaces for their Editor extensions and such. just curious.

 

hehe... nope. sorry.

There's allot of effort involved to make a nice looking/working Editor Window/Inspector in Unity-Editor, as you mentioned.
It can take years to make something specific, like this:

Not really interested in even trying to do that.
Sry.

 

kissUI ver 0.1.6.0 was updated and pending review.

If you don't want to wait, you can get the .unitypackage here:
http://kissui.izzysoft.com/Downloads/kissUI_2017-03-22.unitypackage

Changes:
- script: kissDemoRec. Recordings use kissInputInfo as Inputs.
- kissUI: kisImage. Events use kissEventInfo as a parameter.

Fixes:
- Minor ones.

I hope you enjoy playing with kissUI.
Thanks.

 

WIP: very crude Text Input

 

LIVE DEMO of Desktop in a browser: http://izzysoft.com/index.php?page=401_Desktop

 

Hi, just a heads up. Links from the free Asset are broke, above link is busted too. I see version 1 here but a version 2 for sale on your site. If linked worked and could try it out, then we can consider purchase more reliably. FYI.