Tutorial LibreOffice Impress 01: Membuat Visual Novel dengan LibreOffice Impress

Gambar: Ikon LibreOffice

Daftar Isi

1. Pembuka 2. Membuat Visual Novel 3. Hasil Game 4. Penutup

Pembuka

Halo, teman-teman. Di postingan kali ini saya akan memberikan tutorial cara membuat game Visual Novel dengan menggunakan LibreOffice Impress. Jika kalian ingin mengetahui review saya tentang aplikasi LibreOffice Impress ini, kalian bisa melihat postingan saya sebelumnya yang berjudul “[Review] LibreOffice Impress, Alat Murah untuk Bikin Visual Novel”. Oke, tanpa basa-basi lagi, ayo mulai!

Membuat Visual Novel

Disini saya akan membuat Visual Novel pendek. Visual Novel ini terinspirasi dari Visual Novel yang tersedia bersama dengan game engine Ren’Py, The Question. Saya akan buat “The Question” versi saya ini lebih pendek & berlatar belakang disebuah kamar tidur. Kalian bisa mengunduh aset yang saya pakai, link-nya ada dibagian Hasil Game. Oke, kita mulai.

  1. Buka LibreOffice Impress. Jika di kalian muncul jendela seperti di gambar dibawah, klik tanda silang atau klik “Cancel”, karena kita tidak akan menggunakan template apapun. LOI_VN_Tutorial_01_-_01
  2. Simpan dokumen kalian, untuk kasus ini akan saya simpan dengan nama “LibreOffice Impress VN Tutorial 01 v1” dengan format bawaan yaitu “.odp”. LOI_VN_Tutorial_01_-_02
  3. Untuk memasang gambar background, caranya dengan meng-klik kanan pada halaman presentasi, lalu klik “Properties...”.
  4. Pastikan di bagian “Page”, “Paper Format” , formatnya “Screen 16:9” dan orientasinya “Landscape”. LOI_VN_Tutorial_01_-_03
  5. Klik tab “Background” lalu klik “Bitmap” dan klik “Add / Import”. LOI_VN_Tutorial_01_-_04
  6. Cari gambar backgroundnya, kalau sudah ketemu klik “Open”. LOI_VN_Tutorial_01_-_05
  7. Jika jendela seperti di gambar dibawah keluar, kalian bisa langsung meng-klik “OK” atau kalian juga bisa mengganti namanya dulu. LOI_VN_Tutorial_01_-_06
  8. Kalian bisa mengatur ukuran backgroundnya, kalau sudah klik “OK”.
  9. Buat kotak dialognya dengan shape. Kalian bisa memilih bentuk shapenya, kalau saya akan memilih bentuk shape yang persegi panjang.
  10. Taruh kotak dialognya dibagian tengah bawah dari halaman presentasi. Untuk menengahkan kotak dialognya, kalian bisa meng-klik ikon segitiga disebelahnya ikon “Align” lalu klik ikon “Centered”. LOI_VN_Tutorial_01_-_07
  11. Hapus text box “Click to add Title” dan text box “Click to add Text”.
  12. Kotak dialognya akan saya buat agak transparan dan akan saya berikan gradient. Caranya klik kotak dialognya, lalu klik kanan dan pilih “Edit Style...”.
  13. Klik tab “Transparency” lalu klik “Transparency:”. Isi “Transparency” sesuai selera. LOI_VN_Tutorial_01_-_08
  14. Untuk membuat gradientnya, klik tab “Area”, klik di dalam bagian “Gradient”. Ganti “Angle”-nya menjadi “” lalu ganti warnanya sesuai selera. Disini saya akan ganti warnanya menjadi “From Color: Dark Gray 2” dan “To Color: Black”. Lalu klik “OK”. LOI_VN_Tutorial_01_-_09
  15. Jika kalian merasa “Transparency” dari kotak dialognya terlalu transparan, kalian bisa merubahnya. Saya akan mengubah “Transparency”nya menjadi “25%”.
  16. Salin kotak dialognya lalu letakkan diatas kotak dialog pertama. Kecilkan ukurannya. Kotak dialog ini akan kita gunakan untuk menampilkan nama karakter. Kalian juga bisa meng-edit kotaknya lagi. LOI_VN_Tutorial_01_-_10
  17. Buat text box & isikan nama karakternya dibagian kotak yang kecil. Disini saya akan mengisinya dengan nama “Aku”. Ganti warna font-nya menjadi putih agar mudah dibaca.
  18. Buat text box lagi untuk mengisi dialognya. Dialognya bisa kalian isi sesuai keinginan, kalau saya sendiri ingin karakter “Aku” ini sibuk dan serius gitu, jadi dialognya hanya saya isi “(. . .)”. Ganti warna font-nya menjadi putih juga agar mudah dibaca. Catatan: Disini saya menggunakan text box untuk memasukkan dialog & nama karakter agar lebih fleksibel saat memakaikan animasi nanti. Kalian boleh langsung menambahkan dialog ke dalam boxnya yang transparan. LOI_VN_Tutorial_01_-_11
  19. Pastikan posisi teksnya sudah sesuai keinginan. Kalian bisa mengaturnya dahulu, seperti “Alignment”-nya, mungkin font-nya, dll. Disini saya akan mengganti “Alignment”-nya. Caranya yaitu blok seluruh teks dialog lalu klik kanan. Lalu pilih “Paragraph...”.
  20. Di bagian “Alignment” ganti “Options” dari “Left” menjadi “Justified”. Kalian boleh mengganti ke opsi lain, ini hanya contoh. Lalu klik “OK”. LOI_VN_Tutorial_01_-_12
  21. Pastikan juga “Text Anchor” dari teks dialog kalian sudah sesuai. Cara melihatnya dengan mem-blok seluruh teksnya lalu klik kanan dan pilih “Text...”.
  22. Di bagian “Text”, “Text Anchor”, pastikan titiknya berada di bagian atas tengah. Lalu klik “OK”. LOI_VN_Tutorial_01_-_13
  23. Di slide pertama ini lalu kita beri transisi. Caranya klik ikon “Slide Transition” disebelah kanan atau klik “Slide” di topbar lalu klik “Slide Transition”. Lalu pilih transisinya, saya akan memilih “Fade”. Pengaturan transisinya tidak ada yang saya ganti. Kalau kalian mau, kalian bisa mengaturnya. LOI_VN_Tutorial_01_-_14
  24. Lalu kita beri teks nama karakter & dialognya animasi. Caranya blok semua teksnya lalu klik ikon “Custom Animation” dibawahnya ikon “Slide Transition”. Disini saya akan memasangkan animasi ke teks nama karakter dahulu.
  25. Lalu klik ikon tambah untuk menambah animasi. Pilih animasi yang diinginkan. Kalau saya, saya akan memilih “Wedge” dengan durasi dan delay bawaan, jangan lupa ganti “Start:” dari “On click” menjadi “With previous”. LOI_VN_Tutorial_01_-_15
  26. Klik kanan pada animasi “Aku” lalu pilih “Effect Options...”. Di tab “Effect” bagian “Text Animation:” ganti “All at once” menjadi “Letter by letter”. Kalian bisa mengganti waktu delay-nya, tapi saya akan memakai opsi bawaannya. Kalau sudah klik “OK”. LOI_VN_Tutorial_01_-_16
  27. Sekarang tambahkan animasi untuk dialognya. Caranya sama. Yang membedakan hanya saya mengganti delay animasinya dari “0.0 sec” menjadi “0.5 sec”.
  28. Duplikat “Slide 1”. Ganti nama karakternya menjadi “Jeannie” dan dialognya menjadi “Lagi ngapain?”.
  29. Di “Slide 2” ini kita tidak butuh transisi, jadi hapus transisinya. Alasan kita tidak memakai transisi lagi yaitu karena kita tidak berpindah tempat, ya… jadi seperti itu. LOI_VN_Tutorial_01_-_17
  30. Sekarang kita akan memasukkan karakternya. Ada berbagai cara memasukkannya. Kalian bisa men-drag n drop gambar karakternya atau mengklik ikon “Insert Image” atau klik “Insert” di topbar lalu klik “Image...”.
  31. Masukkan gambar karakter perempuan dengan ekspresi tersenyum. Letakkan ditengah dan dibelakangnya boks dialog. LOI_VN_Tutorial_01_-_18
  32. Berikan karakter perempuannya animasi. Disini saya akan memberikan animasi “Fade In” dengan “Start: With previous” dan durasinya “1.00 sec”. Pastikan juga animasinya ada di deret paling atas. LOI_VN_Tutorial_01_-_19
  33. Duplikat slide-nya lagi. Ganti nama karakternya menjadi “Aku” lagi dan dialognya menjadi “Ah! Anu... Lagi bikin Visual Novel.”.
  34. Hapus animasi karakternya, sehingga yang punya animasi hanya teks saja. LOI_VN_Tutorial_01_-_20
  35. Duplikat slide-nya lagi. Ganti nama karakternya menjadi “Jeannie” lagi dan dialognya menjadi “Visual Novel? Apa itu?”.
  36. Ganti gambar karakternya menjadi gambar karakter perempuan yang sama namun dengan ekspresi bingung. Caranya klik gambar lalu klik kanan dan pilih “Replace...”. LOI_VN_Tutorial_01_-_21
  37. Salin kotak boks karakter 2x & taruh di tengah-tengah slide. Kita akan buat 2 kotak itu menjadi boks “Choice”. Ganti tulisan di boks yang atas dengan “Cerita novel dengan berbagai pilihan hidup.” dan boks kedua menjadi “Game simulasi pacaran.”. LOI_VN_Tutorial_01_-_22
  38. Berikan boks pilihannya animasi. Disini saya memberi animasi “Fade In” dengan durasinya tidak saya ganti namun waktu delaynya saya ganti menjadi “3.0 sec”. Start-nya juga saya ganti menjadi “With previous”.
  39. Sekarang berikan teks pilihannya animasi. Saya akan memberikan animasi “Wedge” dengan durasi yang tidak saya ganti, waktu delay-nya saya ganti menjadi “3.5 sec” dan start-nya menjadi “With previous”. Dan pastikan penempatannya dibawah dari setiap animasi boks. Dan lagi, jangan lupa mengubah “Text Animation:”-nya yang ada di “Effect Options...” dari “All at once” menjadi “Letter by letter”. LOI_VN_Tutorial_01_-_23
  40. Disini saya masih belum membuat boks-nya bekerja seperti tombol. Disini kita akan menduplikat slide-nya, hapus boks “Choice” & teksnya, dan ganti nama karakternya menjadi “Aku” dengan dialog “Visual Novel itu novel yang berisi gambar & berbagai pilihan untuk menentukan ceritanya.”. Ganti karakternya juga dengan karakter dengan ekspresi tersenyum seperti sebelum-sebelumnya. LOI_VN_Tutorial_01_-_24
  41. Duplikat “Slide”-nya lagi, lalu ganti dialognya saja menjadi “Visual Novel itu game simulasi pacaran yang di dalamnya kamu bisa pacaran dengan siapa saja.”. LOI_VN_Tutorial_01_-_25
  42. Sekarang, kita balik lagi ke slide “Choice”. Kita akan membuat boks-nya bisa seperti tombol. Pertama, seleksi boks pilihan yang atas lalu klik kanan dan pilih “Interaction...”.
  43. Ganti “Action at mouse click:” dari “No action” menjadi “Go to next slide”. Lalu klik “OK”. LOI_VN_Tutorial_01_-_26
  44. Seleksi boks pilihan yang kedua, lalu masuk ke dalam jendela “Interaction...”. Ganti “Action at mouse click:” dari “No action” menjadi “Go to page or object” dan pilih “Target”-nya “Slide 6”. Lalu klik “OK”. LOI_VN_Tutorial_01_-_27
  45. Karena keterbatasan dari aplikasinya, kita tidak bisa masuk dari dua rute langsung ke salah satu slide, jadi pilihannya yaitu menduplikat seluruh cerita selanjutnya ke dalam rute ke-1 dan ke-2.
  46. Duplikat “Slide 6”, ganti nama karakternya menjadi “Jeannie” dan dialognya menjadi “Sekarang aku mengerti...”. LOI_VN_Tutorial_01_-_28
  47. Duplikat slide-nya lagi. Lalu ganti nama karakternya menjadi “Aku” dengan dialog “Apa kamu mau nyoba Visual Novel bikinanku?”. LOI_VN_Tutorial_01_-_29
  48. Duplikat slide-nya lagi. Lalu ganti nama karakternya menjadi “Jeannie” dengan dialog “Ya.”. LOI_VN_Tutorial_01_-_30
  49. Oke. Ceritanya akan saya stop disitu. Sekarang kita salin ceritanya ke rute ke-2 dari karakter “Aku” yang berbicara “Sekarang aku mengerti...” (atau “Slide 7” di saya) sampai dengan karakter “Jeannie” yang berbicara “Ya.” (atau “Slide 9” di saya). Taruh slide-slide itu dibawahnya karakter “Aku” yang berbicara “Visual Novel itu novel yang berisi gambar & berbagai pilihan untuk menentukan ceritanya.” (atau “Slide 5” di saya).
  50. Sekarang, saya akan membuat halaman / slide “End” agar Visual Novelnya sedikit lebih rapi & bagus. Caranya duplikat “Slide 8” lalu hapus kotak dialognya & gambar karakternya sehingga yang tersisa hanya kotak nama karakter & teksnya. Letakkan kedua objek itu ditengah dan ganti teksnya menjadi “.:. Selesai .:.”. LOI_VN_Tutorial_01_-_31
  51. Seleksi kotaknya lalu berikan interaksi “Exit presentation”, kalau sudah klik “OK”. LOI_VN_Tutorial_01_-_32
  52. Ganti gambar background-nya menjadi hitam.
  53. Salin slide-nya lalu taruh di slide paling bawah.
  54. Jika kalian ingin memasukkan musik, pergi ke “Slide 1” lalu ke “Slide Transition”, di bawah ada tulisan “Sound:”, ganti dari “No sound” menjadi “Other sound...”, lalu cari musiknya. Kalau sudah klik “Open”. LOI_VN_Tutorial_01_-_33
  55. Klik “Loop until next sound” untuk membuat musik kalian tetap berjalan saat berganti slide. LOI_VN_Tutorial_01_-_34

Selesai. Kalian boleh melanjutkan membuat Visual Novel, tapi saya akan mengakhiri sampai sini dulu. Hasil Visual Novel di tutorial ini bisa diunduh di bawah di bagian Hasil Game.

Hasil Game

Jika kalian ingin mencoba hasil game yang kita buat. Kalian bisa mengunduhnya disini. Di dalamnya juga terdapat aset-aset Visual Novel yang digunakan di tutorial ini.

Penutup

Oke teman-teman. Sekian tutorial ini. Artikel ini juga tersedia dalam bentuk PDF yang bisa diunduh disini dan jika kalian ingin dokumen versi raw-nya bisa diunduh disini dalam bentuk ODT. Sampai jumpa! Sampai bertemu lagi di postingan selanjutnya… Bye bye… :–)

#Tutorial #LibreOfficeImpress

Artikel ini dilisensikan dengan lisensi CC BY-SA 4.0