Advertisement
  1. Code
  2. JavaScript

Memulai Dengan Matter.js: Pendahuluan

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

Indonesian (Bahasa Indonesia) translation by Redy Sediawan (you can also view the original English article)

Matter.js adalah mesin fisika benda tegar 2D yang ditulis dalam JavaScript. Perpustakaan ini dapat membantu Anda dengan mudah mensimulasikan fisika 2D di browser. Ini menawarkan banyak fitur seperti kemampuan untuk membuat tubuh yang kaku dan menetapkan sifat fisik seperti massa, area atau kepadatan. Anda juga dapat mensimulasikan berbagai jenis benturan dan gaya seperti gravitasi dan gesekan.

Matter.js mendukung semua browser utama termasuk IE8 +. Selain itu, ini cocok untuk digunakan pada perangkat seluler karena dapat mendeteksi sentuhan dan memiliki responsif. Semua fitur ini membuatnya berharga menginvestasikan waktu Anda untuk belajar bagaimana menggunakan mesin karena Anda kemudian akan dapat membuat game 2D berbasis fisika atau simulasi dengan mudah. Dalam tutorial ini, saya akan membahas dasar-dasar perpustakaan ini, termasuk instalasi dan penggunaannya, dan saya akan memberikan contoh yang berfungsi.

Instalasi

Anda dapat menginstal Matter.js dengan menggunakan Manajer paket seperti Bower atau NPM dengan bantuan perintah berikut:

Anda dapat juga mendapatkan link ke Perpustakaan dari CDN dan langsung termasuk dalam proyek-proyek Anda seperti ini:

Contoh dasar

Cara terbaik untuk belajar tentang Matter.js adalah untuk melihat beberapa kode aktual dan mengerti cara kerjanya. Dalam bagian ini, kita akan membuat beberapa tubuh dan pergi melalui baris demi baris kode yang dibutuhkan.

Kita mulai dengan membuat alias untuk semua modul Matter.js bahwa kita mungkin perlu di proyek kami. Modul Matter.Engine berisi metode untuk menciptakan dan memanipulasi mesin. Mesin yang diperlukan dalam sebuah proyek untuk memperbarui simulasi dunia. Modul Matter.Render adalah sebuah dasar HTML5 berbasis kanvas renderer. Modul ini diperlukan untuk memvisualisasikan mesin yang berbeda.

Modul Matter.World digunakan untuk membuat dan memanipulasi dunia di mana mesin berjalan. Hal ini mirip dengan Matter.Composite modul, tetapi ini memungkinkan Anda men-tweak beberapa properti tambahan seperti gravitasi dan batas. Modul terakhir dalam kode kita, disebut Matter.Bodies, memungkinkan Anda untuk membuat objek tubuh kaku. Modul serupa lain yang disebut Matter.Body memungkinkan Anda untuk memanipulasi tubuh individu.

Baris berikutnya menggunakan metode create([settings]) Matter.Engine modul untuk membuat mesin baru. Parameter pengaturan dalam metode di atas adalah benar-benar sebuah objek dengan pasangan key-value untuk menimpa nilai-nilai default dari beberapa properti yang berhubungan dengan mesin.

Misalnya, Anda dapat mengontrol faktor skala global waktu untuk semua mayat di dunia. Menetapkan nilai kurang dari 1 akan mengakibatkan dunia berinteraksi dalam gerakan lambat. Demikian pula, nilai lebih besar dari 1 akan membuat dunia serba cepat. Anda akan belajar lebih banyak tentang modul Matter.Engine dalam tutorial berikutnya dari seri.

Setelah itu, kita menggunakan metode create([settings]) modul Matter.Render untuk membuat sebuah renderer baru. Seperti modul mesin, parameter pengaturan dalam metode di atas adalah sebuah objek yang digunakan untuk menetapkan pilihan yang berbeda untuk parameter. Anda dapat menggunakan elemen kunci untuk menentukan elemen mana Perpustakaan harus memasukkan kanvas. Demikian pula, Anda juga dapat menggunakan tombol kanvas untuk menetapkan kanvas elemen mana dunia Matter.js harus diberikan.

Ada sebuah mesin kunci yang dapat Anda gunakan untuk menentukan mesin yang harus digunakan untuk membuat dunia. Ada juga sebuah kunci pilihan yang benar-benar menerima objek sebagai nilainya. Anda dapat menggunakan kunci ini untuk menetapkan nilai parameter yang berbeda seperti lebar atau tinggi kanvas. Anda juga dapat mengubah wireframes on atau off dengan menetapkan nilai kunci wireframe untuk true atau false masing-masing.

Beberapa baris berikutnya membuat tubuh yang berbeda yang akan berinteraksi di dunia kita. Tubuh yang dibuat dengan bantuan modul Matter.Bodies di Matter.js. Dalam contoh ini, kami hanya telah menciptakan dua lingkaran dan sebuah persegi panjang yang menggunakan metode circle() dan rectangle(). Metode lain tersedia juga untuk membuat poligon yang berbeda.

Setelah kami telah menciptakan tubuh, kita perlu menambahkan mereka ke dunia pilihan kami menggunakan metode add() dari modul Matter.World. Setelah menambahkan diperlukan tubuh untuk dunia kita, kita hanya perlu untuk menjalankan mesin dan renderer menggunakan metode run() dari masing-masing modul. Yang pada dasarnya adalah semua kode yang Anda butuhkan untuk membuat dan membuat dunia dalam Matter.js.

Kode di awal bagian ini menciptakan hasil sebagai berikut.

Modul Matter.js Umum

Ada lebih dari 20 modul yang berbeda di Matter.js. Semua modul ini menyediakan metode yang berbeda dan sifat yang berguna untuk membuat berbagai jenis simulasi, dan memungkinkan Anda berinteraksi dengan mereka. Beberapa modul ini menangani tabrakan, sementara orang lain menangani render dan simulasi.

Contoh di bagian sebelumnya digunakan empat modul yang berbeda untuk menangani render, simulasi dan pembentukan tubuh. Dalam bagian ini, Anda akan belajar tentang peran beberapa modul umum yang tersedia di Matter.js.

  • Mesin: Anda perlu mesin untuk memperbarui simulasi dunia Matter.js Anda. Modul mesin menyediakan berbagai metode dan properti yang memungkinkan Anda untuk mengontrol perilaku mesin yang berbeda.
  • Dunia: Modul ini menyediakan Anda dengan metode dan properti untuk membuat dan memanipulasi seluruh dunia sekaligus. Dunia ini benar-benar tubuh yang komposit dengan properti tambahan seperti gravitasi dan batas.
  • Tubuh: Modul tubuh berisi metode yang berbeda untuk membantu Anda membuat tubuh kaku dengan umum bentuk seperti lingkaran, persegi panjang atau genjang.
  • Tubuh: Modul ini memberikan Anda berbagai metode dan properti untuk membuat dan memanipulasi tubuh kaku yang telah Anda buat menggunakan fungsi dari modul tubuh. Modul ini memungkinkan Anda untuk skala, memutar atau menerjemahkan tubuh individu. Ini juga memiliki fungsi untuk membiarkan Anda menentukan kecepatan, kepadatan atau inersia tubuh berbeda. Karena begitu banyak fungsi, tutorial ketiga dalam seri ini hanya membahas metode dan properti yang tersedia dalam modul tubuh.
  • Komposit: Seperti tubuh modul, modul ini berisi metode yang berbeda yang dapat Anda gunakan untuk membuat komposit tubuh dengan konfigurasi umum. Misalnya, Anda dapat membuat tumpukan atau piramida kotak persegi panjang dengan menggunakan hanya ada satu metode dengan bantuan modul komposit.
  • Komposit: Modul komposit memiliki metode dan propertis yang memungkinkan Anda untuk membuat dan memanipulasi komposit tubuh. Anda dapat membaca lebih lanjut tentang komposit dan komposit modul dalam tutorial keempat dari seri.
  • Kendala: Modul ini memungkinkan Anda untuk membuat dan memanipulasi kendala. Anda dapat menggunakan kendala untuk memastikan bahwa dua badan atau titik dunia-ruang tetap dan tubuh menjaga jarak tetap. Hal ini mirip dengan menghubungkan dua tubuh melalui batang baja. Anda dapat memodifikasi kekakuan kendala sehingga batang mulai bertindak lebih seperti springs. Matter.js menggunakan kendala saat membuat ayunan Newton atau gabungan jaringan.
  • MouseConstraint: Modul ini menyediakan Anda dengan metode dan properti yang memungkinkan Anda membuat dan memanipulasi mouse kendala. Hal ini berguna bila Anda ingin tubuh yang berbeda di dunia untuk berinteraksi dengan pengguna.

Akhir pikiran

Tutorial ini dimaksudkan untuk memperkenalkan Anda ke Perpustakaan Matter.js. Menjaga bahwa dalam pikiran, telah memberikan gambaran singkat dari fitur dan instalasi dari perpustakaan. Contoh dasar yang melibatkan dua lingkaran dan sebuah kotak menunjukkan betapa mudahnya untuk membuat simulasi sederhana yang menggunakan perpustakaan.

Karena Matter.js memiliki banyak modul yang masing-masing menambahkan metode unik sendiri mesin, saya telah menulis sebuah ringkasan singkat dari beberapa modul umum. Sisa seri akan fokus pada pengajaran Anda tentang modul-modul umum ini secara lebih rinci.

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.