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. 
Itās a start though. I also added my FPS graph to the project.
2 Likes
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ā¦
tomato-physics-test-1.hypetemplate.zip (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. 
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? 
Well, this is an interesting readā¦ https://medium.com/@gordonnl/pablo-the-flamingo-75a21bf8ea12 ā¦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. 
Yes, there is a Physics API.
2 Likes