Physics Mini Templates for Tumult Hype 4

If I update the Hype book, it will likely split in two books – one general purpose guide and one game development guide. This thread contains my notes for the book, but can also be used for testing.


function mjsVelocity (e, xSpeed, ySpeed) {
    Matter.Body.setVelocity(hypeDocument.getElementProperty(hypeDocument.getElementById( ), "physics-body"), {x: xSpeed, y: ySpeed});
    } (13.0 KB)

Online Example

Notes – Gravity set to zero, to setup 4-way controller movement… arrows or WASD. Seems to work OK, except for the periodic twitchy movement.


Angular Velocity

function mjsAngularVelocity (e, velocity) {
Matter.Body.setAngularVelocity(hypeDocument.getElementProperty(hypeDocument.getElementById( ), "physics-body"), velocity);
} (13.7 KB)

Online Example

Notes – Gravity used to create friction between “ball” element and the floor. Left and Right keys (or A/D keys) spin the ball. Once the ball hits the ground, it can use Angular Velocity to spin and move.

1 Like


function mjsAngle (e, degree) {
Matter.Body.setAngle(hypeDocument.getElementProperty(hypeDocument.getElementById( ), "physics-body"), -Math.PI*(degree/180));
} (13.3 KB)

Online Example

Notes – Arrow keys (or WASD keys) are used to turn the “arrow” element. This one was confusing because of two reasons.

  1. What do you mean by an “Angle” as unit of measurement? Is it High School math or is it programming? (The former goes counter-clockwise, the latter goes clockwise.) This example uses “High School” math.
  2. WTF?! It doesn’t work with simple numbers. It took me a while to figure out that Matter.js was using π in its API. The value is in radians – not degrees.
1 Like


function mjsRotate (e, degree) {
Matter.Body.rotate(hypeDocument.getElementProperty(hypeDocument.getElementById( ), "physics-body"), Math.PI*(degree/180));
} (13.3 KB)

Online Example

Notes – Left / “A” keys rotate the arrow counter-clockwise by 90 degrees. Right / “D” keys rotate the arrow clockwise 90 degrees. I switched back to programming “clockwise” angles for this example.

1 Like

Apply Force

function mjsApplyForce (e, xPosition, yPosition, xForce, yForce) {
Matter.Body.applyForce(hypeDocument.getElementProperty(hypeDocument.getElementById( ), "physics-body"), {x: xPosition, y: yPosition}, {x: xForce, y: yForce});
} (13.5 KB)

Online Example

Notes – This one is still a work in progress. I can get the ball to move by clicking it (Mouse Up), but it’s not consistent. After the first click, the ball moves a lot. The subsequent clicks barely move the ball.

It seems like I should get the element’s starting point, which is probably related to this –

1 Like


function mjsScale (e, xScale, yScale) {
Matter.Body.scale(hypeDocument.getElementProperty(hypeDocument.getElementById( ), "physics-body"), xScale, yScale);
} (13.2 KB)

Online Example

Notes – This example highlights several significant issues with the Physics API.

  1. The Physics box doesn’t resize to match Hype Scaling. (The example is in “Test” mode, so the black box represents the Matter.js physics box… even though reactions can occur outside the box.)
  2. Hype changes vs. Matter.js changes – If you click the circle, the collision shape expands, but the element does not.
  3. After expanding the physics shape, simply drag the element to see the physics area revert back to the original size. That’s a problem, as it shows Hype events can overwrite physics changes. Scaling in Hype is different than Scaling in Matter.js. The two don’t work together.
  4. The element doesn’t always expand. (This error is harder to reproduce. Playing around with the ball in the project might cause it happen.) If the ball is dragged to the bottom right of the scene, when the error is occurring, the physics shape doesn’t increase in size. It just moves downward slightly. I’m not sure why this happens, but I think it’s related to the original size of the scene, which is 600 pixels wide. When the error happens, it seems somehow related to that size.

I think it’s better to use the Hype scaling than use the Matter.js scaling. Hype has tweening, while the Matter.js is instant. I’m thinking it’s probably the same for “rotateZ” too.

1 Like

Also, if you have the ball on the edge of the browser window, resizing the window can cause the ball to get lost.

Yes, I would recommend this. When you use Hype to update the scale or rotation, we manage updating the physics body. (Do note I think this also means we end up resetting a lot of values like velocity – something necessary now but I’d like to improve in the future).

What’s the story with Physics? I thought there would be another beta version available. Are you working on something super secret? Now that “Wrapping” is done, I’m considering project ideas for the next app. I started reading the Tumult forums and forgot about Physics.

Are you still aiming for a first-quarter 2018 launch of Hype 4?

I’m not trying to rush you. I was just wondering if maybe I should start working with Physics again. But after fighting with those sandboxing issues for so long, I probably should pick something easy for my next project. :smile:

That’s the goal. Sorry there hasn’t been a new build out, there have been a few business distractions getting in the way. Hope to have something soon!

So, what’s the story with Physics? It seems that the Hype 4 beta is going much longer than planned. Perhaps this is because Physics is being worked on?

Meanwhile, matter.js appears to have been updated today…

I don’t mind waiting, I actually appreciate the fact Tumult is taking its time with Hype. It shows that they care about what they put out and strive for best build to be Hype 4.



Well, I don’t mind waiting longer for a Hype 4 release as… one, I already have access to the beta… and two, I don’t have to worry about keeping the lights on in the Tumult offices. However, look at the dates in this thread… one is separated by three months and another by four months.

So, my inquiry isn’t so much about the launch of Hype 4. It’s more about the risk vs reward. Is this delay worth it? I thought after seven months, I’d be seeing some amazing progress with Physics. I haven’t seen anything. That’s concerning.

A delayed game is eventually good, but a rushed game is forever bad.
– Shigeru Miyamoto

So yeah, I’m not rushing Hype… but this is beta. Shouldn’t there be more action here?

I’m bumping this thread, as Beta 624 has a lot of physics changes. Maybe these mini-templates are helpful with testing.

This is really great. Haven’t played around with this yet. Nice reveal.

1 Like

Bumping this again, lots of Physics testing to do.


Inertia ‘Infinity’ to stop rotation…

Looks like Daniel made this public.

Nooooooo… it’s a secret. It was for the Hype 4 book.

Oh well, enjoy everybody. :smile:

You really can’t enjoy Hype 4 Physics without it.
I still have to name the API though.
I was thinking Photics-Physics-Bridge.

Seemed useful; I flipped it back for you :slight_smile:.