Is there a Physics API? 🤔


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #1

Hype 3 + Pro is great software. I really enjoy it overall. Although, instead of being happy about the new features, I feel frustrated at how close it is to game development software - but not close enough. The default physics settings are helpful, but not enough to make typical arcade games.

Maybe I’m missing something. Is there a Physics API?

Example - How do I change the velocity of an actor?

There’s a lot I can do with JavaScript, but I didn’t see any instructions on how to change physics settings while the Hype project is running.


Hype Pro In-depth Tutorials
New physics property
Particle physics overloading the browser (Chrome)
Physics engine which compliments hype?
A Book About Hype (3.5+Pro) – NOW AVAILABLE! 📘
Is there a way to change physics collision bounce speed?
It's time for Hype 4.0 :)
A Book About Hype (3.5+Pro) – NOW AVAILABLE! 📘
Free Hype Templates
Is there an Audio API? 🤔
Physics: any spoilering¿
A Book About Hype (3.5+Pro) – NOW AVAILABLE! 📘
Optimizing for Responsive
Non-minified script
More controls for gravity/accelerometer
Another getter/setter (fun)
Instantiating Symbols
Bone rigging tool for animating characters
Earth Day Forum Updates
Duplicating animation and then killing the objects after a set time
(Nick ) #2

You can make changes to physics properties using the timeline.
for example you can change air drag, bounce friction, density, and the type of physics by placing keyframes fir each on the timeline.

When you say you want to change the velocity of a character when hype is running.So basically creating a power boost in one direction perhaps?
I have attached a hype document that allows the user to click a button which changes the AIR DRAG property by starting a new timeline called FAST where AIR DRAG is set from 2.0 to 0.0

accelerate.hype.zip (17.4 KB)


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #3

Oh wow, I didn’t see those in there. That’s close, but not quite what I’m trying to do.

I’m thinking along the lines of swipe right or right arrow key down moves the actor to the right.

I looked at the Matter.js Physics Engine and it looks crazy powerful… http://brm.io/matter-js-docs/ …but with Hype, I’m not sure how communication works between the two.


(Nick ) #4

You can do quite a bit with timelines and controls in Hype
Honestly it is still such a toddler in the world of interactive apps it has lots of room to grow.
But I have pushed it pretty far with just the timelines and the physics properties.

I like to take the approach that I can make Hype do what I want I just may have to get a bit unorthodox with the approach.

Here are some links to some Physics pieces that you might want to play with
Saucer sled psychos sledding toy

Pinball thread Lots of input from the community and some Hype files to take apart.

Galton Box: Pushing elements and physics to brink with quantity

One more Paddles that are activated by keypress.
paddles-keyboard.hype.zip (17.4 KB)


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #5

That’s what’s disappointing. Even though the latest update was huge, it’s probably more waiting for the new physics features to mature.

Still, the code is on the page. There should be some way to access advanced physics settings with JavaScript.


(Nick ) #6

Well I do not see that as disappointing at all.
I have been involved in a few waves of creative software tools and trends and you have to remember that HTML5 as a language upgrade is not that old in the grand scheme of things.
And a visual IDE for physics in HTML 5 is extremely new.

We are at the beginning of a new content wave and being involved with a young software app that is one of the first out of the gate can actually push your creative problem solving skills to new levels.

If I want to really work with a javascript engine that is ready for primetime and focused on game development physics I would go the
Impact JS route.

If I want to release a stand alone iOS or Android Game with really good physics
SpriteBuilder/Cocos2D

Try to push Hype and keep posting your work here the group of forum members are really helpful and can help you get your ideas moving in a positive direction. :smile:


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #7

This is actually not the first time I’m doing this. It’s starts with a simple idea. I’d like to build an online arcade at my website. With Flash dying, I can’t use that. I also tried various non-coding solutions to app development. GameSalad was fairly successful, but it was years of trying to get the software to do more. The HTML5 export is not good enough. With Stencyl, I waited for proper HTML5 exporting and they simply removed that feature. It just wasn’t working right.

I really don’t want to get into the same head banging frustration again.

Although, Hype is transparent. I can see what it’s doing. So, I suppose I could try to stay optimistic and see if I can get it to do what I want.

Right now, as in tonight, I’m looking at the code. I finally figured out what all of those letters were about. At first I would just look at the code and get discouraged. (It looked more like math formulas than JavaScript. HA HA.) But since this should theoretically be possible, I suppose I can look.

It’s not that I can’t code, it’s just that I don’t like doing it. That’s why I bought Hype.


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #8

Update #1 - I think the main problem is trying to locate matter.js, which is what Hype supposedly uses as the physics engine. So, I tried to find where that file is located. It’s not one of the files in the resources…

  • HTML file… nope
  • blank.gif… duh
  • full / thin… good question here… Banner ad file optimization …as I’m not quite sure why thin and full are separate
  • PIE.htc… IE 7&8. I’m thinking this probably isn’t necessary for me, as I don’t support those browsers any longer.
  • hype_generated_script.js… likes the word “none” a lot.

So, somewhere in those files is supposed to be a physics engine. I couldn’t find anything. I did see the word “matter” but I got lost as to why it was just “matter” and not “matter.js”.


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #9

Update #2 - I looked at the source code of matter.js, to see if there are some similarities between the exported Hype resources and matter.js. Right away, the word “force” popped out. And no, it’s not because I like Star Wars.

Being able to set a simple X and Y value for force is basically what I’m trying to do. That’s how I can set directions. Add some controls on Keypress and boom… basic video game.

I think the problem is that I was looking at the functions in matter.js. Body.create is listed in the docs for Matter.js - http://brm.io/matter-js-docs/classes/Body.html - but it’s not something I can do with Hype. At least, not that I’m seeing right now.

Another part of the problem is not knowing which version of matter.js is being used… is it normal, edge or a highly customized version to reduce space. Considering that Hype is very interested in keeping downloads small, I’m looking to see if it’s a modified/stripped down version of matter.js or if it’s a CDN.

Hype is nice about not linking to third-party code, so it doesn’t look like a CDN.


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #10

Update #3 - This is quite odd. I set one of the actors to have 0.888 friction. The idea is if I could search for that value in the exported resources, I could trace it back to the physics code.

At first, nothing. I couldn’t find the value. What?!

So, I changed all the physics settings to 0.888. That’s when I got a match, but it was weird. It was part of a long number…

bU:0.8880000114440918

I don’t know what that was about, but it was next to bU… um… OK, I’ll try searching for that. Maybe it was one of those word shortening things Hype is doing to save on space. Uh… what…

vk=“bU”

WTF?!

Eh, I think that’s enough for tonight. I’m off to watch Big Bang Theory.


(Jonathan Deutsch) #11

Sorry, there’s no Physics API exposed and the underlying Matter.js is fully encapsulated as well as minified so there’s no way to access its structures (at least, without dramatic hacking and knowing how items are minified, meaning more WTF moments :smile:).

We’re generally conservative when it comes to adding API as we know we’ll need to support it forever. In the case of Physics, I’m in no way against adding API, but would want a good sense of what users are making with Hype and use cases for the API.

A good argument could be made that we should expose Matter.js, though at this time I’m still favoring flexibility for our Physics engine; you can think of our usage as an “implementation detail.”


Non-minified script
(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #12

That sounds like a challenge. HA HA.

Although, at some point, it’s probably just easier to manually add Matter.js to the Hype project. The problem with that is that it seems the Physics engine is still part of the code.

I took a small project with just one element - a box. I saved one copy with no physics settings. I saved another copy with “dynamic” physics on the box. I then compared the exported files. They were basically identical. That seems to suggest that the physics code is included – if it’s needed or it’s not.

I think setting Matter.js as a separate file might be better than what’s going on now. I can’t see where the physics code is, but apparently it’s in there. Hype wants to keep the downloaded files small. For game development, that might not be the highest priority - especially if the project is going in an app. For game developers, having access to all of the cool features in Matter.js seems more important. I’m not sure if those two issues can be balanced.

But if you want to continue with the graphical user interface, I think it’s a good idea to add “Force” to the settings. A lot of game development is just changing the location and movement of an object.


(Nick ) #13

You are doing quite a bit of experimentation which is really good I think you will crack a solution soon! :smile:
If you want to post a hype document please do I know at least half a dozen of us will help you work it into something.

Nick


(Jonathan Deutsch) #14

Physics is included in the HYPE-xxx.full.min.js but not the HYPE-xxx.thin.min.js. Which is loaded is based on whether we detected any physics (at least one element/keyframe uses static or dynamic body type) or if you’re on IE 6-9 since the full runtime is also for IE.

Thanks for the additional feedback!


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #15

Ha ha, I’m not so optimistic. At this point, it’s looking more like I’ll be manually adding matter.js and working from there. Although, learning about which files I can drop from the resources does save some file space. I might actually run an older version of Hype, or disable the in-app purchase, to prevent two conflicting physics engines.

I’m fairly confused. To be fair, I did just get back from a birthday party. I probably ate too much pizza. Tomorrow will be the first day I’ll have a clear head to focus on this, so maybe I’ll make some progress then.

The minified version of matter.js is about 60KB. My full.min.js file is about 93KB. It seems like a physics engine would really stick out in there. I’m figuring that it’s really stripped down, but I’m still having trouble figuring out what’s going on.

I did try to improve readability. Firefox has a built-in deobfuscate option. I tried that and I expected something to jump out off the page. At first I used the wrong JavaScript file and I got really confused. After fixing that problem, I tried again and it revealed a file that’s over 6000 lines long. I think that’s a good opportunity to take a break.


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #16

Good morning! I’m surprised I’m not sleeping late, but I’m excited about solving this problem.

…and so far, I already had a good laugh. I started reading the code line-by-line and I saw this…

ck = 'b',
dk = 'bA',
ek = 'bB',
fk = 'bC',
gk = 'bF',
hk = 'bG',
ik = 'bH',
jk = 'bI',
kk = 'bJ',
lk = 'bK',
mk = 'bL',
nk = 'bM',
ok = 'bN',
pk = 'bO',
qk = 'bP',
rk = 'bQ',
sk = 'bR',
tk = 'bS',
uk = 'bT',
vk = 'bU',
wk = 'bV',
xk = 'bW',

Why?! Heh, this certainly a higher level of complexity than the JavaScript that I write.


(Andrew) #17

The main issue I found,and do not understand, is that although there is no function to be created from two dynamics, or a dynamic onto static, something is fired to make the rebound, and then use the values such as bounce. So I have been looking, although I think in the wrong place, to find a listener that fires just before the bounce function is fired.

Is this making sense ?


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #18

I’m not sure. Do you mean collision detection? I think there was some discussion about that in another thread.

Ah, yeah… it was your thread… Elements hitting each other with Physics

…but didn’t someone figure out how to add scoring to the pinball example?

So, we know that Hype is being conservative about adding Physics settings. It’s not really a game development platform, but it could be.

Here’s what I learned so far today…

  • The “Include in document head” feature is nice. I went to manually add the head code after dragging matter.js into my Hype project – but it was already there.
  • I played with the matter.js “getting started” code, by putting it in a Hype element, and the matter.js box was pushed below the Hype area. This suggests that mixing matter.js and Hype is not so straightforward.
  • I tried using the “getting started” code without loading a separate matter.js file. If Hype physics is based on matter.js, shouldn’t it already be there? Well, nothing happened. Perhaps the matter.js is highly customized. Perhaps it has a different name, hidden in the letter scheme. The next step is to try and see if the words “Engine”, “World” or “Bodies” are used.

(Andrew) #19

what sort of game are you trying to achieve ?


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #20

Well, I do have a game idea in mind, lots of games actually, but right now I’m focused on the basics. The first step is to make the actor move with controls. On other platforms, this is incredibly easy. I figured with Physics being added to Hype, it would also be easy. But unfortunately, I can’t change the values for a… body? I’m not sure what the terminology is for matter.js / hype.

I did find some interesting code…

        hc = {
        create: function (a) {
            var b =
            C[Zb]();
            return B[ib](b, {
                label: mj,
                Ub: {
                    x: 0,
                    y: 1
                },
                ga: {
                    min: {
                        x: 0,
                        y: 0
                    },
                    max: {
                        x: 800,
                        y: 600
                    }
                }
            }, a)

I found it after finding the word “world”.

    mj = 'World',

Apparently, it’s case sensitive, as I also found this…

    Mj = 'abort',

Apparently, it’s creating the “World” with a box that starts at X:0 and Y:0 and it stretched to 800 wide and 600 tall. This is the kind of stuff that I’m looking for. If I can mess with the values on the actors, boom - that’s game creation.

I still have to look for the other two terms. So far, I couldn’t find “bodies”. That seems to be the main problem. The goal is to create a bridge with JavaScript, between Hype events and “body” physics settings.