Lean GUI Shapes


DOCUMENTATION

What is Lean GUI Shapes?

Lean GUI Shapes is an extension to Unity's UI system, adding many useful components for drawing UI shapes.

These shapes are procedurally generated based on a few simple settings, reducing texture memory usage, and allow you to quickly iterate different designs.



Does this require Lean GUI?

Nope, Lean GUI is just used for some example scenes.

Feel free to delete it if you don't want to use it!

NOTE  Lean Transition is also not required.


How do I get started?

Simply go through all the demo scenes in the Lean/GUI Shapes/Examples folder!

Most of the demo scenes introduce one new feature at a time, allowing you to clearly understand what is being done.

The description at the bottom also tells you in detail which components or settings were added/changed to achieve the effects seen.

To understand what a specific component setting does, just hover your mouse over it to see the tooltip. You can also click the documentation button at the top right of the component.



How do I make a point?

First you need to add the LeanPoint component to your scene:

METHOD 1 From your menu bar, select GameObject > Lean > GUI > Point.
METHOD 2 Right click inside the Hierarchy window, and go to Lean > GUI > Point.
METHOD 3 Create a new GameObject, and add the component Lean > GUI > Point.

You should now see a new GameObject called 'LeanPoint' with the LeanPoint component selected.

If you want this point to follow a GameObject in the scene, simply drag and drop it into the Anchor setting.

NOTE  The anchored Transform can be in the 2D, 3D, or even in the UI.

Next, you need to add a Graphic to your point GameObject. For example, the Image or LeanBox component.

NOTE  The LeanPoint component takes over the RectTransform component's Position (anchoredPosition) setting.


How do I make a line?

First you need to add the LeanLine component to your scene:

METHOD 1 From your menu bar, select GameObject > Lean > GUI > Line.
METHOD 2 Right click inside the Hierarchy window, and go to Lean > GUI > Line.
METHOD 3 Create a new GameObject, and add the component Lean > GUI > Line.

You should now see a new GameObject called 'LeanLine' with the LeanLine component selected.

If you want this line to follow GameObjects in the scene, simply drag and drop them into the AnchorA and AnchorB settings.

NOTE  The anchored Transforms can be in the 2D, 3D, or even in the UI.

Next, you need to add a Graphic to your line GameObject. For example, the Image or LeanBox component.

NOTE  The LeanLine component takes over the RectTransform component's Height (sizeDelta.y), and Rotation (localRotation) settings.


How do I make a box?

First you need to add the LeanBox component to your scene:

METHOD 1 From your menu bar, select GameObject > Lean > GUI > Box.
METHOD 2 Right click inside the Hierarchy window, and go to Lean > GUI > Box.
METHOD 3 Create a new GameObject, and add the component Lean > GUI > Box.

You should now see a new GameObject called 'LeanBox' with the LeanBox component selected.

That it's, feel free to experiment with its visual settings like Radius!



How do I make a polygon?

First you need to add the LeanPolygon component to your scene:

METHOD 1 From your menu bar, select GameObject > Lean > GUI > Polygon.
METHOD 2 Right click inside the Hierarchy window, and go to Lean > GUI > Polygon.
METHOD 3 Create a new GameObject, and add the component Lean > GUI > Polygon.

You should now see a new GameObject called 'LeanPolygon' with the LeanPolygon component selected.

NOTE  LeanPolygon begins with no points. You can manually populate some from the Points list in the inspector, by setting it to 3 or more.

To edit the polygon shape inside the Scene tab, you can click the 'Edit Points' button in the LeanPolygon component inspector.

MOVE Click and drag a point (green) to move it.
CREATE Click and drag an edge between two points (yellow) to split and move it.
DELETE Click a point (red) to delete it.

This editor works just like the PolygonCollider2D editor.

NOTE  Your polygon points must go Clockwise around the permieter of your shape.
NOTE  Each line between consecutive points in your shape cannot intersect or overlap another line.
NOTE  If you increase the Thickness or Blur values too much, then the generated shape will overlap itself and look incorrect. This can be improved by increasing the distance between points in your shape.






Assets

Here's a list of all my other assets, please check them out!

You can also view this list on my Asset Store page.

Lean Touch

Lean Touch

Rapidly develop your game with consistent input across desktop & mobile using Lean Touch. This lightweight asset comes with many modular components, allowing you to customize them to your exact project needs!


Lean Touch+

Lean Touch+

Lean Touch+ is an extension to the popular Lean Touch asset, adding many more example scenes.


Lean Localization

Lean Localization

Lean Localization is a localization library that's designed to be as simple to use as possible for both designers, and programmers.


Lean Pool

Lean Pool

Quickly optimize the performance of your games using Lean Pool. Within minutes you can use this lightweight asset to preload, recycle, and limit the spawning of your prefabs.


Lean Transition

Lean Transition

Quickly polish your games using Lean Transition. This asset allows you to easily tween or animate almost anything in your game, making it transition smoothly.


Lean GUI

Lean GUI

Lean GUI is a colllection of components that extend Unity's GUI system, allowing you to rapidly enhance the user experience (UX) of your game's UI.


Lean GUI Shapes

Lean GUI Shapes

Lean GUI Shapes allows you to quickly add lines, rounded boxes, polygons, and much more to your GUI!


Lean Texture

Lean Texture

Lean Texture allows you quickly modify textures in your project with a range of filters, pack them together into channels, and much more!


Lean Texture+

Lean Texture+

Lean Texture+ is an extension to Lean Texture, adding many new types of texture modification tools!


CW Spaceships - Build & Destroy

Spaceships - Build & Destroy

Build your dream spaceship, and then have fun destroying it!


Modular Backgrounds

Modular Backgrounds

Unlock a universe of visual possibilities with Modular Backgrounds. Simply drag and drop these graphics into the background of your scenes.


Paint in 3D

Paint in 3D

Paint all your objects using Paint in 3D - both in game, and in editor. All features are optimized with GPU accelerated texture painting, so you can enjoy consistent performance, even if you paint your objects one million times!


Paint in 2D

Paint in 2D

Paint all your sprites with Paint in 2D. With incredible performance on mobile, WebGL, and much more!


Paint in Editor

Paint in Editor

Paint in Editor unlocks the ability to paint objects in your scene - great for making small tweaks, or even creating entirely new texture sets!


FLOW

FLOW

FLOW allows you to add large scale interactive fluids to your scene - all highly optimized using GPU acceleration.


Destructible 2D

Destructible 2D

Unlock the full potential of your 2D games using Destructible 2D, this asset allows you to quickly convert all your boring solid sprites into fully destructible ones!


Space Graphics Toolkit

Space Graphics Toolkit

Quickly make the space scene of your dreams using Space Graphics Toolkit. This huge collection of space effects can be customized and combined in any way you like, allowing you to quickly make realistic or fantasy worlds. Each feature has been heavily optimized to run on almost any device and platform.


Space Graphics Planets

Space Graphics Planets

Enhance your space scenes using this large pack of high detail volumetric planets. These planets are finished using the powerful planet features from Space Graphics Toolkit (not required).


Volumetric Audio

Volumetric Audio

Unity sounds only emanate from a single point source. This is great for explosions and footsteps, but quite often you need something more advanced. Volumetric Audio is an easy to use package that allows you to define boxes, spheres, capsules, paths, or meshes that sounds can emanate from.






Versions

2.1.0

Updated CW/Common code to latest version.



2.0.4

Updated base code.



2.0.3

Moved main build to Unity 2021.3.0f1.
Updated shaders to latest version.



2.0.2

Moved main build to Unity 2020.3.0f1.



2.0.1

Fixed LeanBox corner radius settings breaking when using blur.
Fixed LeanCircle having sharp edges when using blur.



2.0.0

NOTE  This is a massive update. To update you must first back up your project, delete the root Lean folder, then install the new version.

Changed folder structure to be inside Plugins/CW/LeanGUI Shapes.
Updated inspector code to support third party assets that implement nested inspectors.



1.1.3

Fixed transform gizmos not appearing in Unity 2021.2.



1.1.2

Updated base code.



1.1.1

Updated common library code.
Updated base code.



1.1.0

Moved main build to Unity 2019.4.12f1.
Updated base code.



1.0.9

Fixed LeanLine when using Screen Space - Camera rendering.



1.0.8

Added Panel and Circle presets to LeanPolygon.
Fixed LeanPolygon point editing to factor in camera distance.
Fixed shapes not rendering properly in Unity 2020.



1.0.7

Moved main build to Unity 2018.4.13f1.
Added anchor support to LeanPolygon point .zw coords.



1.0.6

Moved main build to Unity 2018.4.0f1.
Updated documentation.
Added asmdef.
Added LeanBox.Inflate setting.
Added Box Inflate demo scene.



1.0.5

Fixed crash when LeanCircle.Detail is 0.
Moved GUI texture to Resources, so it can be packed to reduce batches.



1.0.4

Added LeanCircle component.
Added Circle demo scene.
Added Circle Blur demo scene.
Added Circle Thickness demo scene.
Added Circle Detail demo scene.
Added Circle Fill demo scene.
Added Circle Customize demo scene.
Updated common library code.



1.0.3

Fixed inspector expand buttons in UI Elements.



1.0.2

Fixed bug in LeanHelper.cs that prevents making builds.



1.0.1

Updated Common library code.



1.0.0

Initial release.







Components

LeanAnchor

This class allows you to define an anchor point in the scene based on a Transform and offsets, or a 3D point.

This is used by components like LeanPoint and LeanLine.


Transform
Transform

If you want this anchor to follow a Transform, then set it here.



Vector3
LocalOffset

This allows you to set the local offset of the anchor relative to the Transform.

If no Transform is set, then this will be the world space position.



Vector2
PixelOffset

This allows you to set the pixel offset of the anchor on the screen.




LeanBox

This component allows you to create UI elements with a box shape.


float
Blur

This allows you to set the blur radius in local space.



float
Thickness

This allows you to set the thickness of the border in local space.



float
Inflate

This allows you to push out or pull in the edges of the box shape in local space.



float
Detail

This allows you to set the base detail of the box corners.



float
DetailTL

This allows you to manually override the detail of the top left corner of this box.

-1 = No Override



float
DetailTR

This allows you to manually override the detail of the top right corner of this box.

-1 = No Override



float
DetailBL

This allows you to manually override the radius of the bottom left corner of this box.

-1 = No Override



float
DetailBR

This allows you to manually override the detail of the bottom right corner of this box.

-1 = No Override



float
Radius

This allows you to set the base radius of the box corners.



float
RadiusTL

This allows you to manually override the radius of the top left corner of this box.

-1 = No Override



float
RadiusTR

This allows you to manually override the radius of the top right corner of this box.

-1 = No Override



float
RadiusBL

This allows you to manually override the radius of the bottom left corner of this box.

-1 = No Override



float
RadiusBR

This allows you to manually override the radius of the bottom right corner of this box.

-1 = No Override




LeanCircle

This component allows you to create UI elements with a circle shape.


float
Blur

This allows you to set the blur radius in local space.

0 = No Blur.



float
Thickness

This allows you to set the thickness of the border in local space.

-1 = Filled.



int
Detail

This allows you to set the amount of points used to draw a full sphere outer edge.



float
Angle

This allows you to control where the triangle begins in degrees.

0 = Top.

90 = Right.



float
Fill

This allows you to control how much the circle is radially filled.

0.25 = Quarter Filled Clockwise.

-0.5 = Half Filled Counter-Clockwise.

1.0 = Fully Filled.

-1.5 = Filled 1.5 Times Counter-Clockwise.




LeanGuiSprite

The class caches the texture used to draw all UI shapes.



LeanLine

This component allows you to draw a UI element between two points in the scene (e.g. 3D objects).

NOTE  To see the line you also need to add a Graphic to your line GameObject, like LeanBox or Image.

Camera
WorldCamera

The camera rendering the target transform/position.

None/Null = The MainCamera will be used.



LeanAnchor
AnchorA

The start point of the RectTransform will be placed at this anchor point.



LeanAnchor
AnchorB

The end point of the RectTransform will be placed at this anchor point.



void
UpdateLine

This method forces the RectTransform settings to update based on the current line settings.

NOTE  This is automatically called in LateUpdate, but you can manually call it if you have modified it after this, but before the canvas is drawn.



LeanPoint

This component allows you to draw a UI element on top of a point in the scene (e.g. 3D object).

NOTE  To see the point you also need to add a Graphic to your point GameObject, like LeanBox or Image.

Camera
WorldCamera

The camera rendering the target transform/position.

None/Null = The MainCamera will be used.



LeanAnchor
Anchor

The RectTransform will be placed above this anchor point.



void
UpdatePoint

This method forces the RectTransform settings to update based on the current line settings.

NOTE  This is automatically called in LateUpdate, but you can manually call it if you have modified it after this, but before the canvas is drawn.



LeanPolygon

This component allows you to create UI elements with a custom polygon shape.


float
Blur

This allows you to set the blur radius in local space.



float
Thickness

This allows you to set the thickness of the border in local space.



List<Vector4>
Points

This list stores all polygon points in local space.

NOTE  If you modify this from code, then you must manually call the SetVerticesDirty method on this component.


void
ResetPointsZW

This method allows you to reset the .Z and .W anchor values of all Point values to 0.5, 0.5.




LeanTriangulation

This class calculates a triangulation for a given list of vertices.

This is used by the LeanPolygon component.



Index

What is Lean GUI Shapes?

Does this require Lean GUI?

How do I get started?

How do I make a point?

How do I make a line?

How do I make a box?

How do I make a polygon?



Assets

Lean Touch

Lean Touch+

Lean Localization

Lean Pool

Lean Transition

Lean GUI

Lean GUI Shapes

Lean Texture

Lean Texture+

Spaceships - Build & Destroy

Modular Backgrounds

Paint in 3D

Paint in 2D

Paint in Editor

FLOW

Destructible 2D

Space Graphics Toolkit

Space Graphics Planets

Volumetric Audio



Versions

2.1.0

2.0.4

2.0.3

2.0.2

2.0.1

2.0.0

1.1.3

1.1.2

1.1.1

1.1.0

1.0.9

1.0.8

1.0.7

1.0.6

1.0.5

1.0.4

1.0.3

1.0.2

1.0.1

1.0.0



Components

LeanAnchor

LeanBox

LeanCircle

LeanGuiSprite

LeanLine

LeanPoint

LeanPolygon

LeanTriangulation