Is there a Physics API? 🤔

I’m leaving this here…

I haven’t tested it yet, but I think “image-rendering” might be useful for creating retro style games.

I’m posting some notes here. I don’t know if anyone else is crazy to try this, but these notes are how to work with Hype and matter.js manually.

1 - Adding matter.js to a Hype project manually is easy. Just drag the matter.min.js to the resources folder. (I played around with Phaser, but the file size is a bit too much for my project. The minified version matter.js is small. It’s only 76.5 KB.) This makes sense if you’re going to create your own physics settings. If you’re using Hype’s physics settings, then I think that means matter.js is loaded twice. So, if this works out, Hype will only include the “thin” JavaScript.

2 - That’s where the easy part ends. HA HA! It took me a while to get going with matter.js because the example would appear at the bottom of my Hype project. I’ve tried this before, but that’s where I stopped. Today, I tried harder to figure it out. The problem is the name of the “element” mentioned in the “render” settings. Instead of “document.body”, I changed it to an element in the Hype project.

3 - Scaling could be an issue. Fortunately, I’m scaling the project manually. So, I just hardcoded the width and height of the renderer.

4 - It’s in wireframe mode, so I couldn’t figure out how to get rid of the gray background. After reading through the documentation and searching the Internet, it’s simply an option setting… “wireframeBackground: ‘none’”

So, here’s how far I’ve gotten…

// create a renderer
var render = Render.create({
    element: enemies,
    engine: engine,
    options: {
    width: 1280,
    height: 720,
    wireframeBackground: 'none',
    showAngleIndicator: true

What does this do? Not much. :smile:

It’s a start though. I also added my FPS graph to the project.


Here are more notes about working with matter.js manually…

I figured out how to stop a Physics body from rotating…

It’s… inertia: ‘Infinity’ …and it’s case sensitive. If an object is scaled, this setting is lost. So, it has to be reset. Here’s an example…

Matter.Body.scale(red, 1, 1);
Matter.Body.setInertia(red, 'Infinity');

The problem is that scaling is not working as expected. Using “Matter.Body.scale” changes the size of the collision shape, but I’m not able to scale the “Sprite” (image) to match the change of that shape. I read the documentation, but I didn’t figure out what was wrong.

Hype is already able to scale both the collision shape and the background image, so I’m missing something… (255.8 KB)

(Pressing a keyboard key will cause the tomato to 64 pixels in diameter.)

However, you can see how Physics freezes if the JavaScript in Test#1 is changed to this…

hypeDocument.setElementProperty(hypeDocument.getElementById('tomato'), 'width', 64, 1, 'linear');
hypeDocument.setElementProperty(hypeDocument.getElementById('tomato'), 'height', 64, 1, 'linear');

So, I think Hype has some pretty creative things going on behind the scenes. I’m not sure, but it seems like Hype is using Matter.js for certain things and Hype’s JavaScript for others.

Also, I tried this… Matter.Body.create(red) …to add a red tomato to the scene. I got the following error…

RangeError: Maximum call stack size exceeded.

This stuff is more complicated than I thought. :thinking:

1 Like

If you missed it, 4.0 is looking like a party…

It says “Physics API”.

So, 2 1/2 years later, it looks like Hype is going to have a Physics API. So, what to do until Hype 4.0 is launched? :thinking:

Well, this is an interesting read… …I didn’t know Pablo used Matter.js as the Physics engine. Impressive! Will that kind of stuff be possible in Hype? I don’t know. :smiley:

Yes, there is a Physics API.