P5: Background Design & AI Asset Processing

Capaian Pembelajaran

Target Kompetensi

CPMK-3 & Sub-CPMK P5

Mahasiswa mampu men-generate latar belakang (background) menggunakan AI, melakukan finishing aset menggunakan Canva agar siap digunakan di Ren'Py, serta memahami sistem tag dan atribut gambar Ren'Py.

Desain Dunia

World Building: Membangun Dunia Visual Game

Background bukan sekadar "wallpaper" — background adalah bahasa visual yang menyampaikan suasana, waktu, dan konteks tanpa satu kata pun dialog.

Fungsi Background dalam Visual Novel

Menunjukkan Lokasi

Background langsung memberi tahu pemain: "Kita sedang di kantin kampus" atau "Ini kamar tidur Ahmad."

Menunjukkan Waktu

Warna langit memberi info waktu: oranye = sore, gelap = malam, cerah = pagi. Ini menciptakan irama waktu dalam cerita.

Membangun Emosi

Ruangan yang gelap dan sempit menciptakan kecemasan. Taman yang cerah menciptakan kebahagiaan. Visual berbicara sebelum kata-kata.

Berapa Background yang Dibutuhkan?

Skala Proyek	Jumlah Background	Catatan
Tugas Perkuliahan (3-5 menit)	3-5 background	Minimal 1 interior, 1 eksterior
Demo/Prototipe (10-15 menit)	5-10 background	Variasi waktu (pagi/sore/malam)
Game Lengkap	20-50+ background	Termasuk variasi cuaca dan waktu

Ekosistem AI

Pilihan AI untuk Generate Gambar

Ada beberapa pilihan AI yang bisa kamu gunakan. Masing-masing punya kelebihan dan cara penggunaan yang berbeda.

1

Google Gemini (Rekomendasi Utama)

Gratis dengan akun Google. Bisa generate gambar langsung dari chat. Buka gemini.google.com, pilih model terbaru. Bagus untuk background dan karakter anime-style.

2

Genspark.ai — Nano Banana 2

Model AI generasi gambar canggih yang tersedia di Genspark. Buka genspark.ai, pilih "Nano Banana 2" atau "Nano Banana Pro". Kualitas tinggi, konsisten untuk karakter, gratis untuk penggunaan dasar.

3

ChatGPT / DALL-E

Jika punya akses ChatGPT Plus, gunakan DALL-E untuk generate gambar. Bagus untuk style yang lebih realistis atau ilustratif.

4

Adobe Firefly (Alternatif)

Tersedia gratis (terbatas) di firefly.adobe.com. Sangat bagus untuk background bertekstur dan pemandangan.

Strategi Terbaik: Kombinasi AI

Gunakan Gemini untuk iterasi cepat dan eksplorasi ide. Kemudian gunakan Nano Banana 2 untuk render final berkualitas tinggi. Finishing semua gambar di Canva sebelum dimasukkan ke Ren'Py.

Prompt Engineering

Membuat Prompt Background yang Efektif

Prompt yang baik = gambar yang baik. Berikut adalah template dan contoh prompt untuk berbagai jenis background.

Formula Prompt Background

Template Prompt Background

[JENIS LOKASI], [WAKTU], [GAYA SENI], [SUASANA/MOOD],
[DETAIL SPESIFIK], [ELEMEN YANG ADA],
suitable for visual novel background, 1280x720, 
high quality, no characters, no text

Contoh Prompt Background Siap Pakai

Kantin Kampus — Siang Hari

"University cafeteria interior, midday, anime art style, warm and busy atmosphere. Wooden tables and chairs, large windows with sunlight streaming in, food stalls visible in the background, students' personal items on tables (books, laptops, trays). Indonesian university setting, clean and modern. Visual novel background, 1280x720, no characters, no text, highly detailed."

Koridor Gedung Kampus — Sore Hari

"University hallway corridor, late afternoon, golden hour sunlight through windows, anime visual novel style. Clean tiled floor, bulletin boards on walls with flyers, classroom doors on both sides, warm orange light casting long shadows. Indonesian modern university architecture. Peaceful, slightly melancholic mood. No people, no text, 1280x720."

Kamar Kost — Malam Hari

"Small student dormitory room, nighttime, anime art style, intimate and slightly cluttered atmosphere. Single bed with messy sheets, study desk with laptop and stacked books, dim desk lamp as main light source, window showing city lights at night, shelves with files and snacks. Cozy but cramped. No characters, 1280x720, visual novel background."

Taman Kampus — Pagi Hari

"University campus garden, early morning, anime style. Green grass lawn, trees with morning dew, concrete benches, stone pathway, distant campus buildings visible. Fresh morning light, cool blue-green atmosphere. Students often gather here to study or relax. No people, no text, 1280x720, visual novel background, high quality."

Tips Mendapatkan Hasil Terbaik

Selalu tambahkan "no characters, no people, no text" agar background bersih
Tambahkan "visual novel background" agar AI tahu konteksnya
Spesifikasikan waktu (morning, afternoon, evening, night) untuk variasi mood
Minta format 1280x720 agar sesuai resolusi game
Gunakan kata "anime art style" untuk konsistensi visual dengan sprite karakter

Sprite Karakter

Membuat Sprite Karakter yang Konsisten

Tantangan terbesar dalam produksi aset karakter dengan AI adalah konsistensi. Karakter harus terlihat sama di setiap ekspresinya.

Kunci Konsistensi Karakter AI

Deskripsi yang Identik

Pakai kalimat deskripsi fisik yang SAMA PERSIS di setiap prompt. Simpan deskripsi ini di notepad untuk copy-paste.

Gunakan Referensi Gambar

Setelah mendapat satu gambar yang bagus, upload gambar itu sebagai referensi di prompt berikutnya. Gemini dan Nano Banana 2 mendukung ini.

Spesifikasikan Pakaian dan Warna

Selalu sebutkan warna pakaian yang sama. "Green university jacket" di setiap prompt untuk karakter yang sama.

Template Prompt Sprite Karakter Lengkap

Prompt Karakter Utama — Ekspresi Normal

"Anime style visual novel character sprite, young Indonesian college student, female, 20 years old. Long black hair tied in ponytail, light brown skin, wearing white blouse with green university jacket (UNU Cirebon colors), simple jeans. Neutral-friendly expression, slight smile. Bust shot from waist up, facing slightly forward. Clean line art, flat colors, NO background (transparent). 600x900 resolution, PNG format."

Ekspresi Senang (Karakter Sama)

"[Same character as described: young Indonesian female student, long black hair ponytail, light brown skin, white blouse, green university jacket]. Now with a bright, genuinely happy expression. Big smile, eyes slightly squinting with joy. Same art style, transparent background, bust shot."

Ekspresi Sedih/Khawatir

"[Same character: young Indonesian female student, long black hair ponytail, light brown skin, green university jacket]. Worried, sad expression. Slightly downcast eyes, furrowed brows, corners of mouth slightly turned down. Same style, transparent background."

Ekspresi Minimum yang Dibutuhkan

Setiap karakter utama perlu minimal: (1) Normal/biasa, (2) Senang, (3) Sedih/khawatir. Karakter protagonis sebaiknya punya tambahan: (4) Marah/serius, (5) Kaget/terkejut.

Post-Processing

Finishing Aset dengan Canva

AI menghasilkan gambar mentah. Canva adalah tempat kamu "membersihkan" dan menyiapkan gambar agar siap masuk Ren'Py.

Langkah Finishing di Canva

1

Upload gambar ke Canva

Buka canva.com, buat desain baru dengan ukuran 1280 x 720 px untuk background, atau 600 x 900 px untuk sprite karakter.

2

Crop dan Resize

Tempatkan gambar AI di kanvas dan sesuaikan ukurannya. Untuk background, pastikan gambar memenuhi seluruh kanvas 1280x720 tanpa area kosong.

3

Hapus Background Karakter (jika perlu)

Jika sprite karakter masih punya background, gunakan fitur "Remove Background" di Canva (tersedia di versi gratis dan Pro). Ini akan membuat PNG transparan.

4

Sesuaikan Warna dan Kontras

Gunakan filter "Brightness" dan "Contrast" di Canva untuk menyamakan tone warna antar aset. Semua aset harus terlihat berasal dari "dunia yang sama".

5

Download dengan Format yang Benar

Background: Download sebagai JPG (kualitas 80-90%). Sprite karakter: Download sebagai PNG (dengan background transparan aktif).

Integrasi Aset

Memasukkan Aset ke Ren'Py

Penamaan File yang Benar

Aturan Penamaan File Gambar

Gunakan: huruf kecil semua, underscore sebagai pemisah, deskriptif. Hindari: spasi, huruf kapital, karakter khusus. Contoh BENAR: bg_kampus_pagi.jpg. Contoh SALAH: Background Kampus 1.jpg

Sistem Tag dan Atribut Ren'Py

Ini adalah fitur paling "cerdas" di Ren'Py. Dengan sistem penamaan yang tepat, Ren'Py akan otomatis mengelola sprite karakter.

Struktur Nama File Karakter

game/images/
├── bg_kampus_pagi.jpg         ← background biasa
├── bg_kampus_sore.jpg
├── bg_kamar_malam.jpg
├── nabilah normal.png         ← sprite: tag="nabilah" atribut="normal"
├── nabilah senang.png         ← sprite: tag="nabilah" atribut="senang"
├── nabilah sedih.png          ← sprite: tag="nabilah" atribut="sedih"
├── nabilah marah.png          ← sprite: tag="nabilah" atribut="marah"
├── ahmad normal.png           ← sprite: tag="ahmad" atribut="normal"
└── ahmad senang.png           ← sprite: tag="ahmad" atribut="senang"

CATATAN: Nama file karakter pakai SPASI antara tag dan atribut!
Nama background pakai underscore (tidak ada tag-atribut).

Menampilkan Gambar

Perintah scene, show, dan hide

Penggunaan Aset di Script

label scene_kantin:
    # Tampilkan background
    scene bg_kampus_pagi                   # Ganti background
    
    # Tampilkan karakter di posisi tertentu
    show nabilah normal at left            # Nabilah di kiri, ekspresi normal
    show ahmad normal at right             # Ahmad di kanan, ekspresi normal
    
    n "Hei Ahmad! Sudah makan siang?"
    
    # Ganti ekspresi karakter
    show ahmad senang                       # Ganti ekspresi Ahmad (posisi tetap)
    a "Belum! Mau makan bareng?"
    
    # Sembunyikan karakter saat pergi
    hide ahmad                              # Ahmad pergi dari scene
    
    # Ganti scene sepenuhnya
    scene bg_kamar_malam                   # Background langsung ganti
    n "(Malam hari. Di kamar kost.)"

Posisi Karakter yang Tersedia

Posisi	Kode	Keterangan
Kiri	`at left`	Sepertiga kiri layar
Tengah Kiri	`at offscreenleft`	Hampir di tepi kiri
Tengah	`at center`	Tepat di tengah layar
Kanan	`at right`	Sepertiga kanan layar
Depan	`at truecenter`	Benar-benar di pusat

Transisi Gambar

Menggunakan Transisi

# Tanpa transisi (langsung ganti)
scene bg_kampus_pagi

# Dengan transisi dissolve (paling umum, halus)
scene bg_kamar_malam with dissolve

# Fade ke hitam lalu muncul
scene bg_taman_sore with fade

# Geser dari kiri
scene bg_kampus_sore with blinds

# Tampilkan karakter dengan transisi
show nabilah senang with dissolve

Tugas

Tugas Pertemuan 5: Produksi Aset

Deadline: Sebelum Pertemuan 7

Kumpulkan sebagai folder zip berisi semua file gambar + screenshot game yang menampilkan aset tersebut.

Tugas 5: Produksi Aset Visual

Generate minimal 3 background berbeda menggunakan AI (Gemini atau Nano Banana 2).
Generate minimal 2 karakter dengan masing-masing 2 ekspresi (total minimal 4 sprite).
Finishing semua gambar di Canva (resize, remove background untuk sprite).
Masukkan semua aset ke folder game/images/ proyek Ren'Py kamu.
Tulis minimal 10 baris dialog yang menggunakan scene, show, dan hide dengan transisi dissolve.
Screenshot game yang menampilkan karakter di atas background.

Evaluasi

Kuis Pemahaman Pertemuan 5

Uji Pemahamanmu!

1. Bagaimana cara penamaan file sprite karakter yang BENAR agar Ren'Py bisa mengenali tag dan atributnya?

nabilah_senang.png (dengan underscore)

nabilah senang.png (dengan spasi)

Nabilah-senang.png (dengan tanda hubung)

NABILAH_SENANG.PNG (huruf kapital)

2. Apa perbedaan antara perintah scene dan show?

scene untuk karakter, show untuk background

scene mengganti background dan clear semua sprite, show menampilkan gambar di atas layer yang ada

Tidak ada perbedaan

scene untuk gambar besar, show untuk gambar kecil

3. Apa efek dari transisi dissolve dalam Ren'Py?

Gambar berputar saat berganti

Gambar baru muncul secara halus (fade-in) menggantikan gambar lama

Layar menjadi hitam total sebelum gambar baru muncul

Gambar bergeser dari sisi kiri

Kembali ke P4 Lanjut ke P6: Visual Acting

World Building: Background Design & AI Asset Processing