hello and welcome back to red stapler channel i'm TK and in this video we are going to talk about
meta.js a javascript 2d physics engine that is super easy to use you can create running examples
like these in just a few minutes for this tutorial we will talk about the basic setup with couple
examples first then we'll make a simple slingshot game as a final project ready let's check it out
and here's the first example we are going to work on i'm going to create
a world with two simple boxes so let's download matter.js you can either use npm
or just download it from github then place the file in the web directory
first include the library using script tag
then create matter engine instance using create method
now we have the engine the next thing we need is the renderer
we'll create one and attach it to the html body and link with our engine
then the first object we are going to create in this world is the ground
to create it use Matter.bodies.rectangle
the first two parameters are the position I will place it at the center bottom of the screen
the next two are the width and height since it's a ground
I will set each static property to true so it will not be affected by any external forces
then I will add two boxes using the same method
then we'll add all the objects to the world using World.add static method
then pass the engine world instance and array of objects
then we run both engine and renderer
at this point you cannot interact with anything in the world what we are going to do
is to add the mouse control first create a mouse object and pass the rendering canvas as argument
then we will create a mouse constraint for this engine
and pass our mouse object into it
as the name states we can change or add various mouse constraints and options here
for example we can set the renderer visible to false to hide the click highlight
and finally set the renderer mouse to our mouse object and add the mouse constraint to the world
and now we have the mouse control let's move to the next example as you can see in
this example there are lots of objects added previously we used to add each object one by
one which is time consuming task so matter.js provides a very useful class called composites
that let you place lots of objects simultaneously into various structures like stack or pyramid
so first let's remove the old object adding code
then let's create a stack using Composites.stack
the first two arguments are position the next two are number of stack columns and rows the last
two are the gap between them then we need to pass the callback function to create the object in the
composite so I'm going to create a rectangle with the size of 80 pixels then add it to the world
with this we can create interesting stuff inside the callback
for example I'm going to create a random number between 3 to 8.
matter.js also provide a common utilities function inside the common class
like random I'll use this number as a number of sites to create polygons
I will also random the polygon size too
finally I will also increase the screen size and disable
the wireframe mode in the rendering setting
looks good now let's work on the final project the slingshot game
so first let's change the ground into platform and place it on the top right of the screen
then create a stack of octagon and place it on a platform
next create a bar that we are going to fire
I will place it on the left side of the screen then create a sling using constrain class
the first attribute is pointA this will be the fixed point of the sling
I will set it to the same position with the ball
next is bodyB which is an object we want to attach to the sling so set it to the
ball and the last one is the stiffness of the sling for this tutorial let's set it to 0.05
then add everything to the world
looks good next we'll work on the firing event in order to fire we have to drag
the ball and release the mouse button so the most suitable event we should use is endDrag
inside the event handler we'll check if the triggering object is the ball
then we'll set the firing flag to true
then we'll keep checking the position of the ball on every screen update using afterUpdate event
so if the firing flag is true and the ball position is very close to original point
then we'll release the ball from the sling and replace it with the new one to do this I will
subtract the ball current position with the original point and check the absolute value
if the condition is met then create a new ball at the starting position
and add it to the road then set the sling bodyB attribute to the new ball
and reset the firing flag
and here is the result
this is just the basic of matter.js you can try experimenting with the
demo on the library page to utilize the full potential of matter.js
I really hope that this video helped you get started of the matter.js basic concept
and how to use it and that's all for this tutorial hope you guys enjoy if you want to see more adapt
tips and tutorials subscribe this channel to stay tuned thanks for watching see you next time bye