Belajar Luau 14: Rojo, VS Code, dan Git

Selama Pelajaran 7–13, kamu menyalin dan menempel script satu per satu ke Studio. Untuk game sungguhan, cara itu cepat merepotkan:

• Script tersebar di banyak tempat di Explorer dan sulit dicari
• Tidak ada riwayat perubahan, jadi kalau rusak, tidak bisa kembali ke versi sebelumnya
• Editor script di Studio kalah lengkap dibanding VS Code

Rojo menyelesaikan semua masalah itu. Kamu menulis kode di VS Code, dan Rojo otomatis menyinkronkannya ke Studio setiap kali file disimpan. Karena kodenya berupa file biasa, semuanya bisa disimpan di Git dan GitHub.

 VS Code (file .luau)  ──simpan──▶  rojo serve  ──sinkron──▶  Roblox Studio
        │
        └── git commit / push ──▶ GitHub

Proyek game/: semua pelajaran digabung jadi satu game

Susun semua script dari Pelajaran 8–13 dan 16 menjadi satu proyek game obby lengkap di folder game/ dengan struktur seperti ini. Isi setiap file adalah script dari pelajaran yang disebutkan di sampingnya:

game/
├── default.project.json      ← "peta": folder mana masuk ke mana di Studio
├── rokit.toml                ← versi Rojo yang dipakai
└── src/
    ├── server/   → ServerScriptService
    │   ├── DataPemain.server.luau          (Pelajaran 10)
    │   ├── Koin.server.luau                (Pelajaran 8, + koin 2x VIP)
    │   ├── Checkpoint.server.luau          (Pelajaran 8)
    │   ├── Hadiah.server.luau              (Pelajaran 9)
    │   ├── Toko.server.luau                (Pelajaran 9)
    │   ├── GamePassVIP.server.luau         (Pelajaran 11)
    │   ├── DeveloperProduct.server.luau    (Pelajaran 11)
    │   ├── EfekCheckpointBadge.server.luau (Pelajaran 12)
    │   ├── Analytics.server.luau           (Pelajaran 13)
    │   ├── Rintangan.server.luau           (Pelajaran 16, lava dll. dengan tag)
    │   └── Modul/                          (Pelajaran 16, modul khusus server)
    │       ├── RateLimiter.luau
    │       └── Validasi.luau
    ├── client/   → StarterPlayer > StarterPlayerScripts
    │   ├── UIKoin, Hadiah, Toko, TokoRobux (Pelajaran 9, 11)
    │   ├── EfekKoin.client.luau            (Pelajaran 12)
    │   └── Lari.client.luau                (Pelajaran 13)
    └── shared/   → ReplicatedStorage
        ├── KonfigToko.luau
        └── KonfigProduk.luau

Aturan penamaan file

Akhiran nama file	Menjadi di Studio
Nama.server.luau	Script bernama Nama
Nama.client.luau	LocalScript bernama Nama
Nama.luau	ModuleScript bernama Nama
Folder biasa	Folder

Isi default.project.json

"ServerScriptService": {
  "$path": "src/server",
  "$ignoreUnknownInstances": true
}

• $path: isi folder src/server dimasukkan ke ServerScriptService.
• $ignoreUnknownInstances: true: objek yang kamu buat langsung di Studio (bukan dari file) tidak dihapus oleh Rojo.

Yang dikelola Rojo hanya script. Peta (Part, folder Koin, Checkpoints, lava) tetap dibangun di Studio seperti biasa dan disimpan di file place-nya. Inilah cara kerja kebanyakan developer: kode di Git, peta di Studio.

Langkah 1: Pasang alat-alat (sekali saja, di Windows)

a. VS Code dan ekstensinya

1. Pasang VS Code dari https://code.visualstudio.com.
2. Buka tab Extensions (Ctrl+Shift+X), lalu pasang:
   • Luau Language Server (oleh JohnnyMorganz). Ekstensi ini memberi saran otomatis (autocomplete) untuk API Roblox dan menandai error sebelum dijalankan.
   • Rojo - Roblox Studio Sync (oleh evaera). Opsional, tapi memudahkan karena Rojo bisa dijalankan dengan sekali klik.

b. Rokit, pengelola versi Rojo

1. Buka https://github.com/rojo-rbx/rokit/releases, lalu unduh file rokit-...-windows-x86_64.zip dari rilis terbaru.
2. Ekstrak, lalu buka PowerShell di folder hasil ekstrak dan jalankan:

   .\rokit.exe self-install
   

3. Tutup lalu buka lagi PowerShell supaya perintah rokit dikenali.

c. Rojo

Di PowerShell, masuk ke folder game milik repo ini:

cd roblox\game
rokit install

Kalau Rokit bertanya apakah kamu mempercayai rojo-rbx/rojo, jawab y. Setelah itu, cek pemasangannya:

rojo --version

Hasilnya harus Rojo 7.7.1.

d. Plugin Rojo di Studio

Pastikan Studio tertutup, lalu jalankan:

rojo plugin install

Saat Studio dibuka, tab Plugins akan berisi tombol Rojo.

Langkah 2: Pindahkan game-mu ke Rojo

Kalau kamu sudah mempraktikkan Pelajaran 7–13 dengan menempel script manual, hapus dulu script-script lama supaya tidak ada yang dobel:

1. Buka place obby-mu di Studio.
2. Hapus semua script lama di ServerScriptService, StarterPlayer → StarterPlayerScripts, serta ModuleScript KonfigToko dan KonfigProduk di ReplicatedStorage.
3. Hapus juga script di dalam Part (lava, platform rapuh, pad penyembuh dari Pelajaran 7). Penggantinya adalah Rintangan.server.luau, yang bekerja dengan tag: beri Part tersebut tag Lava, PlatformRapuh, atau PadPenyembuh (caranya ada di Pelajaran 16).
4. Isi ulang ID di game/src/shared/KonfigProduk.luau dan ID badge di game/src/server/EfekCheckpointBadge.server.luau dengan ID milikmu.

Peta yang dibutuhkan game ini (dibuat di Studio):

Objek di Workspace	Isi
Folder Koin	Part-Part koin (Pelajaran 8)
Folder Checkpoints	Part bernama 1, 2, 3, … (Pelajaran 8)

Langkah 3: Hubungkan

1. Di PowerShell, di folder game:

   rojo serve
   

   Biarkan jendela ini tetap terbuka. Akan muncul tulisan Rojo server listening on port 34872.
2. Di Studio: Plugins → Rojo → Connect.
3. Lihat Explorer. Semua script muncul di tempatnya masing-masing.
4. Coba ubah sesuatu di VS Code, misalnya JUMLAH_HADIAH = 10 menjadi 20 di Hadiah.server.luau, lalu simpan. Perubahan langsung terlihat di Studio.
5. Tekan Play seperti biasa.
6. Simpan place di Studio (File → Save to Roblox) supaya script terbaru juga ikut tersimpan di game yang dipublikasikan.

Alternatif tanpa serve: rojo build -o ObbyBelajar.rbxl membuat file place berisi semua script. Cara ini berguna untuk melihat hasilnya cepat, tapi petanya kosong.

Langkah 4: Alur kerja dengan Git

1. git pull                       ← ambil versi terbaru dari GitHub
2. rojo serve + Connect di Studio
3. Ubah kode di VS Code, uji di Studio
4. git add -A
   git commit -m "Tambah item baru di toko"
   git push

Biasakan commit setiap kali satu fitur selesai dan berjalan. Kalau nanti ada yang rusak, kamu bisa melihat apa saja yang berubah dengan git log dan git diff, atau kembali ke versi sebelumnya.

Error yang sering muncul

Masalah	Penyebab
rokit / rojo is not recognized	PowerShell belum ditutup dan dibuka ulang setelah self-install
Plugin Rojo tidak ada di Studio	rojo plugin install dijalankan saat Studio sedang terbuka. Tutup Studio lalu jalankan lagi.
Connect gagal	rojo serve belum berjalan, atau jendela PowerShell-nya tertutup
Script dobel di Explorer	Script lama yang ditempel manual belum dihapus (Langkah 2)
Perubahan di Studio hilang	Mengedit script di Studio saat Rojo terhubung. Selalu edit di VS Code, karena file adalah sumber utamanya.
Luau LSP menandai game/workspace sebagai error	Buka folder roblox (bukan file satuan) di VS Code, lalu tunggu ekstensi selesai memuat definisi Roblox

Latihan

1. Fitur baru lewat Rojo: buat file baru game/src/server/PesanSelamatDatang.server.luau yang mencetak pesan saat pemain masuk. Simpan, lalu lihat file itu muncul sendiri di Studio.
2. Folder modul: buat folder game/src/shared/Util/ berisi Format.luau, yaitu modul dengan function angkaRibuan(n) yang mengubah 12500 menjadi "12.500". Pakai modul itu di UIKoin.client.luau.
3. Git: ubah harga di KonfigToko.luau, commit, lalu jalankan git log --oneline dan git diff HEAD~1 untuk melihat riwayatnya.

Kunci jawaban

Coba kerjakan sendiri dulu sebelum membaca bagian ini.

Latihan 1: File baru lewat Rojo

Buat file game/src/server/PesanSelamatDatang.server.luau:

local Players = game:GetService("Players")

Players.PlayerAdded:Connect(function(player)
	print(`👋 Selamat datang, {player.DisplayName}! (@{player.Name})`)
end)

Simpan file. Kalau rojo serve sedang berjalan dan Studio terhubung, sebuah Script bernama PesanSelamatDatang langsung muncul di ServerScriptService. Akhiran .server.luau yang menentukan bahwa file ini menjadi Script, dan foldernya (src/server) yang menentukan lokasinya.

DisplayName adalah nama tampilan yang bisa diganti pemain, sedangkan Name adalah username yang unik.

Latihan 2: Modul Util/Format

Buat file game/src/shared/Util/Format.luau:

local Format = {}

-- 12500 -> "12.500"
function Format.angkaRibuan(angka)
	local teks = tostring(math.floor(angka))
	local hasil = ""
	local hitung = 0
	for i = #teks, 1, -1 do
		hasil = string.sub(teks, i, i) .. hasil
		hitung += 1
		if hitung % 3 == 0 and i > 1 then
			hasil = "." .. hasil
		end
	end
	return hasil
end

return Format

Folder Util otomatis menjadi Folder di ReplicatedStorage, dan Format.luau menjadi ModuleScript di dalamnya.

Di game/src/client/UIKoin.client.luau, tambahkan di bagian atas:

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Format = require(ReplicatedStorage:WaitForChild("Util"):WaitForChild("Format"))

Lalu ubah perbaruiTeks:

local function perbaruiTeks()
	label.Text = `🪙 Koin: {Format.angkaRibuan(koin.Value)}`
end

Catatan untuk angka negatif: function di atas belum sepenuhnya menangani angka negatif. -1500 masih benar (-1.500), tapi -150000 menjadi -.150.000, karena tanda minus ikut dihitung sebagai "digit". Untuk koin tidak masalah karena koin tidak pernah negatif. Kalau nanti dibutuhkan, pisahkan tanda minusnya dulu, format angkanya, lalu gabungkan lagi.

Function ini sama dengan Ekonomi.formatAngka di Pelajaran 15. Di game sungguhan, simpan di satu tempat saja (modul Format) dan pakai di mana-mana.

Latihan 3: Git

Setelah mengubah harga di game/src/shared/KonfigToko.luau:

git add -A
git commit -m "Turunkan harga Sepatu Cepat jadi 15"
git log --oneline

git log --oneline menampilkan riwayat singkat, satu baris per commit, yang terbaru paling atas.

git diff HEAD~1

Ini menampilkan perbedaan antara commit terakhir dan commit sebelumnya. Artinya:

• HEAD = commit terakhir
• HEAD~1 = satu commit sebelumnya
• Baris berawalan - (merah) dihapus, baris berawalan + (hijau) ditambahkan

Contoh hasilnya:

-		harga = 20,
+		harga = 15,

Kalau ternyata perubahannya salah, kembalikan file itu ke versi commit sebelumnya:

git checkout HEAD~1 -- game/src/shared/KonfigToko.luau

Setelah itu commit lagi. Riwayat lama tetap tersimpan, jadi tidak ada yang benar-benar hilang.

Pesan commit yang baik menjelaskan apa yang berubah, misalnya "Turunkan harga Sepatu Cepat jadi 15", bukan "update" atau "fix". Tiga bulan lagi, kamu akan berterima kasih pada dirimu sendiri.