Advertisement
  1. Code
  2. JavaScript

Mulai Menggunakan Matter.js: Modul Engine dan World

by
Read Time:7 minsLanguages:
This post is part of a series called Getting Started with Matter.js.
Getting Started With Matter.js: Introduction
Getting Started With Matter.js: The Body Module

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

Pada panduan awal dari seri ini, kamu telah dikenalkan secara singkat ke aneka modul di Matter.js. Pustaka-nya mengandung banyak modul, jadi tidak mungkin untuk menulis detil mengenai semua-nya dalam satu panduan. Setelah membaca bagian pertama dari seri ini, kamu harus memiliki gambaran umum dari pustaka-nya dan fitur-fiturnya.

Pada panduan ini, kita hanya akan fokus pada modul World and Engine di Matter.js. Modul World memberikan kita metode-metode yang dibutuhkan dan properti untum membuat dan memanipulasi dunia komposit. Kamu bisa menggunakannya untuk menambah atau membuang badan yang berbeda dari dunia-nya. Modul engine mengandung metode-metode untuk membuat dan memanipulasi mesinnya yang bertanggungjawab untuk membuat simulasi dari duniamu.

Modul World

Pada bagian ini, kamu akan belajar mengenai aneka metode, properti, dan event di dalam modul World. World sebenarnya adalah sebuah Composite dengan tambahan properties seperti gravity dan bounds di dalamnya. Berikut adalah daftar dari metode-metode penting dalam modul ini:

  • add(composite, object): Metode ini berasal dari modul Composite dan mengizinkanmu untuk menambah satu atau lebih badan, komposit, atau konstrain ke komposit atau world tertentu.
  • addBody(world, body): Metode ini mengizinkanmu untuk menambahkan elemen badan tertentu ke world. Ada juga metode addComposite() dan addConstraint() yang mengizinkanmu menambahkan komposit atau konstrain ke world.

Kode berikut menggunakan baik metode-metode ini untuk menambahkan aneka badan ke world. metode add() menambahkan tiga persegi statis yang berfungsi sebagai dinding. metode addBody() membuat sebuah lingkaran, persegi, atau eprsegi panjang berdasarkan tombol yang diklik oleh pengguna.

Kamu bisa menggunakan key isStatic yang telah diatur ke true untuk tingga dinding di dunia kita. Atur key ini ke true untuk objek apapun sehingga dia menjadi benar-benar statis. Objek-nya tidak akan pernah berganti posisi maupun sudut dari sekarang. Ada banyak properti lainnya yang bisa dispesifikasikan untuk mengatur perilaku dari aneka objek. Kamu akan mempelajari semua-nya di modul Body pada seri panduan ini.

  • remove( composite, object, [deep=false]): Ini adlah metode umum untuk menghapus satu atau lebih badan, komposit, atau konstrain dari komposit atau world yang diberikan. Contohnya, kamu bisa menggunakan baris berikut untuk menghapus dinding atas dan kiri dari dunia-nya.
  • clear( world, keepStatic): metode ini adalah sebuah nama lain dari pasangan Composite. kamu bisa menggunakannya untuk menghapus semua elemen di dunia sekaligus. Parameter yang kedua adalah sebuah Boolean yang bisa digunakan untuk mencegah elemen statis dibersihkan. Nilai-nya false secara bawaan. Ini berarti memanggiil World.clear( world) akan menghapus semua elemen dari world tersebut.
  • rotate( composite, rotation, point, [recursive=true]): Metode ini bisa digunakan untuk memutar semua anak dari dunia atau komposit tertentu dengan sudut tertentu pada titik yang disediakan. Sudut yang diberikan di sini dalam radian. Parameter point menentukan titik rotasi-nya.
  • scale( composite, scaleX, scaleY, point, [recursive=true]): kamu bisa menggunakan metode ini untuk mengubah ukuran semua anak dari komposit atau dunia berdasarkan nilai tertentu. Metode ini akan merubah semuanya mulai dari lebar, tinggi, area, hingga massa dan inersia.
  • translate(composite, translation, [recursive=true]): Metode translate berguna ketika kamu ingin memindahkan semua anak dari dunia atau komposit berdasarkan sebuah vektor tertentu yang secara relatif dari posisi-nya saat itu.

Satu hal yang harus kamu ingat bahwa baik translate() maupun rotate() tidak menambahkan kecepatan apapun ke bentuk di dunia-nya. Gerakan apapun yang terjadi hanyalah hasil dari perubahan pada bentuk atau posisi dari bentuk yang berbeda, berikut beberapa kode untuk mengubah ukuran, rotasi dan translate sebuah dunia berdasarkan pengklik-an tombol:

Kamu harus ingat bahwa kode di atas menerapkan skala yang berbeda untuk sumbu x dan y. Ini membuat lingkaran dalam dunia Matter.js kita berbentuk oval. Lalu oval-nya jatuh ke sebuah keadaan yang lebih stabil dengan energi potensial lebih sedikit.

Coba tekan tombol Scale pada demo di atas. Setelahnya, tekan tombol Rotate untuk melihat berapa dekat Matter.js mensimulasikan pergerakan nyata dari sebuah oval.

Di samping semua metode tersebut, modul World memiliki banyak properti berguna juga. Contohnya, kamu bisa mendapatkan sebuah array dari semua bentuk yang merupakan anak langsung dari komposit dunianya menggunakan world.bodies. Kamu juga bisa mendapatkan sebuah array dari semua komposit daj konstrain menggunakan world.composites dan world.constraints.

Kamu juga bisa menspesifikasikan bound dari world yang bisa dideteksi menggunakan world.bounds. Satu hal menarik yang bisa kamu ubah dari properti world adalah gravitasi. Gravitasi dari sumbu x dan y diatur ke 0 dan 1 secara bawaan. Kamu bisa menggantinya menggunakan world.gravity.x dan world.gravity.y.

Kamu harus mengunjungi Halaman dokumentasi Matter.World untuk mengetahui lebih lanjut mengenai modul ini.

Modul Engine

Module Engine dibutuhkan untuk memperbaharui simulasi dari dunia-nya. Berikut daftar dari metode-metode penting dari modul Engine.

  • create([options]): Metode ini berguna ketika kamu ingin membuat sebuah mesin baru. Parameter options pada metode ini sebenarnya adalah sebuah objek dengan pasangan key-value. Kamu bisa menggunakan options untuk mengesampingkan nilai bawaan untuk aneka properti dari engine. Contohnya, kamu bisa menggunakan properti timeScale untuk memperlambat atau mempercepat simulasi.
  • update(engine, [delta=16.666], [correction=1]) : Metode ini akan memindahkan simulasi-nya ke depan dalam delta ms. Nilai dari parameter correction menentukan waktu perbeikan setelah pembaharuan. Koreksi ini biasanya dibutuhkan ketika delta-nya berubah tiap kali pembaharuan.
  • merge(engineA, engineB): Metode ini akan menggabungkan dua mesin yang dispesifikasikan parameter-nya. Ketika bersatu, konfigurasi diterapkan dari engineA dan dunia-nya diambil dari engineB.

Modul Engine juga memiliki banyak properti lainnya untuk membantumu mengendalikan simulasi-nya. Kamu bisa mengatur nilai untuk constraintIterations, positionIterations, atau velocityIterations untuk menspesifikasikan jumlah konstrain, posisi, dan kecepatan perulangan yang dilakukan tiap pembaharuan. Nilai yang lebih tinggi pada tiap kasus akan menyediakan simulasi yang lebih baik. Namun, nilai yang lebih tinggi juga akan berdampak buruk pada performa dari pustaka-nya.

Kamu bisa mengatur nilai properti timing.timeScale untuk mengendalikan kecepatan di mana simulasi terjadi. Tiap nilai di bawah 1 akan menghasilkan simulasi dalam slow-motion. Mengatur properti ini ke nol akan membekukan dunia-nya sepenuhnya. Contoh berikut akan membuatnya jelas.

Kamu mungkin menyadari bahwa bola-bola-nya memantul kali ini. Tiap bentuk kaku memiliki sebuah koefisien restitusi 0 yang diatur secara bawaan. Ini memberi mereka properti yang mirip tanah liat, dan mereka tidak akan memantul kembali ketika menabrak. Saya telah mengganti restitusinya menjadi 1 sehingga bola-nya dapat memantul dengan mudah.

Kamu akan mempelajari semua properti dari bentuk kaku pada panduan berikutnya dari seri ini. Untuk saat ini, tambahkan beberapa lingkaran atau bola ke dunia dan coba tekan tombol slow-motion atau fast-motion untuk melihat perbedaannya.

Kamu harus mengunjungi Halaman dokumentasi Matter Engine untuk membaca lebih lanjut mengenai modul ini.

Kesimpulan

Panduan ini membahas dua modul paling penting di Matter.js yang kamu perlu tahu untuk menjalankan simulasi apapun. Setelah membaca panduan ini, kamu seharusnya bisa mengubah ukuran, memutar, mempercepat atau memperlambat duniamu. Sekarang kamu juga tahu cara untuk menghapus atau menambah bentuk ke dunia. Ini bisa berguna ketika kamu mengembangkan permainan 2D.

Pada panduan selanjutnya, kamu akan belajar mengenai aneka metode, properti dan event yang terdapat pada modul Bodies.

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.