Belajar Godot - Shaders & Visual Effects

#Pendahuluan

Di episode 15 kalian memperluas editor dengan plugin. Sekarang kita masuk ke lapisan yang paling dekat dengan GPU: shaders. Shader adalah program kecil yang berjalan di kartu grafis untuk menentukan warna setiap piksel — dan di tangan yang tepat, ia mengubah game sederhana menjadi pengalaman visual yang memukau.

Roadmap episode ini: bahasa shader Godot dan alur kerja material, shader 2D dengan shader_type canvas_item dan fragment shader, uniform sebagai jembatan dari kode, shader 3D dengan spatial material dan shader_type spatial, lalu VFX dengan menggabungkan shader dan particle systems, ditutup dengan pola praktis dan biaya performa shader.

#Bahasa Shader Godot dan Material Workflow

Shader Godot ditulis dalam bahasa GDShader — sintaksnya menyerupai GLSL, dengan tambahan spesifik Godot. Sebuah shader dimulai dengan deklarasi tipe yang menentukan di dunia mana ia bekerja:

Tiga tipe shader dasar

shader_type canvas_item;   # untuk node 2D
shader_type spatial;       # untuk node 3D
shader_type particles;     # untuk partikel

Shader tidak dipakai sendiri; ia dibungkus dalam material. Material menempel pada node yang digambar — Sprite2D, MeshInstance3D, GPUParticles2D — melalui slot material di Inspector. Alur kerjanya: buat file .gdshader, pasang ke material, lalu tempelkan material ke node. Dari sisi kode, material adalah resource biasa:

Membuat dan memasang shader material

var material := ShaderMaterial.new()
material.shader = load("res://shaders/wobble.gdshader")
$Sprite2D.material = material

#Shader 2D: CanvasItem dan Fragment Shader

Untuk node 2D, shader_type canvas_item memberi kalian variabel bawaan yang penting: UV (koordinat tekstur, dari 0 sampai 1), TEXTURE (tekstur sprite), dan COLOR (warna keluaran akhir). Fungsi fragment() berjalan per piksel dan menentukan warna setiap piksel.

Contoh klasik — sprite yang bergelombang seperti air:

Shader gelombang 2D

shader_type canvas_item;
 
uniform float kekuatan = 0.05;
uniform float kecepatan = 5.0;
 
void fragment() {
    vec2 uv = UV;
    uv.x += sin(uv.y * 20.0 + TIME * kecepatan) * kekuatan;
    COLOR = texture(TEXTURE, uv);
}

TIME adalah waktu shader berjalan — variabel ini membuat efek bergerak tanpa perlu kode game. Untuk seluruh layar — efek global seperti vignette, CRT, atau gradasi warna — gunakan shader pada CanvasLayer berisi ColorRect yang menutupi layar, bukan pada tiap sprite. Satu shader untuk seluruh layar jauh lebih murah daripada seratus shader per objek.

#Uniform: Jembatan antara Kode dan Shader

uniform adalah variabel shader yang bisa diubah dari luar — dari Inspector ataupun dari kode game. Inilah jembatan yang membuat shader responsif terhadap gameplay: kesehatan karakter yang menurun membuat sprite memerah, kecepatan tinggi menambah blur, dan seterusnya.

Dari kode, ubah uniform lewat nama yang sama persis dengan deklarasi di shader, memakai set_shader_parameter:

Mengubah uniform dari kode

func set_damage(damage: float) -> void:
    $Sprite2D.material.set_shader_parameter("warna_luka", Color(1, damage, damage))
 
func reset_visual() -> void:
    $Sprite2D.material.set_shader_parameter("warna_luka", Color.WHITE)

Deklarasikan uniform dengan tipe dan nilai default yang masuk akal di shader, sehingga editor menampilkannya dengan rapi di Inspector. Tambahkan hint_range untuk angka yang dibatasi rentang:

Uniform dengan hint range

shader_type canvas_item;
 
uniform float opacity : hint_range(0.0, 1.0) = 1.0;
 
void fragment() {
    COLOR = texture(TEXTURE, UV) * vec4(1.0, 1.0, 1.0, opacity);
}

#Shader 3D: Spatial Material dan Custom Shader

Di 3D, sebagian besar kebutuhan visual bisa dipenuhi tanpa shader kustom: SpatialMaterial (bernama StandardMaterial3D di Godot 4) menyediakan kontrol albedo, metallic, roughness, emission, dan normal map — semua lewat Inspector tanpa menulis satu baris shader. Selalu mulai dari material standar; shader kustom hanya untuk efek yang tidak bisa dicapai material standar.

Untuk efek kustom, shader_type spatial memberi akses ke NORMAL, VIEW, WORLD_POSITION, dan output ALBEDO, METALLIC, ROUGHNESS, EMISSION. Contoh: water-like reflection palsu — permukaan yang memancarkan warna yang bergeser terhadap kamera:

Shader spatial sederhana

shader_type spatial;
 
uniform vec3 warna_a = vec3(0.1, 0.4, 0.9);
uniform vec3 warna_b = vec3(0.9, 0.3, 0.1);
 
void fragment() {
    ALBEDO = mix(warna_a, warna_b, UV.x);
    ROUGHNESS = 0.3;
    EMISSION = ALBEDO * (0.5 + 0.5 * sin(TIME * 2.0));
}

Di Godot 4, SpatialMaterial adalah StandardMaterial3D — nama lamanya masih dipakai di banyak tutorial Godot 3, jadi ingatlah saat membaca materi lama.

#VFX: Shader + Particle Systems

Shader benar-benar bersinar ketika dikombinasikan dengan particle systems. Partikel memberi bentuk (ribuan objek bergerak), shader memberi penampilan (warna, glow, distorsi) tanpa memuat tekstur besar. Setiap partikel bisa membawa data per partikel — arah, warna, kecepatan — yang dibaca shader melalui atribut partikel.

Contoh: shader untuk particle yang memudar dan membesar:

Shader particle 2D

shader_type canvas_item;
 
void fragment() {
    float umur = 1.0 - (TIME * 10.0 - mod(TIME * 10.0, 1.0));
    vec2 pusat = UV - vec2(0.5);
    float jarak = length(pusat);
    COLOR = texture(TEXTURE, UV);
    COLOR.a *= 1.0 - jarak * 2.0;
}

Kombinasi yang sering dipakai: partikel tanpa tekstur (hanya kuadrat putih) dengan shader yang memberi gradasi warna dan glow. Hasilnya — ledakan, sihir, aura — terlihat mahal dengan asset hampir nol. Pola ini juga hemat memory, karena warna dihitung di GPU, bukan disimpan sebagai tekstur.

#Pola Praktis dan Biaya Shader

Shader bukan magic gratis. Beberapa aturan praktis agar VFX tetap ringan:

• Semakin banyak shader aktif, semakin mahal. Bila seratus sprite memakai shader identik, gabungkan jadi satu — atau bahkan satu shader untuk seluruh layar.
• Jaga kompleksitas fragment. Loop dan percabangan berat di shader berjalan per piksel; untuk layar 1080p itu jutaan eksekusi per frame.
• Uniform untuk variabel dinamis, tekstur untuk data kompleks. Menghitung gradient di shader lebih murah daripada memuat tekstur besar.
• Uji di perangkat target. Shader yang mulus di desktop bisa melumpuhkan ponsel; selalu cek dengan profiler GPU di perangkat yang sebenarnya.

#Penutup

Kalian sekarang bisa berbicara dengan GPU: tiga shader_type sesuai konteks (canvas_item, spatial, particles), alur kerja shader → material → node, fragment shader 2D dengan UV dan TIME, uniform sebagai API antara kode dan shader, material standar 3D sebelum melompat ke shader kustom, serta kombinasi shader dan particle untuk VFX hemat asset yang tetap hidup.

Inti yang harus dibawa pulang:

• Shader dibungkus material; material menempel pada node yang digambar.
• shader_type canvas_item untuk 2D, spatial untuk 3D, particles untuk partikel.
• uniform membuat shader fleksibel dan bisa dikontrol dari kode.
• Gunakan StandardMaterial3D sebelum menulis shader 3D kustom.
• Kombinasi shader + partikel menghasilkan VFX mahal dengan asset hampir nol.

Di episode 17, semua sistem sudah lengkap — saatnya membawa game keluar dari mesin kalian: Godot for Mobile & Desktop, dari export ke Android, iOS, Windows, Linux, dan macOS, konfigurasi dan input spesifik platform, touch dan orientation, hingga ukuran paket dan kepatuhan platform. Game kalian layak dimainkan di mana saja.