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

Memulai Menggunakan Crafty: Entities

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Getting Started with Crafty.
Getting Started With Crafty: Introduction
Getting Started With Crafty: Controls, Events, and Text

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

Dalam tutorial sebelumnya, kamu mempelajari tentang dasar-dasar entity (benda) dan bagaimana peran mereka sebagai bagian dasar game kamu. Pada tutorial ini, kamu akan mempelajari tentang entity lebih mendalam.

Entity (Benda) dan Komponennya

Setiap benda terdiri dari beberapa komponen yang berbeda. Masing-masing komponen tersebut memberikan kegunaannya pada benda yang bersangkutan. Crafty menyediakan banyak sekali komponen siap pakai, tapi kamu juga bisa membuat komponen khusus menggunakan Crafty.c().

Kamu sudah mempelajari tentang komponen dasar seperti 2D, Canvas, Color, dan Fourway pada tutorial pertama. Kita akan mulai dengan membuat sebuah benda menggunakan komponen-komponen berikut:

Jika kamu memiliki banyak benda dengan berbagai komponen, kita mungkin perlu tahu apakah sebuah benda memiliki suatu komponen tertentu. Hal ini bisa dicapai dengan menggunakan fungsi .has().

Kamu juga dapat menambahkan suatu komponen pada sebuah benda menggunakan .addComponent(). Untuk menambahkan banyak komponen sekaligus, kamu bisa menulis mereka sebagai string dengan berbagai nama komponen dipisahkan koma, atau memasukkan setiap komponen menjadi argumen-argumen terpisah.  TIdak akan terjadi apa-apa jika benda tersebut sudah memilki komponen yang kamu coba tambahkan.

Kamu bisa menghapus komponen dari sebuah benda menggunakan .removeComponent(String Component[, soft]). Fungsi ini menerima dua argumen. Argumen pertama adalah komponen yang ingin kamu hilangkan, dan argumen kedua menentukan apakah komponen tersebut dihapus secara halus atau kasar. Penghapusan halus hanya membuat .has() untuk mengembalikan false ketika digunakan untuk mencari komponen yang bersangkutan. Penghapusan kasar akan menghapus semua properti dan fungsi yang berhubungan dengan komponen tersebut.

Umumnya, semua komponen dihapus secara halus. Kamu bisa mengubah argumen kedua menjadi false untuk menghapus sebuah komponen secara kasar.

Mengatur Nilai untuk Berbagai Atribut

Kamu akan perlu menentukan nilai yang berbeda untuk suatu atribut pada setiap benda dalam game kamu. Contohnya, sebuah benda yang mewakili makanan dari pemain dalam permainan harus terlihat berbeda dari benda yang mewakili pemain itu sendiri. Demikian pula, sebuah benda power up akan terlihat berbeda dibanding benda makanan. Crafty memungkinkan kamu untuk mengatur nilai dari berbagai benda dalam permainan secara terpisah atau sekaligus menggunakan .attr().

Benda atau entitas utama disimpan pada variabel playerBox. Jadi kamu bisa mengatur nilai beberapa properti berbeda menggunakan kode berikut:

Properti z mengatur z-index dari berbagai benda. Sebuah benda dengan nilai z yang lebih tinggi akan digambar menimpa benda lain dengan nilai yang lebih kecil. Perlu diingat bahwa hanya bilangan bulat yang boleh digunakan sebagai nilai z-index.

Mari buat sebuah benda makanan dengan ukuran yang lebih kecil, posisi yang berbeda, dan yang sudah dirotasi. Rotasi tersebut dijelaskan dalam nilai derajat rotasi, dan nilai negatif akan memutar benda tersebut berlawanan arah jarum jam.

Seperti yang kamu bisa lihat pada demo di bawah ini, makanan dan pemain sudah bisa dibedakan dengan mudah. Jika kamu mencoba menggerakkan pemian melewati makanan, kamu akan lihat bahwa makanan sekarang digambar di bawah pemain karena nilai z-index yang lebih rendah.

Mengikat event ke benda

Ada banyak event yang perlu kamu tangani saat membuat permainan. Contohnya, kamu perlu mengikat benda pemain ke event KeyDown jika kamu ingin benda tersebut membesar ketika sebuah tombol ditekan. Crafty memungkinkan kamu unguk mengikat berbagai benda ke event tertentu menggunakan fungsi .bind(). Berikut adalah contohnya:

Pada demo berikut, cobalah menggerakan pemain melewati makanan dan tekan tombol 'T' dan 'O'. Menekan 'T' akan membuat transparansi pemain menjadi 0.5, dan menekan 'O' akan mengembalikan transparansi pemain kembali menjadi 1.

Sekarang, kita ikat event tabrakan ke pemain kita agar benda tersebut membesar setiap menabrak makanan. Kita harus menambahkan komponen tabrakan (collision) dan menggunakan fungsi .checkHits(). Fungsi ini akan memeriksa tabrakan terhadap semua benda yang setidaknya memiliki satu komponen yang ditentukan saat fungsi .checkHits() dipanggil. 

Saat sebuah tabrakan terjadi, sebuah event HitOn akan dilemparkan. Event tersebut juga akan menyimpan beberapa informasi penting terkait hit event tersebut. Sebuah event HitOff juga akan dilempar saat tabrakan berakhir.

Lebar dan tinggi pemain bertambah setiap tabrakan terjadi. Kita bisa menggunakan event seperti ini untuk berbagai hal termasuk mengubah posisi makanan atau menambah skor dalam permainan. Kamu juga bisa menghancurkan benda makanan dengan menggunakan fungsi destroy() saat tabrakan terdeteksi.

Memilih sebuah benda

Pada bagian sebelumnya, kita harus mengubah properti sebuah benda. Hal ini bisa dilakukan dengan mudah menggunakan variabel yang ditujukan untuk masing-masing benda. Hal ini tidak praktis jika kita harus menangani 20 jenis benda yang berbeda.

Jika kamu pernah menggunakan jQuery sebelumnya, kamu mungkin tidak asing dengan caranya memilih elemen. Contohnya, kamu bisa menggunakan $("p") untuk memilih semua paragraf. Demikian pula, kamu bisa memilih semua benda yang memiliki komponen yang sama menggunakan Crafty("component").

Berikut adalah beberapa contoh:

Setelah kamu memilih benda, kamu bisa mendapatkan jumlah elemen yang terpilih menggunakan properti length. Kamu juga bisa mengiterasi setiap benda atau mengikat event ke semuanya sekaligus. Kode berikut akan mengubah warna semua benda makanan yang memiliki nilai x lebih besar dari 300 menjadi ungu.

Setelah kamu memilih, kamu bisa menggunakan get() untuk mendapatkan sebuah arrat berisi semua benda yang terpilih. Kamu juga bisa mengakses benda pada indeks tertentu menggunakan get(index).

Kata penutup

Pada tutorial ini, kamu belajar bagaimana cara menambah atau menghilangkan komponen dari sebuah benda. Kamu juga belajar bagaimana cara memiliih benda berdasarkan komponen dan mengubah atribut dan propertinya satu per satu. Semua hal ini akan sangat berguna ketika kita ingin memanipulasi berbagai benda pada layar kita berdasarkan berbagai event yang terjadi.

Jika kamu punya pertanyaan tentang tutorial ini, tuliskan pada 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.