Membuat Lobby Game Multiplayer dengan Photon

Setelah sebelumnya kita telah mengimplementasikan Photon PUN2 pada Unity 6, selanjutnya kita akan belajar membangun Lobby Scene, membuat antarmuka (UI), hingga menulis script C# menggunakan Photon Unity Networking 2 (PUN2) untuk sistem login dasar.

Pertama-tama siapkan scene baru khusus sebagai pintu masuk (lobby) sebelum pemain masuk ke Game Scene. Di Project (folder scene), klik kanan lalu pilih Create -> Scene. Beri nama scene tersebut “Lobby Scene”. Kemudian klik dua kali pada scene tersebut untuk membukanya di editor.

Selanjutnya, kita akan menyusun struktur UI mulai dari Canvas, Panel, hingga Background.

1. Buat Canvas: Di jendela Hierarchy, klik kanan lalu pilih UI -> Canvas.
2. Buat Background: Di dalam Canvas, tambahkan Image (Klik kanan pada Canvas -> UI -> Image) dan sesuaikan warnanya untuk menjadi latar belakang.
3. Buat Panel Atas: Klik kanan pada Canvas, pilih UI -> Panel, lalu ubah namanya menjadi “Panel Atas”. Tambahkan teks seperti judul game.
4. Buat Panel Utama: Buat satu Panel lagi di dalam Canvas, beri nama “Panel Utama”.
5. PanelLogin: Berisi UI Input Field (TMP) untuk memasukkan nama pemain, dan sebuah Button (TMP) untuk Login.
6. RoomPanel: Berisi 3 buah Button (Buat Room, Gabung Room Acak, dan Daftar Room).
7. BuatRoomPanel: Berisi 2 buah Input Field (nama room dan maksimal pemain) serta 2 buah Button (Batal dan Gabung Sekarang).
8. DaftarRoomPanel: Berisi elemen Scroll View untuk melihat room yang tersedia, dan Button Batal.
9. GamePanel: Berisi teks status dan 2 Button (Mulai Game, Keluar Game).
10. RoomAcakPanel: Berisi teks “Mencari room…” dan Button Batal.

Kemudian buat C# Script dengan nama yang sama dan pasangkan script tersebut ke GameObject ManajeJaringan yang akan mengelola koneksi ke Photon, menampilkan status koneksi, serta mengatur perpindahan panel.

Silahkan Copy script berikut ini :

using Photon.Pun;
using UnityEngine;
using UnityEngine.UI;
using Photon.Realtime;
using System.Collections.Generic;

Get Marisalya’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

public class ManajerJaringan : MonoBehaviourPunCallbacks
{
[Header(“Connection Status”)]
public Text statusKoneksi;

[Header(“Login UI Panel”)]
public InputField NamaPlayer;
public GameObject PanelLogin;

// Tambahkan deklarasi variabel GameObject untuk panel-panel baru di sini
[Header(“Room UI Panels”)]
public GameObject RoomPanel;
public GameObject BuatRoomPanel;
public GameObject GamePanel;
public GameObject DaftarRoomPanel;
public GameObject RoomAcakPanel;

private void Update()
{
statusKoneksi.text = “Status Koneksi: “
+ PhotonNetwork.NetworkClientState;
}

public override void OnConnectedToMaster()
{
// Pesan ini untuk mengecek apakah fungsi benar-benar terpanggil
Debug.Log(“Berhasil terhubung ke Master Server! Pindah Panel…”);

ActivatePanel(RoomPanel.name);
}

public void OnLoginButtonClicked()
{
string playerName = NamaPlayer.text;
if (!string.IsNullOrEmpty(playerName))
{
PhotonNetwork.LocalPlayer.NickName = playerName;
PhotonNetwork.ConnectUsingSettings();
}
else
{
Debug.Log(“Nama Player Tidak Valid!”);
}
}

// Fungsi dari Slide 9
public void ActivatePanel(string panelToBeActivated)
{
PanelLogin.SetActive(
panelToBeActivated.Equals(PanelLogin.name));

RoomPanel.SetActive(
panelToBeActivated.Equals(RoomPanel.name));

BuatRoomPanel.SetActive(
panelToBeActivated.Equals(BuatRoomPanel.name));

GamePanel.SetActive(
panelToBeActivated.Equals(GamePanel.name));

DaftarRoomPanel.SetActive(
panelToBeActivated.Equals(DaftarRoomPanel.name));

RoomAcakPanel.SetActive(
panelToBeActivated.Equals(RoomAcakPanel.name));
}
}

Setelah script dipasang, pilih GameObject Manajer. Pada bagian Inspector, akan muncul beberapa field yang perlu dihubungkan dengan UI.

Masukkan object sesuai dengan nama field-nya

*Untuk status koneksi yang namanya Text(TMP) pada gambar sebelumnya

Pilih Button Login pada PanelLogin.

Pada bagian:

Button → On Click()

klik tombol +, lalu masukkan GameObject ScriptManajerJaringan.

Jalankan game untuk melakukan pengujian. Masukkan nama pemain pada Input Field, kemudian tekan tombol Login.