(UI Update 4.0) Flexalon 3D & UILayouts - arrange your objects in circles, grids, spirals, and more!

Hello Unity Devs!

I’ve been working on a plugin to help Unity developers arrange objects with the power of layout in 3D. The end result is Flexalon 3D & UI Layouts!

UPDATE 4.0 - July 2023

You can now use Flexalon to build UI under a Canvas, animate your layouts, and add click/drag interactions. Learn More.

I've released two new free packages, each containing a subset of Flexalon features:

• Flexalon: UI Layouts - Use the flexible stack layout and grid layout as drop-in replacements for UGUI layout groups.

• Flexalon: 3D Grid Layout - For those that only need the 3D grid layout.

UPDATE 3.2 - 4/26/2023

XR Update 3.2 is now available, bringing built-in interaction support for Oculus Interaction SDK and XR Interaction Toolkit! See the release notes and enjoy the new showreel.

UPDATE 3.0 - 2/20/2023

Version 3.0 includes customer requested features such as infinite curves, 3D grids, and more! See the release notes.

FLEXALON TEMPLATE PACK (FREE!) - 12/12/2022

I made some fun little templates to demonstrate Flexalon's layout and interaction features. This new template pack is meant to help Flexalon users get going more quickly, with 16 examples to study from and copy into their scenes. The pack is FREE for Flexalon users. Hope you like it! Get it at https://www.flexalon.com/templates.

UPDATE 2.0 - 12/5/2022

Version 2.0 is published to the Asset Store and contains all new layouts like the Shape Layout, interactables, and more! See the release notes. Here's a quick video:

FLEXALON 3D LAYOUTS

I believe layout is about more than making 2D UI - it’s a way of designing your content that is faster, more precise, and easy to update. Hopefully this video gives you some ideas on how 3D layout components can be used for world building, in-game effects, motion graphics, 3D user interfaces, and more.

KEY FEATURES:

• 7 Layouts (Flexible, Grid, Circle/Spiral, Curve, Shape, Align, Random)
• Constraints to attach objects together
• 3 Animators (Curve, Lerp, Rigid Body)
• Interactable Component lets users click+drag objects between layouts.
  
• Cloner and Data Binding
• Modular Design - Create custom layouts and adapters
  
• See more details on the asset store page or website.

LINKS:

• Asset Store
• Website
• Tutorial
• Documentation
• Playground
• Discord
  
• Examples Repo

For any questions, feedback, feature requests, and bug reports please post on discord.

 

Looks really nice, good work! The playground is also a great way to test without buying.

Have you tested on any VR headsets such as the Oculus Quest?

 

Yes - I've tested on the Oculus Quest 2 specifically. Generally, there isn't anything platform specific about the core components. There are some sample scenes in the package that expect you to interact with a mouse or touch screen such as the the drag-and-drop and data binding examples. I'm considering making something like a VR drag-and-drop demo, if there's interest from the VR devs.

 

Thanks for clarification. I saw your username "vr hacker" and thought you might have put some extra effort into making this specifically for the niche VR devs

 

Yep, I have a background in AR/VR development but felt that this package should be for a more general audience. Looking forward to making AR/VR packages in the future as the developer community grows

 

I've been working on a new update for Flexalon which includes new layouts, new options, and templates to get you going quickly. Here's an example of the new shape layout and some new circle layout options.

 

Update 2.0 is published to the Asset Store! It contains all new layouts like the Shape Layout, interactables, and more! See the release notes. I'll post some clips to show the new features. First up, here's some holiday spirit created with the new Spiral Layout's Radius Step option:

 

Another new feature in update 2.0 is Interactables, which let users add, remove, and reorder objects in layouts.

 

A developer requested the new shape layout feature to help create a crowd running games. The characters can move together in a hexagonal pattern that grows from the center.

 

I made some fun little templates to demonstrate Flexalon's layout and interaction features. This new template pack is meant to help Flexalon users get going more quickly, with 16 examples to study from and copy into their scenes. The pack is FREE for Flexalon users. Hope you like it! Get it at https://www.flexalon.com/templates.

 

For anyone interested, Flexalon 3D Layouts is part of Unity's New Year Sale. You can get it it 50% off here.

 

Here's a "bulletin board" prototype I made for a customer who is trying to create an interactive AR experience.

How it works:
1. A Flexalon Grid Component is placed on the board, The grid is filled with empty gameObjects.
2. A Flexalon Interactable is added to each of the objects to make them draggable.
3. A Flexalon Constraint is also added to each object so that it can be constrained to the empty gameObjects.
4. A simple script registers for the OnDragEnd evetn on the Flexalon Interactable and then searches for the nearest empty gameObject that would place the object on the board without overlapping another object.
5. The script assigns the constraint target of the object to the chosen empty gameObject.
6. Flexalon Lerp Animators are used to make everything look smooth.

Hope this sparks some creative ideas!

 

This looks amazing. I'm a VR dev and am considering purchasing it to use with the Quest 2 specifically.

 

Was looking for an asset or my tile-based environments that could produce similar effects as the game Please Fix the Road. I think your asset is the closest solution I'll find. And it's on sale!

 

Has anyone gotten this to work with VR?
Flexalon Interactable is clearly made for working with a mouse and errors out with [Screen position out of view frustum].
I'm looking to make something like the bulletin board above.

 

Hi skidvis, Flexalon's layout components can be used on any platform, and have been tested to work on Quest 2. Flexalon Interactable can also be used on all platforms, but as you correctly pointed out, will only work with mouse or touch screen out of the box. To support other input types, you can implement a custom input provider. This allows you to specify when and how Flexalon Interactable should perform raycasts. I use a custom input provider during development for automated testing. I would be very interested to know if someone can make it work for VR controllers, gamepads, or other input devices.

There are two benefits of using Flexalon Interactable:
1. It can preform drag and drop, with various options for constraints and bounds.
2. It has logic to dynamically insert, swap, and remove objects from a layouts during the drag.

The bulletin board prototype above only uses the first benefit (drag and drop). It uses a custom script to determine which cell of the Flexalon Grid Layout to attach the object when the drag ends. This script deals with the added complexity of preventing overlaps and positions that leave the object hanging off the grid. Shoot me a support email if you want access to the prototype script.

 

Gotcha, thanks!
I was able to make Interactable work in VR by creating a Custom Input.



It would be nice if it didn't require a raycast and would respond similarly with rigidbodies, that way I could physically pick up the item and it would respect the constraints, so I could manually reorder books by picking them up.

This is a really great asset though and I will definitely find a use for it.

 

Hey, just bought your asset, looks great so far but I have a question: is there a way to look at the chess game example from the video? Working on a board game and could really use it.

 

That's great, thanks for sharing!

Can you tell me a bit more about your requirements? The raycast is primarily used to determine which object to start moving and where to move it to. How do you see this becoming more flexible?

 

Thanks for your support! The scene from the video is pretty messy, so I haven't published it. This video describes what's happening at a high level:

To replicate just the chessboard, you could:

• Create an 8x8 Flexalon Grid Layout to place the board tiles. You can either:
  • Set the grid layout size to "Layout" and have fixed size tiles. This is the default option.
  • Set the grid layout size "Fixed" and the tile width/depth to "Fill". This will make the tiles expand to fill your fixed board size.
• In the video, I created two additional grid layouts: one for white pieces and one for black pieces. The pieces come from here: https://assetstore.unity.com/packages/3d/props/2d-3d-chess-pack-93915
  • I used Flexalon Constraint to place each of these grids top of the grid with the tiles.
  • But, if I was making a chess game I would not use additional grids for the pieces. Instead, I'd use a Flexalon Constraint on each each piece to constrain it to the top of the tile that it's supposed to be on. I think that would make it easier to move the pieces around the board, as all you have to do is change which tile the piece is constrained to.
• Add Flexalon Lerp Animators or Flexalon Curve Animators to the chess pieces to move them smoothly around the board. In the video, I use Flexalon Rigid Body Animators because I want the fancy physics effects, but it's more complicated to use if you don't need that effect.

Let me know if you have questions. I'd love to learn more about your board game project and how Flexalon can help if you're willing to share.

 

I was thinking along the same lines - grid layout filled with empty game objects that would act as constraint targets for pieces but do I understand correctly that I will have to maintain the map (x, y) => transform (inside layout) manually? I mean: there is no way to get child element from GridLayout by row/column?

 

There isn't, but it's easy to add. I'll can add a helper method it in an update, but for now, you can use something like this:

Code (csharp):

1.  
2.         public static Transform GetChildTransform(FlexalonGridLayout grid, uint row, uint column)
3.         {
4.             var index = (int)(row * grid.Columns + column);
5.             return grid.transform.GetChild(index);
6.         }
7.  

 

that is exactly what I did still, the thing I miss most atm is runtime API docs

 

Hi, I have another issue: I am trying to arrange bunch of boxes in a row, I went for flexible layout, now:
1. no matter which of *Align or *InnerAlign I choose, boxes inside are always arranged the exact same way - centered on main axis, I want them to start at the position of the layout and just arrange in just +X
2. It seems FlexalonObject Width/Height/Depth Component option only looks for Colliders / MeshRenderes directly on the owning gameObject and not in the children. My Views always start with root GO having a script, then only contains meshes / colliders in child objects.

 

1. Change the size type on the Flexalon Object next to the flexible layout component to "Fixed" to prevent it from changing when more children are added. Then the Align options will align your objects within that fixed size. The Inner Align options only take effect if the objects are different sizes.

2. You have couple of options here. First, you can set a Flexalon Object's size to "Fixed" and manually specify a size for the root object. Second, you can write a custom adapter that lets you tell Flexalon what the component size should be. The benefit of the second option is that you can let Flexalon automatically size one axis and dynamically calculate the other axis. An example of this is an image, where you might want to let Flexalon to set the width, but make sure the height maintains the aspect ratio of the image. Learn more about adapters here.

You can try out this adapter I wrote for this demo which computes the size by aggregating children's mesh sizes.

FlexalonBoundsAggregator.cs
FlexalonBoundsAggregatorEditor.cs

Hope that helps!

 

Hello
Building a constraint system to make creatures like in a game Flow or Rain World and came across this. Is this system useful for something like that? I mean wiggly bodies out of points, tails, ropes,etc. The jiggly constraints maybe like in Tower of Goo for example.
Im seeing the wiggle motion with the rigidbody controller, but want to ask before purchase anyway. My approach was spring joints and am trying it with verlet integration examples, trying to learn force directed graphs, but this solution looks like its just what i need.Not trying to make softbodies or any fancy stuff, just need performance and easy to work with library.
keep it up and take care
Sorry for the confused post, im an artist...

 

Interesting question! I have not tried something like this before, but Flexalon might be able to help. Flexalon exclusively deals with positioning gameObjects. The two ways I see Flexalon helping are:

• You can use Flexalon Constraints to bind objects together. This component will make sure one object follows another at some fixed offset. See this example.
  • If your creature is composed in some pattern like a grid, stack, circle, or shape, or curve, you can use a Flexalon Layout instead of a constraint to position all of the pieces.
• Flexalon Animators will make the objects move from position to position smoothly. The rigid body animator might be best if you're looking for wiggly motion, since it is using physics forces to push the objects into place. Scroll down to the template 11 example here.

One caveat is that Flexalon doesn't have hinge constraints (yet). If you need that, I wonder if Unity's built in Joints or Articulations can help you.

 

thanks a lot, i cant resist trying it out. can the animator be used with rigidbody2d?

 

No, but it's is just an embarrassing oversight on my part. Here is a Rigid Body 2D animator that you can use. I will add it to the next update.

Flexalon Rigid Body 2D Animator

 

,didnt want to put You to work ,
ok,i still didnt purchase,need to get to calm place to test everything.Im sorry for the confused questions, i was just looking how "force directed graph" is made and found this. I understand the main difference is that in force graphs and tower of goo and so on its objects constraint between each other.Maybe this could be used for it,idk,i want to try it and maybe i come up with some unexpected use cases.If not,i love it just for the formations it can do. Keep it up, already love this tool

edit, heres pretty simple example on the force directed graph i mean. bet many people look for this function.Maybe,but really just maybe its something flexalon could be used for too
https://github.com/omar-addam/Force-Directed-Graph

 

Hey, another question: is there a way to use FlexalonCloner in Edit mode?

 

Sorry, I missed this question - not sure why the Unity forums don't alert me consistently :/

I originally had a version of the cloner that did this, but it had some issues. First, when I instantiate a prefab, it doesn't retain the prefab connection. It's not clear what should happen when you edit the prefab - should the cloner re-instantiate? Will that cause a scene edit that you need to save?

Second, I wasn't sure what to do if you use a data source. In many cases, the data is only available at runtime. Even if it isn't, your Data Binding implementation would need to deal with running in edit mode (which is hard).

Happy to revisit this if it's useful. What's your use case?

 

Dev Update! (Work in Progress)

I've been making steady progress on a new update for Flexalon 3D Layouts.

I'm also very excited about a brand new asset coming soon called Proxima Web Inspector. Read all about that here: https://forum.unity.com/threads/1358276

Back to the Flexalon update. Here's what you can expect coming soon, hopefully in January.

• New options to Curve Layout let you extend the curve infinitely before the start or after the end.
• New "Overflow Type" option for Grid Layout lets you create a 3D grid.
• New "Cell Size" option for Grid Layout lets you specify how big the grid cells should be. The current option to automatically compute the cell size will still be an option.
  
• New Flexalon Grid Cell component lets you specify which grid cell a child should be in.
• Flexalon Rigid Body 2D Animator for... Rigid Body 2D!
• Autogenerated API docs coming to the website.
• And of course, some bug fixes.

Let me know what else you'd like to see in the future, and as always thank you for your support!

 

This last post is very good news about the new things to be added

Thanks yendou for already asking for rigidbody 2D as I was also thinking the same that It would be very good to have It too

Will be waiting for It thanks very much and wish you allí the best

 

Flexalon 3D Layouts is part of Unity's Lunar New Year Mega Bundle. It's effectively 94% off, so if you're interested in any of the other assets, this is a great deal!

 

@virtualmaker I bought the bundle with 44.99 layer, but Flexalon 3D is not included. Can you have a look why it is?

 

I don’t have much data or control on my end, so you should try contacting Unity support. Check if you have access to the other assets in the 44.99 tier by visiting their store pages. Normally, if you own Flexalon you should be able to sign in and download it here: https://u3d.as/2U8Z

 

Hi everyone, I've started a new github repository to post examples for Flexalon. The first example is the bulletin board example I posted a video of before. Let me know what else you would like to see!

https://github.com/afarchy/flexalon-examples

 

One of the new features coming to Flexalon 3.0 is to specify what happens when objects are placed beyond the ends of a curve layout. The new options are to ping-pong back and forth or extend infinitely in a line, repeated pattern, or repeated mirror pattern. This is an example of the repeated mirror.

 

Here's a demonstration of 3D grids coming in Update 3.0:

 

Hello, I have seen that it has been released and available the version 3.0 with 3D grids and other cool and possible interesting features and I will test it myself and see how it works

Well done the video trailer of 3.0, I have to say that although in the video you only see cubes, they are not clones and as far as I know you can have any kind of objects

The interactables thing is surely something awesome that nobody else have done in any other 3D software at least that I know

I surely recommend it to buy it as it is very good and well done and even more if it is on sale as it is now.

Thanks really very much for the 3.0 update and I wish you all the best and that many people buy and use it

 

Hello! I've been very excited to try out Flexalon!

But in my first test, using a Flexible Layout object, every time I try to change an aspect of the layout, the scales of my objects get changed. Is there a way to prevent that? I can't find any mention of that in your docs.

I tried to change the Scale on the Flexalon Object component in the parent object containing all the children object I want to organize, and that works if all my objects are at the same scale, but:
1) My objects are NOT all at the same scale/
2) Every time I want to put an object into a layout, I have to resize it and set that size in the Flexalon Object component.
3) My "gap" seems to scale with the Flexible Layout Object, which makes sense. But I don't want to scale my gap when I change it; I just want to put in the actual gap value.

Is there a way I can just drop objects as they are into the Flexible Layout object, and have the layout ... just do the layout?

Thanks!

(I'm using Unity 2020.3.43f1.)

 

Thanks for using Flexalon!

To maintain the scale of objects in a layout, add Flexalon Object components to those objects. Then you can either modify the scale value on those components or change the size type to Fixed and change the size of each object.

 

Flexalon Update 3.0 is here! Here's a video show casing some of the new features, and some release notes below!

Examples in this video are available at: https://github.com/afarchy/flexalon-examples

Grid Layout

• Added a new 'Layers' property to create 3D grids.
• Added a new 'FlexalonGridCell' component to specify which cell an object should be placed.
• Added a new 'Cell Size' property to specify a fixed cell size instead of dividing the grid size.
• Added new helper functions to retrive children in a grid column/row/layer.

Curve Layout

• Added new 'BeforeStart' and 'AfterEnd' properties to create infinite curves:
• Ping Pong: Extend the curve by continuing in the opposite direction.
• Extend Line: Extend the curve in a straight line based on the tangent at the start/end of the curve.
• Repeat: Extend the curve by repeating the curve.
• Repeat Mirror: Extend the curve by mirroring the curve and repeating it.

Interactable

• Added a new 'Collider' property to specify a different collider object for click/drag.
• Added a new 'Margin' property to FlexalonDragTarget which increases the size of the target.

FlexalonRigidBodyAnimator

• Added support for RigidBody2D.

Scripting API docs are now available at flexalon.com/docs/api

Read the release notes to see all fixes and changes.

While you're there, please consider writing a review to help spread the word on Flexalon. For those who have already done so, thank you very much. Your support is deeply appreciated!

I hope these updates help you in your projects. As always, let me know what you think and what else you'd like to see.

 

@virtualmaker - Just want to say how amazing this asset is and thank you so much for putting in the effort. I have bought it but wondering if you have tried it with VR headsets and manipulating objects with the input system via vr controllers? I am looking to use it to move items around a virtual desk either with hands directly or controller rays Using oculus sdk, input system and opener backend.

 

Thanks for the support @TimGM. Several people have asked about VR, so I'll think about focusing on it for a future update. For now, take a look at skidvis' question and the replies here: https://forum.unity.com/posts/8693577

 

I've updated the examples repo with the examples in the Update 3.0 video: https://github.com/afarchy/flexalon-examples

 

Hi everyone, I'm experimenting with using Discord for chat and support for Flexalon. This is a great place to post your questions, ask about new features, and share your wonderful creations.

I'll still be posting and monitoring this forum, but come visit the discord if you want to chat!

Discord Invite: https://discord.gg/VM9cWJ9rjH

 

Hi everyone, I'm excited to announce that my newest asset Proxima Inspector was released today on the Unity asset store! Proxima lets you inspect and edit gameObjects in a built game from your web browser.

Here's the forum post where you can check it out: https://forum.unity.com/threads/1410093/

Thank you for supporting me as an asset developer!