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

Memulai dengan Crafty: Pendahuluan

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

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

Jika kamu pernah membuat game HTML5 sebelumnya, kamu mungkin sudah mengenal beberapa game engine yang bisa digunakan untuk mempermudah proses pembuatan game. Masing-masing sudah memiliki kode yang kamu butuhkan untuk memeriksa tabrakan, memunculkan berbagai benda, atau menambahkan efek suara ke dalam game kamu. Dalam tutorial ini, kamu akan belajar tentang salah satu game engine yang disebut Crafty. Crafty sangat mudah digunakan dan mendukung semua browser utama, termasuk IE9.

Setelah di-minified, ukurannya hanya 127kb, jadi tidak akan memperlambat proses loading game kamu. Crafty mendukung sprite map, sehingga kamu bisa dengan mudah menggambar objek game di layar. Kamu juga bisa membuat event khusus yang bisa dipanggil kapanpun dan terhadap objek apapun yang kamu inginkan.

Terdapat pula komponen untuk suara, animasi, dan efek lain. Secara keseluruhan, game engine ini adalah pilihan yang baik jika kamu ingin membuat game HTML5 sederhana.

Pengaturan awal

Hal pertama yang perlu kamu lakukan adalah memasukkan Crafty dalam projectmu. Kamu bisa mengunduh file dan memuatnya dalam projectmu atau langsung membuat tautan ke minified version yang disimpan di suatu CDN. Setelah library tersebut dimuat, kamu bisa menggunakan baris berikut untuk menjalankan Crafty.

Dua argumen pertama menentukan lebar dan tinggi stage kita. Argumen ketiga digunakan untuk menentukan elemen yang akan kita gunakan sebagai stage. Jika tidak menyediakan argumen ketiga, Crafty akan menggunakan sebuah div dengan id cr-stage sebagai stage. Demikian pula jika argumen lebar dan tinggi tidak ditemukan, Crafty akan mengatur lebar dan tinggi stage sesuai dengan lebar dan tinggi layar.

Di titik ini, kamu seharusnya sudah memiliki kode berikut:

Membuat Benda

Benda atau entity adalah bagian dasar sebuah game Crafty. Semua hal mulai dari pemain, musuh, sampai rintangan direpresentasikan sebagai benda. Kamu bisa menyimpan sebuah daftar komponen ke dalam sebuah benda. Masing-masing dari komponen tersebut akan memberikan kegunaan tambahan pada benda kita dengan memberikan properti dan fungsi dari komponen pada benda tersebut. Kamu juga bisa menghubungkan fungsi lain ke sebuah entitas untuk mengatur berbagai properti seperti lebar, tinggi, posisi, dan warna. Berikut ini adalah contoh sederhana untuk menambahkan komponen pada sebuah benda:

Setiap benda yang ingin kamu tampilkan ke user akan membutuhkan komponen 2D dan sebuah rendering layer. Rendering layer tersebut bisa berupa DOM, Canvas, atau WebGL. Perlu diketahui bahwa dukungan WebGL ditambahkan di versi 0.7.1. Saat ini hanya Sprite, Image, SpriteAnimation, dan komponen Color mendukung rendering WebGL. Saat ini benda Text tetap perlu menggunakan DOM atau Canvas.

Sekarang, kamu bisa menggunakan fungsi attr() untuk mengatur nilai berbagai properti seperti lebar, tinggi, dan posisi benda yang kamu miliki. Sebagian besar fungsi pada Crafty akan mengembalikan benda di mana mereka dipanggil, termasuk attr(). Ini berarti kamu bisa merantaikan beberapa fungsi untuk mengatur properti lain. Berikut adalah contohnya:

Kode ini akan membuat sebuah persegi berwarna jingga di stage.

Menggerakan Benda

Setelah membuat benda, saatnya menulis kode untuk menggerakkan objek tersebut menggunakan keyboard. Kamu bisa menggerakkan sebuah benda dalam empat arah, atas, bawah, kiri, dan kanan, dengan menambahkan komponen Fourway ke benda tersebut.

Benda tersebut akan bisa digerakkan menggunakan tombol panah atau W, A, S, dan D. Kamu bisa memberikan sebuah angka sebagai argumen pada konstruktor fourway untuk mengatur kecepatan benda tersebut. Sekarang kode benda tersebut harusnya terlihat seperti ini:

Kamu bisa membatasi gerakan benda menjadi hanya dua arah dengan menggunakan komponen Twoway. Mengganti komponen Fourway pada kode di atas menjadi Twoway akan membatasi gerakan kotak tersebut menjadi arah horizontal saja. Dapat dilihat pada contoh berikut:

Kamu juga bisa menambahkan komponen kamu sendiri ke berbagai benda untuk penanda atau untuk mengelompokkan sejumlah benda yang sejenis. Dalam hal ini, saya tambahkan komponen Floor pada kotak jingga kita. Kamu bisa menggunakan nama lain yang cukup jelas untuk membantu kamu membedakan berbagai benda.

Ada satu komponen lain yang sanget berguna untuk menggerakkan benda, yaitu komponen Gravity. Saat ditambahkan pada sebuah benda, itu akan membuat benda jatuh ke bawah. Kamu bisa membuat benda tersebut berhenti dengan membuat benda tersebut menabrak benda lain. Hal tersebut bisa dicapai dengan memberikan sebuah komponen identifikasi sebagai argumen fungsi gravity. Berikut adalah kode yang membuat sebuah kotak hitam kecil jatuh ke sebuah lantai atau pijakan:

Pemikiran akhir

Seperti yang kamu lihat dalam tutorial ini, kita bisa membuat struktur dasar sebuah game dengan kode yang sangat sedikit. Kitahanya perlu menambahkan komponen pada benda kita dan menentukan nilai dari berbagai properi seperi lebar, tinggi, atau kecepatan gerak.

Tutorial ini bertujuan untuk memberi pemahaman dasar tentang benda dan konsep lain dalam Crafty. Dalam bagian berikutnya, kamu akan belajar lebih jauh tentang benda. Jika kamu punya  pertanyaan tentang tutorial ini, sampaikan 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.