Search Unity

kissUI - A Simple UI Builder

Discussion in 'Assets and Asset Store' started by IzzySoft, Jun 5, 2015.

  1. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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.
     
    Last edited: Feb 8, 2017
    MODev, Laicasaane, zwcloud and 2 others like this.
  2. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    Just finished making this Intro to kissUI Basics video, part 1.



    Enjoy. :)
     
    Last edited: Jun 10, 2015
  3. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    Finished making this Intro to kissUI Basics video, part 2.


    Enjoy,
    Izzy. :)
     
  4. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    I got a response from Unity...



    Ohhh... No More Details? :(
     
  5. MaxEden

    MaxEden

    Joined:
    Jun 22, 2013
    Posts:
    73
    Looks powerful, maybe it conflicts with uGUI? I would contact the support to make it clear.
     
  6. kilik128

    kilik128

    Joined:
    Jul 15, 2013
    Posts:
    880
    it's always hard to be decline with no information about why
     
  7. dizzymediainc

    dizzymediainc

    Joined:
    Apr 6, 2014
    Posts:
    112
    Looks like you are using iPhone buttons in your design, that's probably the major reason for your asset being denied.
     
  8. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    Getting Started PDF available Here.
     
    IndieAner3d likes this.
  9. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    just testing extra Toolbars at the bottom/top in the Scene view.

     
  10. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    version 0.1.0.4 is rdy for DL. ;)
     
  11. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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. :p

    etc...
    more to come...

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

    Thanks,
    Izzy.
     
    Last edited: Jan 18, 2016
  12. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
  13. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    Last edited: Mar 17, 2016
  14. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    Version 0.1.5 is ready for Download. ;)
    See Original Post at the top.
     
    manpower13 likes this.
  15. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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.
     
    Last edited: May 31, 2016
  16. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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.
    ...
     
    Last edited: Apr 6, 2016
  17. EliasMasche

    EliasMasche

    Joined:
    Jul 11, 2014
    Posts:
    91
    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.
     
  18. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    Thank you. Any constructive feedback is welcome, as its still in development, but in the second phase now. ;)
     
    EliasMasche likes this.
  19. EliasMasche

    EliasMasche

    Joined:
    Jul 11, 2014
    Posts:
    91
    Great, any time i start i will start leaving some feedback.
     
  20. inovatio

    inovatio

    Joined:
    Feb 15, 2016
    Posts:
    3
    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. :)
     
    IzzySoft likes this.
  21. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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. :p

    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.  
     
    Last edited: Mar 16, 2016
    inovatio likes this.
  22. inovatio

    inovatio

    Joined:
    Feb 15, 2016
    Posts:
    3
    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.
     
  23. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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. :p

    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.  
     
    Last edited: Mar 17, 2016
  24. Linus

    Linus

    Joined:
    Feb 22, 2012
    Posts:
    108
    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.  
     
    IzzySoft likes this.
  25. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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. :p

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

    Linus

    Joined:
    Feb 22, 2012
    Posts:
    108
    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.
     
    IzzySoft likes this.
  27. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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. :)
     
    Last edited: Jun 19, 2016
  28. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    in ver 0.1.5.2, I also Added:


    :)
     
  29. Linus

    Linus

    Joined:
    Feb 22, 2012
    Posts:
    108
    Thanks!
    I got busy on other areas of the game. But thanks for so fast response. Looking forward to downloading the update
     
    IzzySoft likes this.
  30. IzzySofty

    IzzySofty

    Joined:
    Jul 4, 2016
    Posts:
    19
    Update:
    short intro showing kissUI's features



    :)
     
    manpower13 likes this.
  31. JFI66

    JFI66

    Joined:
    Aug 25, 2015
    Posts:
    29
    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
     
  32. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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. :)
     
  33. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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)
     
  34. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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. :)
     
  35. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    making much progress with Content sizing.

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

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    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. :)
     
  37. IzzySoft

    IzzySoft

    Joined:
    Feb 11, 2013
    Posts:
    376
    Work In Progress:

    Radio Groups can use, but not require, multiple images to act as a single toggle.
     
    Last edited: Sep 16, 2016
    EliasMasche likes this.
  38. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    This is done. Just need to test it. ;)

    ex: Layout - Flowing Columns (and Rows, just not shown in this gif)
     
    Last edited: Dec 27, 2016
  39. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    another example of Flowing Layouts on Toggle controls:

     
  40. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    W.I.P. Record and Playback of User Input

     
    Last edited: Jan 16, 2017
    zwcloud likes this.
  41. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    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. :)
     
  42. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    WIP: Input Handler function parameters now accepts an Enum. ;)

     
    Last edited: Mar 4, 2017
  43. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    WIP: Making a virtual Desktop example. ;)

     
  44. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    Last edited: Mar 11, 2017
  45. metaphysician

    metaphysician

    Joined:
    May 29, 2012
    Posts:
    123
    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.
     
    Izzy2000 likes this.
  46. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    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. :(
     
  47. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    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. :)
     
    Laicasaane likes this.
  48. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    WIP: very crude Text Input

     
  49. Izzy2000

    Izzy2000

    Joined:
    Dec 18, 2013
    Posts:
    49
    manpower13 likes this.
  50. CommunityUS

    CommunityUS

    Joined:
    Sep 2, 2011
    Posts:
    212
    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.
     
unityunity