Belajar Game Developer - Graphics & Rendering

#Pendahuluan

Di episode-episode sebelumnya kita membuat game yang berfungsi: karakter bergerak, skor bertambah, musuh mengejar. Episode ini mengubahnya menjadi game yang indah dipandang. Graphics & rendering adalah lapisan yang paling terlihat oleh pemain, dan memahami cara kerjanya — bukan hanya mengeklik preset — membuat kalian bisa mengontrol mood, performa, dan identitas visual game.

Episode ini membedah empat pilar: sprite (dari aset mentah ke animasi), shader (program kecil yang menggambar setiap piksel), lighting (mood dan kedalaman), dan optimasi rendering (agar indah tapi tetap 60 fps). Semuanya kita terapkan dalam visual pass Rimba Runner.

#Sprites: dari Aset ke Layar

Sprite adalah gambar 2D yang ditempelkan ke objek di dunia. Tapi sprite mentah tidak langsung tampil bagus — ia melalui pipeline: import → atlas → animasi → render.

• Texture Atlas/Sprite Sheet — banyak frame animasi dalam satu gambar. Engine memotongnya menjadi frame-frame. Ini hemat memori dan cepat karena hanya satu tekstur yang dirender.
• Pivot & scale — posisi "titik pusat" sprite menentukan cara ia berputar dan berpijak. Sprite karakter biasanya pivot di kaki, bukan di tengah, agar lompatan terlihat natural.
• Filtering & compression — atur mode filter (nearest untuk pixel-art, bilinear untuk halus) dan kompresi sesuai target platform. Pixel-art yang di-filter bilinear tampak buram; ini keputusan visual yang harus disengaja.

Untuk Rimba Runner (gaya pixel-art), set sprite filter ke nearest agar piksel tetap tajam. Satu detail kecil ini menjaga identitas visual sejak awal.

#Shader: Program yang Menggambar Piksel

Shader adalah program kecil yang berjalan di GPU untuk tiap piksel/vertex — di sinilah efek visual lahir: outline, sinar, riak air, transisi. Godot memakai bahasa mirip GLSL, Unity memakai ShaderLab/HLSL, Unreal memakai Material Editor (node-based, setara Blueprint untuk material).

Contoh shader 2D Godot paling sederhana — membuat sprite berdenyut halus:

shader.gdshader — sprite berdenyut

shader_type canvas_item;
 
uniform float strength = 0.02;
uniform float speed = 4.0;
 
void fragment() {
    vec2 uv = UV - vec2(0.5);
    float pulse = 1.0 + strength * sin(TIME * speed);
    COLOR = texture(TEXTURE, uv * pulse + vec2(0.5));
}

Shader menarik karena dua alasan: (1) hampir gratis secara performa (berjalan paralel di GPU), dan (2) efek yang sulit dilakukan animasi manual (air, fire, glow) jadi mudah. Namun ingat disiplinnya: pakai shader untuk efek yang nilainya jelas, bukan demi pamer teknologi — shader yang terlalu banyak justru membuat game sulit dibaca.

#Lighting: Membangun Mood

Lighting menentukan bagaimana pemain membaca suasana: terang ceria untuk level hutan siang, redup dan biru untuk gua malam. Di 2D, lighting memakai light 2D + normal map (tekstur yang memberi kesan kedalaman pada permukaan datar).

Struktur lighting minimal Godot 2D:

WorldEnvironment (CanvasModulate: gelap, tone)
└── Player
    └── PointLight2D (lampu senter pemain)
└── Tree
    └── Sprite2D + NormalMap (daun tampak bertekstur saat kena cahaya)

Kunci mood yang sering diremehkan: ambient/base tone (level gelap keseluruhan) + lighting aksen (senter, api, jendela). Kontras ini yang membuat area terang terasa "aman" dan gelap "berbahaya" — bahasa visual yang dipahami pemain tanpa teks. Di 3D (Unity/Unreal), konsepnya sama dengan directional/point light + Global Illumination.

#Optimasi Rendering

Game yang indah tapi lag tidak ada artinya. Optimasi rendering dimulai dari memahami frame budget — setiap frame punya 16,6 ms untuk 60 fps. Rendering menghabiskan sebagian dari itu. Tiga penyebab pemborosan yang paling umum:

• Draw calls terlalu banyak — setiap objek yang digambar = satu draw call. Ribuan sprite kecil bisa membuat ribuan draw call. Solusi: batching/atlas — engine menggabungkan objek dengan tekstur sama menjadi satu draw call. Godot dan Unity melakukan ini otomatis untuk tekstur yang di-atlas.
• Overdraw — piksel digambar berkali-kali karena banyak layer transparan menumpuk. Solusi: kurangi layer besar, hindari efek blur/transparan berlebihan.
• Texture besar tidak perlu — sprite 2048x2048 untuk objek yang tampil 64x64 membuang memori GPU. Selalu skala tekstur sesuai kebutuhan aktual.

Cara mengukurnya: gunakan profiler/statistik renderer di tiap engine (Godot: Renderer Debugger; Unity: Frame Debugger; Unreal: Stat GPU). Jangan tebak — ukur dulu, optimasi yang berdampak, lalu ukur lagi.

#Praktik: Visual Pass Rimba Runner

Ubah game placeholder menjadi siap demo:

1. Ganti sprite kotak dengan sprite karakter & musuh dari aset atau gambar sendiri; set filter nearest.
2. Atlas & animasi — gabungkan frame menjadi sprite sheet, buat animasi idle/run/jump.
3. Tambah parallax background — beberapa layer background bergerak lebih lambat dari dunia untuk kesan kedalaman.
4. Lighting — tambahkan CanvasModulate gelap + PointLight2D di pemain; buat api kampung dengan shader + light.
5. Cek statistik — buka renderer debugger, pastikan draw calls wajar dan frame time dalam budget.

[x] Sprite nyata menggantikan placeholder (filter nearest)
[x] Animasi idle/run/jump dari sprite sheet
[x] Parallax background 2-3 layer
[x] Lighting (base tone + light aksen)
[x] Frame time dalam budget di profiler

#Penutup

Grafik bukan hiasan terakhir — ia bahasa visual yang menyampaikan mood dan gameplay.

Inti yang harus dibawa pulang:

• Sprite melalui pipeline: import, atlas, animasi; perhatikan pivot dan filter.
• Shader adalah program GPU untuk efek visual; pakai untuk nilai yang jelas, bukan pamer.
• Lighting (base tone + aksen) membangun mood dan memandu perhatian pemain.
• Optimasi rendering: draw calls, overdraw, texture size — ukur dengan profiler dulu.
• Visual pass dilakukan setelah gameplay stabil, bukan sebelumnya.

Di episode 13 selanjutnya kita akan membuka dimensi sosial: multiplayer fundamentals — arsitektur client-server, netcode, dan sinkronisasi antar pemain, lengkap dengan prototipe multiplayer Rimba Runner. Sampai jumpa di episode 13!