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

Memulai dengan Crafty: Game Loop

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

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

Sampai tahap ini, kamu sudah belajar bagaimana memanipulasi bierbagai benda dan menggunakan keyboard untuk menggerakkan berbagai benda tersebut. Pada bagian ini kamu akan belajar bagaimana menggunakan game loop dalam Crafty untuk memeriksa berbagai event secara berkala dan menganimasikan berbagai benda.

Game loop dalam Crafty diimplementasi pada Crafty.timer.step, yang menggunakan event global untuk berkomunikasi dengan sisa dari game engine. Loop tersebut diatur oleh requestAnimationFrame jika tersedia. Setiap loop memiliki satu atau lebih pemanggilkan ke event EnterFrame dan satu pemanggilan RenderScene yang menghasilkan setiap layer digambar ulang.

Nilai akhir semua properti dan variabel ditentukan sebelum sebuah scene dirender. Contohnya, jika kamu menggerakkan pemain 5 px ke kanan sepuluh kali dalam satu event EnterFrame, pemain akan digambar langsung 50 piksel di kanan dan mengabaikan semua gambar diataranya.

EnterFrame dan RenderScene

Semua hal yang perlu berubah dalam permainan kamu pasti akan berhubungan dengan event EnterFrame. Kamu bisa menggunakan fungsi .bind() untuk mengikat berbagai benda ke event ini. Fungsi yang diikat ke event ini juga akan diberikan sebuah objek dengan properti seperti dt yang menentukan waktu dalam milidetik yang sudah berlalu sejak event EnterFrame terakhir.

Kamu bisa menggunakan properti dt untuk membuat pengalaman bermain yang mulus dengan menentukan seberapa jauh kondisi permainan sudah maju.

Event RenderScene digunakan untuk memastikan semua hal yang terlihat di layar sesuai dengan kondisi permainan terkini berdasarkan event EnterFrame terakhir. Biasanya kamu tidak perlu mengikat event ini sendiri kecuali kamu memutuskan untuk membuat rendering layer sendiri.

Menggunakan Tween untuk menganimasikan properti 2D

Kamu bisa menggunakan komponen Tween saat kamu ingin menganimasikan properti 2D sebuah benda dalam suatu jangka waktu tertentu. Kamu bisa menganimasikan properti x, y, w, h, rotation, dan alpha menggunakan komponen ini. Mari kita animasikan nilai x dan tinggi kotak jingga dan hitam yang sudah kamu buat dalam dua tutorial terakhir.

Berikut adalah kode yang kamu butuhkan:

Kamu mungkin menyadari bahwa kotak jingga tidak berputar di titik tengahnya tapi dari pojok kiri atas. Kamu bisa mengubah pusat rotasi menggunakan fungsi .origin().  Fungsi tersebut menerima dua argumen integer, yang menentukan offset pixel titik pusat pada sumbu x dan y.

Fungsi tersebut juga menerima argumen nilai berupa string. Nilai string tersebut bisa berupa kombinasi dari center, top, bottom, middle, left, atau kanan. Contohnya, .origin("center") akan memutar benda berdasarkan titik tengahnya, dan .origin("bottom right") akan memutar benda berdasarkan titik di pojok kanan bawah.

Kamu bisa menghentikan atau melanjutkan semua tween yang berhubungan dengan sebuah benda menggunakan fungsi  .pauseTweens() dan .resumeTweens(). Begitu pula kamu bisa menggunakan .cancelTween() untuk membatalkan sebuah tween.

Memahami Timer pada Crafty

Objek Crafty.timer menangani semua game tick di dalam Crafty. Kamu bisa menggunakan fungsi .FPS() dengan objek ini untuk mendapatkan frame rate yang diharapkan. Perlu diketahui bahwa ini bukanlah nilai frame rate sebenarnya.

Kamu juga bisa menggunakan fungsi .simulateFrames(Number frames[, Number timestep]) untuk memajukan kondisi permainan sebanyak sejumlah frame yang diinginkan. timestep adalah durasi untuk melewati setiap frame. Jika tidak ditentukan, akan digunakan nilai dasar 20ms.

Fungsi lain yang berguna adalah .step(), yang akan memajukan permainan dengan menjalankan sebuah step. Sebuah step terdiri dari satu atau lebih frame dan diikuti oleh proses render. Jumlah frame akan tergantung pada steptype pada timer. Fungsi ini akan memanggil berbagai event seperti EnterFrame dan ExitFrame pada setiap frame, dan event PreRender, RenderScene, dan PostRender di setiap render.

Ada tiga mode steptype yang berbeda: fixed, variable, dan semifixed. Pada mode fixed, setiap frame pada Craft akan mendapatkan nilai dt yang sama. Namun, steptype ini bisa memanggil beberapa frame sebelum setiap frame untuk mencapai kecepatan game yang diinginkan.

Kamu juga bisa memanggil hanya satu frame di setiap render dengan menggunakan mode variable. Dalam kasus ini, nilai dt sama dengan waktu yang sudah berlalu sejak frame terakhir.

Terakhir, mode semifixed akan memanggil beberapa frame tiap render, dan waktu sejak frame terskhir dibagi rata untuk setiap frame.

Membuat permainan sederhana

Jika kamu membaca semua tutorial di seri ini, kamu sudah memiliki pengetahuan yang cukup untuk membuat sebuah permainan sederhana. Pada bagian ini kamu akan belajar cara menerapkan semua yang sudah kamu pelajari dan membuat sebuah permainan di mana pemain harus memakan berbagai makanan.

Makanan akan berupa kotak merah yang berputar. Begitu makanan bersentuhan dengan pemain, makanan tersebut hilang dari lokasi lama dan muncul di lokasi baru yang acak. Pemain dapat bergerak menggunakan A, W, S, D, atau tombol panah.

Satu hal lagi yang perlu kamu tangani adalah posisi pemain. Pemain harus selalu berada di dalam area permainan.

Mari menulis kode untuk makanan terlebih dahulu:

Awalnya, Crafty akan menggunakan pojok kiri atas benda makanan saat memutarnya. Mengubah titik pusat ke tengah memastikan makanan berputar pada pusatnya.

Objek pemain akan memeriksa posisi pemain setiap frame dan membatasi posisi pemain jika pemain mencoba bergerak keluar area permainan.

Kamu bisa menggunakan objek Text untuk mencatat skor. Skor tersebut akan ditampilkan di pojok kiri atas  layar. Variabel gameScore menyimpan jumlah pemain menyentuh makanan.

Sekarang, kamu perlu menulis kode untuk menggerakan makanan ke posisi yang berbeda saat tabrakan terdeteksi. Kode berikut akan menjalankan fungsi tersebut.

Perlu kamu ingat bahwa kamu perlu mengurangi lebar dan tinggi makanan dari lebar dan tinggi area permainan. Hal ini dilakukan untuk memastikan makanan selalu ada di dalam area permainan. Berikut adalah demo dari permainan kita:

Kata penutup

Dengan Crafty, kamu bisa membuat sebuah game yang sangat sederhana dengan beberapa baris kode. Sekarang, permainan ini membutuhkan beberapa fitur untuk membuatnya lebih menarik. Pertama, tidak ada suara dalam permainan ini. Kedua, tidak ada cara pemain untuk menyelesaikan permainan, tingkat kesulitan level juga selalu sama sepanjang permainan. Kamu akan belajar mengenai suara, sprite, event mouse, dan fitur-fitur lain dalam library ini di tutorial berikutnya.

Jika kamu punya masalah atau kebigungan selama menjalankan contoh di tutorial ini, beri tahu saya di 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.