Positions and Velocity
Hello everyone!
This tutorial is all about screen position and vectors and is part of an ongoing series:
2d Game Fundamentals
If you don't quite understand how motion in 2d games work, hopefully this will help. If you understand a particular section, feel free to skip down to the next section. If something is not clear please don't hesitate to send me a pm or leave a comment below. For those of you in my class, you can contact me via email.
X and Y - Describing position
In 2d space we can describe an object's position using 2 values that represent an object's placement on a grid, invisible or not. Typically this is referred to as a 2d coordinate; X and Y. X describes which column the object is in and Y tells what row the object is in. It is pretty much like bingo. A 2d coordinate should look something like these examples: (56,2) or (-1,3). The first number is the X position and tells us how far left or right the position is. The second number is Y and tells us an objects position up and down.
The pixel at the very top left of your screen is always pixel (0,0) - not (1,1). This is because computers always start counting at 0. They think of 0 as being the first position a number can be. This means if your screen is 640 pixels wide, your screen X position will go from 0-639. Any object on screen will have an (x,y) position. and this position can be manipulated by changing these values.
If you subtract from an objects X position it will appear to move left. If you add to it, it will seem as the object is going to the right. Adding to the Y value makes the object go down and subtracting from Y makes it go up.
Just remember: Add to X = right, Subtract from X = left, Add to Y = down, and subtract from Y = Up.
The more you handle (X,Y) coordinates the more second nature this becomes, so don't worry if it seems odd at first.
Moving an object using Velocity
If you simply change an objects position to where you want it to be it will seem as if it is teleporting. Going from (10,10) to (100,100) is a big jump. If you want an object to seem as if it is moving from one place to another then you need to gradually change its position over time. This is an easy process.
In construct 2, a sprite object already has an X and Y position, so all you need to do is create 2 variables, each representing velocity along either the X or Y axis. I normally call them velocityX and velocityY.
Every frame of the game you then add velocity to position. It looks like this below:
notice that I am multiplying velocity by dt. dt stands for Delta Time and tells us how much time has passed since our last frame. Most games will run 60 frames per second, meaning the computer will run the code you made 60 times a second. In this case dt = 0.0166666- or 1/60. Since we want our velocity to be in pixels per second (and not per frame) we multiply velocity by dt. If our velocity was 100 then per frame it would only add 1.6666 to the position of an object. Over the course of a full second the total of the changes will equal 100.
velocity dt frames per second = velocity.
Here is a quick velocity cheat sheet; The velocity of the object is on the left, described using X and Y. The direction the object would be moving as a result is written next to it.
(0,0) - not moving.
(1,0) - moving right.
(-1,0) - moving left.
(0,1) - moving down.
(0,-1) - moving up.
(-1,-1) - moving diagonally up left.
(1,-1) - moving diagonally up right.
(-1,1) - moving diagonally down left.
(1,1) - moving diagonally down right.
Hopefully that wraps it up. Let me know if you have questions.
Introduction to rotation and angles!