Racing Car Game # Day 7— Mobile Development

My Cross-Platform Development Project with mobile touch controls

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.

A Data & Analytics Consultant who is expanding into developing experiences in XR, Enterprise and Gaming space using Unity

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Concocting a Java Web Application — Pt. I

Create a dynamic web project in eclipse

Life is a journey of twists and turns, peaks and valleys, mountains to climb and oceans to explore.

📊 Show off your coding stats on your GitHub Profile using WakaTime

How I faced my AWS Certified Developer Associate exam with a Duck, Guru and practical knowledge…

Upcoming changes to the CSS for variable fonts

How to stop being a masochist and start monitoring OpenStack with a single tool

The Kata of a Software Developer

Power Notify: The Modern Way to Notify Power App Users

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jean-Noel Seneque

Jean-Noel Seneque

A Data & Analytics Consultant who is expanding into developing experiences in XR, Enterprise and Gaming space using Unity

More from Medium

Create an Installer for your Game

Arrays & Power-Ups

3rd Person Follow Virtual Camera Explained in Unity’s Cinemachine

2.5D Platformer: Pushing a box