Photics-Physics-Bridge (ppb.js)

🌉
ppb.js
Starting in Hype 4, Tumult added a proper Physics API to their app. Leveraging Matter.js, the open source Physics engine for the web, Hype can be used to create Physics based animations. In particular, that means Hype can be used to make game. There’s a big caveat though. It’s difficult! This isn’t the simplicity of something like GameSalad or Stencyl. No, if you want to use Hype’s Physics API, you’re going to need JavaScript — A LOT OF JAVASCRIPT!

That’s where the Photics-Physics-Bridge enters the picture. Normally, Hype is intuitive and easy to use. Even Matter.js is fairly straightforward. If you want to change the velocity of a body, it’s one line of code… Matter.Body.setVelocity(body, velocity) …to do the same with Hype requires several lines of code. Hype adds some extra steps to connect with Matter.js.

1
2
3
4
5
Matter.Body.setVelocity(
     hypeDocument.getElementProperty(
          hypeDocument.getElementById(e), "physics-body"
     ), { x: xSpeed, y: ySpeed }
);

That’s why the Photics-Physics-Bridge was created. Instead of driving all those extra miles, you can go straight to your destination. By adding the ppb.js file to your Hype project, it’s only one line to change the velocity of a Physics body.

1
ppb.setVelocity("ball", xSpeed, ySpeed);

This helps in three ways. It makes your code easier to read. It makes your code easier to write. It makes the Physics API easier to understand.

Does that sound too good to be true? You might be wondering if there’s a toll to cross this bridge. That’s the best part. The Photics-Physics-Bridge is a free download, and there are no royalties required to use it in your project. The ppb.js file is licensed under the very generous Photics Public License (Template License). The reason is marketing. Hype is a great app, a clear successor to Flash. However, where are all the games made by Hype? With the knowledge in the book and the power of the app, all that is lacking is the motivation. Do you have the desire to build something fun and awesome?

Photics-Physics-Bridge in the Hype Resources FolderIf you do, here’s how to add the Photics-Physics-Bridge. First, download the ppb.js file to your computer. Then, drag-and-drop that file into your Hype project. The “Include in document” option should automatically be checked. That’s all there is to it. Now you should be able to use the Photics-Physics-Bridge functions in your project.

There are some caveats though. The first issue is that the PPB requires a modern web browser. It doesn’t support Internet Explorer. That browser is holding back major advancements in web development. Photics is not going to be part of the problem.

The second issue is that the ppb.js has to fully load before its functions can be used. Normally, this is not a major problem. A title screen (that doesn’t use Physics) can provide the necessary cover.

Hype Alert — ppb.js has been modified outside of Hype. [Keep] or [Update]The third issue is that the ppb.js may change. While future development is not guaranteed the ppb.js is used with Photics games. A lot of what Matter.js can do is not covered by the PPB. That means you have a choice. If you have multiple game projects, are they all associated with the same local ppb.js file? That’s up to you. Although, this is more of an advantage than a disadvantage. Hype automatically detects changes in the source file.

Normally, Photics avoids third-party libraries, which is why the PPB is highly unusual. It feels hypocritical. Does the world really need another library? The problem here is real. Matter.js is great, and Hype is great, but the union of the two is a little awkward. This library bridges the gap. That is why PPB exists.

Usage

  • ppb.getAngularVelocity(e, velocity)
  • ppb.getArea(e)
  • ppb.getPosition(e)
  • ppb.getSlop(e)
  • ppb.getVelocity(e)
  • ppb.getX(e)
  • ppb.getY(e)
  • ppb.getXV(e)
  • ppb.getYV(e)
  • ppb.inertia(e, inertia)
  • ppb.sensor(e, b)
  • ppb.setAngle(e, degrees)
  • ppb.setPosition(e, xPosition, yPosition)
  • ppb.setSlop(e, v)
  • ppb.setVelocity(e, xSpeed, ySpeed)

e = element name