Bermula dengan Matter.js: Pengenalan

Matter.js adalah enjin fizik badan 2D yang ditulis dalam JavaScript. Perpustakaan ini dapat membantu anda dengan mudah mensimulasikan fizik 2D dalam penyemak imbas anda. Ia menyediakan banyak ciri, seperti keupayaan untuk mencipta badan yang tegar dan menetapkan sifat fizikal seperti jisim, kawasan, atau ketumpatan. Anda juga boleh mensimulasikan pelbagai jenis perlanggaran dan daya, seperti geseran graviti.

matter.js menyokong semua pelayar arus perdana. Di samping itu, ia sesuai untuk peranti mudah alih kerana ia mengesan sentuhan dan responsif. Semua ciri-ciri ini menjadikannya bernilai masa untuk belajar menggunakan enjin, kerana ini memudahkan untuk membuat permainan atau simulasi 2D berasaskan fizik. Dalam tutorial ini, saya akan meliputi asas -asas perpustakaan ini, termasuk pemasangan dan penggunaannya, dan memberikan contoh yang boleh dijalankan.

Pemasangan

anda boleh memasang matter.js dengan arahan berikut menggunakan pengurus pakej seperti npm:

npm install matter-js

anda juga boleh mendapatkan pautan ke perpustakaan dari CDN dan memasukkannya secara langsung dalam projek anda seperti ini:

<!-- CDN链接 -->

matter.js sering menerbitkan kemas kini, yang mungkin memerlukan beberapa pengubahsuaian kecil untuk kod anda untuk menjadikannya berfungsi dengan baik. Contoh -contoh dalam tutorial ini adalah berdasarkan versi 0.18.0.

Contoh asas

Cara terbaik untuk belajar Matter.js adalah melihat beberapa kod sebenar dan memahami bagaimana ia berfungsi. Dalam bahagian ini, kami akan membuat beberapa objek dan memperkenalkan baris kod yang diperlukan mengikut baris.

const Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

const iEngine = Engine.create();
const iRunner = Runner.create();

const iRender = Render.create({
  element: document.body,
  engine: iEngine,
  options: {
    width: 800,
    height: 400,
    wireframes: false,
    background: "white"
  }
});

const boxA = Bodies.rectangle(400, 200, 80, 80);
const ballA = Bodies.circle(380, 100, 40, 10);
const ballB = Bodies.circle(460, 10, 40, 10);
const ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

Composite.add(iEngine.world, [boxA, ballA, ballB, ground]);

Render.run(iRender);

Runner.run(iRunner, iEngine);

kita mula -mula membuat alias untuk semua modul Matter.js yang mungkin diperlukan dalam projek ini.

Modul Matter.Runner membolehkan anda mengakses gelung permainan untuk kemas kini berterusan ke enjin dan dunia anda.

Modul Matter.Composite membolehkan anda membuat koleksi, kekangan, atau objek komposit lain objek. Kompleks boleh mengandungi objek tunggal atau keseluruhan simulasi.

Baris seterusnya menggunakan kaedah

modul Matter.Engine untuk membuat enjin baru. Begitu juga, kami juga mencipta pelari baru dan penghantar baru. Parameter create([settings]) dalam kaedah di atas sebenarnya adalah objek pasangan nilai utama yang menimpa nilai lalai sifat-sifat tertentu yang berkaitan dengan enjin. Untuk contoh kami, kami telah meninggalkan segala -galanya sebagai lalai. settings Sebagai contoh, anda boleh mengawal faktor skala masa global untuk semua objek di dunia. Menetapkan nilai kurang daripada 1 akan menyebabkan dunia berinteraksi dalam gerakan perlahan. Begitu juga, nilai -nilai yang lebih besar daripada 1 akan menjadikan dunia cepat. Anda akan mengetahui lebih lanjut mengenai modul

dalam tutorial seterusnya dalam siri ini.

Selepas Matter.Engine, kami menggunakan kaedah

modul

untuk membuat penerima baru. Seperti modul enjin, parameter tetapan dalam kaedah di atas adalah objek untuk menentukan pilihan yang berbeza untuk parameter. Anda boleh menggunakan kekunci Matter.Render untuk menentukan unsur -unsur yang harus dimasukkan ke dalam kanvas. Begitu juga, anda juga boleh menggunakan kekunci create([settings]) untuk menentukan unsur -unsur kanvas yang harus menjadikan dunia. element

Terdapat kekunci engine yang boleh anda gunakan untuk menentukan enjin yang anda gunakan untuk dunia rendering. Terdapat juga kekunci options yang sebenarnya menerima objek sebagai nilainya. Anda boleh menggunakan kekunci ini untuk menetapkan nilai untuk parameter yang berbeza, seperti width atau height kanvas. Anda juga boleh menghidupkan atau mematikan wireframe dengan menetapkan nilai kekunci wireframe ke true atau false masing -masing. Kami juga membuat warna kanvas di dunia kita putih dengan menetapkan nilai latar belakang menjadi putih.

beberapa baris seterusnya membuat objek yang berbeza yang akan berinteraksi di dunia kita. Objek ini dibuat dalam matter.js menggunakan modul Matter.Bodies. Dalam contoh ini, kita hanya menggunakan kaedah circle() dan rectangle() untuk membuat dua lingkaran dan segi empat tepat. Kaedah lain juga boleh digunakan untuk membuat poligon yang berbeza.

Selepas membuat objek, kita perlu menambahkannya ke dunia pilihan kita menggunakan kaedah

dalam modul Matter.Composite. Selepas menambah objek yang diperlukan ke dunia kita, kita hanya perlu menjalankan pelari dan penyokong menggunakan kaedah add() dalam modul masing -masing. Ini pada dasarnya adalah semua kod yang anda perlukan untuk membuat dan membuat dalam dunia. run()

Kod pada permulaan bahagian ini mencipta hasil berikut.

modul biasa.js

Terdapat lebih daripada 20 modul yang berbeza dalam matter.js. Semua modul ini menyediakan kaedah dan sifat yang berbeza yang berguna untuk mewujudkan pelbagai jenis simulasi dan membolehkan anda berinteraksi dengan mereka. Beberapa modul ini mengendalikan perlanggaran, sementara yang lain mengendalikan rendering dan simulasi.

Contoh -contoh di bahagian sebelumnya menggunakan empat modul yang berbeza untuk mengendalikan rendering, simulasi, dan penciptaan objek. Dalam bahagian ini, anda akan belajar tentang peranan beberapa modul yang biasa digunakan dalam matter.js.

• enjin : Anda memerlukan enjin untuk mengemas kini simulasi dunia matter.js. Modul Engine menyediakan kaedah dan sifat yang berbeza yang membolehkan anda mengawal tingkah laku enjin yang berbeza.
• Render : Renderer diperlukan untuk membuat objek sebenar yang dapat dilihat oleh pengguna dalam simulasi. Anda boleh menggunakannya untuk membangunkan permainan asas yang menyokong elf dan banyak lagi.
• Runner : Objek di mana -mana dunia yang anda simulasi akan sentiasa berinteraksi antara satu sama lain. Modul pelari mengendalikan kemas kini berterusan ini ke enjin dan dunia.
Badan -badan
• modul : Bodies mengandungi kaedah yang berbeza yang dapat membantu anda membuat badan tegar dengan bentuk biasa seperti bulatan, segi empat tepat, atau trapezoid.
• Body : Modul ini menyediakan anda dengan kaedah dan sifat yang berbeza untuk membuat dan memanipulasi badan tegar yang anda buat menggunakan fungsi dalam modul Bodies. Modul ini membolehkan anda skala, berputar, atau menterjemahkan objek tunggal. Ia juga mempunyai fungsi yang membolehkan anda menentukan halaju, ketumpatan, atau inersia objek yang berbeza. Oleh kerana terdapat banyak fungsi, tutorial ketiga dalam siri ini hanya membincangkan kaedah dan sifat yang terdapat dalam modul Body.
• Komposit : Sama seperti modul Bodies, modul ini mengandungi kaedah yang berbeza yang boleh anda gunakan untuk membuat objek komposit dengan konfigurasi biasa. Sebagai contoh, anda boleh membuat timbunan atau piramid kotak segi empat tepat menggunakan kaedah tunggal dalam modul Composites.
• Modul Komposit : Composite mempunyai pelbagai kaedah dan sifat yang membolehkan anda membuat dan memanipulasi objek komposit. Anda boleh membaca lebih lanjut mengenai modul Composite dan Composites dalam tutorial keempat dalam siri ini.
• Kekangan : Modul ini membolehkan anda membuat dan memanipulasi kekangan. Anda boleh menggunakan kekangan untuk memastikan bahawa dua objek atau titik ruang dunia tetap dan objek disimpan pada jarak tetap. Ini sama dengan menghubungkan dua objek melalui tetulang. Anda boleh mengubah kekukuhan kekangan ini supaya rod mula menjadi lebih seperti musim bunga. Matter.js menggunakan kekangan ketika membuat pendulum Newtonian atau kompleks rantai.
• MouseConstraint : Modul ini memberikan anda kaedah dan sifat yang berbeza yang membolehkan anda membuat dan memanipulasi kekangan tetikus. Ini berguna apabila anda mahukan objek yang berbeza di dunia untuk berinteraksi dengan pengguna.

Pemikiran akhir

Tutorial ini bertujuan untuk memperkenalkan anda ke Perpustakaan Matter.js. Dengan ini, saya telah memberikan gambaran ringkas mengenai fungsi dan pemasangan perpustakaan. Contoh asas yang melibatkan dua lingkaran dan persegi menunjukkan betapa mudahnya untuk membuat simulasi mudah menggunakan perpustakaan.

Sejak matt.js mempunyai banyak modul, masing -masing menambah pendekatan uniknya sendiri ke enjin, saya sudah membuat ringkasan ringkas beberapa modul umum. Selebihnya siri ini akan memberi tumpuan kepada menjelaskan modul yang biasa digunakan dengan lebih terperinci.

Siaran ini telah dikemas kini dengan sumbangan dari Monty Shokeen. Monty adalah pemaju stack penuh yang juga suka menulis tutorial dan mempelajari perpustakaan JavaScript baru.

Atas ialah kandungan terperinci Bermula dengan Matter.js: Pengenalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!