Category: Unity

Dot Product Visualization: Fun way to tackle it

March 31st, 2024
Introduction

The aim of this post is to demonstrate a fun way of dot product visualization. And while doing that, I also want to demo the concept of how it looks when lights overlap using Shaders in Unity. By the end of this post, you should be able to whip up shaders that looks something like the picture below.
The visible conical areas originating from cuboid represent a “valid” region of the dot product as setup in the code, which can also be considered as “Field of View” regions. The conical angles and distance are exposed to the editor for tweaking.

If you wish to see a video of this, please checkout my Youtube video here.

Dot Product Visualization

Setting Up

To prepare for dot product visualization, as always, we will need to setup the scene and scripts. Let’s go over them sequentially:
1. Create a new unity scene with a plane(I named it playground) at position: (0, 0, 0) and rotation: (0, 0, 0)
2. Create 3 cubes and set the scale to (0.05, 0.05, 0.3). These will serve as the point of origin for the lights to visualize dot products.
3. A C# script named Playground.cs. This will be attached to the plane we create in the first step
4. (Optional) An editor script for Playground.cs if you want changes to be reflected without running the game.
5. An unlit shader named DP_Visualizer(Right click -> Create -> Shader -> Unlit Shader). Clear if it has any code and just have bare minimum to not throw an error and just return a black color in it’s fragment function.
6. Create a material and attach the shader created in the step above.
7. Attach this material to the plane created in step-1.
The image below will give an overview of my setup.

Let’s start coding!

In Playground.cs, we expose following variables:
1. GameObjects: This is to hold the 3 cubes that we have in the scene.
2. Color: The same number of colors as exposed game objects. This will determine the color of the positive dop product region.
3. Distance: This determines the distance of the colored conical shape
4. Angle: This is the actual angle we use to calculate the dot product.
We also need to keep track of the local position and orientation of the Cube GameObjects to send them to the shader.
We keep track of local positions so that everything is relative to the point of view of the plane.
We send the updated values to the shader in the Update() function.
The entire code for Playgound.cs is as follows:
```
//Playground.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Playground : MonoBehaviour
{
    [SerializeField]
    public GameObject[] m_gameObjects = new GameObject[3];
    [SerializeField]
    public Vector4[] m_colors = new Vector4[3];
    [SerializeField]
    public float m_Distance = 1;
    [SerializeField]
    public float m_Angle = 10;


    [HideInInspector]
    public Vector4[] m_localPositions = new Vector4[3];
    [HideInInspector]
    public Vector4[] m_directions = new Vector4[3];


    MeshRenderer m_MeshRenderer;
    public void Update()
    {
        UpdateShaderValues();   
    }

    public void UpdateShaderValues()
    {
        m_MeshRenderer = GetComponent<MeshRenderer>();
        for (int i = 0; i < 3; i++)
        {
            Vector3 pos = m_gameObjects[i].transform.position;
            pos.y = transform.position.y;

            m_localPositions[i] = transform.InverseTransformPoint(pos);
            m_localPositions[i].w = 0;
            m_directions[i] = transform.InverseTransformDirection(m_gameObjects[i].transform.forward);
            m_directions[i].w = 0;
        }
        m_MeshRenderer.sharedMaterial.SetVectorArray("_LocalPositions", m_localPositions);
        m_MeshRenderer.sharedMaterial.SetVectorArray("_Directions", m_directions);
        m_MeshRenderer.sharedMaterial.SetVectorArray("_Colors", m_colors);
        m_MeshRenderer.sharedMaterial.SetFloat("_Distance", m_Distance);
        m_MeshRenderer.sharedMaterial.SetFloat("_Angle", m_Angle);

        m_MeshRenderer.sharedMaterial.SetVector("_ObjScale", transform.localScale);
    }

}
```
The next part is optional, but will be very helpful if you want to check the results without playing the game every time. Create a PlaygroundEditor.cs script and put it inside the “editor” folder in you unity editor.
When our plane’s InspectorGUI updates, we force update the shader values.
```
//PlaygroundEditor.cs
using System.Collections;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;

[CustomEditor(typeof(Playground))]
public class PlaygroundEditor : Editor
{
    Playground m_playground;

    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();
        m_playground = ((Playground)target);
        m_playground.UpdateShaderValues();
    }
}
```
Time To Shade!!

This is where the whole thing comes together. Let’s first set up the parameters that will be passed form our C# script. They are the following:

float4 _LocalPositions[3]; // Local positions of cubes wrt Plane
float4 _Directions[3]; // Forward Direction of cubes in scene
float4 _Colors[3]; // Colors assigned to cubes
float4 _ObjScale; // Scale of plane to account for skewing
float _Distance; // How far to check
float _Angle; // Represents valid region that should be colored

In v2f struct, we keep track of the vertex’s local position, which we will use to compare against the local position of the Cubes in the scene.
```
Shader "Unlit/DP_Visualizer"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
                float4 localPos : TEXCOORD1;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            float4 _LocalPositions[3];
            float4 _Directions[3];
            float4 _Colors[3];
            float4 _ObjScale;

            float _Distance;
            float _Angle;

            ENDCG
        }
    }
}
```
We finally setup the vertex and fragment shaders as follows:
Vertex shader is nothing special. Only thing we do different is to send position of vertex inside the output structure.
Fragment shader is where the core of the logic happens:
1. For each of the three cubes we’ve set up in scene, we get the vector from cube’s local position to pixel position (input.localpos).
  We then multiply that with _ObjScale to deter the affects of any scale on our plane.
2. From the vector we calculated above, we calculate Dot Product with the forward vector of the respective cubes.
3. To color the valid region of the dot product, we compare the result with the angle we passed from the C# script. If the Dot Product of the vectors is greater than cosine of angle provided, we color the region.
4. To have the colors interact with each other, we add to the existing color of the fragment, instead of replacing it.
5. Finally, to control the reach of the drawing area, we use the following instruction:
  smoothstep(_Distance, 0.0, length(diff))
```
 v2f vert (appdata v)
 {
      v2f o;
      o.vertex = UnityObjectToClipPos(v.vertex);
      o.uv = TRANSFORM_TEX(v.uv, _MainTex);
      o.localPos = float4(v.vertex.xyz, 0.0);
      return o;
}

fixed4 frag (v2f input) : SV_Target
{
    fixed4 finalCol = 0.f;
                
    for (int i = 0; i < 3; i++)
    {
         float3 diff = input.localPos - _LocalPositions[i];
         diff *= _ObjScale;

         //DOT Product visualization
         float dp = dot(normalize(diff), _Directions[i]);
         float cosVal = cos(radians(_Angle));
         if (dp >= cosVal)
         {
               finalCol += _Colors[i] * smoothstep(_Distance, 0.0, length(diff));
         }
    }
     fixed4 col = finalCol;
     return col;
}
```
With this, you should be able to tweak values in inspector and have results something similar to this:

You can go a little further and smooth the edges of the cone too with following code and have the results look like the one in the first picture of the post:
finalCol += _Colors[i] * smoothstep(_Distance, 0.0, length(diff)) * smoothstep(cosVal, 1.0f, dp) * 3;

That is all for this post on dot product visualization. Please drop a comment if you have any feedback.
Hope you’ve learnt something and do visit again! 🙂

How To: Buoyancy Simulation Using Unity 2D

May 30th, 2023

Introduction

I’ve been in the mood to do some physics simulations. I decided to start small and try to perform some Buoyancy simulation using unity. Do note that this post focuses only on simulating Buoyancy and it’s not the intention of this post to perform a complete simulation. So, let’s see how we can perform some 2D buoyancy simulation in unity. This is what I’ve ended up with

Let’s start by creating 2 scripts: “Buoyancy” and “Water”. Buoyancy script goes on the objects on which Buoyant force should act and Water script is attached to a liquid body. To keep the simulation simple, I’ve decided the circle to have a unit area.
I’ve added the liquid object to layer “Water” and objects that can be collided with to layer “Floor”.
As the liquid is static, we grab the min and max points in the Start().
These are the following variables declared in each of the scripts:

public class Buoyancy : MonoBehaviour
{
    public float density = 750; // Kg/m^3
    public float gravitationForce = 9.8f; // m/s^2;
    
    [HideInInspector]
    public float mass; // in KG
    // 1 Unit = 1 Meter in Unity
    // Forces that will act on body:
    // Gravity : F = Mass * Gravity
    // Buoyancy : B = density * gravity * (Volume to displaced fluid)
    [HideInInspector]
    public Vector3 currentVelocity = Vector3.zero;
    [HideInInspector]
    public Vector3 oldVelocity = Vector3.zero;
    Vector3 externalForces = Vector3.zero;
    // Start is called before the first frame update
    void Start()
    {
        mass = 1 * density; // Considering unit volume
    }
}
public class Water : MonoBehaviour
{
    public float density = 997.0f; // KG/M^3
    public float stickiness = 0.15f;
    Vector3 minPoint = Vector3.zero;
    Vector3 maxPoint = Vector3.zero;
    // Start is called before the first frame update
    void Start()
    {
        BoxCollider2D collider = GetComponent&amp;amp;lt;BoxCollider2D&amp;amp;gt;();
        minPoint = collider.bounds.min;
        maxPoint = collider.bounds.max;
    }
}

Setup

In our simulation, there are going to be 2 forces acting on the body. One is the gravitational force(which is independent of mass) and buoyant force is the other one.
We gather all the external forces that are acting on the body in the previous frame(using “RegisterExternalForce“) and add that to current acceleration of the body(A += F/M).
It’s trivial to compute velocity if we have acceleration. We therefore use the computed velocity to update the position of the object in the “Update” loop (Disp = Vel * DeltaT).

void FixedUpdate()
    {
        SpriteRenderer renderer = GetComponent<SpriteRenderer>();
        Vector3 acceleration = Vector3.zero;
        acceleration.y = -gravitationForce;
        acceleration += externalForces / mass;
        currentVelocity = Vector3.zero;
        currentVelocity = oldVelocity + (acceleration * Time.fixedDeltaTime);
        currentVelocity.y = Mathf.Clamp(currentVelocity.y, -gravitationForce, gravitationForce);
        Vector3 pos = gameObject.transform.position + currentVelocity * Time.fixedDeltaTime;
        CircleCollider2D collider = GetComponent<CircleCollider2D>();
        
        Collider2D otherCollider = Physics2D.OverlapCircle(pos, collider.radius, LayerMask.GetMask("Floor"));
        
        if(otherCollider != null)
        {
            currentVelocity = Vector3.zero;
            acceleration = -acceleration;
        }
        float gravity = mass * gravitationForce;
        oldVelocity = currentVelocity;
        
        //This should be reverted to 0 to gather all the forces again
        externalForces = Vector3.zero;
    }
    public void RegisterForce(Vector3 externalForce)
    {
        externalForces += externalForce;
    }
    // Update is called once per frame
    void Update()
    {
        gameObject.transform.position += currentVelocity * Time.deltaTime;
    }

Buoyant force is acted on when an object comes into contact with a liquid surface. We use Trigger functions to perform these calculations whenever an object with “Buoyancy” component comes into contact with our trigger.

public class Water : MonoBehaviour
{
    ...
    void OnTriggerEnter2D(Collider2D collider)
    {
        RegisterForceOn(collider);
    }
    void OnTriggerStay2D(Collider2D collider)
    {
        RegisterForceOn(collider);
    }
    void RegisterForceOn(Collider2D collider)
    {
        //Will be populated in next section
    }
}

For unity to trigger collision events, one of the objects being partaking collision should have a rigidbody component. But we don’t want the rigidbody to move the object and perform any simulations. To fit our needs for this simulation, we can set the BodyType in rigidbody2D to “kinematic”.

Buoyancy Calculation

Now we can finally fill the final and most important function that actually calculates the Buoyancy. Whenever a body comes into contact with our liquid surface, we are going to apply the following forces on it:

Buoyant Force: acts in direction opposite to gravitational force [(density of liquid) * (acc. due to gravity) * (volume of liquid displaced)]
Drag: The resistance to motion of the object and it’s the force acting in opposite direction to relative motion of the object. It’s defined by (0.5 * liquidDensity * (relative speed of object)^2 * (dragCoefficient) * (Cross sectional Area)). For more information, please refer this wiki page.
Arrest Force: This is not conventional, but I had to apply an additional force to stop the objects from bouncing forever. This also acts in direction opposite to current velocity, but the calculated force attempts to halt the object. increasing the “Stickiness” variable reduces the resistance of the liquid. It seemed like a neat little effect, so I left it in. Please do post a comment if there’s a better way to prevent the eternal bouncing 🙂

void RegisterForceOn(Collider2D collider)
    {
        Buoyancy buoyancy = collider.gameObject.GetComponent<Buoyancy>();
        SpriteRenderer renderer = collider.gameObject.GetComponent<SpriteRenderer>();
        if(renderer == null || buoyancy == null)
        {
            return;
        }
        Bounds bounds = renderer.bounds;
        Vector2 castPoint = new Vector2(bounds.center.x, bounds.max.y);
        RaycastHit2D cast;
        int layerMask = 1 << LayerMask.NameToLayer("Water");
        cast = Physics2D.Raycast(castPoint, -Vector2.up, 1.0f, layerMask);
        if(cast.collider == null || cast.collider.gameObject != this.gameObject)
        {
            return;
        } 
        //Object is above water surface
        float volumeSubmerged = 0.0f;
        float totalVolume = bounds.size.x * bounds.size.y;
        
        float width = bounds.size.x;
        if(castPoint.y > maxPoint.y)
        {
            float height = Mathf.Abs(cast.point.y - bounds.min.y);
            volumeSubmerged = width * height;
        }
        else
        {
            float height = bounds.size.y;
            volumeSubmerged = width * height;
        }
        
        float buoyantForce = (density * 9.8f * volumeSubmerged);
       
        float sign = Mathf.Sign(buoyancy.currentVelocity.y) * -1.0f;
        float drag = 0.5f * (density) * (buoyancy.currentVelocity.y * buoyancy.currentVelocity.y) * 0.47f * volumeSubmerged * sign;
        float arrest = stickiness * (1.0f - volumeSubmerged/totalVolume) * buoyancy.mass * -(buoyancy.currentVelocity.y) / Time.fixedDeltaTime;
        //This aims to keep object in liquid
        buoyancy.RegisterForce(new Vector3(0, buoyantForce + drag + arrest, 0));
    }

Well, that’s all for this post. Please do post a comment if you figure out any improvements or better ways to approach this.
Thanks for reading till the end!!

How To Code Dynamic Platform Generation For Endless Scroller

May 5th, 2023

Motive of this article is to lay a foundation on how to quickly set-up dynamic platform generation for an infinite 2D side scroller. Since it’s a prototype, I’m going solely going to be working with a rectangle. And, I’ll be using Unity engine as it’s really well suited for anything 2D. So, let’s dive in and take a look at some dynamic platform generation.
Check out this Youtube video to out to see this in action.

Getting Ready

We first need a platform with well defined dimensions. I created an extremely simple black rectangle prefab of 10 units wide.
For Obstacles, I created two prefabs: a small red rectangle that player should avoid by jumping and an orange blocking platform that player must slide/duck under.
For player itself, I’m using a very primitive green rectangle.

dynamic platform generation : slide hazard — Slide Hazard

dynamic platform generation : platform — Platform

dynamic platform generation : jump hazard — Jump Hazard

Everything is elementary, but I’ve employed a small trick when creating slide hazard prefab. The collider and sprite are at a slight offset so that the player can pass under it.
Now that our game objects are ready, you can store them inside a class like GameManager to be accessible when generating platforms.
My camera’s projection is set to orthographic and size to 15. Platforms start spawning from (0, 0, 0). So, I have the player sitting a few units above origin.

Coding IT!

Let’s first define a few constants and data structures for storing platforms. I’m going to call my script LevelGenerator.cs.

private readonly int TILE_DEACTIVATION_DISTANCE = 25; // Deactivate tile if distance to player is less than this   
    private float abyssLocation; // World X location of last spawned platform
    private readonly int BLOCK_PADDING = 150; // Spawn a tile chain if (abyssLocation - playerPos) is less than this 
    private readonly int BLOCK_CHAIN = 10; // Spaws these number of tiles at once

    public static LevelGenerator Instance;

    [SerializeField]
    private int numberOfLevels = 3; // This represents "floors". Limits how high platforms can be generated


    public List<Tile> platforms; // List of all platforms "prefabs" used for spawning. Must be filled in editor
    public List<Tile> hazards; // List of all available hazard "prefabs" used for spawning. Must be filled in editor
    //object pool of type tiles
    private List<Tile> tiles; // A cache of all active tiles(platforms and hazards) for object pooling.
    private List<Tile> activeTiles; // Cache of active tiles
    private PlayerMovement player;

    private int currentLevel = 0;
    private int previousLevel;

void Start () {
        player = FindObjectOfType<PlayerMovement>();

        //platforms = new List<Tile>();

        tiles = new List<Tile>();
        activeTiles = new List<Tile>();

        previousLevel = currentLevel;

        //Spawn a set of 10 blocks at the start of the game
        InitialBlockSpawn();
}
void InitialBlockSpawn()
    {
        int BLOCK_CHAIN = 7;
        for (int i = 0; i < BLOCK_CHAIN; i++)
        {
            Tile t = GetTile(0, true);

            t.transform.position = new Vector3(abyssLocation, currentLevel * 7, 0);
            t.transform.parent = this.transform;
            abyssLocation += t.GetLength();
            activeTiles.Insert(0, t);
            t.Activate();
        }
    }

If everything is setup correctly, the code should spawn 10 blocks as soon as the game starts. The idea for platform initial generation is as follows:

“GetTile” gets a tile from the object pool. If it can’t find any suitable objects, it creates a new object and returns it.
“abyssLocation” is the position in the game beyond which no platforms exist. So, that’s where the player is headed and where the platform should be spawned next. Once we have the platform ready, we increment the “abyssLocation” with our platform’s length so that the next platform can go in that location.
“currentLevel * 7” lets us spawn platforms at varying heights(Y). If currentLevel is 0, all platforms take the position (X, 0). If currentLevel is 1, they take up (X, 7) and so on. It’s a simple, hacky and definitely not a production quality code. But, it gets the job done for this simple tut.
Once we have our X and Y, we have a location where we can spawn our platform.

We still haven’t looked at how to spawn tiles and get them from object pools. let’s do that now.

Tile GetTile(int id, bool platform)
    {
        //Debug.Log("Inside the get tile");
        Tile t = null;
        t = tiles.Find(x => x.Id == id && x.Platform == platform && !x.gameObject.activeSelf);

        if(t == null)
        {
            GameObject g = Instantiate(platforms[id].gameObject);

            t = g.GetComponent<Tile>();
            t.Platform = platform;
            t.Id = id;
            tiles.Add(t);
            tiles.Insert(0, t);
            //Debug.Log("Tile is.......: " + t);
        }
        return t;
    }
    Tile GetHazard(bool hazard)
    {
        Tile t = null;
        int id = Random.Range(0, hazards.Count);
        t = tiles.Find(x => x.Id == id && x.Hazard == hazard && !x.gameObject.activeSelf);
        if(t == null)
        {
            
            GameObject g = Instantiate(hazards[id].gameObject);

            t = g.GetComponent<Tile>();
            t.Hazard = hazard;
            t.Id = id;
            tiles.Add(t);
            tiles.Insert(0, t);
            //Debug.Log("Tile is.......: " + t);
        }
        return t;
    }

    void DeactivateTiles()
    {
        for(int i = 0; i < activeTiles.Count; i++)
        {
            if (activeTiles[i].transform.position.x - player.transform.position.x < -TILE_DEACTIVATION_DISTANCE)
            {
                activeTiles[i].gameObject.SetActive(false);
                activeTiles.RemoveAt(i);
            }

        }
    }

“GetTile” and “GetHazard” are pretty identical in their functionality. This is the basic idea:

If we have multiple platforms and hazard prefabs, select one randomly and see if a game object exists in the “tiles” pool with similar parameters.
If an object matches our requirements and it’s not currently active, return that.
If no such object exists or is currently active, create a new game object and return that.

We now have all the tools at our feet and only thing left to do is coding the platform generation.

void Update () {
        if(Mathf.Abs(player.transform.position.x - abyssLocation) < BLOCK_PADDING)
            SpawnBlock();

        DeactivateTiles();
}
void SpawnBlock()
    {
        //Get the block instantiation chain
        int chain = Random.Range(1, BLOCK_CHAIN);
        for(int i = 0; i < chain; i++)
        {
            Tile t = GetTile(0, true);

            t.transform.position = new Vector3(abyssLocation, currentLevel * 7, 0);
            t.transform.parent = this.transform;
            abyssLocation += t.GetLength();
            activeTiles.Insert(0,t);
            t.Activate();

            //instantiate random hazard
            if (i != 0 && i != chain-1 && abyssLocation > 75)
            {
                if (Random.Range(0f, 1f) > 0.8f)
                {
                    Tile h = GetHazard(true);
                    h.transform.position = new Vector3(abyssLocation, currentLevel * 7, 0);
                    h.transform.parent = this.transform;
                    activeTiles.Insert(0, h);
                    h.Activate();
                }
            }
        }

        //Generate a gap after a series of blocks
        float randomGapVariable = Random.Range(0f, 1f);

        if(randomGapVariable < 0.3f)
        {
            //Generate a gap of a random length
            int gapLength = Random.Range(5, 12);
            abyssLocation += gapLength;
        }

        //Change the path level with a certain random value
        if(Random.Range(0f, 1f) < 0.15f)
        {
            if(currentLevel == 0)
            {
                currentLevel++;
            }
            else if(currentLevel == numberOfLevels - 1)
            {
                currentLevel--;
            }
            else
            {
                currentLevel = Random.Range(0f, 1f) > 0.5f ? currentLevel+1 : currentLevel-1;
            }

        }
            
    }

We check if the player is getting closer to the “abyssLocation” in update loop. If the distance crosses a certain threshold, SpawnBlock is called.
A platform chain of previously specified number is spawned at once.
When platform is spawned, there’s a 20% chance to spawn a hazard on it. I hardcoded this as “(Random.Range(0f, 1f) > 0.8f)” , but this can be exposed to editor to tweak around.
To not make things too monotonous, there are going to be breaks after platform chain. There’s 30% chance for a gap to apprear.
Finally, there’s ~15% chance to change the level(Y position) of platform spawns.

Here’s a snippet of the block generation in-game.

Hope this taught you something 🙂

Exploring Unity Editor Handle Caps

April 7th, 2023

Starting-OFF

This is going to be a relatively short write on adding and modifying custom handle caps in a Unity Editor. If you prefer to go through this tutorial as a video, you can check it out here on my channel.
Let’s first create an empty scene with a plane, a sphere, a camera and a directional light. We are going to add a script on the sphere to make it spawn our handle caps. Handle caps are basically those gizmos that you use to move, rotate and scale an object. Unity provides is with quite a few shapes to meet our requirements. So, let’s set up the initial scene and get started exploring Unity editor Handle caps.

unity handle caps initial scene — InitialScene

I created a “CustomHandle.cs” script that will be added to sphere and it’s corresponding script in “Editor/CustomHandleEditor.cs”. We will be working with these two files.
CustomHandle.cs is pretty simple and is self explanatory. We expose handleParams to the editor so that we can modify a few parameters of handle caps directly from editor.

///CustomHandle.cs///
public enum HandleTypes
{
    Arrow, Circle, Cone, Cube, Dot, Rectangle, Sphere
}

[System.Serializable]
public class HandleParams
{
    public float size = 1.0f;
    public float offset = 0.0f;
    public HandleTypes Type = HandleTypes.Arrow;
}

public class CustomHandle : MonoBehaviour
{
    [SerializeField]
    public HandleParams handleParams;
}

I’m breaking this down into 3 steps:
– Drawing handle caps.
– Highlighting them if mouse is closest to one of the handle caps we created.
– Making them respond to mouse events.

Drawing Handle Caps

Crux of our logic will stay inside OnSceneGUI() function in Editor script. To render the handle caps, we just need to call the appropriate function in Unity’s Handle class and pass right parameters. I have a helper function that lets me pass additional parameters. To draw anything, we are going to do it when editor fires a “Repaint” event. I assigned 11, 12, 13 as IDs for forward, right and up handle caps respectively. They are going to be useful in next steps.

///CustomHandleEditor.cs///
[CustomEditor(typeof(CustomHandle))]
public class CustomHandleEditor : Editor
{
    private void OnSceneGUI()
    {
        CustomHandle handle = target as CustomHandle;
if(Event.current.type == EventType.Repaint)
        {
            EventType eventType = EventType.Repaint;
            //Forward
            CreateHandle(11, handle.transform.position + handle.transform.forward * handle.handleParams.offset,
                       Quaternion.FromToRotation(Vector3.forward, handle.transform.forward),
                        handle.handleParams.size, handle.handleParams.Type, eventType);
            
            //Right
            CreateHandle(12, handle.transform.position + handle.transform.right * handle.handleParams.offset,
                        Quaternion.FromToRotation(Vector3.forward, handle.transform.right), 
                        handle.handleParams.size, handle.handleParams.Type, eventType);

            //up
            CreateHandle(13, handle.transform.position + handle.transform.up * handle.handleParams.offset,
                        Quaternion.FromToRotation(Vector3.forward, handle.transform.up), 
                        handle.handleParams.size, handle.handleParams.Type, eventType);
        }
    }
private void CreateHandle(int id, Vector3 position, Quaternion rotation, float size, HandleTypes handleTypes, EventType eventType )
    {
        Handles.ArrowHandleCap(id, position, rotation, size, eventType);
    }
}

Compiling and running the code above should draw handle caps in editor with customizable size and offset params as follows:

Unity Handle Caps Rendered — Handle caps rendered

Highlighting Them

Let’s now try and make them change color when mouse hovers over them. To do that, we need to create handle caps during “Layout” event and then re-draw them during a repaint event. This is because, we would be using “HandleUtility.nearestControl” to retrieve handle nearest to our mouse. To compare out handle ID with nearest handle ID and draw the handle with proper color, we would need this information prior to the “Repaint” event. This is how the code looks after making the necessary changes. We would basically be creating handle caps twice. I weirdly could not find any utility function to retrieve handles from handle IDs. If there was such a function, we would retrieve the Handle from ID and repaint.

///CustomHandleEditor.cs///
private void OnSceneGUI()
    {
        CustomHandle handle = target as CustomHandle;

        int hoverIndex = -1;

        hoverIndex = HandleUtility.nearestControl;
        if(Event.current.type == EventType.Layout)
        {
            EventType eventType = EventType.Layout;
            //Forward
            CreateHandle(11, handle.transform.position + handle.transform.forward * handle.handleParams.offset,
                        Quaternion.FromToRotation(Vector3.forward, handle.transform.forward),
                        handle.handleParams.size, handle.handleParams.Type, eventType);
            
            //Right
            CreateHandle(12, handle.transform.position + handle.transform.right * handle.handleParams.offset,
                        Quaternion.FromToRotation(Vector3.forward, handle.transform.right), 
                        handle.handleParams.size, handle.handleParams.Type, eventType);

            //up
            CreateHandle(13, handle.transform.position + handle.transform.up * handle.handleParams.offset,
                        Quaternion.FromToRotation(Vector3.forward, handle.transform.up), 
                        handle.handleParams.size, handle.handleParams.Type, eventType);
        }

        //Highlight when mouse is near
        if(Event.current.type == EventType.Repaint)
        {
            EventType eventType = EventType.Repaint;
            //Forward
            Handles.color = hoverIndex == 11 ? Color.magenta : Handles.zAxisColor;
            CreateHandle(11, handle.transform.position + handle.transform.forward * handle.handleParams.offset,
                        Quaternion.FromToRotation(Vector3.forward, handle.transform.forward),
                        handle.handleParams.size, handle.handleParams.Type, eventType);
            
            //Right
            Handles.color = hoverIndex == 12 ? Color.magenta : Handles.xAxisColor;
            CreateHandle(12, handle.transform.position + handle.transform.right * handle.handleParams.offset,
                        Quaternion.FromToRotation(Vector3.forward, handle.transform.right), 
                        handle.handleParams.size, handle.handleParams.Type, eventType);

            //up
            Handles.color = hoverIndex == 13 ? Color.magenta : Handles.yAxisColor;
            CreateHandle(13, handle.transform.position + handle.transform.up * handle.handleParams.offset,
                        Quaternion.FromToRotation(Vector3.forward, handle.transform.up), 
                        handle.handleParams.size, handle.handleParams.Type, eventType);
        }
    }

Interaction

Finally, to make them interactable, I added 2 members to the editor class: a “Vector3 prevMousePosition” and an “int nearestHandle”. Here, we have mouse down, up and drag events and each sets the variables appropriately. Append this code to “OnSceneGUI” function that we’ve been modifying and you should have handle caps that you can click and drag around.

///CustomHandleEditor.cs///
//Interaction
        if(Event.current.type == EventType.MouseDown)
        {
            nearestHandle = HandleUtility.nearestControl;
            prevMousePosition = Event.current.mousePosition;
            Debug.Log("handle Down " + nearestHandle);
        }
        if(Event.current.type == EventType.MouseUp)
        {
            prevMousePosition = Vector3.zero;
            nearestHandle = -1;
        }
        if(Event.current.type == EventType.MouseDrag)
        {
            Debug.Log("Dragging " + nearestHandle);
            if(nearestHandle == 11)
            {
                float move = HandleUtility.CalcLineTranslation(prevMousePosition, Event.current.mousePosition,
                                                    handle.transform.position, handle.transform.forward);
                
                handle.transform.position += handle.transform.forward * move;
            }
            if(nearestHandle == 12)
            {
                float move = HandleUtility.CalcLineTranslation(prevMousePosition, Event.current.mousePosition,
                                                    handle.transform.position, handle.transform.right);

                handle.transform.position += handle.transform.right * move;
            }
            if(nearestHandle == 13)
            {
                float move = HandleUtility.CalcLineTranslation(prevMousePosition, Event.current.mousePosition,
                                                    handle.transform.position, handle.transform.up);

                handle.transform.position += handle.transform.up * move;
            }
            prevMousePosition = Event.current.mousePosition;
        }

That is all folks! I didn’t elaborate much in this post because most of the concepts are pretty straight forward and math is also quite simple. Please do post a comment if anything requires a deeper analysis.

Category: Unity

Dot Product Visualization: Fun way to tackle it

Introduction

Setting Up

Let’s start coding!

Time To Shade!!

How To: Buoyancy Simulation Using Unity 2D

Introduction

Setup

Buoyancy Calculation

How To Code Dynamic Platform Generation For Endless Scroller

Getting Ready

Coding IT!

Exploring Unity Editor Handle Caps

Starting-OFF

Drawing Handle Caps

Highlighting Them

Interaction