Jejak 25 Nabi — Rancangan Sistem

Versi 0.1 · 12 September 2026 · Status: rancangan, belum implementasi VN.

Dokumen pendamping: BACKLOG-PENGEMBANGAN.md dan RANCANGAN-PROLOG.md.

1. Arah produk dan keputusan dasar

Game edukasi web untuk anak 6–12 tahun dengan pengalaman visual novel. Anak mengikuti cerita, berbicara dengan pendamping, mengamati objek, melakukan aktivitas belajar, dan mengumpulkan hikmah. Cerita memiliki awal, perkembangan, dan penutup; interaksi muncul karena kebutuhan cerita, bukan sekadar slideshow yang disela permainan.

Keputusan berdasarkan percakapan pengguna:

• Semua karakter faceless: tanpa mata, hidung, dan mulut. Gestur tangan, arah kepala, sikap tubuh, suara dan dialog menyampaikan emosi. Untuk konsistensi rancangan, ketentuan ini juga berlaku bila hewan dipakai sebagai karakter pendamping; elemen alam menjadi pilihan utama.
• Nabi tidak dibuat sebagai manusia, siluet, bagian tubuh, atau avatar. Gunakan cahaya putih abstrak dan nama Arab. Ini penanda identitas dalam UI, bukan pernyataan tentang rupa nabi.
• Saat tokoh pendamping berbicara, portrait faceless muncul di depan, latar melembut/blur, dan dialog terlihat. Gerakan tidak merusak gambar latar.
• Pemain adalah pembelajar bersama pendamping. Pemain tidak menjadi nabi, melakukan mukjizat, atau mengubah hasil kisah.
• Alur kisah linear dengan cabang percakapan lokal yang kembali ke cerita utama. Level yang selesai dapat diulang.
• Pengerjaan bertahap: prolog dahulu, kemudian satu level penuh, baru memperbanyak level.

Asumsi rancangan yang dapat disesuaikan saat pratinjau: satu pendamping, bahasa Indonesia, ponsel sebagai sasaran utama, satu profil lokal tanpa nama wajib, tanpa akun dan monetisasi pada MVP.

2. Fondasi yang ditemukan

Audit baca kode, bukan pengujian aplikasi:

Target yang disepakati tetap prolog menuju kisah Adam. Keberadaan prototipe Nuh tidak mengubah titik awal produk. Tidak ada perubahan aplikasi pada tahap penyusunan dokumen ini.

3. Lingkup bertahap

Pratinjau prolog: pembuka, buku interaktif, pendamping faceless, pilihan jawaban, pergantian pose, kamera/blur, peta, kartu pengantar Adam. Kartu ini tidak berarti level Adam telah selesai dibangun.

Satu level penuh: kisah Adam yang sudah direview, aktivitas terkait tujuan belajar, tiga pertanyaan, satu kartu hikmah, checkpoint, narasi suara, dan progres ke peta.

MVP: 3–5 level yang telah lolos review, menggunakan mekanik bersama. Jumlah disesuaikan hasil level pertama. Tidak wajib mengikuti target 5–7 level dalam GDD awal jika mutu konten belum siap.

Sesudah MVP: 25 level, pilihan bahasa, paket offline, fitur orang tua yang lebih lengkap. Akun lintas perangkat, pembayaran, leaderboard, analitik eksternal dan CMS bukan bagian awal.

4. Alur pengguna

Kisah utama tidak bergantung pada anak menemukan hotspot tersembunyi. Informasi penting otomatis disampaikan dalam alur. Hotspot memberikan pengamatan atau percakapan tambahan; penanda dan bantuan memperjelasnya.

5. Sistem VN dan state

Game mengatur layar besar: pembuka, prolog, peta, cerita, aktivitas, kuis, reward dan Buku Hikmah. StoryRunner mengatur node di dalam satu cerita. Keduanya tidak saling menulis state internal.

Aturan implementasi:

• Satu node aktif dan satu percakapan aktif. Ketukan ganda selama transisi tidak melompati node.
• Narasi suara tidak menjadi syarat untuk maju; anak dapat mendengarkan ulang. Selesainya audio tidak otomatis mengganti node.
• Keluar tab membekukan aktivitas dan audio; kembali tab menunggu interaksi bila perlu mengaktifkan audio.
• cleanup() membatalkan audio, timer, listener dan pekerjaan async milik scene lama.
• Respons pemuatan lama diabaikan melalui token scene/request agar tidak mengganti gambar scene baru.
• Cerita utama tetap konsisten saat diulang; daftar node sumber tidak dimutasi ketika menyisipkan balasan.
• Tombol kembali, jeda dan area dialog memiliki fungsi yang konsisten. Tidak ada pola modal Lanjut/Tutup di setiap kalimat.

6. Pembagian modul

Nama berikut merupakan usulan batas tanggung jawab di dalam struktur proyek yang ada, bukan daftar file yang sudah dibuat.

Pertahankan DOM/CSS untuk antarmuka dan dialog. Canvas hanya jika aktivitas memerlukannya. Ilustrasi raster untuk adegan/portrait; SVG untuk ikon antarmuka. Tidak memerlukan backend khusus progres pada tahap awal.

7. Kontrak konten

Setiap level memiliki ID stabil, versi konten, urutan belajar, tujuan belajar, daftar referensi, status review, node cerita, aktivitas, kuis dan hikmah. Urutan belajar tidak dilabeli sebagai kronologi historis yang presisi.

Jenis node awal: scene, dialogue, choice, hotspot, activity, quiz, reflection, end. hotspot boleh opsional, tetapi setiap node harus memiliki jalan keluar yang jelas. Cabang pilihan yang mengubah fakta kisah tidak diizinkan.

Contoh konsep data prolog fiksi pendamping, bukan kisah nabi:

{
  "id": "prolog",
  "contentVersion": 1,
  "entryNodeId": "buku",
  "review": { "status": "draft", "reviewedVersion": null },
  "nodes": [
    { "id": "buku", "type": "scene", "backgroundId": "ruang_buku", "next": "sapaan" },
    {
      "id": "sapaan", "type": "dialogue", "speakerId": "pendamping",
      "poseId": "salam", "text": "Halo! Mau membuka buku perjalanan ini bersama?",
      "audioId": null, "sourceIds": [], "next": "jawaban"
    },
    {
      "id": "jawaban", "type": "choice",
      "options": [
        { "id": "ingin", "label": "Mau!", "next": "balas_ingin" },
        { "id": "penasaran", "label": "Buku tentang apa?", "next": "balas_penasaran" }
      ]
    },
    { "id": "balas_ingin", "type": "dialogue", "speakerId": "pendamping", "poseId": "senang", "text": "Ayo, kita mulai bersama.", "sourceIds": [], "next": "akhir" },
    { "id": "balas_penasaran", "type": "dialogue", "speakerId": "pendamping", "poseId": "menjelaskan", "text": "Buku ini akan menemani kita belajar kisah para nabi.", "sourceIds": [], "next": "akhir" },
    { "id": "akhir", "type": "end", "destination": "map", "grantsLevelCompletion": false }
  ]
}

Validator memeriksa ID ganda, entry/next yang hilang, pilihan kosong, cabang buntu, loop tanpa jalan keluar, pose atau aset hilang, sumber klaim kisah, status review, dan jawaban kuis yang tidak merujuk pilihan tersedia. Konten diperlakukan sebagai teks, bukan HTML bebas.

8. Standar visual dan produksi aset

• Latar adalah adegan utuh; portrait dialog adalah layer terpisah. Jangan memotong tangan dari latar untuk digerakkan tanpa aset dan mask yang dirancang khusus.
• Satu model karakter faceless konsisten: proporsi, busana, warna dan ukuran kepala sama pada semua pose. Tidak ada fitur wajah samar yang muncul ketika diperbesar.
• Paket pose prolog: salam, menjelaskan, menunjuk buku, tangan di dada, mendengarkan. Perasaan digambarkan melalui gestur, bukan ekspresi wajah.
• Cahaya nabi tidak memiliki kontur kepala/tubuh, anggota badan, atau gerakan menyerupai sosok manusia. Nama Arab berupa teks/font yang mendukung Arab, bukan tulisan hasil generasi gambar. Ejaan dan rendering diperiksa manusia.
• Narator menyampaikan kisah dalam orang ketiga. Jangan membuat dialog rekaan yang diatribusikan kepada nabi. Sumber kutipan dan maknanya dibedakan dari penjelasan pendamping.
• Transisi lembut; blur cukup membedakan lapisan dan tidak diterapkan ke teks/portrait. Reduced motion memakai perpindahan sederhana, tanpa denyut cahaya.
• Musik latar belum ditetapkan; default prolog tanpa musik, dengan narasi dan efek ringan yang dapat dimatikan.
• Manifest aset memuat ID, berkas, dimensi, ukuran unduhan, alt, hak penggunaan dan versi. Pastikan alpha asli untuk aset transparan; jangan menerima checkerboard tercetak.

9. Progres, unlock dan reward

Progres v2 yang diusulkan: schemaVersion, settings, prologCompleted, levels, checkpoint, updatedAt. Status per level mencakup versi konten, status selesai, bintang terbaik dan hikmah yang telah diperoleh.

• available berasal dari registry konten yang siap; unlocked berasal dari prasyarat; completed berasal dari permainan. Ketiganya berbeda.
• Adam adalah level pertama rilis. Nuh yang sudah ada pada prototipe dapat tetap diuji melalui mode pengembang, tidak membuka level 3 bagi pengguna baru.
• Level berikutnya terbuka setelah cerita, aktivitas dan kuis selesai; tidak mensyaratkan tiga bintang.
• Usulan skor: 3 bintang untuk >=80% jawaban pertama benar, 2 untuk >=50%, 1 untuk sisanya setelah menyelesaikan pembelajaran. Salah mendapat penjelasan dan percobaan ulang. Bintang bukan penilaian akhlak/iman.
• Jumlah soal awal tiga; soal dibacakan. Nilai tertinggi dipertahankan ketika mengulang.
• Checkpoint ditulis setelah perpindahan node yang sah, jawaban pilihan, akhir aktivitas dan akhir level. Simpan ID node, versi konten dan pilihan yang sudah diambil; jangan menyimpan posisi timer/frame.
• Reload di tengah aktivitas mengulang aktivitas dengan penjelasan ramah; tidak menghilangkan reward yang sudah diraih.
• Progres v1 dimigrasikan tanpa menghapus bintang/hikmah yang valid. Checkpoint tidak cocok versi konten kembali ke awal bagian yang aman, bukan menjalankan node yang sudah tidak ada.
• Jika localStorage gagal, lanjutkan dengan penyimpanan memori selama sesi dan beritahu orang tua bahwa progres tidak tersimpan setelah halaman ditutup. JSON valid tetapi bentuknya salah juga harus ditangani.
• Reset hanya lewat bagian orang tua dengan konfirmasi yang jelas. Tidak mengumpulkan nama lengkap, foto, email atau lokasi anak pada MVP.

10. Editorial dan publikasi

Alur konten: tujuan belajar → sumber per klaim → naskah → review materi/adab → storyboard → aset/audio → pemeriksaan akhir → playable. Perubahan naskah setelah disetujui mengubah versi dan memerlukan pengecekan bagian yang berubah.

Status: draft, in_review, approved, needs_revision. Catat siapa yang mereview, kapan dan versi mana. Persetujuan materi bukan persetujuan otomatis atas gambar/audio yang dibuat sesudahnya.

Pisahkan fakta kisah, kutipan, parafrasa, ilustrasi suasana dan latihan penerapan sehari-hari. Tidak memaksakan mukjizat atau detail cerita pada level yang sumbernya belum cukup. Aktivitas tidak menampilkan kondisi kalah berupa nabi gagal, azab menimpa pemain, atau mukjizat tidak terjadi.

11. Kualitas yang harus dibuktikan

• Alur penuh dapat dijalankan dengan sentuhan dan keyboard; tombol minimal sasaran 44px, teks dialog sasaran minimal 18px di ponsel.
• Blur/portrait tidak menutup dialog, pilihan atau nama Arab pada viewport 360×640, 390×844, tablet, dan desktop.
• Ukuran teks yang diperbesar tetap dapat dibaca; dialog panjang dapat digulir tanpa kehilangan pilihan.
• Mode tanpa suara tetap lengkap. Narasi mulai setelah interaksi pengguna, memiliki teks pendamping, dan dapat diulang.
• Tidak ada timer hukuman pada aktivitas pertama; kegiatan drag tersedia alternatif ketuk sumber lalu tujuan.
• Target awal paket prolog terkompresi <=5 MB gambar, audio dimuat terpisah per kebutuhan. Angka ini anggaran desain yang harus diukur, bukan klaim performa saat ini.
• Memuat satu scene plus tetangga berikutnya; tidak mengunduh seluruh 25 level di awal.
• Validasi konten dan tes runner/progres otomatis; pemeriksaan faceless, cahaya, ejaan Arab dan adab dilakukan manual.
• Uji pendampingan dengan beberapa anak/orang tua, atas persetujuan orang tua, tanpa merekam identitas. Amati apakah anak memahami tombol, urutan dan hikmah; bukan hanya apakah game tidak error.

12. Kriteria siap melanjutkan

Prolog dianggap selesai ketika kedua cabang percakapan mencapai peta, karakter konsisten faceless, gerak dan blur rapi, audio tidak menghalangi penggunaan, ulang/muat kembali aman, serta pengguna telah melihat dan memberi masukan pada bentuk visualnya.

Level pertama baru menjadi kandidat publikasi setelah materi, gambar, audio, aktivitas, kuis dan penyimpanan progres lulus pemeriksaan. Produksi 25 level mengikuti bukti dari level pertama, bukan dibuat serentak sebelum fondasinya sesuai.