P9: GUI Kustomisasi & Desain Antarmuka

Capaian Pembelajaran

Target Kompetensi

CPL-09 & Sub-CPMK P9

Mahasiswa mampu merancang antarmuka pengguna interaktif dengan mengkustomisasi GUI Ren'Py menggunakan gui.rpy dan screen language, mempertimbangkan aspek estetika dan konsistensi visual.

Struktur GUI

Anatomi GUI Visual Novel

GUI (Graphical User Interface) Ren'Py terdiri dari beberapa elemen utama yang perlu dipahami sebelum dikustomisasi.

Elemen GUI	Fungsi	File Konfigurasi
Textbox (Dialog Box)	Area tampilan dialog dan nama karakter	gui.rpy, screens.rpy
Main Menu	Layar awal (New Game, Continue, dll)	screens.rpy
Save/Load Screen	Manajemen file simpan	screens.rpy
Preferences Screen	Pengaturan volume, teks, dll	screens.rpy
Quick Menu	Tombol cepat di bagian bawah layar	screens.rpy
Choice Screen	Tampilan pilihan menu	screens.rpy

File Konfigurasi

File gui.rpy: Pusat Konfigurasi Tampilan

File gui.rpy adalah tempat Ren'Py menyimpan semua pengaturan visual. Kamu bisa mengubah hampir semua aspek tampilan hanya dengan mengedit file ini.

Contoh Pengaturan di gui.rpy

## Pengaturan utama tampilan

## Warna aksen (warna dominan tema GUI)
define gui.accent_color = '#0055a5'     # Biru universitas

## Warna latar utama
define gui.idle_color = '#888888'
define gui.hover_color = '#ffffff'

## Warna teks dialog
define gui.text_color = '#ffffff'

## Ukuran font
define gui.text_size = 24              # Ukuran teks dialog
define gui.name_text_size = 30         # Ukuran nama karakter
define gui.interface_text_size = 30   # Ukuran teks menu

## Font
define gui.text_font = "fonts/NotoSansID.ttf"  # Font custom (file harus ada)

## Transparansi textbox (0.0 = transparan, 1.0 = solid)
define gui.textbox_height = 185
define gui.textbox_yalign = 1.0        # 1.0 = bawah layar, 0.0 = atas

## Ukuran tombol menu
define gui.button_width = 490
define gui.button_height = 45

Identitas Visual

Warna dan Font: Identitas Visual Gamemuv

Tips Memilih Palet Warna

Pilih 3 Warna Utama

Primary (dominan), Secondary (pendukung), Accent (highlight). Contoh untuk tema sosial: biru tua (kepercayaan), putih (kejujuran), kuning (harapan).

Pastikan Kontras yang Cukup

Teks harus mudah dibaca di atas background. Gunakan tool cek kontras seperti coolors.co atau WebAIM Contrast Checker.

Menggunakan Font Kustom

Menginstall Font Kustom

# 1. Unduh font dari Google Fonts (fonts.google.com)
#    Contoh: "Noto Sans ID" untuk bahasa Indonesia yang baik

# 2. Simpan file .ttf di game/fonts/
#    Contoh: game/fonts/NotoSansID-Regular.ttf

# 3. Daftarkan di gui.rpy
define gui.text_font = "fonts/NotoSansID-Regular.ttf"
define gui.name_text_font = "fonts/NotoSansID-Bold.ttf"

# 4. Atau gunakan langsung dalam Character
define n = Character("Nabilah", 
    color="#c8ffc8",
    who_font="fonts/NotoSansID-Bold.ttf")

Font Rekomendasi untuk Bahasa Indonesia

Gunakan Noto Sans Indonesian dari Google Fonts. Font ini mendukung semua karakter bahasa Indonesia termasuk huruf seperti é, ê, dan sebagainya, dengan desain yang bersih dan mudah dibaca.

Dialog Box

Kustomisasi Textbox dengan Gambar Custom

Kamu bisa mengganti textbox default Ren'Py dengan gambar custom yang dirancang di Canva atau dibuat dengan AI.

Textbox dengan Gambar Custom

# Di gui.rpy:
# Ganti textbox dengan gambar PNG custom
# Buat file: game/gui/textbox.png (ukuran 1280x185)

# Di screens.rpy, modifikasi sayscreen:
screen say(who, what):
    style_prefix "say"

    window:
        id "window"
        
        # Ganti background textbox
        background Frame("gui/textbox.png", 20, 20)
        
        if who is not None:
            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"

Cara Buat Textbox di Canva

Buka Canva, buat desain 1280x185 px. Tambahkan rectangle berwarna semi-transparan. Beri tepi/border yang sesuai tema. Tambahkan elemen dekoratif kecil di sudut. Download sebagai PNG dengan background transparan. Simpan sebagai game/gui/textbox.png.

Main Menu

Kustomisasi Main Menu

Main Menu dengan Background Custom

## Di screens.rpy, cari screen main_menu dan modifikasi:

screen main_menu():
    tag menu
    
    ## Background utama
    add gui.main_menu_background
    
    ## Overlay gelap semi-transparan
    add "#00000088"
    
    ## Judul game
    vbox:
        xalign 0.5
        yalign 0.3
        
        text "[config.name]":
            style "main_menu_title"
            size 60
            color "#ffffff"
            outlines [(3, "#000000")]
        
        text "Sebuah Social Impact Visual Novel":
            style "main_menu_subtitle"
            size 20
            color "#cccccc"
    
    ## Tombol menu
    vbox:
        xalign 0.1
        yalign 0.7
        spacing 15
        
        use navigation

Screen Language

Dasar Screen Language Ren'Py

Screen language adalah bahasa deklaratif Ren'Py untuk membuat UI. Mudah dipelajari dan sangat powerful.

Elemen-elemen Screen Language

# Screen custom: tampilkan statistik pemain
screen tampilkan_stats():
    frame:
        xalign 0.02
        yalign 0.02
        padding (20, 20)
        background "#00000099"
        
        vbox:
            spacing 8
            
            text "Status Karakter":
                size 18
                bold True
                color "#ffdd00"
            
            hbox:
                text "Afeksi Nabilah: ":
                    size 16
                text "[afeksi_nabilah]":
                    size 16
                    color "#c8ffc8"
            
            hbox:
                text "Integritas: ":
                    size 16
                text "[integritas]":
                    size 16
                    color "#88ddff"

# Memanggil screen dari cerita:
label scene_kampus:
    show screen tampilkan_stats    # Tampilkan stats di sudut layar
    n "Hari yang sibuk di kampus."
    hide screen tampilkan_stats    # Sembunyikan stats

AI untuk GUI

Menggunakan AI untuk Elemen GUI

Prompt untuk Membuat Elemen GUI dengan AI

"Create a visual novel GUI element: a transparent dialog text box / namebox. Style: [TEMA VISUAL KAMU]. Colors: [WARNA UTAMA]. The design should be elegant and not obstruct the game's visual. Size: 1280x185 pixels for dialog box. PNG with transparent background. Decorative but minimal."

Cara Mudah: Template Canva

Search "visual novel UI" atau "dialogue box game" di Canva untuk mendapatkan template yang bisa langsung dikustomisasi. Ini jauh lebih cepat daripada membuat dari nol.

Tugas

Tugas Pertemuan 9

Deadline: Sebelum Pertemuan 10

Kustomisasi GUI Proyekmu

Ubah warna aksen dan skema warna di gui.rpy sesuai tema visual novel kamu.
Ganti font ke font yang lebih sesuai (download dari Google Fonts).
Buat atau sesuaikan gambar background main menu menggunakan AI/Canva.
Buat screen sederhana untuk menampilkan salah satu statistik karakter.
Screenshot tampilan main menu dan in-game yang sudah dikustomisasi.

Evaluasi

Kuis Pemahaman Pertemuan 9

Uji Pemahamanmu!

1. File mana yang digunakan untuk mengubah warna aksen dan ukuran font secara global di Ren'Py?

script.rpy

options.rpy

gui.rpy

style.rpy

2. Apa perbedaan vbox dan hbox dalam Screen Language?

vbox untuk gambar, hbox untuk teks

vbox menyusun elemen secara vertikal, hbox menyusun secara horizontal

Keduanya sama, hanya nama yang berbeda

vbox untuk layar penuh, hbox untuk elemen kecil

Kembali ke P8 Lanjut ke P10: Eksplorasi Mandiri

GUI Kustomisasi & Desain Antarmuka Game