Skip to main content
This guide will walk you through setting up Vector Display 2D in your Godot project and visualizing your first vector.

​
Prerequisites

Make sure you have already installed Vector Display 2D and enabled the plugin in your Godot project.

​
Creating Your First Vector Display

1

Create a scene with a moving object

First, you need an object with a Vector2 property to visualize. Let’s create a simple character that moves with velocity.Create a new scene with a CharacterBody2D node and attach this script:
player.gd
extends CharacterBody2D

const SPEED = 300.0
const JUMP_VELOCITY = -400.0

func _physics_process(delta):
    # Add gravity
    if not is_on_floor():
        velocity += get_gravity() * delta

    # Handle jump
    if Input.is_action_just_pressed("ui_accept") and is_on_floor():
        velocity.y = JUMP_VELOCITY

    # Get input direction and handle movement
    var direction = Input.get_axis("ui_left", "ui_right")
    if direction:
        velocity.x = direction * SPEED
    else:
        velocity.x = move_toward(velocity.x, 0, SPEED)

    move_and_slide()
The velocity property is a Vector2 that we’ll visualize with Vector Display 2D.
2

Add a VectorDisplay2D node

With your CharacterBody2D selected in the scene tree, add a child node. Search for VectorDisplay2D in the node creation dialog.Your scene tree should look like this:
CharacterBody2D (player.gd)
└── VectorDisplay2D
The VectorDisplay2D node will render the vector as a child of your character, so it moves with the character automatically.
3

Configure the target

Select the VectorDisplay2D node and configure it in the Inspector:
  1. Target Node: Click the dropdown and select .. (parent) - this points to your CharacterBody2D
  2. Target Property: Type velocity - this is the Vector2 property we want to display
If you leave Target Node empty, it will automatically use the parent node.
4

Create a VectorDisplaySettings resource

In the Inspector for VectorDisplay2D, you’ll see a Settings property. Click the dropdown and select New VectorDisplaySettings.Click the resource to expand it and configure these basic settings:
  • Show Vectors: ✓ (enabled)
  • Show Axes: ✓ (enabled to see X and Y components)
  • Vector Scale: 1.0 (adjust if vectors appear too large or small)
  • Width: 3.0 (thicker line for better visibility)
  • Main Color: Yellow (or your preferred color)
You can save this resource as a .tres file for reuse across different nodes and projects.
5

Test in-game

Press F5 to run your game. You should now see:
  • A yellow arrow showing your velocity vector
  • A red line showing the X component (horizontal velocity)
  • A green line showing the Y component (vertical velocity)
Try these interactions:
  • Press left/right arrow keys - watch the velocity vector change direction
  • Press space to jump - see the Y component change
  • Press Shift + V to toggle the vector display on/off
If you don’t see any vectors, make sure:
  • Your character has a non-zero velocity
  • The VectorDisplay2D node is visible (eye icon in scene tree)
  • Settings → Show Vectors is enabled

​
Understanding What You See

The visualization shows three elements:

Main Vector

Yellow arrow - The complete velocity vector showing both direction and magnitude

X Component

Red line - Horizontal component of velocity (velocity.x)

Y Component

Green line - Vertical component of velocity (velocity.y)

​
Customize Your Display

Now that you have a basic vector displaying, try these customizations:
If your vectors appear too small or too large, change the Vector Scale setting:
# In your script, you can also adjust at runtime:
$VectorDisplay2D.settings.vector_scale = 2.0  # Make vectors 2x larger
The Length Mode controls how vector length is displayed:
  • Normal: Shows actual vector magnitude (default)
  • Clamp: Limits maximum length while preserving direction
  • Normalize: All vectors same length, only shows direction
$VectorDisplay2D.settings.length_mode = "Normalize"
$VectorDisplay2D.settings.max_length = 100
The Pivot Mode controls where the vector originates:
  • Normal: Vector starts from character position (origin)
  • Centered: Vector is centered on character position
$VectorDisplay2D.settings.pivot_mode = "Centered"
Rainbow mode colors the vector based on its angle, creating a beautiful spectrum effect:
$VectorDisplay2D.settings.rainbow = true
Dimming makes shorter vectors fade to a fallback color:
$VectorDisplay2D.settings.dimming = true
$VectorDisplay2D.settings.dimming_speed = 1.0
$VectorDisplay2D.settings.fallback_color = Color.BLACK

​
Visualizing Multiple Vectors

You can add multiple VectorDisplay2D nodes to visualize different properties:
player_with_multiple_vectors.gd
extends CharacterBody2D

var velocity = Vector2.ZERO
var acceleration = Vector2.ZERO
var desired_velocity = Vector2.ZERO

func _physics_process(delta):
    # Calculate acceleration
    var target_velocity = Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down") * 300
    acceleration = (target_velocity - velocity) / delta
    
    # Apply acceleration
    velocity += acceleration * delta
    position += velocity * delta
Scene structure: 
CharacterBody2D
├── VectorDisplay2D (velocity) - Yellow
├── VectorDisplay2D (acceleration) - Cyan  
└── VectorDisplay2D (desired_velocity) - Magenta

​
Runtime Toggling

The default Shift + V shortcut toggles all vector displays. This is perfect for:
  • Debugging during development
  • Comparing different states
  • Creating tutorial modes
  • Performance profiling
Learn how to customize keyboard shortcuts.

​
Common Issues

Check these points:
  • Target node is set correctly (or auto-assigned to parent)
  • Target property name matches exactly (case-sensitive)
  • The property is actually a Vector2 type
  • The vector has a non-zero magnitude
  • Settings → Show Vectors is enabled
Adjust the Vector Scale setting:
$VectorDisplay2D.settings.vector_scale = 2.0  # Increase
$VectorDisplay2D.settings.vector_scale = 0.5  # Decrease
Or use Length Mode → Normalize with a fixed max_length.
Make sure the plugin is enabled:
  1. Go to Project → Project Settings → Plugins
  2. Check that Vector Display 2D is enabled
  3. Restart Godot if necessary
The property you’re trying to visualize must be of type Vector2. Check:
# ✓ This will work
var velocity: Vector2 = Vector2.ZERO

# ✗ This won't work
var speed: float = 0.0

​
Next Steps

Core Concepts

Understand how Vector Display 2D works under the hood

Customization Guide

Explore all customization options in detail

Examples

See real-world examples and use cases

API Reference

Complete API documentation for all classes

Build docs developers (and LLMs) love

Get started for freeTalk to us