Is there a Physics API? šŸ¤”

I think I might have landed on that page when trying to figure out what was going on. :blush:

I must have been really tired last weekend. I looked again and I can see that both are available. That's cool, because the difference is important for game development. An example would be pinball ā€“ where shift keys are great for flipper control.

Note to self... use event.location for detecting the difference between the shift keys.

This may be unrelated to the current thread but since finding out this thread Iā€™ve been trying to analyse matterjs since itā€™s extremely fast on ipad but itā€™s documentation is really bare bone compared to something like physicsjs. Do you have any source of documentation apart from the docs page there you could share? Like any experiments youā€™ve found or experiments youā€™ve created using that library? Iā€™d be very much interested in either of those to see it in use by others!

2 Likes

I mainly read the source code. At the time the documentation was good (at describing the APIs, not necessarily as tutorial material), but there were a few parts out of date.

Now that A Book About Hype is out, I can post about something that Iā€™ve been waiting weeks to show off.

While Hype still needs improvement with a Physics API, two new JavaScript APIs create lots of potential with game development. The ā€œBounceā€ project would have been a lot more difficult, if at all possible, before Hype 3.5. Good stuff is on the way! :smiley:

1 Like

Hey @jonathan and @Daniel,

Why isnā€™t gravity a timeline property? Is there a way to change it while the project is running?

It is more of an implementation issue - aside from timeline actions, they only have element properties. The gravity is a property of the scene/symbol. I understand the need to add this though (or at least give API access).

1 Like

Controlling gravity dynamically would be a great bandaid fix until advanced physics settings / control can be added. It would be a way to move a hero actor, while still interacting other physics elements.

Meanwhile, I spotted this...

That's a massive update. :smiley:

Yeah, Iā€™m looking forward to integrating all the changes!

1 Like

Hello. I joined the forums to make a suggestion to this post. I know I am very late to this post.
Why not use an established javascript physics or game engine and just import it?

I havenā€™t done heavy testing in Tumlut, but I think I have a good idea of its possibilities.

Hype uses Matter.js: https://github.com/liabru/matter-js (a physics engine)

1 Like

I was thinking that another engine with the requested features might be used to further extend the functionality of Hype alongside matter.js

Perhaps a game engine or something.

I am interested in this topic as I plan to test game development with Hype myself.

2 Likes

When creating the Physics feature, I evaluated several different physics engines to use. These were evaluated on features, ease in integrating with Hype, performance, file size/footprint, developer activity/community, and licensing. Matter.js seemed to hit the sweet spot on all of these aspects, and it continues to grow and add even more features I hope to take advantage of and expose to developers using Hype.

Of note, I did look at box2d-js, which is a JavaScript port of one of the more widely used physics engines for games. The minified size weighs in at over 700 KB and it would be practically infeasible for us to work with in Hypeā€™s codebase.

Hype 3.5 does now expose a limited getter/setter API that allows for manipulations such as changing the position and rotation of elements. Theoretically if you wanted you could use your own physics engine and call into Hypeā€™s APIs to manipulate elements if you wanted. (Though at this point Iā€™d probably question why youā€™re using Hype instead of pure JS).

1 Like

Well, it would be nice to see better game development tools added to Hype. Although, I just saw thisā€¦ https://www.youtube.com/watch?v=hB6eY73sLV0 ā€¦and it looked impressive. Super Mario World was code-injected with Flappy Bird code. If people can program games using SNES controllers, then I really have to up my game development skills. :smiley:

Surely thereā€™s enough power in Hype ā€“ just as it is ā€“ to make something awesome.

Thereā€™s a new version of Matter.js

Iā€™m surprised that not much has happened with Hype and Physics in 2016. Thereā€™s lots of potential here.

2 Likes

Wow! Matter.js updates are packed full of potential. Chains, cloth and the stress and collision filtering,composite and soft body demos are wonderful.
Hope this does come to Hype 4 :slight_smile:

3 Likes

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.

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. :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ā€¦ 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. :smiley:

Yes, there is a Physics API.

2 Likes