Build an AR Remote Controlled Car – Part 1

Build an AR Remote Controlled Car – Part 1

Intro

Have you ever been cruising down the highway and see a flash of color pass you by with a monstrous roar? And when you’re done doing your double-take, you realize that the sports car of your dream has just zipped in front of you. Then that all-encompassing feeling of loss hits you. A loss for something that you didn’t even know you wanted but, at that very moment, need. But what if I told you can have your very own sports car without all the pesky upkeep requirements and the never-ending rise of gas prices? In this tutorial, I will show you how to build your very own augmented reality remote-controlled car for iOS. Then there will be no overwhelming sense of loss, because, alongside your contact and calendar, you will have your dream car tucked away ready to go at the drop of a hat.

So come along with me once again into the ARverse where the unknown is waiting to be explored.

The complete Unity project for this tutorial is available here. All images and models used in this tutorial have been created by me.

This tutorial was implemented in:

  • Xcode 10.1
  • Unity 2018.3.8f1
  • iPhone 6 Plus

Tutorial Outline

  1. Overview
  2. Create Car’s Inner Body
  3. Attach Wheel Collider to Inner Body

*Building to Android with ARCore is outside the scope of this tutorial, we encourage you to research how to do so if you would like to.

Overview

To make our augmented reality remote-controlled car, we are first, going to create the inner body of the car by creating a cube game object and attaching a rigid body to it. Our inner body will then be masked and the wheels attached. Second, we are going to attach the actual car model on top of our inner body. Third, we are going to attach a driving script to the car, that is, we are going to write some code to drive our car around town. With this we will be able to move the car left and right, forward and backward, using our keyboard arrow keys. But since we are making this application for a mobile device, we have to use touchscreen joysticks. So in the fourth step, we are going to add touchscreen joysticks so that we can move the car left and right, backward and forward. Overall these are the four main steps we are going to follow.

To set up your unity project, configure your game for augmented reality and install the AR Foundation and ARKit Packages check out my last tutorial How to Create an AR Shoot’em Up Gallery Game – Part 1 for instructions on how to do so.

Create Car’s Inner Body

Once you have set up your unity project, configure your game for augmented reality and install the AR Foundation and ARKit Packages you’ll need to create the car’s inner body. First, we’ll need to create an empty game object with a scale of 0.1 for the x, y, and z axes that will house our dream sports car. To do so, right-click on the Scene Hierarchy and select Create Empty game object.

Unity menu with Create Empty selected

Rename it Parent and reset its origin in the Transform properties found in the Inspector pane, by clicking on the Transform panel gear and selecting Reset. Resize it by changing the Scale x, y and z properties to 0.1 respectively.

Unity Inspector Component for Parent object

Now select the Parent game object, right-click, and select Create Empty game object. Rename it, Car Parent. With Car Parent selected in the Inspector Panel press the Add Component button to add a Rigidbody to our Car Parent. Just type in Rigidbody to the search field and select it from the populated search. With our Rigidbody added to our Car Parent, we’ll need to input some parameters so that behaves like an actual physical object within the game space. For the Mass input 1000, Drag: 0, Angular Drag: 0.05, enable Use Gravity, Interpolate: None, and Collision Detection: Discrete.

Unity Inspector window with Rigidbody for Car Parent object shown

Next, we will need to create a cube in the Parent game object that will be the physical inner body of the car. The cube will serve as the collider and driver of the car. To create it select the Parent, right-click, select 3D Object > Cube and rename your new cube Inner Body. We need to scale the Inner Body to fit the inside of our car model. In the Inspector pane under the Transform panel, your Scale x-axis will be 18, the y-axis 10 and z-axis 34.5. Like I mentioned before the Inner body will the collider. The box collider attached to the cube will allow the car to hit other objects.

Unity with rectangle box object added to scene

Attach Wheel Collider to Inner Body

The Inner Body also supports the wheel. The wheel model that we will be attaching to it does not have any real functionality (other than looking cool). It is the wheel colliders, that we will place on our wheel models, that provides the simulation of the movement of the wheels. This simply means that we can add torque to the back wheel colliders so that they move the car backward and forward. Our left and right wheel collider will turn our car left and right and we can also add suspension to our car with wheel colliders.

Let’s go ahead and add our wheel colliders now. To do so, make sure the Car Parent is s selected and create a new Empty Game Object by right-clicking on Car Parent, select Create Empty game object and rename it W1, this will represent the right front wheel of the car. Now that we have a game object to house our wheel, we will need to add the wheel collider component. With the new W1 game object selected move over to the Inspector Pane and click the Add Component button found there. This will open a search menu in which we will search “Wheel collider.” Once selected it will be added to the W1 game object.

Unity Inspector window with heel Collider component being added

To place the wheel collider in the appropriate place will need to add some parameters to the Position axes. In the Transform panel find the Position field and input x: 9, y: -5, and z: 17.25.

Rectangle car object added to Unity scene

Currently, the size of the wheel collider is very small. We will resize it once we have added the other three wheel colliders. Let’s duplicate W1 by right-clicking on it and selecting Duplicate and rename the newly created game object W2. W2 will represent the left front wheel. Like W1, we will need to reposition our newly created wheel collider. To do so, in the Transform panel found in the Inspector Pane and change the Position x-axis to -9. The y-axis and z-axis will stay the same.

Unity Inspector with W2 object focused on

Next, duplicate the W2 game object as we did with W1. Rename the newly created game object W3. W3 will represent the left back wheel of our car. The new Position z-axis of this wheel is -17.25. The x-axis and y-axis stay the same.

Unity Inspector with W3 object focused on

Once again duplicate the W3 game object and rename it W4. W4 will represent the right back wheel of our car. The new Position x-axis of this wheel is 9. The x-axis and the y-axis stay the same.

Unity Inspector with W4 object focused on

With all our wheel colliders created we can now resize them by selecting them all, in the Inspector Pane under the Wheel Collider component, find the Radius field and input 3.44.

Unity AR card object with wheel colliders added

Our wheel colliders seem to be all set, but if we were to play our game in preview mode we would see our car asset continually falling through gamespace. This is done to the Rigid Body component’s gravity parameter that we placed on the Parent game object that houses our car. To combat this we’ll need to add an invisible plane for the car to collide with. Will add the plane to the Parent by right-clicking it, selecting 3D Object > Plane from the dialog box that appears.

The initial scale of the plane cannot hold our car. Let’s scale it up by inputting 1000 for the Scale x-axis and z-axis. You can also just change the y-axis of the Position to 17.6. Now we can pull the Car Parent a little above the plane and when we press play the car collides with the plane.

Unity AR car object being moved

If you take a closer look at when the car collides with the plane you will also notice that it kind of just plumps on to it. It doesn’t have that bouncy natural feel that cars simulate when going over a bump. This referred to as suspension. To add suspension to our car select all the wheels, in the Wheel Collider component found in the Inspector Pane, change the Suspension Distance to 3 and the Force App Point Distance to 10.

Now if we play our game, lift the car in the why x-axis and release. We see that our car has a bit of bounce to it. We’ll also want to add a bit of stiffness to the Forward and Sideways Friction. Currently, if we leave these parameters the way they are the car will slip unnaturally when it moves forwards or goes to turn. To do so, make sure all wheels are selected, in the Wheel Collider component change the Forward Friction Stiffness to 2 and the Sideways Friction Stiffness to 2.

Unity Wheel Collider's Asymptote Slip adjusted to 0.5

We do not actually need to see the plane when we are playing our game. We’ll need to make it invisible to our user. To do so, select the plane, in the Inspector pane deselect the Mesh Renderer component. And there you have it the plane is no longer visible but it is doing it job of stopping the car from plummeting into game space for eternity.

Now our wheel colliders are ready to support our 3D wheel models.

Conclusion

In this tutorial we learned how to create:

  • The inner body for our car that will simulate all the movement for it
  • The wheel colliders that will move the car forward, backward and allow the car to turn

Right now, our car doesn’t look like much of anything. Well, it actually reminds me of how I would draw my cars back in the day, but not like my dream Lamborghini Hurricane Evo Spyder and that’s okay. In the next part of this tutorial series, I’ll show you how to attach the 3D wheel models as well as the Car to the Inner Body. From there, we’ll revise the AR Tap to Place code used in the AR Shoot’em Up Gallery Game series to place our car in the real world. Then we just need to figure out how to make this bad boy go and we are home free.

For some additional fun, I’ll throw in how to change the color of our car and turn on/off the headlights.

For now, go forth into the ARverse like the courageous pioneers, Neil Armstrong, and Buzz Aldrin, and create more!

“Just remember there is only one corner of the ARverse you can be certain of improving, and that’s your own code.” – Morgan H. McKie