Inkle Tutorial Part 2: Menulis Cerita Interaktif Dengan Ink

Photo by Clark Young on Unsplash

Artikel ini merupakan bagian dari seri Inkle Tutorial

Untuk melihat artikel sebelumnya silahkan ke Part 1: 9 Alat yang Digunakan Narrative Designer

Ok, ada beberapa kata yang terdengar mirip tetapi sebenarnya berbeda.

• Ink: markup language / syntax bahasa yang digunakan
• Inkle: perusahaan yang membuat syntax Ink
• Inky: editor standalone untuk menulis Ink
• Ink Unity Integration: kode integrasi agar bisa memainkan file Ink ke dalam Unity

Dalam Ink pun terdapat istilah — istilah yang menyerempet dunia perkainan seperti Knots, Stitch, Weave, Gathers, Thread. Inkle sendiri pun merupakan sejenis Loom / Tenun. Ini hanya sekedar fun fact saja.

Mesin tenun yang disebut Inkle

Supaya tidak berlama — lama, kita bisa langsung mencoba menulis Ink tanpa perlu Game Engine seperti Unity atau Godot, yaitu dengan mendownload editor standalonenya yaitu Inky. Anda dapat mendownloadnya disini https://www.github.com/inkle/inky/releases/latest

Tampilan Inky

Atau anda bisa mencoba secara online menggunakan encrier.ink atau borogove.app

Tampilan webapp encrier.ink

Untuk sementara kita tidak perlu mempedulikan bagaimana mengintegrasikan tulisan kita ke dalam Unity, yang terpenting adalah bagaimana tulisan kita dan pilihan yang diberikan di dalam cerita, dan bagaimana hasilnya nanti.

Pada aplikasi Inky, dapat dilihat dua bagian, bagian sebelah kiri adalah file yang akan kita tulis dan bagian sebelah kanan adalah preview text yang akan muncul di dalam permainan beserta pilihannya.

Baris Teks / Lines

Untuk awal — awal coba hapus semua text di sebelah kiri dan tulis seperti berikut

Halo semuanya!
Ini merupakan sebuah baris text!
"Formatnya bisa suka - suka," sahut Narator.
Narator: Begini juga bisa

Hasilnya akan terlihat langsung di sebelah kanan aplikasi. Jika ingin mengulang cerita fresh dari awal, bisa menekan tombol Restart Story di pojok kanan atas.

Semua di dalam Ink itu merupakan baris, dan formatnya pun bisa seperti apapun tergantung kebutuhan, karena dalam Ink, semuanya merupakan baris text, bagaimana gamenya nanti menginterpretasikan text tersebut, bukan urusan Ink.

Pilihan / Choices / Options / Branches

Pilihan dalam cerita interaktif merupakan sesuatu yang membedakan dari medium cerita lain. Pilihan itulah yang dapat membuat cerita kita menjadi bercabang dan tidak linear.

Di Ink kita dapat membuat pilihan dengan +di depan pilihan kita.

Pilih pokemon anda!
+ Charmander
  "Char, Char!"
  Charmander berputar - putar mengejar ekornya
+ Squirtle
  "Squirtle, Squirtle!"
  Squirtle terlihat bersemangat
+ Bulbasaur
  "Bulba, Bulba!"
  Bulbasaur berloncat gembira

Setelah memilih sebuah pilihan, cerita akan berlanjut dari pilihan kita sampai ke baris sebelum pilihan selanjutnya.

Semisalnya kita memilih Squirtle, maka akan tampil baris seperti berikut:

Pilih pokemon anda!
Squirtle
"Squirtle, Squirtle!"
Squirtle terlihat bersemangat

Perlu diketahui indentasi di dalam bahasa Ink itu tidak penting, beda dengan Yarn Spinner yang diharuskan memperhatikan indentasi. Sehingga menulis seperti berikut memiliki hasil yang serupa

Pilih pokemon anda!
+ Charmander
"Char, Char!"
Charmander berputar - putar mengejar ekornya
+ Squirtle
"Squirtle, Squirtle!"
Squirtle terlihat bersemangat
+ Bulbasaur
"Bulba, Bulba!"
Bulbasaur berloncat gembira

Tetapi tetap disarankan untuk mengindentasi tulisan agar dapat lebih mudah dicerna.

Gather

Di Ink, dikarenakan indentasi tidak penting, untuk mendeteksi apakah suatu percabangan sudah selesai dan ingin ke jalur utama itu menjadi agak sedikit ribet.

Berbeda dengan Yarn Spinner yang karena membutuhkan indentasi untuk menandai bagian dari cerita, sehingga dengan otomatis dia dapat mendeteksi akhir sebuah percabangan.

Berikut adalah contoh untuk Yarn Spinner (perhatian, ini bukan syntax untuk Ink):

Pilih pokemon anda!
  -> Charmander
    "Char, Char!"
    Charmander berputar - putar mengejar ekornya
  -> Squirtle
    "Squirtle, Squirtle!"
    Squirtle terlihat bersemangat
  -> Bulbasaur
    "Bulba, Bulba!"
    Bulbasaur berloncat gembira
Silahkan bawa keluar pokemon anda!

Di Yarn Spinner, semisalnya kita memilih Charmander, maka output yang dikeluarkan akan sebagai berikut

Pilih pokemon anda!
Charmander
"Char, Char!"
Charmander berputar - putar mengejar ekornya
Silahkan bawa keluar pokemon anda!

Setelah menyelesaikan block Charmander, cerita kembali ke jalur awal dan menuliskan Silahkan bawa keluar pokemon anda!.

Tetapi perhatikan implementasi berikut menggunakan Ink:

Pilih pokemon anda!
+ Charmander
  "Char, Char!"
  Charmander berputar - putar mengejar ekornya
+ Squirtle
  "Squirtle, Squirtle!"
  Squirtle terlihat bersemangat
+ Bulbasaur
  "Bulba, Bulba!"
  Bulbasaur berloncat gembira
Silahkan bawa keluar pokemon anda!

Saat kita memilih Charmander, teks yang muncul adalah sebagai berikut:

Pilih pokemon anda!
Charmander
"Char, Char!"
Charmander berputar - putar mengejar ekornya

Baris Silahkan bawa keluar pokemon anda! tidak muncul. Ada apa yang terjadi?

Ini dikarenakan Ink tidak memperhatikan indentasi. Jika kita menghilangkan indentasi, teksnya alan menjadi seperti berikut:

Pilih pokemon anda!
+ Charmander
"Char, Char!"
Charmander berputar - putar mengejar ekornya
+ Squirtle
"Squirtle, Squirtle!"
Squirtle terlihat bersemangat
+ Bulbasaur
"Bulba, Bulba!"
Bulbasaur berloncat gembira
Silahkan bawa keluar pokemon anda!

Terlihat baris terakhir tersebut menjadi bagian teks dari pilihan Bulbasaur, Ink tidak tahu kalau itu harusnya merupakan bagian dari cerita utama bukan dari Bulbasaur saja.

Maka dari itu, Ink menyediakan syntax khusus bernama Gather dengan symbol -untuk menandai kalau teks cerita pilihan terakhir selesai, dan ini mulai balik ke cerita utama.

Jadi untuk mendapatkan perilaku yang sesuai, seharusnya ditulis seperti ini:

Pilih pokemon anda!
+ Charmander
  "Char, Char!"
  Charmander berputar - putar mengejar ekornya
+ Squirtle
  "Squirtle, Squirtle!"
  Squirtle terlihat bersemangat
+ Bulbasaur
  "Bulba, Bulba!"
  Bulbasaur berloncat gembira
-
Silahkan bawa keluar pokemon anda!

Symbol Gather -menutup pilihan terakhir dan menandai kalau teks selanjutnya akan balik ke alur utama.

Alur Bersarang / Nested Flow

Di Yarn Spinner, jika kita ingin membuat pertanyaan bercabang dan bercabang lagi, kita dapat menambah indentasinya saja.

Contoh bahasa Yarn Spinner (bukan Ink):

Anda mau pesan apa?
  -> Minuman
    Mau minum apa?
      -> Es teh
      -> Es jeruk
        Maaf es jeruknya habis!
    Es teh satu ya!
  -> Makanan
    Mau makan apa?
      -> Nasi goreng
        Nasi gorengnya pedas atau tidak?
        -> Pedas
          Nasi goreng pedasnya satu ya!
        -> Tidak Pedas
          Ok nasi goreng tidak pedas satu!
      -> Soto
        Siap soto satu ya!
    Mau tambah kerupuk kah?
      -> Boleh
        Ntabs siap!
      -> Ga mau
        Yowes, no prob!
Baiklah mohon tunggu sebentar!

Harusnya syntaxnya mudah dipahami, saat kita memilih Makanan, akan muncul teks Mau makan apa? dan akan muncul dua pilihan Nasi goreng dan Soto.

Jika memilih Soto, setelah teks di block Soto selesai, kita akan diberikan pertanyaan Mau tambah kerupuk kah? karena setelah block Soto selesai, cerita akan balik ke satu block diatasnya yaitu block pilihan Makanan, dan begitu seterusnya.

Jika kita implementasikan di Ink, berikut adalah contoh yang tidak tepat:

Anda mau pesan apa?
+ Minuman
  Mau minum apa?
  + Es teh
  + Es jeruk
    Maaf es jeruknya habis!
  -
  Es teh satu ya!
+ Makanan
  Mau makan apa?
  + Nasi goreng
    Nasi gorengnya pedas atau tidak?
    + Pedas
      Nasi goreng pedasnya satu ya!
    + Tidak Pedas
      Ok nasi goreng tidak pedas satu!
  + Soto
    Siap soto satu ya!
  -
  Mau tambah kerupuk kah?
  + Boleh
    Ntabs siap!
  + Ga mau
    Yowes, no prob!
-
Baiklah mohon tunggu sebentar!

Saat dijalankan, akan muncul 3 pilihan di awal yaitu Minuman, Es teh dan Es jeruk.

Padahal yang diharapkan adalah pilihan Minumam dan Makanan.

Apa yang terjadi?

Jika kita hilangkan indentasinya, akan menjadi seperti ini:

Anda mau pesan apa?
+ Minuman
Mau minum apa?
+ Es teh
+ Es jeruk
Maaf es jeruknya habis!
-
Es teh satu ya!
+ Makanan
Mau makan apa?
+ Nasi goreng
Nasi gorengnya pedas atau tidak?
+ Pedas
Nasi goreng pedasnya satu ya!
+ Tidak Pedas
Ok nasi goreng tidak pedas satu!
+ Soto
Siap soto satu ya!
-
Mau tambah kerupuk kah?
+ Boleh
Ntabs siap!
+ Ga mau
Yowes, no prob!
-
Baiklah mohon tunggu sebentar!

Terlihat pas di awal terdapat 3 pilihan sebelum symbol Gather - yang pertama.

Itu dikarenakan Ink tidak dapat membedakan kalau pilihan Es teh dan Es jeruk ada dibagian block lebih dalam.

Oleh karena itu, di Ink, untuk membedakan pilihan yang nested, tanda * nya harus semakin banyak untuk pilihan yang semakin dalam. Dan itu juga berlaku untuk symbol Gather.

Jadi setelah diperbaiki, teks Ink nya akan menjadi seperti berikut:

Anda mau pesan apa?
+ Minuman
  Mau minum apa?
  ++ Es teh
  ++ Es jeruk
     Maaf es jeruknya habis!
  --
  Es teh satu ya!
+ Makanan
  Mau makan apa?
  ++ Nasi goreng
     Nasi gorengnya pedas atau tidak?
    +++ Pedas
        Nasi goreng pedasnya satu ya!
    +++ Tidak Pedas
        Ok nasi goreng tidak pedas satu!
  ++ Soto
     Siap soto satu ya!
  --
  Mau tambah kerupuk kah?
  ++ Boleh
     Ntabs siap!
  ++ Ga mau
     Yowes, no prob!
-
Baiklah mohon tunggu sebentar!

Secara syntax, Ink sedikit lebih kompleks, ini dikarenakan Ink tidak menggunakan indentasi sebagai penanda batas block.

Tetapi ini membuat lebih flexible bagaimana kita memformat teks kita. Tapi tetap saja, sangat disarankan menggunakan indentasi untuk mengorganisasi teks Ink.

Sampai saat ini anda sudah bisa membuat cerita interaktif sederhana dengan pilihan — pilihannya. Tetapi jika teksnya akan panjang, tentu saja menggunakan hanya Nested Flow akan sangat membingungkan.

Nested Flow hanya berguna jika interaksi percabangan kecil, jika percabangannya sangat jauh dan mengubah konteks, seperti pindah ruangan atau lokasi, tentu sangat sulit menggunakan Nested Flow saja.

Oleh karena itu kita memerlukan cara untuk mengatur dan mengorganisasikan cerita kita sehingga lebih gampang untuk ditulis, diedit, dan dicerna. Untungnya Ink menyediakan fitur tersebut yang akan kita bahas di artikel selanjutnya.

Lanjut ke Part 3: Pengorganisasian di Ink