Video games rely extensively on vectors to calculate and display the virtual game world. But what are vectors exactly? How do they work? In this bonus lesson, we explore some of the basic math behind vectors for game developers.This lesson is here to help you understand the math behind vectors. You don't have to remember all of it to complete the course, as a game engine like Godot provides many functions that handle vector calculations for you. But it can help you understand what the engine does when you write code like direction.normalized() or add Vector2 values.As you'll see in our bonus lessons, we use math terms sparingly. We explain things in a way that makes sense to game developers. And we'll mention the math terms in parentheses when relevant.Finally, this lesson is not a complete introduction to vectors. It's a quick overview of the concepts relevant to this module and the next few in the course. You'll find more guides throughout the course as we introduce new concepts.We'll cover:
What are vectors?
How 2D vector coordinates work
Common vector operations (addition, subtraction, multiplication, etc.)
Normalizing a vector
What are vectors?
In math, a vector is a list of numbers representing a direction and a length (called the vector's magnitude).In math, a vector can be a list of numbers of any length, though in games, we mostly use vectors to represent 2D and 3D coordinates. So, we mostly use vectors with 2 and 3 numbers. You've seen this in the course when we used the Vector2 values to change a sprite's position.A 2D vector has two values representing the x and y coordinates, while a 3D vector has three values for the x, y, and z coordinates.Let's focus on 2D coordinates. We can represent the coordinate system of our game as two perpendicular axes, one horizontal and one vertical. We call the horizontal axis the x-axis and the vertical axis the y-axis.In games, the y-axis is usually inverted compared to math classes, meaning that it points down. If you go to the right on the x-axis, you increase the x value. If you go down on the y-axis, you increase the y-value.2D vectors are the perfect tool to represent 2D coordinates, like the position of a sprite, the velocity of an object, a force, a direction, and more.But how do they work exactly?
2D vector coordinates
2D vectors are composed of two numbers, typically called x and y.In games, we use these numbers to represent coordinates. The top number, named x, represents a coordinate on the horizontal axis, and the bottom number, named y, represents a coordinate on the vertical axis. In 2D, the coordinates are usually measured in pixels.We use 2D vector coordinates mainly in three ways:
For position: These vectors represent the position of an object in the game world. For example, a position of Vector2(400, 200) represents 400 pixels to the right and 200 pixels down from the origin position, Vector2(0, 0).
For directions: These vectors represent the direction in which something points. For example, the value Vector2(1, 0) represents the direction to the right, while Vector2(0, 1) represents the direction down. Usually, we ensure that these vectors have a maximum length of one to represent only a direction and not a distance.
For velocity: These vectors represent the speed and direction of an object. For example, a velocity of Vector2(400, 0) represents an object moving to the right at a speed of 400 pixels per second, while Vector2(0, 300) represents an object moving down at a speed of 300 pixels per second.
So, when you see a 2D vector, one way to visualize it is as a point on a plane. That's a position.The position where the axes meet is called the origin position. It's the position Vector2(0, 0).The position Vector2(200, 100) represents 200 pixels to the right and 100 pixels down from the origin position, Vector2(0, 0).Another way to visualize it is as an arrow. This arrow starts at the origin position, Vector2(0, 0), and points in the direction represented by the vector. The arrow pointing down and right represents the same value as above, Vector2(200, 100). It is just a different way to visualize it.We use this arrow representation for directions, forces, and velocities.
Common vector operations
You can manipulate vectors with various operations, including:
Addition and subtraction: You can use this to move a sprite or a character in the game world.
Multiplication and division: You can scale vectors by multiplying or dividing them by a number.
Adding two vectors
Adding two vectors together is like moving step by step in a game world. For instance, if you have a character at position Vector2(200, 200) and you want to move it 50 pixels right and 100 pixels down, you would add Vector2(50, 100). The resulting vector, Vector2(250, 300), is the new position of the character.Mathematically, you add the corresponding components of each vector:Writing Vector2(a, b) + Vector2(c, d) is equivalent to Vector2(a + c, b + d).
Subtracting two vectors
Subtraction is similar to addition but in reverse. We use it to find the difference between two vectors: The distance and direction from one point to another or the difference between two velocities (as seen in the steering ship lesson in this module).Vector2(a, b) - Vector2(c, d) is equivalent to Vector2(a - c, b - d)
Multiplying and dividing a vector by a number
Multiplying or dividing a vector by a number changes its length but not its direction. For example, if you want an object to move twice as fast, you can multiply its velocity vector by 2.Vector2(a, b) * number is equivalent to Vector2(a * number, b * number)Similarly, dividing a vector by a number reduces its magnitude. We use this operation to decrease the speed or scale down a vector.
Normalizing a Vector
Normalizing a vector means removing the length information from the vector and keeping only the direction. The vector ends up with a length of one unit, which is no useful length information for us. We use this to ensure that a vector only represents a direction and that when used in multiplication, it doesn't cause objects to move faster or slower.To normalize a vector, divide each component (x and y in a 2D vector) by the vector's length. This way, the length of the resulting vector is 1.0.Note: The length of a vector Vector2(a, b) is sqrt(a² + b²).In Godot, you can normalize a vector using the normalized() function. For example, Vector2(100, 0).normalized() returns Vector2(1, 0).
Calculating the length of a vector
Let's break down the math behind calculating the length of a vector. For that, we use the Pythagorean theorem. It states that "the length of the hypotenuse of a right-angled triangle is equal to the square root of the sum of the squares of the other two sides."A vector is like the hypotenuse of a right-angled triangle. The x and y components are the other two sides of the vector.Here's an illustration of the Pythagorean theorem applied to an input vector pointing to the top-right:We calculate the length of a Vector2 value using the following steps:
We square the x and y components of the vector.
We sum the results.
We take the square root of the sum.
Here's an example with the value Vector2(50.0, -20.0). The calculation is as follows (below, ^ stands for "to the power of" and sqrt means "square root"):
sqrt(50.0^2+(-20.0)^2)=sqrt(2500+400)~=53.85
The vector has a length of approximately 53.85.Here's another common example, with an input vector pointing to the top-right. Its value is Vector2(1.0, -1.0). The calculation is as follows:
Use this space for questions related to what you're learning. For any other type of support (website, learning platform, payments, etc...) please get in touch using the contact form.
What does SGx stands for?KhoHi, am a baguette and not super strong in english but i can guess Mx stands for Module x, Lx stands for Lesson x but what does SGx stands for? It won't go off my head x) Thanks for the answer.43Apr. 06, 2024
Recommended Khan Academy courses for vector math?SingleMom420Hi Nathan, in a previous comment you recommended the Khan Academy app. I downloaded it but being as math-illiterate as I am, I'm not too sure *which* courses within the app I should be studying. For now I picked "basic geometry and measurement", "algebra basics", and "trigonometry" because those sound vaguely vector-ish-related to me, but I'm really not sure. Could you tell me the "categories" of math I should be studying to reinforce my ability to better understand the underlying mechanics of GDscript?23Feb. 21, 2024
Let me get this right...NoneApplicableGamesFirstly I would like to take a minute to appreciate the bigger focus on the underlying theory in this version of the course. It gives it much more value that learn to code with godot 3, especailly if you've already completed it.
Secondily I just want confirm I've understood the common vector operations:
> Addition and Subtraction of a vector will cause that object to be place a number of pixels way from the object's current position.
> Division and Multiplication will scale a vector meaning its direction will not change, but its length will.
> Normalising a vector will strip it of its length, but will keep the direction.12Feb. 20, 2024
How to increase the speed gradually!AJ StudiosSo when I normalize a Vector2 for instance, let's say: **`Vector2(300, 0).normalized()`**
This will return `Vector2(3, 0)` How would I go about moving an object using that vector and then start increasing it's speed gradually?
I imagine that some kind of multiplication will be involved but I can't figure out how the speed will increase over time.72Feb. 07, 2024
Length vs Directionbc likes youHey this is great supplemental material! One question I have is getting a bit lost here:
> Multiplying or dividing a vector by a number changes its length but not its direction.
I'm a bit confused on the difference between length and direction. If we're considering velocity, can we think of it as direction is down if we're using Vector2(0,1) and length is the speed at which we move (1 pixel per second)? So multiplying wouldn't change the direction, just the pixel per second at which we move?61Feb. 28, 2024
Understanding order of operationsMartinBIf I multiply a Float by a Vector2 and assign it to a new variable, does that variable become a Float or a Vector2?
I.E.:
var desired_velocity := 600.0 * direction(1, 0)21Feb. 21, 2024
I understand nothing.Nikita MyshkinFor two full days, I sat with Module M4 trying to understand how it all works. But at the end of the second day, I still don't understand anything, especially L5. I really liked how you visualized the code, but I look at it and just pretend I understand something. I got to L6 and thought I would find a lifeline there. Throughout the article, I thought I almost understood everything and returned to the code, only to realize I misunderstood everything.
It's hard to explain how it happens. It's like you look, think you understand, then look closer and realize you understood everything wrong. I can't even formulate my questions because one overlaps with another, and then another one follows. Even GPT doesn't help.
In general, I saw that you wrote at the beginning of the course that if something is not clear, you can confidently move on. But I feel like I understand so little that in the next modules, I'll just drown in ignorance. Should I continue or is it better to try to figure it out further?
Sorry for my English.50Jun. 21, 2024
Do you plan to cover Transforms in your 3D course?lowenI think they're kind of important and I had a lot of issues in game dev without knowing too much about it.10Feb. 08, 2024
Lesson Q&A
Use this space for questions related to what you're learning. For any other type of support (website, learning platform, payments, etc...) please get in touch using the contact form.