Ribbon Compass Script

I made this script for a freelancer project originally, which was a sailing game with pirates and ships. We needed a compass, and we wanted to show the player, how the wind affects his sailing speed.

The basic idea here is to have a horizontal grid layout with Text elements. I call this the ribbon. The script moves this ribbon horizontally based on where the character is facing.

I only want part of the ribbon visible, so I use the mask component.

The problem I encountered is circularity. I wanted to translate from the end of the ribbon to its start seamlessly. The setup below resulted in a failure, the compass ran out of letters.

SE — S — SW — W — NW — N — NE — E —

I figured out I have to make duplicates. I only move the ribbon between the two S letter and let the overflowing part simulate the circularity.

The script

public class RibbonCompass : MonoBehaviour
    [SerializeField] Vector3 NorthDirection = new Vector3(0,0,1);
    [SerializeField] Transform Actor;
    [SerializeField] GridLayoutGroup ribbon;
    float _angleMultiplier;

    void OnEnable()
        _angleMultiplier = 2 * ribbon.cellSize.x / 45;

    void Update()
        Vector3 actorDirection = Actor.forward;
        float angle = Vector3.SignedAngle(actorDirection, NorthDirection, Vector3.up);

        Vector3 ribbonPosition = ribbon.transform.localPosition;                   
        ribbonPosition.x = angle * _angleMultiplier;
        ribbon.transform.localPosition = ribbonPosition;           

The script is pretty simple. We need three variable for the inspector: 

  • The direction of the north: as default, I set it to Vector3.forward.
  • The actor transform. We’ll compare it’s forward direction to the north direction.
  • The ribbon. This will be a GridLayoutGroup.

We also need a private variable to store the angle multiplier. I’ll explain it later but first, let’s see what this script does.

  1. Calculates the angle between the actors forward and the north direction.
  2. Then sets the ribbon position in a way to show the right letter.

I’m using text game objects for the letters and for the separators (—). Each of these cells has the same width value, defined in the GridLayoutGroup.

Between North and North West there is 45 degrees difference in angle. If I’m staying in the center of the N letter, I have to move 2 cells:

  • I move the ribbon half cell to arrive at the start of the separator.
  • One full cell (the separator).
  • Half cell again to reach the center of the NW cell.

That’s being said, every 45° needs to move the ribbon with 2 cell width. Instead of calculating each time in the update function, I precalculate this and store it on the _angleMultiplier variable.

How to use the component

The component you can download from the Gumroad (for free) has a slightly better inspector, and also contains the color changing feature.

  • North Direction: this is a world direction. As default it is the Vector.forward (0,0,1) direction
  • Actor: This is the transform which forward will be used to determine the facing of the player.
  • Marker UI Image that will change the color based on the direction
  • Ribbon: The Grid Layout Group that contains your cells.
  • Special direction: The script will change the marker color from the default to the special when the Actor faces to this direction.
  • Color Blend: With this curve, you have more control how the two color should blend into each other.

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest


Adam is the founder and developer of the Runemark Studio. He graduated with BSC degree in Software Engineering in 2013. He is working as a freelancer game developer and asset store publisher since 2014.

Leave a comment


Collection of a cartoon-style environment and props models with 40+ prefabs. Super lightweight because all prefabs are using material colors only, and the average polycount is way below 1000 vertices.

View Asset

Dark Fantasy Kit

Dark Fantasy Kit is a modular 3D PBR environment package which contains 400+ prefabs to create a residence of a villain or evil mastermind of your RPG game with a First Person, Third Person or a Top-Down view. Works with Unity versions from 5.6 to 2018.

View Asset