Advertisement
  1. Code
  2. JavaScript

Mulai Menggunakan Matter.js: Body Module

by
Read Time:8 minsLanguages:
This post is part of a series called Getting Started with Matter.js.
Getting Started With Matter.js: The Engine and World Modules
Getting Started With Matter.js: The Composites and Composite Modules

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Pada panduan sebelumnya dari seri ini, kamu telah belajar mengenai World dan Engine module di Matter.js. Metode-meotde yang tersedia pada kedua modul tersebut diperuntukkan untuk mengatur perilaku dari banyak body atau keseluruhan world sekaligus. Namun, pada beberapa titik akan diperlukan untuk memiliki kontrol atas properti-properti dari tiap body di world-mu.

Contohnya, kamu mungkin ingin menerapkan beberapa paksaan terhadap objek tertentu atau mengganti koefisien friksi-nya. Pada kasus semacam itu, Body module di Matter.js bisa jadi sangat membantu. Modul ini mengandung banyak metode dan properti untuk membiarkanmu menentukan nilai-nilai dari semua atribut fisik, dari massa hingga koefisien restitusi. Pada panduan ini, kamu akan mempelajari semua metode dan properti ini juga cara untuk menggunakannya secara tepat.

Mengubah Ukuran, Merotasi dan Menerjemahkan sebuah Body

Kamu bisa merotasikan semua badan yang kaku di dunia Matter.js dengan menggunakan metode rotate(body, rotation). Rotasi-nya relatif terhadap sudut badan saat itu dan tidak akan memberi angular velocity kepadanya. Sudut rotasi ditentukan dalam radian.

Kamu juga bisa mengubah ukuran sebuah badan menggunakan metode scale(body, scaleX, scaleY, [point]). Parameter scaleX dan scaleY menentukan jumlah perubahan ukuran secara horizontal dan vertikal. Ingat bahwa perubahan ukuran apapun juga akan memperbaharui properti fisik dari badannya seperti massa, area dan inersia. Parameter keempat menentukan titik di mana perubahan ukuran terjadi. Ketika tidak dispesifikasikan, nilai bawaan dari titik perubahan ukurannya diasumsikan bagian tengah dari badannya.

Kita bisa memindahkan sebuah badan dengan sebuah vektor yang relatif ke posisi saat itu menggunakan translate(body, translation). Parameter translation menentukan posisi baru dari objeknya secara relatif terhadap posisinya saat ini. Berikut adalah sebagian kode dari demo yang mengubah ukuran, merotasi, dan memindahkan kotaknya kesana kemari.

Mengatur Kecepatan dan Kekuatan

Kamu juga bisa menambah kecepatan linear ke sebuah objek menggunakan metode setVelocty(body, velocity). Menerapkan sebuah velositas dengan cara ini tidak akan merubah sudut, kekuatan atau posisi dari objek yang dimaksud. Posisi dari objek maupun sudutnya mungkin berubah, tapi pustakanya tidak mengaturnya ke suatu nilai spesifik. Nilai mereka ditentukan oleh kekuatan lain yang bekerja pada objek seperti friksi.

Seperti halnya kecepatan linear, kamu juga bisa mengganti kecepatan angular dai sebuah objek menggunakan metode setAngular Velocity(body, velocity). Pada kasus ini, posisi, sudut dan kekuatan yang diterapkan pada objek tetap tidak berubah.

Satu hal yang harus kamu ingat adalah bahwa kecepatan adalah sebuah vektor di setVelocty() dan sebuah angka di setAngularVelocity().

Di samping menambah kecepatan ke objek, kamu juga bisa menerapkan sebuah kekuatan vector pada mereka, Metode appyForce(body, position, force) bisa digunakan untuk menerapkan sebuah force vector pada sebuah bada dari position tertentu. Kekuatan ini bisa menghasilkan atau bisa tidak menghasilkan torsi pada badan yang ditentukan.

Kode berikut menerapkan sebuah kekuatan tepat ditengah badan. Force vector-nya adalah {x: 0, y: -0.05} Ini berarti bahwa force yang diterpkan akan murni vertikal dan mengarah ke atas. Kamu harus ingat bahwa force vertikal yang mengarah ke atas memiliki tanda negatif di Matter.js. Hal lain yang perlu diperhatikan adalah seberapa kecil nilai yang menentukan vertical force-nya. Gravitation force sendiri hanya memiliki nilai 1 di Matter.js.

Pergerakan dari bola setelah menerapkan kekuatannya terlihat natural sepanjang bola-nya tidak menabrak dinding atau lantai-nya. Biasanha, ketika benda menabrak sesuatu, kita berharap dia akan memantul. Energi di mana sebuah objek akan memantul ditentukan oleh koefisien dari restitusi.

Di Matter.js, pada awalnya dia berada pada nilai nol. Ini berarti objek apapun yang restitusi-nya nol dan menabrak sesuatu tidak akan memantul sama sekali. Nilai 1 berarti objek-nya akan memantul dengan energi kinetik yang sama dengan apa yang dia miliki sebelum menabrak. Nilai seperti 0.5 berarti objek-nya akan memantul hanya dengan 50% dari energi kinetik sebelumnya. Nilai dari restitusi untuk sebuah objek bisa diatur menggunakan key restitution.

Pada simulasi tertentu, mungkin perlu untuk mengganti friksi di antara badan yang berbeda. Ini bisa diraih dengan menggunakan key friction, frictionAir dan frictionStatic.

  • key friction menentukan nilai dari friksi kinetik sebuah badan. Dia bisa memiliki nilai dari 0 hingga 1. Nilai nol berarti sebuah badan bisa bergerak tanpa batas ketika telah diatur ke sebuah gerakan. Satu-satunya cara untuk menghentikannya adalah dengan menambahkan force eksternal. Nilai akhir dari friksi di antara dua objek ditentukan menggunakan formula Math.min(bodyA.friction, bodyB.friction).
  • key frictionStatic menentukan nilai dari friksi ketika diam. Nilai bawaan static friction adalah 0.5. Semakin tinggi berarti semakin besar force yang dibutuhkan untuk membuatnya bergerak.
  • Key fricitonAir digunakan untuk menentukan nilai friksi di antara sebuah bentuk dengan udara sekitarnya. Semakin tinggi nilainya berarti bentuk-nya akan melambat dengan sangat cepat ketika bergerak di udara. Efek dari friksi udara ini non-linear.

Mengontrol Rendering Bentuk-Bentuk

Hngga titik ini, kita belum menspesifikasikan warna, ukuran outline atau gaya garis untuk digunakan ketika merender sebuah bentuk. Semua properti ini berada dalam key render. Properti fillStyle menerima sebuah string untuk menentukan gaya rendering fill bentuk-nya. Properti lineWidth menerima sebuah angka yang menentukan lebar garis untuk digunakan saat membuat garis luar dari sebuah bentuk.

Nilai nol berarti bahwa tidak ada garis yang akan dirender. Properti strokeStyle bisa digunakan untuk menentukan gaya garis untuk digunakan ketika merender outline bentuk-nya. Kamu bisa mencegah sebuah bentuk dirender dengan mengatur key visible menjadi false. Opacity dari bentuk yang ingin kamu render bisa dikontrol menggunakan key opacity.

Kamu juga bisa menggunakan sebuah gambar ketimbang warna sederhana dan garis luar untuk merender sebuah bentuk. Parameter yang digunakan untuk merender sebuah bentuk yang menggunakan sprite dispesifikasikan menggunakan aneka properti. Properti texture menentukan path dari gambar yang harus digunakan sebuah tekstur sprite.

Properti xOffset dan yOffset bisa digunakan untuk mendefinisikan offset pada sumbu-sumbu untuk sprite-nya. Kamu juga bisa menggunakan properti xScale dan yScale untuk menentukan perubahan ukuran pada sumbu x dan y untuk sprite-nya. Berikut beberapa kode yang menggantikan latarbelakang biru cerah dari bola kita dengan sprite bola sepak dari situs Open Game Art.

Mengubah Properti Fisik

Kamu telah melihat cara untuk menspesifikasikan friksi atau koefisien dari restitusi untuk sebuah objek di Matter.js. Masih terdapat banyak properti lainnya yang memiliki nilai yang bisa dimodifikasi dengan cara yang sama. Di sisi lain, ada beberapa properti yang hanya bisa dibaca dan tidak bisa kamu ubah.

Kamu bisa mengatur posisi sebuah bentuk dalam dunia menggunakan key position, yang menerima sebuah vektor sebagai nilainya. Kamu juga bisa menentukan massa-nya dengan properti mass, tapi kamu juga harus mengatur nilai dari properti inverseMars yang dihitung menggunakan 1/mass. Cara yang lebih baik untuk mengatur massa sebuah bentuk adalah dengan bantuan properti density.

Ketika kamu mengganti kerapatan dari sebuah bentuk, massa-nya akan dihitung secara otomatis berdasarkan area-nya. Dengan begini kamu bisa membedakan objek berdasarkan kerapatannya. Contohnya, sebuah bentuk yang menggunakan batu sebagai sprite-nya harus memiliki densitas yang lebih tinggi untuk bentuk dengan ukuran sama yang menggunakan bola sepak sebagai sprite-nya.

Beberapa properti seperti speed, velocity, dan angularVelocity hanya bisa dibaca. Tapi nilai mereka bisa diatur dengan metode yang tepat seperti setAngularVelocity() dan setVelocity(). Kamu bisa membaca lebih mengenai aneka propert dari modul Body di dokumentasi.

Kesimpulan

Pada panduan ini, kamu telah belajar mengenai semua metode dan properti penting di modul Body pada pustaka Matter.js. Mengetahui aneka properti ini dan apa yang mereka lakukan bisa membantu-mu membuat simulasi yang lebih realistif ke kenyataan. Pada panduan selanjutnya yang sekaligus panduan terakhir, kamu akan belajar mengenai modul Composite pada Matter.js.

Jika kam memiliki pertanyaan apapun terkait panduan ini atau beberapa tips mengenai penggunaan pustaka, tolong bagikan dengan kami.

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.