Using Joystick Step by Step with Unity

Unity and Joystick Control

 Hello,

In this article, I will tell you how to control the game with Joystick with Unity. Users prefer to play their games on mobile devices as well as computers and consoles and similar platforms, and writing games that will work on mobile is very popular today. We can use the advantage of the touch screen by adding a joystick to our game screen and make our game preferable.

So how to add Joystick to unity game project? How to control the joystick? How to move a character or object using a joystick? I will explain all of them step by step in my article.

I will start by assuming that you have already created a Unity project and added a character or an object that you want to move with a plane and a joystick to the game scene.

Adding Joystick

Step 1 : Add Collider and Rigidbody to the character we created.

Step 2 : Let’s add the Joystick package offered for free to our project from the link below.

Step 3: After downloading and importing our package using Package Manager, let’s add a Canvas to our project. It doesn’t matter if our project is 2D or 3D, it works in both cases. Because we need a Canvas object to place the joystick on the screen.

Step 4: Then drag and drop the Fixed Joystick from the prefabs folder in the package folders under the Canvas we created in the previous step. Since we have selected the prefab whose position is Fixed by default, the joystick will be placed in the lower left corner of the screen.

Step 5: Since we prefer to use our game on the mobile platform and with the screen tilted, let’s open the Build Settings screen, after adding the scene to the build screen, select IOS or Android and click Switch Platform.

On the Main Screen, where the Scene and Game windows are, Smilator should now be displayed instead of Game.

Step 6: In this step, let’s move on to screen sizing. Let’s change the Scaler property in the Inspector section of the Canvas we added to Scale With Screen Size. Here we can enter the screen sizes we are targeting.

Joystick Control

Step 7: After adjusting the screen sizes, it’s time for the coding part that will allow us to move our character or object. We can add the following codes to the Script file we will create in our Script folder.

 [SerializeField] private FixedJoystick _joystick;
[SerializeField] private float _moveSpeed;

private void FixedUpdate()
{
JoystickMovement();
}

void JoystickMovement()
{
float horizontal = _joystick.Horizontal;
float vertical = _joystick.Vertical;
Vector3 addedPosition = new Vector3(horizontal * _moveSpeed * Time.deltaTime, 0, vertical * _moveSpeed * Time.deltaTime);
transform.position += addedPosition;
}
Object Control with Joystick

I added a flat floor and a capsule as above for an example. We can think of it as a character. I especially tilted the capsule sideways by playing with its rotation because it already has a rigid body, so it automatically falls to the side as soon as we start the game.

Step 8: Let’s add the Script we wrote above to our character. Let’s not forget to assign our joystick that we added from the package folders to the _joystick variable, which we define as private here but make it accessible with the SerialiseField expression.

I tried to explain step by step how to add a joystick to a game in Unity and how to control it, I hope it was useful.

Thanks for your reading.

Selin.


Unity ile Adım Adım Joystick Kullanımı

Unity ve Joystick Kontrolü

 Merhaba,

Bu yazımda sizlere Unity ile oyunu Joystick ile kontrol etme nasıl yapılır bunu anlatacağım. Kullanıcılar oyunlarını bilgisayar ve konsol ve benzeri platformların yanında mobil cihazlarda da oynamayı çokça tercih ediyorlar ve mobilde çalışacak oyun yazabilmek günümüzde oldukça revaçta. Dokunmatik ekranın avantajını oyun ekranımıza joystick ekleyerek kullanabilir ve oyunumuzun tercih edilir olmasını sağlayabiliriz.

Peki unity oyun projesine Joystick nasıl eklenir? Joystick kontrolü nasıl yapılır? Joystick kullanarak karakter ya da nesne nasıl hareket ettirilir? Hepsini yazımda adım adım anlatacağım.

Halihazırda bir Unity projesi oluşturduğunuzu, bir zemin(plane) ve joystick ile hareket etmesini istediğiniz bir karakter veya bir nesneyi oyun sahnesine eklediğinizi varsayarak anlatmaya başlıyorum.

Joystick Ekleme

1 . Adım : Oluşturduğumuz karaktere Collider ve Rigidbody ekleyelim.

2 . Adım : Ücretsiz bir şekilde sunulan Joystick paketini aşağıdaki linkten projemize ekleyelim.

3 . Adım: Package Manager kullanarak paketimizi sırasıyla download ve import ettikten sonra projemize bir Canvas ekleyelim. Projemizin 2D veya 3D olması önemli değil, her iki durumda da çalışır. Çünkü Joystick’i ekrana yerleştirmek için bir Canvas nesnesine ihtiyacımız var.

4 . Adım: Daha sonra paket klasörleri içerisindeki prefabs klasöründen Fixed Joystick’i bir önceki adımda oluşturduğumuz Canvas’ın altına sürükleyerek bırakalım. Pozisyonu default olarak Fixed belirlenen prefab’ı seçtiğimiz için joystick ekranın sol alt köşesine yerleşecek.

5. Adım: Oyunumuzu mobil platformda ve ekran yana yatıkken kullanmayı tercih ettiğimiz için Build Settings ekranını açalım, Sahneyi build ekranına ekledikten sonra IOS veya Android’i seçerek Switch Platform’a tıklayalım.

Ana Ekranda Scene ve Game pencerelerinin olduğu kısımda artık Game yerine Smilator görüntüleniyor olması gerekir.

6 . Adım: Bu adımda ekran boyutlamasına geçelim. Eklediğimiz Canvas’ın Inspector kısmındaki Scaler özelliğini Scale With Screen Size olarak değiştirelim. Burada hedeflediğimiz ekran boyutlarını girebiliriz.

Joystick Kontrolü

7 . Adım: Ekran boyutlarını da ayarladıktan sonra sıra karakterimizi veya nesnemizi hareket ettirmemizi sağlayacak kodlama kısmına geldi. Script klasörümüz içerisine oluşturacağımız Script dosyasına aşağıdaki kodları ekleyebiliriz.


[SerializeField] private FixedJoystick _joystick;
[SerializeField] private float _moveSpeed;

private void FixedUpdate()
{
JoystickMovement();
}

void JoystickMovement()
{
float horizontal = _joystick.Horizontal;
float vertical = _joystick.Vertical;
Vector3 addedPosition = new Vector3(horizontal * _moveSpeed * Time.deltaTime, 0, vertical * _moveSpeed * Time.deltaTime);
transform.position += addedPosition;
}
Joystick ile Nesne Kontrolü

Ben örnek olması için yukarıdaki gibi düz bir zemin ve bir kapsül ekledim. Bunu karakter gibi düşünebiliriz. Kapsülü rotation’ı ile oynayarak özellikle yan yatırdım çünkü rigidbody’si bulunduğundan zaten oyunu başlattığımız an kendiliğinden yana düşüyor.

8 . Adım: Yukarıda yazmış olduğumuz Script’i karakterimize ekleyelim. Burada private olarak tanımladığımız ancak SerializeField ifadesiyle erişilebilir olmasını sağladığımız _joystick değişkenine paket klasörlerinden eklediğimiz joystick’imizi atamayı unutmayalım.

Unity’de bir oyuna Joystick nasıl eklenir ve nasıl kontrol edilir bunu adım adım anlatmaya çalıştım, umarım faydalı olmuştur.

Teşekkürler.

Selin.


Firebase Integration with Flutter

 

Hello,
In this article, I want to talk about how we can integrate our Flutter project into the Firebase platform.

Firebase is a platform offered by Google and includes comprehensive developer tools that enable rapid development and deployment of mobile and web applications.

Firestore Integration Step by Step

1. Firstly, we need to add our project that we have written or just started to Firestore. For this, we log in to Firebase Console. We log in with our Google account.

2. When we enter the Get Started section, click on the Add Project section on the page that opens.

3. On the screen that opens, we enter our project name and proceed as the page directs us. There is a selection to use GoogleAnalytics. This is a free web analytics service used to measure the performance and user interactions of websites and mobile applications. You can select it if you want to track and access real-time data such as visitor tracking, page views, accesses, traffic sources, etc. The next screen asks you to create an Analytics account. You can create and continue. If you do not want to use this feature, you can also leave it unchecked.

4. After our project connection is made, we see a screen like below. Here we need to make IOS, Android, Web integrations separately. Of course, it is logical to choose only on which of these platforms our application will be published.

5. Let’s start with IOS. Our screen looks like this:

The first information requested from us is Apple bundle id. This is like the identity record of our application. It can be determined by the system when creating a project, or we can ask for a specific id. We can access this information by opening our project in XCode. After the project is loaded, when we click the Runner tab, the General page is loaded on the right. The bundle id is there as shown below. Other information NickName and StoreID are optional.

6. The second part is downloading the configuration file. We download the file created specifically for our project from the link as shown on the screen below. And add it under the project folders. We do this addition on Xcode, not by finding the project folders in the Finder and transferring them into it.

When we drag the file to the XCode screen, a screen like the one below appears. It is important that we select all targets on this screen.

7. In the next step, we need to install firebase-ios-sdk in our project. A URL appears on the screen below, copy it and paste the URL from the File — Add Package Dependencies steps in Xcode and click Add Package.

8. After this stage, our project is saved in the Firestore database on the IOS platform.

9. On the Android platform, there are a number of different applications.

The first requested information is Android package name. It has the same feature as IOS bundle id.

10. Here, a json file comes as a configuration file. We add it under the app folder from the project folders as shown.

11. It’s time to add firebase-sdk. We enter the android/app/build.gradle file and add the following codes:

plugins {
id "com.android.application"
id "kotlin-android"
id "dev.flutter.flutter-gradle-plugin"
id "com.google.gms.google-services". //This line is added
}

dependencies {
implementation platform('com.google.firebase:firebase-bom:32.8.1')
//This line is added, figures may vary according to version.
//The current figures are shown in the following routing screen.

In the android/build.gradle file, we add the following codes:

buildscript {.  //figures may vary according to version. 
//The current figures are shown in the following routing screen.
ext.kotlin_version = '1.7.10'
repositories {
google()
mavenCentral()
}

dependencies {
classpath 'com.android.tools.build:gradle:7.3.0'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath 'com.google.gms:google-services:4.4.1'
}
}

12. After completing this step, we also register our project for the Android platform.

Firebase Key Features

1. Database (Firestore): Firebase provides Firestore, a real-time database solution. Firestore is a cloud-based, NoSQL database and is an ideal solution for storage and synchronisation of user data for web and mobile applications.

2. Authentication: Firebase Authentication manages authentication of application users. It facilitates authentication of users using email/password, Google, Facebook, Twitter, GitHub and other identity providers.

3. Storage: Firebase Storage allows users to store media files (images, videos, documents) in the cloud. In this way, users can securely store and share large files.

4. Analytics and Monitoring: Firebase Analytics, as I mentioned at the beginning of my article, offers comprehensive analytical tools to monitor and understand application usage. It monitors user behaviour and interactions and measures the performance of the application.

5. Messaging and Notifications: Firebase Cloud Messaging (FCM) is used to send push notifications to users. FCM is a powerful tool used to attract and engage users.

6. Hosting: Firebase Hosting is used to deploy web applications quickly and securely. It offers static and dynamic content and servers it securely with SSL support.

7. Artificial Intelligence and Machine Learning: Firebase ML Kit allows developers to add artificial intelligence and machine learning features in their applications. It can enrich applications with advanced image processing, text recognition, language translation and other features.

We can use Firebase with the services I mentioned above and many more tools that are not here. I will explain the most used Firestore and Storage features in detail in my following articles.

I hope my installation narrative helps.

Thanks for reading.

Selin.