Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Engines
Gamedevelopment

Memulai Crafty: Kontrol, Event, dan Teks

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Getting Started with Crafty.
Getting Started With Crafty: Entities
Getting Started With Crafty: The Game Loop

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

Pada tutorial terakhir, kamu mempelajari tentang benda dalam Crafty dan bagaimana kamu bisa mengubahnya menggunakan berbagai fungsi. Pada tutorial ini kamu akan belajar tentang berbagai komponen yang membuat kamu bisa menggerakkan berbagai benda menggunakan keyboard.

Crafty memiliki tiga jenis komponen berbeda untuk menggerakkan benda: Twoway, Fourway, dan Multiway. Tutorial ini akan memperkenalkan masing-masing komponen tersebut. Di akhir tutorial kamu akan belajar tentang komponen Keyboard dan berbagai fungsi yang berhubungan dengan komponen tersebut.

Twoway dan Fourway

Komponen Twoway membuat sebuah benda bergerak ke kiri atau ke kanan menggunakan tombol panah atau A dan D. Komponen tersebut juga membuat sebuah benda dapat melompat menggunakan tombol panah atas atau tombol W. Kamu perlu menambah komponen Gravity ke benda yang kamu inginkan agar benda tersebut bisa melompat.

Fungsi .twoway() menerima dua argumen. Argumen pertama menentukan kecepatan benda bergerak di arah horizontal, sedangkan argumen kedua menentukan kecepatan benda tersebut saat melompat. Jika argumen kedua tidak diisi, kecepatan melompat akan diatur dua kali kecepatan gerak arah horizontal.

Komponen Fourway akan membuat sebuah benda bergerak empat arah menggunakan tombol panah atau W, A, S, dan D. Fungsi .fourway() hanya menerima satu argumen untuk menentukan kecepatan benda tersebut ke semua arah.

Multiway

Kekurangan terbesar komponen Fourway adalah dia tidak membolehkan kamu mengatur kecepatan berbeda untuk arah horizontal dan vertikal.

Sedangkan komponen Multiway membolehkan kamu mengatur kecepatan untuk masing-masing sumbu dengan nilai yang berbeda. Komponen tersebut juga membolehkan kamu mengatur tombol yang berbeda untuk menggerakkan benda tersebut ke berbagai arah. Argumen pertama fungsi .multiway() adalah kecepatan entitas kita. Argumen kedua adalah sebuah objek untuk menentukan tombol untuk menggerakan benda ke suatu arah.

Arah ditentukan dengan nilai derajat. 180 adalah kiri, 0 adalah kanan, -90 adalah atas, dan 90 adalah bawah. Berikut adalah beberapa contoh:

Kode di atas mengatur kecepatan kotak hitam 150 di arah horizontal dan 75 di arah vertikal. Kotak jingga bergerak dengan kecepatan 150 ke semua arah tapi menggunakan tombol-tombol yang berbeda untuk bergerak. Kotak ungu tidak bergerak secara horizontal atau vertikal, melainkan pada arah 45 derajat. Kecepatan di sini adalah pixel per detik.

Sederhananya, kamu bisa menunjuk tombol apa saja untuk arah apa saja menggunakan komponen Multiway. Hal ini sangat berguna saat kamu ingin menggerakkan berbagai benda secara terpisah.

Komponen ini juga memiliki fungsi .speed(), yang bisa digunakan untuk mengubah kecepatan sebuah benda. Kamu juga bisa menonaktifkan tombol kontrol menggunakan fungsi .disableControl().

Komponen Keyboard

Tiga komponen di bagian sebelumnya membuat kamu bisa menggerakkan benda menggunakan tombol yang berbeda. Tapi kamu mungkin ingin lebih mengontrol terhadap apa yang terjadi saat sebuah tombol ditekan. Contohnya, kamu mungkin ingin membuat pemain membesar ketika sebuah tombol ditekan atau membuat pemain lebih kuat setelah tombol lain ditekan. Hal ini bisa dicapai menggunakan komponen Keyboard.

Komponen ini juga memberikan akses ke fungsi .isDown(String keyName/KeyCode), yang akan mengembalikan true atau false tergantung dari apakah tombol yang ditekan memiliki nama KeyName atau KeyCode.

Crafty juga memiliki dua event keyboard yang berbeda, KeyDown dan KeyUp. Kamu bisa mengikat event ini ke benda apa saja dalam permainan kamu tanpa menggunakan komponen Keyboard. Event KeyDown terpicu saat event DOM keydown terjadi. Begitu pula event KeyUp terpicu setiap event DOM keyup terjadi.

Pada kode di atas, blackBox sudah memiliki komponen Keyboard. Ini membuat kita bisa menggunakan fungsi .isDown() untuk menentukan apakah tombol tersebut ditekan.

Cobalah menekan tombol L dan K pada demo berikut untuk meningkatkan lebar dan tinggi kedua kotak tersebut.

Komponen Teks

Menambahkan teks ke dalam game kamu sangat mudah jika menggunakan Crafty. Pertama, kamu perlu membuat sebuah benda dengan komponen Text. Lalu, kamu bisa menambahkan teks ke benda tersebut menggunakan fungsi .text(), yang menerima sebuah string sebagai parameternya.

Lokasi teks dapat diatur menggunakan fungsi .attr() dengan mengatur nilai koordinat x dan y. Warna teks juga dapat diubah menggunakan fungsi .textColor(). Beberapa properti lain seperti size, weight, dan family dari font juga dapat diatur menggunakan fungsi .textFont(). Berikut adalah contohnya:

Seperti yang sudah disebutkan sebelumnya, fungsi .text() membutuhkan kamu untuk memberikan sebuah string sebagai parameter. Hal ini berarti jika skor game berupa bilangan, kamu harus mengubahnya menjadi string agar fungsi .text() dapat menampilkannya ke layar.

Sebagian besar properti dan fungsi 2D akan bekerja tanpa masalah dengan komponen Text. Contohnya, kamu bisa memutar dan memindahkannya dengan mudah. Tapi ada dua hal yang perlu kamu ingat. Mengatur style dari sebuah teks akan paling baik saat ditampilkan menggunakan DOM. Saat dirender pada Canvas, lebar dan tinggi teks akan ditentukan otomatis.

Kata Penutup

Menggunakan pengetahuan dari dua tutorial terakhir, kamu sekarang bisa menggerakan berbagai objek menggunakan keyboard. Kamu juga bisa mengubah tampilan pemain utama dan berbagai benda lain menggunakan tombol yang berbeda.

Jika kamu punya pertanyaan tentang tutorial ini, tuliskan di bagian komentar.

Advertisement
Advertisement
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.