Advertisement
  1. Code
  2. Games

Buat Sistem Teks Bergaya RPG untuk Permainan Anda Berikutnya

by
Read Time:14 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Sayektisri1967 (you can also view the original English article)

Dalam tutorial ini kita akan membuat sistem teks yang mirip dengan apa yang Anda lihat di banyak permainan peran. Kelas kami akan secara dinamis menampilkan ikon untuk karakter saat mereka berbicara, dan akan mengetik setiap blok teks huruf demi huruf.

Pratinjau Hasil Akhir

Berikut ini contoh sistem teks yang akan kami buat:

Langkah 1: Mengatur File Flash Anda

Buat file Flash baru (Actionscript 3). Pengaturan film Anda akan bervariasi tergantung pada gim Anda. Untuk demo ini saya menyiapkan film saya sebagai 500x300, dengan latar belakang hitam dan 30 fps.

Flash file setup

Langkah 2: Tambahkan Gambar Latar Belakang

Anda kemungkinan besar akan menampilkan modul teks di atas gambar atau animasi dari gim Anda. Untuk demo ini saya hanya menggunakan gambar yang saya lempar bersama dengan beberapa karakter dari permainan saya yang berdiri di lapangan salju.

Letakkan gambar latar belakang Anda pada lapisan yang disebut "latar belakang".

Background image or animation

Langkah 3: Buat MovieClip RPGText

Buat MovieClip baru di atas panggung (Insert> MovieClip) bernama "RPGText."

Dalam Properti Simbol centang "Ekspor untuk Actionscript" dan atur nama kelas menjadi "RPGText". Kami akan menggunakan nama kelas ini nanti untuk menautkan kode ke MovieClip ini.

RPGText Symbol Properties

Klik OK. Jika Anda melihat peringatan di sini bahwa definisi kelas tidak dapat ditemukan, tidak apa-apa. Itu hanya berarti tidak ada kode untuk ditautkan ke simbol ini (belum).

Berikan MovieClip Anda nama instance "rpgText." Ingat, ketika saya berbicara tentang "RPGText" (huruf besar) saya merujuk ke kelas (atau MovieClip); "rpgText" (huruf kecil) adalah nama turunan dari kelas itu.

Langkah 4: Tambahkan Latar Belakang Panel Teks

Gambar segi empat di dalam RPGText MovieClip baru Anda. Ini akan menjadi latar belakang untuk ikon karakter dan gelembung ucapan. Rancang sesuka Anda, tetapi harus merentangkan seluruh lebar film Anda dan cukup pendek sehingga tidak menutupi terlalu banyak gim Anda.

Saya membuat lebar 500px (sesuai film saya) dan tinggi 100px. Saya mengisinya dengan gradien dari #666666 ke #999999 (abu-abu gelap ke abu-abu terang).

Background Rectangle

Tip Cepat: untuk menggambar kotak dengan ukuran tertentu, pilih alat kotak dan Alt-klik di atas panggung. Anda akan mendapatkan kotak dialog tempat Anda bisa memasukkan dimensi persegi panjang Anda.

Langkah 5: Ikon Karakter MovieClip

Buat layer baru di dalam RPGText MovieClip yang disebut "ikon." Buat MovieClip baru pada layer ini yang disebut "characterIcon" dan berikan nama instance "characterIcon."

Di dalam characterIcon MovieClip buat dua lapisan baru: "ikon" dan "label." Lapisan ikon akan berisi semua ikon karakter Anda (masing-masing pada bingkai kunci sendiri) dan lapisan label akan berisi label bingkai yang akan kita gunakan untuk menampilkan karakter pada waktu yang tepat.

Impor (atau gambar di Flash) ikon untuk setiap karakter di gim Anda yang akan berbicara. Untuk demo ini saya membuat JPG 75x75px untuk masing-masing karakter saya. Tambahkan ikon ke layer ikon, buat bingkai kunci baru untuk setiap karakter.Impor (atau gambar di Flash) ikon untuk setiap karakter di gim Anda yang akan berbicara. Untuk demo ini saya membuat JPG 75x75px untuk masing-masing karakter saya. Tambahkan ikon ke layer ikon, buat bingkai kunci baru untuk setiap karakter. Urutan kemunculannya tidak penting, tetapi pastikan setiap ikon ditempatkan di x: 0, y: 0 sehingga tidak tampak melompat ketika Anda berganti karakter.

Character Keyframes

Langkah 6: Tambahkan Label Frame

Sekarang buat bingkai kunci baru di setiap bingkai lapisan label Anda. Cara cepat untuk melakukan ini adalah dengan memilih semua frame dan tekan F6.

Pilih setiap label keyframe satu per satu dan tambahkan label bingkai yang sesuai dengan nama karakter yang muncul dalam bingkai itu. Jika Anda menambahkan beberapa frame kosong (F5) di antara kerangka kunci Anda, itu akan membuatnya lebih mudah untuk membaca label bingkai, pastikan saja kerangka kunci label Anda tetap berjejer dengan ikon kerangka kunci Anda.

Adding Frame Labels

Pastikan setiap label Anda memiliki nama yang unik. Jika Anda memiliki dua karakter dengan nama yang sama, Anda harus membedakannya entah bagaimana ('John_L' dan 'John_K' misalnya).

Langkah 7: Gambarkan Bubble Speech

Kembali ke RPGText MovieClip dan buat layer baru yang disebut "textBackground."

Gambar gelembung pidato. Saya menggambar gelembung sederhana dengan sudut-sudut kuadrat, tetapi Anda bisa membuat tampilan Anda sesuka Anda. Buat cukup besar sehingga memenuhi sebagian besar latar belakang latar belakang dan duduk dengan baik di sebelah ikon karakter Anda.

Pilih balon ucapan Anda dan ubah menjadi MovieClip (Ubah> Konversi ke Simbol). Sekarang ini adalah MovieClip, kita dapat menambahkan filter drop shadow ke dalamnya. Saya mengatur tambang menjadi hitam, kekuatan 50%, blur 5px, dan jarak 1px.

Speech Bubble Graphic

Langkah 8: Tambahkan Bidang Teks Dinamis

Buat layer baru di RPGText MovieClip yang disebut "teks." Gunakan alat teks untuk menggambar kotak teks. Buat pas di dalam tepi grafik gelembung ucapan.

Jadikan sebagai bidang teks dinamis multiline dengan nama instan "txt." Ingat untuk menyematkan font jika Anda tidak menggunakan teks sistem. Saya menggunakan Kurir 13pt.

Dynamic Text Field Properties

Langkah 9: Tambahkan Tombol Berikutnya

Kami membutuhkan cara bagi pemain untuk maju ke blok teks berikutnya ketika pemain telah selesai membaca. Mari kita tambahkan tombol "selanjutnya" kecil di sudut.

Buat layer baru di RPGText MovieClip yang disebut "tombol." Tambahkan simbol tombol baru yang disebut "b_next." Rancang empat status tombol Anda sesuka Anda. Saya menggunakan panah bawah kecil sebagai simbol tombol karena saya melihat bahwa dalam banyak permainan dan menganggap pemain sudah terbiasa dengannya.

Letakkan tombol Anda di sudut kanan bawah di atas gelembung ucapan Anda. Jangan khawatir tentang memberi nama contoh. Saya akan jelaskan mengapa nanti.

Complete RPGText MovieClip

Langkah 10: Buat Kelas Dokumen

Buat file Actionscript baru yang disebut "Main.as" dan tambahkan kode ini untuk membuat shell kosong untuk kelas:

Jadikan Main sebagai Kelas Dokumen dalam file Flash Anda. Jika Anda ingin penyegaran cepat menggunakan kelas Dokumen, Tip Cepat ini dari Michael Williams adalah salah satu penjelasan terbaik yang pernah saya lihat.

Langkah 11: Tambahkan Blok Teks

Jika Anda menggunakan ini dalam gim Anda mungkin akan memilih untuk meletakkannya di tempat lain, tetapi untuk saat ini kami akan menambahkannya ke Kelas Dokumen. Tambahkan kode ini ke fungsi konstruktor di kelas Utama:

Di sini kita membuat array dua dimensi (array yang berisi array lain) untuk menampung script untuk adegan kita. Sebelum Anda mengubah apa pun, lihat bagaimana strukturnya. Setiap array adalah blok teks terpisah yang berisi dua elemen. Yang pertama adalah nama karakter dan yang kedua adalah teks yang akan dia ucapkan. Blok teks dicantumkan sesuai urutannya yang akan muncul di layar.

Baris terakhir hanya mengirim array textBlocks ke rpgText MovieClip (ingat "rpgText" adalah nama instance RPGText MovieClip di atas panggung). Lebih lanjut tentang ini nanti.

Lanjutkan dan edit bagian ini agar sesuai dengan adegan Anda. Berhati-hatilah karena nama karakter sesuai persis dengan nama yang Anda gunakan untuk label bingkai di characterIcon MovieClip.

Langkah 12: Buat Kelas RPGText

Kami akhirnya siap untuk mulai menulis kode untuk kelas RPGText.

Buat file Actionscript baru bernama "RPGText.as" dan tambahkan kode ini:

Ini hanya shell dasar untuk kelas. Itu belum melakukan apa-apa, tapi mari kita lihat apa yang ada di sana:

  • Beberapa baris pertama hanya mengimpor beberapa kelas yang akan kita butuhkan.
  • Dalam deklarasi kelas kami memperluas kelas MovieClip. Kita perlu melakukan ini karena kelas ini ditautkan ke MovieClip RPGText di Perpustakaan (lihat Langkah 3).
  • Selanjutnya, kita memiliki dua konstanta, SPEAKER dan TEXT yang akan kita gunakan untuk mendapatkan nama dan teks pembicara dari array textBlocks yang kita atur pada langkah sebelumnya.
  • Variabel _currentTextBlockIndex akan melacak blok teks mana yang saat ini kami tampilkan.
  • _currentTextBlock akan menampung teks yang sebenarnya.
  • _textBlocks akan menampung seluruh array blok teks.
  • Terakhir, ada konstruktor kelas kosong.

(Catatan: Saya menggunakan garis bawah pada nama variabel saya untuk menunjukkan variabel pribadi.)

Langkah 13: Fungsi Setter textBlocks

Karena variabel _textBlocks kami bersifat pribadi, kami memerlukan cara untuk mengakses variabel itu dari kelas Utama tempat kami menyiapkan blok teks. Kami akan melakukannya dengan membuat fungsi "setter". Tambahkan ini ke kelas RPGText tepat di bawah fungsi konstruktor:

Hal keren tentang setter di Flash adalah bahwa kita dapat mengakses fungsi ini seolah-olah itu adalah milik umum dari kelas RPGText. Yang persis seperti yang kami lakukan pada baris 21 dari kelas Utama di Langkah 11:

Langkah 14: Tambahkan Fungsi updateText

Tambahkan fungsi ini ke kelas RPGText:

Ini adalah fungsi inti dari kelas, di mana pengetikan huruf demi huruf terjadi. Mari kita lihat lebih dekat apa yang terjadi di sini:

  • Baris 27: Fungsi ini menerima suatu Acara sebagai parameter karena kami akan memanggilnya menggunakan acara ENTER_FRAME.
  • Baris 28: Kami membandingkan panjang (jumlah karakter) saat ini di bidang teks txt dengan jumlah karakter di String _currentTextBlock.
  • Baris 29: Jika ada lebih sedikit karakter di bidang teks maka kami menggunakan metode substr untuk mendapatkan semua karakter dari awal _currentTextBlock hingga satu lebih dari jumlah karakter saat ini di bidang teks. Kami menempatkan semua karakter ke dalam bidang teks, yang memiliki efek menambahkan satu karakter lagi ke akhir teks di bidang teks.
  • Baris 31: Jika ada jumlah karakter yang sama di bidang teks seperti pada String _currentTextBlock, hapus acara ENTER_FRAME yang memanggil fungsi ini.
  • Baris 32: Panggil fungsi fillText. Kami akan menulis fungsi ini pada langkah berikutnya.

Langkah 15: Tambahkan Fungsi fillText

Tambahkan fungsi ini ke kelas RPGText:

Tujuan utama dari fungsi ini adalah untuk mengisi bidang teks txt dengan teks dari _currentTextBlock (baris 37). Jika kita membiarkan animasi berjalan, fungsi updateText harus menyelesaikannya, tapi ada baiknya untuk memastikan tidak ada yang salah. Kami juga dapat mengaitkan fungsi ini hingga tombol "berikutnya" untuk memungkinkan pemain melewati animasi teks dan segera mengisi bidang teks dengan seluruh blok teks.

Notice this function accepts a MouseEvent as an argument, but we set its default value to null. This allows us to use this function with a MouseEvent listener, since it will accept the event. Karena kami memberikan acara nilai default, kami juga dapat memanggil fungsi tanpa mengirim acara seperti yang kami lakukan di akhir fungsi updateText.

Setelah kami mengisi bidang teks, kami melakukan pemeriksaan untuk melihat apakah ini adalah blok teks terakhir dalam array (jika _currentBlockIndex kurang dari jumlah elemen dalam array _textBlock). Jika tidak, kami menambahkan pendengar KLIK untuk memicu fungsi yang disebut nextTextBlock yang akan kami tulis selanjutnya.

Langkah 16: Tentang Pendengar Klik itu

Ingat ketika kami membuat tombol "selanjutnya" dan saya berkata untuk tidak khawatir memberikannya nama instan? Apakah Anda memperhatikan pada langkah terakhir bagaimana kami melampirkan pendengar KLIK ke seluruh RPGText MovieClip alih-alih tombol? Ini membuatnya jadi pemain dapat mengklik di mana saja di MovieClip untuk memajukan teks. Kami benar-benar bahkan tidak memerlukan tombol, tetapi saya ingin memasukkannya sehingga ada beberapa indikasi bahwa Anda mengklik untuk memajukan teks.

Tentu saja ini hanya preferensi pribadi saya. Jika mau, Anda bisa memberikan tombol nama contoh dan lampirkan pendengar KLIK sebagai gantinya. Saya hanya menemukan area hit yang lebih besar agar lebih mudah digunakan.

Langkah 17: Tambahkan Fungsi nextTextBlock

Kembali ke bisnis. Tambahkan fungsi ini ke kelas RPGText

Tiga baris pertama cukup sederhana. Hapus pendengar MouseEvent, kosongkan bidang teks, dan tambahkan _currentTextBlockIndex var untuk menunjuk ke blok teks berikutnya.

Baris 47 menggunakan konstanta TEXT untuk mendapatkan string teks saat ini dari array _textBlocks dan menetapkannya ke _currentTextBlock.

Selanjutnya kita menggunakan konstanta SPEAKER untuk mendapatkan nama karakter. Karena nama karakter cocok dengan label bingkai di characterIcon MovieClip kita, kita bisa menggunakan gotoAndStop untuk mengirim characterIcon MovieClip ke bingkai yang menampilkan ikon karakter itu.

Terakhir, kami menambahkan pendengar acara untuk mulai mengetik pada string teks baru dan kemudian menambahkan pendengar KLIK untuk menjalankan fillText ketika MovieClip diklik.

Langkah 18: Tambahkan Fungsi startText

Kami hampir selesai, kami hanya perlu menambahkan fungsi yang akan memulai semuanya. Kami akan melakukannya dengan fungsi publik yang disebut "startText." Karena ini adalah fungsi publik, mari kita letakkan di dekat bagian atas kelas RPGText, tepat di bawah setter textBlocks:

Terlihat familier? Kode ini melakukan hal yang hampir sama persis dengan fungsi nextTextBlock. Ini mengatur teks dan ikon karakter saat ini, dan menambahkan pendengar acara untuk updateText dan fillText. Karena fungsi ini hanya berjalan ketika teks pertama dimulai, kita tidak perlu khawatir tentang menghapus bidang teks atau menambah _currentTextBlockIndex seperti yang kita lakukan di nextTextBlock.

Langkah 19: Aktifkan Fungsi startText

Sekarang kami memiliki cara yang dapat diakses publik untuk memulai teks. Mari kita gunakan.

Tambahkan baris ini ke bagian bawah fungsi konstruktor kelas utama:

Ini hanya memanggil fungsi startText di dalam kelas RPGText. Itu akan membuat semuanya berjalan.

Langkah 20: Tambahkan Suara

Anda harus dapat menguji film Anda sekarang dan melihat semuanya berfungsi. Hanya ada satu hal yang hilang: suara.

Temukan (atau buat) suara untuk dimainkan saat teks sedang diketik. Ketika memilih suara untuk ini, buatlah sangat singkat, karena suara ini akan diputar berulang saat teks mengetik. "Boop" kecil atau klik tombol berfungsi paling baik untuk efek ini.

Impor suara ke Perpustakaan di file Flash Anda, centang "Ekspor untuk Actionscript" dan berikan nama kelas "TypingSound."

Sound Export Settings

Untuk membuat suara ini dimainkan, kita hanya perlu menambahkan dua baris ke kelas RPGText. Pertama kita perlu instantiate suara. Tambahkan baris ini di bagian atas kelas di bawah tiga variabel pribadi lainnya:

Sekarang lewati ke fungsi updateText dan tambahkan baris yang benar-benar akan memutar suara setiap kali pembaruan teks (baris 38 baru):

Langkah 21: Mengambil Lebih Jauh

Itu untuk demo. Semuanya harus bekerja pada titik ini, tetapi jika Anda ingin mengintegrasikan ini ke dalam permainan, Anda masih memiliki beberapa pekerjaan di depan Anda.

Pertama, tergantung pada bagaimana game Anda diatur, Anda mungkin ingin menarik blok teks dari kelas dokumen. Anda mungkin memiliki kelas Scene yang Anda gunakan untuk mengatur percakapan individual yang terjadi di game Anda, atau kelas Strings yang menampung semua teks untuk setiap percakapan.

Kedua, Anda harus memikirkan bagaimana dan kapan modul teks akan muncul di gim Anda. Anda mungkin ingin menambahkan animasi tween yang membuatnya meluncur masuk dan keluar dari bawah saat percakapan dimulai dan berakhir. Anda juga ingin mendengarkan ketika percakapan selesai, untuk menyembunyikan modul teks atau memulai percakapan berikutnya.

Karena kami sudah memeriksa untuk melihat apakah blok teks terakhir telah tercapai di fungsi fillText, Anda dapat dengan mudah menambahkan sesuatu di sana yang menangani akhir percakapan.

Saya tidak memasukkan topik ini dalam tutorial karena cara Anda melakukan hal-hal ini akan sangat spesifik untuk permainan Anda. Ini seharusnya cukup untuk membantu Anda memulai.

Saya harap Anda menyukainya! Kirimkan komentar dan beri tahu saya pendapat Anda.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.