Racing Car Game # Day 7— Mobile Development
Objective: Setup for mobile development
In the previous article, Racing Car Game # Day 6 — New Unity Input System, we migrated to the new Unity Input System and set up the keyboard and gamepad. In this article, we will take it further by simulating a mobile environment and adding mobile touch inputs.
Set up Device Simulator
As of writing this article, the Device Simulator 3.0.3 is in Preview so to import it into your project go to Windows > Package Manager.
Ensure Packages is Unity Registry and click on the Cog icon and go to Advance Project Settings.
Click on Enable Preview Packages.
Search for Device Simulator and import it.
Show a simulated device
Now we can show the game scene as a simulated device by going to the Game Scene and changing from Game to Simulator. In this example, I am going to change the orientation and I have an Apple iPhone XS Max. This is how you can cycle through each of the devices to see how your game looks.
Simulator touch
While in the Unity Editor, we can simulate the mouse touching the screen of the device by enabling a setting. Simply go to Window > Analysis > Input Debugger. In the Input debug window, go to Options and select Simulate Touch Input from a Mouse or Pen.
Create a joystick and button
We are now going to create two UI elements that will act as a joystick to move the car around and a button for the brake.
In the Hierarchy, create a UI Image and name it Joystick.
This has created a white square in the centre of the screen.
Before we go any further, let’s set the canvas to scale with the screen and set a resolution. Back on the Canvas, change the UI Scale Mode to Scale with Screen Size and I set the resolution to 1920 x 1080.
Let’s now position that towards the bottom left of the screen where our left thumb would be. Click on the Joystick, click on the Anchor Presets and with the SHIFT and ALT key pressed, pick the bottom left.
I create a simple white circle image in Photoshop and brought it into Unity. Turned it into a Sprite (2D and UI) texture type and dragged it into the Source Image. Change the position and size and reduce the alpha.
You should have a faded white circle on-screen.
To be able to interact with this, add an On-Screen Stick component to the Joystick and I set the Movement Range to 100.
If you press play now, you will be able to move the joystick around.
Let’s add the brake button, duplicate the Joystick, rename to BrakeButton, remove the On-Screen Stick and replace it with the On-Screen Button component. Reposition it at X: -200 and Y: 250.
Wire UI to Input System
All we need to do now is to let the UI know what to do when they are interacted with. You will love how easy Unity has made this so simple for touch inputs now that we have already set up the Input System.
Select the Joystick and set the Control Path to Left Stick
Select the BrakeButton and set the Control Path to Left Trigger.
BOOM! As easy as that. Press play if you don’t believe me. Here you can see it running in my Cross-Platform Development project where I am demonstrating a single code base running on multiple platforms like Windows, WebGL, and Mobile while managing different inputs. I love Unity! One project, deploy to many platforms.
If you enjoyed reading this article give me a Clap, also if you would like to see more, “Follow” me, so you may be notified of future releases. You may also send me a message if you need any help or if there is something you think I can improve.
