Introduction
Someone asked me in the #gamedev IRC channel about how to make a 2d vehicle simulator. Instead of spending all day trying to explain the concepts to him, I decided just to write this tutorial. Please bear with me, this is my first tutorial.
So as I mentioned we're going to be learning how to make a basic 2d vehicle simulator. We're going to do it in C# and try do use as few hacks as possible. I've broken the process down into three steps. First, we will learn how to setup a basic game application in C#.NET and how to draw some basic graphics (emphasis on basic.) Next, we will learn how to create a rigid body simulator using a simple Euler integrator with a variable time step. And last but not least, we will calculate vehicle forces simulating the tire patch contacting the road. And that's all there is to it! Let's get started.
Math Requirements
There are two ways to get through this tutorial: you can rush to the end and download the project, or you can read through it and hopefully I'll be able to explain things clearly. If you choose the second route, you're going to need to have a bit of math background. In a 2D simulation this is mostly in the form of a vector object. You'll need to be able to add, subtract, dot, and project 2 vectors. Also you'll need to be able to use a cross product. In 2D this is kind of a fake situation since we know the result will point in the screen's direction, so the result is returned as a scalar. If you're not familiar with any of these terms please look them up now. I tried to write this tutorial without using a matrix object but eventually I cracked and used the Drawing2D.Matrix object to transform and inversely transform a vector between spaces. If you don't know what I'm talking about let me give you an example. Let's say your personal body is your "local space" and the room you're sitting in is the "world space." Let's also say that your monitor is the front of the world, and your eyes look in the forward direction of your local space. If you turn sideways, and transform the monitor's direction into your space, it is now the side direction. Vise versa, if you transform your facing direction into world space, it is the opposite side direction. This is a critical concept so please, if that didn't make sense, do some searching on Google for transforming between spaces. The reason this is so important is because we will be doing all of our vehicle force calculations in local vehicle space. Yet the vehicle itself, and its integrator, persist in world space.Phase One
Phase one, as I mentioned, is to create the renderer; something graphical so we can actually see what our simulation is doing. This will make it a lot easier to debug. Create a windows form project in C# and place a picturebox control on it (name it "screen"). This control is where we will display our simulation. We could just start drawing to this screen but we're going to be using double buffering as well to avoid flicker, so we need to create the back buffer now. That bit of code looks like this.
Graphics graphics; //gdi+
Bitmap backbuffer;
Size buffersize;
//intialize rendering
private void Init(Size size)
{
//setup rendering device
buffersize = size;
backbuffer = new Bitmap(buffersize.Width, buffersize.Height);
graphics = Graphics.FromImage(backbuffer);
}
Init function must be called with the size of the "screen" control that you created on the form. This will create a bitmap "backbuffer" to which we can do our
offscreen rendering. We'll then take this backbuffer and draw it to the screen to illiminate any flickering. This is how you draw a basic shape to the backbuffer, and present it to the screen.
//main rendering function
private void Render(Graphics g)
{
//clear back buffer
graphics.Clear(Color.Black);
//draw to back buffer
graphics.DrawLine(new Pen(Color.Yellow), 1, 0, 1, 5);
//present back buffer
g.DrawImage(backbuffer, new Rectangle(0, 0, buffersize.Width, buffersize.Height), 0, 0, buffersize.Width, buffersize.Height, GraphicsUnit.Pixel);
}
on_paint method of the "screen" control placed on our form. The on_paint method has a parameter "e" that contains a graphics
object we can use to draw to the control. We pass this graphics object to the render function and as you can see, we draw the backbuffer to it as the very last step.
Now by default, the graphics of a picturebox control has the origin in the top-left corner, and extends downward for +y and to the right for +x. This is highly unnatural for most cases. In
addition to that, it has extremely large units. Since we will be simulating in the metric system, I recommend introducing a scale factor to scale up the simulation and make it much more visible. The
transformation looks like this and takes place after Graphics.Clear() is called.
graphics.ResetTransform();
graphics.ScaleTransform(screenScale, -screenScale);
graphics.TranslateTransform(buffersize.Width / 2.0f / screenScale, -buffersize.Height / 2.0f / screenScale);
Now the line should draw starting right at the center of the screen.
Forms Wiring
Up until now, I havn't explained how to connect all the functions. The first thing you'll need to do is call the Render function from your on_paint event.
Next, you'll need to create a function that gets called continously to update the simulation. It is preferred to call this function on the Application_Idle event. So create an
event handler for Application_Idle and have it call your DoFrame function. Inside this function you'll need to
- Process input
- Update the simulation
- Invalidate the screen control
On_Paint gets triggerd and the simulation gets drawn. You'll also want to wire up some "key_down" and "key_up" events to keep
track of key states.
The Timer
Since we don't know how often our DoFrame function will be getting called, we need to code everything to handle a variable time step. To utilize this we must measure the time
between DoFrame calls. So I'll introduce the timer which, very simply, queries the number of milliseconds that have passed since the computer was turned on. So we store this number
every frame and on a subsequent frame we compute the difference, which gives us the amount of time that has passed since the last frame. Here is my very simple timer object. Note: you will
need to call GetETime in your intialize function in order to clear the timer, otherwise the first call to it will return the amount of time that has passed since the computer was turned
on.
class Timer
{
//store last time sample
private int lastTime = Environment.TickCount;
private float etime;
//calculate and return elapsed time since last call
public float GetETime()
{
etime = (Environment.TickCount - lastTime) / 1000.0f;
lastTime = Environment.TickCount;
return etime;
}
}
Conclusion of Phase One
So up until now we've covered: setting up a rendering surface using GDI, wiring a form to process a game loop and draw it to the screen, and computing the time that has passed since the last frame. Our application looks like this:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Text;
using System.Windows.Forms;
namespace racing_simulation_2d
{
//our main application form
public partial class frmMain : Form
{
//graphics
Graphics graphics; //gdi+
Bitmap backbuffer;
Size buffersize;
const float screenScale = 3.0f;
Timer timer = new Timer();
//keyboard controls
bool leftHeld = false, rightHeld = false;
bool upHeld = false, downHeld = false;
//vehicle controls
float steering = 0; //-1 is left, 0 is center, 1 is right
float throttle = 0; //0 is coasting, 1 is full throttle
float brakes = 0; //0 is no brakes, 1 is full brakes
public frmMain()
{
InitializeComponent();
Application.Idle += new EventHandler(ApplicationIdle);
screen.Paint += new PaintEventHandler(screen_Paint);
this.KeyDown += new KeyEventHandler(onKeyDown);
this.KeyUp += new KeyEventHandler(onKeyUp);
Init(screen.Size);
}
//intialize rendering
private void Init(Size size)
{
//setup rendering device
buffersize = size;
backbuffer = new Bitmap(buffersize.Width, buffersize.Height);
graphics = Graphics.FromImage(backbuffer);
timer.GetETime(); //reset timer
}
//main rendering function
private void Render(Graphics g)
{
//clear back buffer
graphics.Clear(Color.Black);
graphics.ResetTransform();
graphics.ScaleTransform(screenScale, -screenScale);
graphics.TranslateTransform(buffersize.Width / 2.0f /
screenScale, -buffersize.Height / 2.0f / screenScale);
//draw to back buffer
DrawScreen();
//present back buffer
g.DrawImage(backbuffer, new Rectangle(0, 0, buffersize.Width,
buffersize.Height), 0, 0, buffersize.Width,
buffersize.Height, GraphicsUnit.Pixel);
}
//draw the screen
private void DrawScreen()
{
//draw our simulation here
}
//process game logic
private void DoFrame()
{
//get elapsed time since last frame
float etime = timer.GetETime();
//process input
ProcessInput();
////////////////////////////////
//integrate our simulation here
////////////////////////////////
//redraw our screen
screen.Invalidate();
}
//process keyboard input
private void ProcessInput()
{
if (leftHeld)
steering = -1;
else if (rightHeld)
steering = 1;
else
steering = 0;
if (upHeld)
throttle = 1;
else
throttle = 0;
if (downHeld)
brakes = 1;
else
brakes = 0;
}
private void onKeyDown(object sender, KeyEventArgs e)
{
switch (e.KeyCode)
{
case Keys.Left:
leftHeld = true;
break;
case Keys.Right:
rightHeld = true;
break;
case Keys.Up:
upHeld = true;
break;
case Keys.Down:
downHeld = true;
break;
default: //no match found
return; //return so handled dosnt get set
}
//match found
e.Handled = true;
}
private void onKeyUp(object sender, KeyEventArgs e)
{
switch (e.KeyCode)
{
case Keys.Left:
leftHeld = false;
break;
case Keys.Right:
rightHeld = false;
break;
case Keys.Up:
upHeld = false;
break;
case Keys.Down:
downHeld = false;
break;
default: //no match found
return; //return so handled dosnt get set
}
//match found
e.Handled = true;
}
//rendering - only when screen is invalidated
private void screen_Paint(object sender, PaintEventArgs e)
{
Render(e.Graphics);
}
//when the os gives us time, run the game
private void ApplicationIdle(object sender, EventArgs e)
{
// While the application is still idle, run frame routine.
DoFrame();
}
private void MenuExit_Click(object sender, EventArgs e)
{
this.Close();
}
}
//keep track of time between frames
class Timer
{
//store last time sample
private int lastTime = Environment.TickCount;
private float etime;
//calculate and return elapsed time since last call
public float GetETime()
{
etime = (Environment.TickCount - lastTime) / 1000.0f;
lastTime = Environment.TickCount;
return etime;
}
}
}
Phase Two - Rigid Body Simulation
Ok, now we're getting into some good stuff here. Let's put everything we just covered on the back burner now and talk about some physics. We're going to be using a very simple Euler integration method. Basically, each frame we accumulate a bunch of forces (in our case from each wheel of the vehicle) and calculate the resultant acceleration, which is in the form of A=F/M (the same as F=MA, Newton's second law of motion). We use this to modify Newton's first law of motion, "an object in motion stays in motion..." So we calculate our A, and we integrate it into our V. Without an A, V would be constant, hence staying in motion, if no forces should act on it. Newton's third law gets applied in the form that any potential force the vehicle is applying to the ground, gets applied in the opposite direction to the vehicle (I'll explain this in the vehicle section). This topic is much easier to explain with symbols. So, P is our vehicle position, V is its linear velocity, F is the net force acting on it, M is its mass, A is the resultant acceleration, and T is the time step (the value our timer gave us from the last frame).
A = F / M
V = V + A * T
P = P + V * T
This is a basic linear rigid body simulator. Each frame, we total up some F, integrate it, and then zero out F to restart the accumulation the next frame. Now let's talk about rotation. The angular case is nearly identical to the linear case (especially in 2D). Instead of P we have an Angle, instead of V we have an Angular Velocity, instead of F we have a torque, and instead of M we have inertia. So the angular model looks like this
AngA = Torque / Inertia
AngV = AngV + AngA * T
Angle = Angle + AngV * T
AddForce function
for our rigid body. This is what gets called every frame, once per wheel, to accumulate the chassis' rigid body force/torque. The linear case is simple, Force = Force + newForce. The angular case is
a little trickier. We take the cross product of the force direction and the torque arm (the offset between where the force was applied and the center of mass of the body.) In 2D, this results in a
scalar value that we can just add to Torque. So, Torque = Torque + TorqueArm.Cross(Force)
This is what that bit of code looks like. % is the cross product operator for my vector class.
public void AddForce(Vector worldForce, Vector worldOffset)
{
//add linar force
m_forces += worldForce;
//and it's associated torque
m_torque += worldOffset % worldForce;
}
Code Dump
Here is my rigid body object. You'll notice all the properties I mentioned above. It has a Draw function which will draw its rectangle to the provided graphics object. It has an
AddForce function, a space conversion method, to and from world space (very handy), and a function that returns the velocity of a point on the body (in world space). This point velocity
is a combination of the linear velocity and the angular velocity. But the angular velocity is multiplied by the distance the point is from the center of rotation and perpendicular to its offset
direction. So to kill two birds with one stone, I simply find the orthogonal vector to the point offset and multiply it by the angular velocity (then add the linear velocity.)
One thing you may be curious about is how I calculate the inertia value. That is a generalized formula I found at this link.
//our simulation object
class RigidBody
{
//linear properties
private Vector m_position = new Vector();
private Vector m_velocity = new Vector();
private Vector m_forces = new Vector();
private float m_mass;
//angular properties
private float m_angle;
private float m_angularVelocity;
private float m_torque;
private float m_inertia;
//graphical properties
private Vector m_halfSize = new Vector();
Rectangle rect = new Rectangle();
private Color m_color;
public RigidBody()
{
//set these defaults so we dont get divide by zeros
m_mass = 1.0f;
m_inertia = 1.0f;
}
//intialize out parameters
public void Setup(Vector halfSize, float mass, Color color)
{
//store physical parameters
m_halfSize = halfSize;
m_mass = mass;
m_color = color;
m_inertia = (1.0f / 12.0f) * (halfSize.X * halfSize.X)
* (halfSize.Y * halfSize.Y) * mass;
//generate our viewable rectangle
rect.X = (int)-m_halfSize.X;
rect.Y = (int)-m_halfSize.Y;
rect.Width = (int)(m_halfSize.X * 2.0f);
rect.Height = (int)(m_halfSize.Y * 2.0f);
}
public void SetLocation(Vector position, float angle)
{
m_position = position;
m_angle = angle;
}
public Vector GetPosition()
{
return m_position;
}
public void Update(float timeStep)
{
//integrate physics
//linear
Vector acceleration = m_forces / m_mass;
m_velocity += acceleration * timeStep;
m_position += m_velocity * timeStep;
m_forces = new Vector(0,0); //clear forces
//angular
float angAcc = m_torque / m_inertia;
m_angularVelocity += angAcc * timeStep;
m_angle += m_angularVelocity * timeStep;
m_torque = 0; //clear torque
}
public void Draw(Graphics graphics, Size buffersize)
{
//store transform, (like opengl's glPushMatrix())
Matrix mat1 = graphics.Transform;
//transform into position
graphics.TranslateTransform(m_position.X, m_position.Y);
graphics.RotateTransform(m_angle/(float)Math.PI * 180.0f);
try
{
//draw body
graphics.DrawRectangle(new Pen(m_color), rect);
//draw line in the "forward direction"
graphics.DrawLine(new Pen(Color.Yellow), 1, 0, 1, 5);
}
catch(OverflowException exc)
{
//physics overflow :(
}
//restore transform
graphics.Transform = mat1;
}
//take a relative vector and make it a world vector
public Vector RelativeToWorld(Vector relative)
{
Matrix mat = new Matrix();
PointF[] vectors = new PointF[1];
vectors[0].X = relative.X;
vectors[0].Y = relative.Y;
mat.Rotate(m_angle / (float)Math.PI * 180.0f);
mat.TransformVectors(vectors);
return new Vector(vectors[0].X, vectors[0].Y);
}
//take a world vector and make it a relative vector
public Vector WorldToRelative(Vector world)
{
Matrix mat = new Matrix();
PointF[] vectors = new PointF[1];
vectors[0].X = world.X;
vectors[0].Y = world.Y;
mat.Rotate(-m_angle / (float)Math.PI * 180.0f);
mat.TransformVectors(vectors);
return new Vector(vectors[0].X, vectors[0].Y);
}
//velocity of a point on body
public Vector PointVel(Vector worldOffset)
{
Vector tangent = new Vector(-worldOffset.Y, worldOffset.X);
return tangent * m_angularVelocity + m_velocity;
}
public void AddForce(Vector worldForce, Vector worldOffset)
{
//add linar force
m_forces += worldForce;
//and it's associated torque
m_torque += worldOffset % worldForce;
}
}
Testing
To make sure your rigid body works, instantiate one in your Init() function and apply a force with some offset in the DoFrame function. If you apply a constant
worldOffset, the body will continue to accelerate its angular velocity. If you take your offset and run it through the RelativeToWorld function, the body will angularly accelerate in one
direction and then come back the other way, like a pendulum as the point the force is applied to changes. Play around with this for a while, this has to work and make sense in order for the next
section to work.
Phase Three - The Vehicle
Assuming everything has gone well above, you should have a rigid body actor in your scene that you can apply forces to and watch move around. Now all that's left is to calculate these forces in a way that will simulate a vehicle. For that we are going to need a vehicle object. I recommend deriving directly from you rigid body object since the chassis is essentially a rigid body. In addition to that we will need to construct a "wheel" object. This wheel will handle the steering direction of each wheel, the velocity the wheel is spinning, and calculate the forces that that particular wheel applies to the chassis (all in vehicle space). Since our wheel is known to be constrained to the vehicle, we don't need to simulate it as another rigid body (though you could, but not in the 2D case.) We will simply duplicate the angular properties of the rigid body in the wheel object.
So we'll need: Wheel Velocity, Wheel Inertia, and and Wheel Torque. We'll also need the relative offset of the wheel in the vehicle space, and the angle the wheel is facing (this is
constant for the back wheels, unless you want 4 wheel steering.) Just like the rigid body, the wheel's torque function acts as an accumulator, we add torques to it and after it gets integrated the
torque is zeroed out. The AddTorque function is where you will apply a wheel torque from either the transmission (to make you go) or from the brakes (to make you stop). Internally the
wheel will generate a torque caused by the friction on the road.
The wheel object also needs a SetSteering function. This function calculates two vectors: an effective Side Direction, and an effective Forward Direction (both in vehicle space) that
the tire patch will act on. The force applied on the tire by the ground acting in the side direction will directly translate into the chassis. Meanwhile the force acting in the forward direction will
not only act on the chassis, but it will induce a rotation of the tire. Here is the SetSteering function; you will see I used the Drawing2D.Matrix to transform the initial
forward and side vectors by the steering angle (I had to convert the vectors to "points" in order to transform them by the matrix.)
public void SetSteeringAngle(float newAngle)
{
Matrix mat = new Matrix();
PointF[] vectors = new PointF[2];
//foward vector
vectors[0].X = 0;
vectors[0].Y = 1;
//side vector
vectors[1].X = -1;
vectors[1].Y = 0;
mat.Rotate(newAngle / (float)Math.PI * 180.0f);
mat.TransformVectors(vectors);
m_forwardAxis = new Vector(vectors[0].X, vectors[0].Y);
m_sideAxis = new Vector(vectors[1].X, vectors[1].Y);
}
Force Calculation
So, if the vehicle is sitting there not moving with its front wheels turned, and you push it, a force will be generated in the opposite direction you push. This force gets projected onto these two directions. If the wheels were straight there would be no side force. So the vehicle would simply roll forward. But since the wheels are turned, there is a bit of the force that acts in the "effective side direction" so we apply an opposite force to the chassis. This is what causes you to turn when you steer the wheels. To get this force that gets projected onto the two directions, we need to first determine the velocity difference between the tire patch and the road. If the wheel is spinning at the same speed the ground is wizzing by, then there is effectively no force acting on the vehicle. But as soon as you slam on the brakes and stop the wheel, there is a huge velocity difference and this is what causes the force that stops your car.
So here is the process broken down into 6 steps, for each wheel.
Step 1, calculate the effective direction vectors (with steering function).
Step 2, calculate velocity difference. The ground speed is determined via the "PointVel" function on the rigidbody, given the current wheel's world offset.
Step 3, project this velocity onto the two effective directions.
Step 4, generate an equal and opposite force for the two direction and call this the "response force". This is what gets added to the chassis for each wheel.
Step 5, calculate the torque that the forward response force created on the wheel, and add this to the wheel torque.
Step 6, integrate the wheel torques into the wheel velocity.
That bit of code looks like this:
public Vector CalculateForce(Vector relativeGroundSpeed, float timeStep)
{
//calculate speed of tire patch at ground
Vector patchSpeed = -m_forwardAxis * m_wheelSpeed *
m_wheelRadius;
//get velocity difference between ground and patch
Vector velDifference = relativeGroundSpeed + patchSpeed;
//project ground speed onto side axis
float forwardMag = 0;
Vector sideVel = velDifference.Project(m_sideAxis);
Vector forwardVel = velDifference.Project(m_forwardAxis, out forwardMag);
//calculate super fake friction forces
//calculate response force
Vector responseForce = -sideVel * 2.0f;
responseForce -= forwardVel;
//calculate torque on wheel
m_wheelTorque += forwardMag * m_wheelRadius;
//integrate total torque into wheel
m_wheelSpeed += m_wheelTorque / m_wheelInertia * timeStep;
//clear our transmission torque accumulator
m_wheelTorque = 0;
//return force acting on body
return responseForce;
}
Almost Done!
We're in the home stretch here now. Now we have a way to calculate the force each wheel generates on the chassis. Every frame, all we have to do is set our transmission and brake torques, our steering angle, calculate each wheel force, add these to the chassis, and integrate the rigid body. Badaboom badabing, vehicle done! :)
Conclusion
Here is the entire source code for the project. If you have any questions or comments please feel free to post them here and either I can make things more clear or maybe someone else could offer some better expertise. If you'd like you can email me at Kincaid05 on google's fine emailing service.
Thanks for reading and I hope this was informative.
-Matt Kincaid
