Physics Mini Templates for Tumult Hype 4

Physics
1

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.

Velocity

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

Template — http://photics.com/files/templates/physics/velocity.hypetemplate.zip

Online Example — http://photics.com/files/templates/physics/velocity

Notes — Gravity set to zero, to setup 4-way controller movement… arrows, WASD or Number Pad.

6 Likes
2

Angular Velocity

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

Template — https://photics.com/files/templates/physics/angle.hypetemplate.zip

Online Example – http://photics.com/files/templates/physics/angular-velocity

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
4

Angle

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

Template — https://photics.com/files/templates/physics/angle.hypetemplate.zip

Online Example – http://photics.com/files/templates/physics/angle

1 Like
5

Rotate

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

Template — http://photics.com/files/templates/physics/rotate.hypetemplate.zip

Online Example — http://photics.com/files/templates/physics/rotate

Notes — Left / “A” keys rotate the arrow counter-clockwise by 15 degrees. Right / “D” keys rotate the arrow clockwise 15 degrees. The “d” variable represents the degree of change, which is set to 15.

1 Like
6

Apply Force

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

apply-force.hype.zip (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 – http://brm.io/matter-js/docs/classes/Vector.html

2 Likes
7

Scale

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

scale.hype.zip (13.2 KB)

Online Example – http://photics.com/files/templates/physics/scale

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
8

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

9

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).

10

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:

11

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!

12

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...

13

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.

5 Likes
14

Agreed.

15

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?

16

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

17

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

1 Like
18

Bumping this again, lots of Physics testing to do.

19

Notes:

Inertia ‘Infinity’ to stop rotation…

20

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.

21

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