Search Unity

  1. Unity 2019.1 beta is now available.
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. We're looking for insight from anyone who has experience with game testing to help us better Unity. Take our survey here. If chosen to participate you'll be entered into a sweepstake to win an Amazon gift card.
    Dismiss Notice
  4. On February 28th the Feedback website will shut down and be redirected to the Unity forums. See the full post for more information.
    Dismiss Notice
  5. Want to provide direct feedback to the Unity team? Join the Unity Advisory Panel.
    Dismiss Notice
  6. Unity 2018.3 is now released.
    Dismiss Notice
  7. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice

Assets [RELEASED] Dynamic Panels - draggable, resizable, dockable and stackable UI panels

Discussion in 'Works In Progress' started by yasirkula, Mar 22, 2018.

  1. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    Hi there,

    This asset helps you create dynamic panels using Unity's UI system. These panels can be dragged around, resized, docked to canvas edges or to one another and stacked next to each other as separate tabs.

    Features
    • Supports all canvas modes (Screen Space and World Space)
    • Supports multiple canvases (panels can be moved between canvases by dragging)
    • Has an extensive Scripting API to create/manipulate panels by code
    • Each panel costs 3 additional batches (this number can increase with each tab using a custom icon)
    Asset Store: https://www.assetstore.unity3d.com/en/#!/content/114126
    Also available at: https://github.com/yasirkula/UnityDynamicPanels
    WebGL demo: http://yasirkula.net/DynamicPanelsDemo/




    (used external assets in screenshots: In-game Debug Console and Runtime Inspector & Hierarchy)

    Enjoy!
     
    Last edited: Apr 6, 2018
    Roni92pl, mons00n, Mauri and 4 others like this.
  2. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    Now available on GitHub! Don't forget to check out the WebGL demo.
     
    Grenqa and demock like this.
  3. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    Now available on Asset Store!
     
    Grenqa and demock like this.
  4. Grenqa

    Grenqa

    Joined:
    Jun 6, 2018
    Posts:
    5
    Wow! Thats really cool! Thank you. Maybe i will use this in my project
     
    yasirkula likes this.
  5. dpizzle

    dpizzle

    Joined:
    Feb 2, 2013
    Posts:
    24
    Excellent asset, you should charge for it! I think I found a bug though. Open up the demo scene and try to drag a tab so it sits next to the blue tab. Not possible. Tried several Unity versions, happens both in editor and export. Curiously, your webgl demo does not suffer from this issue, maybe you made some updates since building that.
     
  6. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    That's because the canvas anchor zone obscures that panel's tabs. You can e.g. decrease CanvasLeft's "Canvas Anchor Zone Length" to 15 to eliminate this issue.
     
  7. DevTeamIW

    DevTeamIW

    Joined:
    Jul 9, 2018
    Posts:
    4
    Veryyy wonderfull asset !
    Just one question, is it possible to delete the default free space on Docked Panels ? I won't have free space, only panel. I tried to set Minimum free space to 0 but it keep the free space.
     
  8. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    You can add
    dummyPanel.Detach();
    to the end of the DynamicPanelsCanvas.Start function.
     
  9. DevTeamIW

    DevTeamIW

    Joined:
    Jul 9, 2018
    Posts:
    4
    You are a genious ! Thank for you reply.
     
    yasirkula likes this.
  10. SweatyChair

    SweatyChair

    Joined:
    Feb 15, 2016
    Posts:
    95
    Thanks for the great plugin and it's a good fit into our game!

    There's 2 features we really want and see if you can implement them, please:
    1. Add a default size setting for tab: the tab is first shown as the default size. (e.g. min width 300 and default width 600) (I looked into the code and it seems not as easy as it sounds)
    2. Persistent - all positions and sizes of tabs and tab groups are saved and recovered after each game exit / scene swtich.
     
    Last edited: Nov 19, 2018
  11. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    Hi! As you said, there is no default size per tab but it is possible to set the default size of a panel via its FloatingSize property. Tabs detached from that panel will inherit their FloatingSize values from that panel, as well. Currently, for a more complex control over the tabs' sizes, you can register to the PanelNotificationCenter.OnPanelCreated event, check the content of the panel and then set the panel's FloatingSize value accordingly.

    To be able to serialize/deserialize the panels' properties sounds like a useful idea. I'll see what I can do.
     
    SweatyChair likes this.
  12. AGaballo

    AGaballo

    Joined:
    Dec 10, 2018
    Posts:
    3
    Is there a way to customize the pane's tab aspect? For example editing the color, the font etc.
    To give you a real example, I have a round image in my panel and I'd like to keep the transparency so I can see the panel below.
     
    Last edited: Dec 11, 2018
  13. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    Are you trying to make only one tab's background transparent? If so, there is currently no way to do that. Otherwise, you can simply make changes to the prefab(s) located inside the Resources subdirectory.
     
  14. AGaballo

    AGaballo

    Joined:
    Dec 10, 2018
    Posts:
    3
    When you say only one tab you mean a single tab in a group or a panel in general? Because probably I only need one of the panel to be transparent but I could live with all the others being the same.
    Another question, is it possible to customize also the tab title bar (e.g changing the color, extending it to the whole panel width)?
     
  15. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    I meant a single tab in a group. The problem with making only a single tab/panel transparent is that, when you detach all tabs from that panel, it will automatically get destroyed. So you should change the DynamicPanel prefab instead.

    Tab title bar prefab is named DynamicPanelTab. You can adjust it as you wish to change the background color or the text color. To extend a tab to the whole panel width, you can enable the DynamicPanel prefab's PanelHeader-Horizontal Layout Group-Child Force Expand Width property.
     
    AGaballo likes this.
  16. AGaballo

    AGaballo

    Joined:
    Dec 10, 2018
    Posts:
    3
    Thank you! One last thing, how do I deactivate a panel from the script API? I tried SetActivate but I get :
    `DynamicPanels.Panel` does not contain a definition for `SetActive`
     
  17. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    Simply calling
    panel.gameObject.SetActive
    should do the trick.
     
    AGaballo likes this.
  18. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    @SweatyChair I'd like you to know that, despite my long inactivity, I didn't forget about the persistency feature request and am working on a way to serialize the panels. I've made quite some progress already.
     
    SweatyChair likes this.
  19. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    @SweatyChair I've attached an updated version of the plugin.

    After importing the unitypackage to your project, you should add DynamicPanelsSerialization component to an object in your scene and populate its fields. You shouldn't change the order of the panels in DynamicPanelsSerialization's Panels variable because serialization system depends on this order; the same goes for the canvases, as well.

    Now, you can call the Serialize/Deserialize functions of DynamicPanelsSerialization to save/load the panels via PlayerPrefs. Or, you can use SerializeToArray/DeserializeFromArray functions to save/load the serialized data via a custom medium.

    PROTIP: Simply uncomment the DynamicPanelsSerialization.Update function to quickly test the system.
     

    Attached Files:

  20. SweatyChair

    SweatyChair

    Joined:
    Feb 15, 2016
    Posts:
    95
    Sweet~ I try to test it within these two days when I have time!
    Once it's working, I believe it can be sell for $10+ and people would still love it.
     
  21. mleeShearwater

    mleeShearwater

    Joined:
    Aug 14, 2017
    Posts:
    2
    Hi YasirKula,

    Your work is amazing! Thanks so much for providing this, it's exactly what we need!
    Cheers!
     
    yasirkula likes this.
  22. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    756
    Just updated the asset on GitHub: https://github.com/yasirkula/UnityDynamicPanels

    Asset Store version will be updated soon. Here's the changelog:
    • Added PanelSerialization for runtime serialization (it is simpler to use than the temporary solution I've posted in my previous message)
    • Added an option to completely remove the free space from the canvas
    • Added initial size property to docked panels
    • Exposed PanelTab class for modifying tabs
    NOTE: after upgrading your project, it is recommended that you save your scene(s) with dynamic panels at least once for the IDs of the tabs and the canvases to be serialized (needed by PanelSerialization).