You are doing quite a bit of experimentation which is really good I think you will crack a solution soon! 
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
2 Likes
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!
1 Like
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.
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.
1 Like
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 ?
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 - #2 by MrAddy
...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.
what sort of game are you trying to achieve ?
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.
Ah… I feel I’m getting close.
Ub = 'getElementsByTagName',
I didn’t know what the x:0, y:1 was about. What’s Ub? So, I searched for “Ub” and that’s apparently set to “getElementsByTagName”. This is what I mean!
If I have a main character, say he’s called “TANK”. If I want to move him right, then the code should be something like… If right arrow key is down, set TANK X to X+1. I should be able to change the physics values of an element (such as force or location) based on its name.
Clearly, it’s not so straightforward. There might be loops, arrays and all sorts of other JavaScript going on. At least I seem to be on the right track. Force has to be in there somewhere, as the elements can have inertia. That value has to be stored somewhere.
If you’re wondering about what kind of games I’m trying to build, here’s an example of my previous work… https://photics.com/bot/
1 Like
Did you build that one in Stencyl or Gamesalad Very nice!
Also maybe just maybe you could integrate Gamequery.js into Hype.
Might be an easier route for Hype based Game development with controls.
http://gamequeryjs.com
2 Likes
I would say gamequeryjs is an excellent addition to a Hype Project Nick. Have you used it ?
I built it with GameSalad, but then I tried porting it to Stencyl. I didn't complete that project, but I did port Annoyed Tomatoes to Stencyl... Annoyed Tomatoes – Photics.com ...and it was running in Flash for a while, but then it stopped working. I wasn't sure if it was an issue with a recent update to Flash or a problem with switching my website to https. Either way, I realized that Flash was dying.
I'm not really into app development either, as Apple's review process is annoying and I'm not a fan of Google. That's why I'm looking at HTML5 game development. GameQuery looks interesting. I'm not ready to give up on this Hype project just yet though. It seems like I should be able to do what I want to do with JavaScript.
My first approach was to try and trace the code to the physics engine. That hasn't been so easy, so I've been trying a reverse approach – looking at the variables stored in the browser.
That exposed a weakness in my skills. Apparently, I'm not good with the console. HA!
I seem to be underestimating the complexity of this project, as I realized something... how would I print the value of "Ub" inside a div? I might not know where the force values are stored, but I do know that "Ub" equals "getElementsByTagName". What if I wanted to use Hype's shorthand in my own code. It's not that I need to do that, but it is a good test of what I'm trying to accomplish.
That's where I'm at right now... finding where the Hype variables are stores and then printing them to the screen. If I can print them, I should be able to edit them. Then, it's just a matter of finding where the other physics values are stored.
The good news is that I probably could port Annoyed Tomatoes to Hype.
1 Like
I have run through the tutorials but have not tried to integrate it into Hype.
I am thinking that since Hype can handle jQuery this might be a nice add on.
The biggest piece of help I could see with Gamequery.js is a solid collision set.
Let me know if you try it in Hype.
1 Like
I almost mixed gameQuery with Hype, but then I stopped. The development seems to have stalled. I'm not quite sure where to begin and I don't feel like learning another JavaScript library / game engine. Plus, there are only a few features missing from Hype that would make it a great HTML5 game development platform.
Today, I started using the developer version of Firefox... Firefox Developer Edition ...I know there's something going on that I can't see, so maybe this software can be used to dig deeper. So far, I did see something interesting...
Ha ha, black boxed. That might not mean what I think it means, but it does add to the allure of this project. It's like a secret. I'm trying to find it. Even if I fail in my search, I've already learned some new things about web development.
I decided to try a different approach... compare an old Hype.js to a new Hype javascript file. By finding the new additions, it probably leads to the physics code.
Md = '%c [Matter] ',
That definitely wasn't there. I was wondering of these are new...
Xa = ' translateX(',
Ya = ' translateY(',
Za = ' translateZ(',
...but they were there before. Both files have that code. Although, the variables are different in the new one...
xd = ' translateX(',
yd = ' translateY(',
zd = ' translateZ(',
I think that's what the problem is with Hype. I can slide an element from a dynamic starting point, but the end point is not dynamic. Otherwise, I could just add controls with different timelines. (In other words, I can move an element to a location, from a previous location, but I can't move an element by a specific amount... such as X = X+1)
Also, I'm not sure how a "Z" translate would work, so maybe I'm thinking of something else. Would "Z" be zoom/scaling? I'm not sure, as new scaling terms were added...
vd = ' scaleX(',
wd = ' scaleY(',
This is right next to the translation related variables. I suspect the scale variables are related to responsive theming, as the box itself can increase and decrease in area.
Here's another interesting one...
eb = 'concat',
A criminal feline made it into the code? What does this mean? Apparently, it has something to do with arrays... Array.prototype.concat() - JavaScript | MDN
I'm not sure what the benefit of that might be. Speculation – maybe it's a way to take existing HTML data for an element and give it physics properties? I don't know for sure. I might be seeing what I want to see. The next one though, that seems closer to physics...
nb = 'speed',
The word "speed" does not appear in the older Hype JavaScript. The comparison is from more than a year ago, so I might be missing some features that were launched before Hype 3 / Pro. Although, I'm not sure what else "speed" could be related to than physics. Velocity is speed with a direction. That would be a prime addition for the physics api. If Speed and direction (Basically the X & Y speed values) can be changed dynamically, then that's the beginning of building a control system, adding artificial intelligence and other critical parts of game creation.
I'm not sure if "force" is the Matter.js or Hype way of managing velocity. I didn't see the word "force" in either Hype.js document. But while on the subject of popular words from Science Fiction movies, "Matrix" was in the newer Hype JavaScript.
Oe = '.Matrix(M11=',`
This seems to be part of de-minifying the JavaScript. I'm not sure what the variables are, and they do seem to change between major Hype versions, I'm thinking the variables are the same between projects. Here's an example...
mj = 'World',
That was mentioned earlier in this thread. It's a new one, as it's not mentioned in the older JavaScript file. It seems probable that "World" is Physics related.
This next one could be huge...
il = 'collisionActive',
jl = 'collisionEnd',
kl = 'collisionStart',
Once the controls are working, collision detection is important. That's how the main character can stop moving when it bumps into walls, take damage when hit by projectiles or gain bonuses when collecting power-ups.
If Tumult is not sure what to add to the Physics API, being able to move elements dynamically... or being able to do something when collisions occur (like run JavaScript or play timelines) seems like pretty basic stuff.
It still seems that it is possible for this stuff to be accomplished with JavaScript. Although "dramatic hacking" does seem correct. I know the existence of these variables, but I can't do anything with them yet. Even the most basic of using "mj" to display the word "World" in "Hello World" is out of reach right now.
The future looks bright though, as I saw this...
ql = 'controller',
rl = 'controls',
Perhaps Tumult is already playing with advanced game development. Those two variables are new.
I think opening up the API is more work for Tumult, but it makes the software more useful. Here's another example.
ul = 'deviceorientation',
That seems like it could be incredibly useful for mobile development. Also, here's another new variable...
Wa = 'timestamp',
If that means UNIX Timestamp, That's an excellent one for game development. If these values are already in the code, why not let developers access them? If that does happen, it would be nice if Javascript minification/shorthand never changed – like "T" for timestamp.
Anyway, the two JavaScript files were too big and too different for a precise comparison. (I used TextWranger and it listed lots of differences.) This is a bit of progress. Here's what was learned...
- Using developer software, such as Firefox Developer Edition, or the Inspect in Safari, can easily de-minify JavaScript code.
- Tumult might already be experimenting with advanced physics settings and/or game development features, as some interesting phrases are already in the code.
- This isn't just beneficial for game development. Apparently, handy code snippets exist in the code that could be beneficial to developers in general, such as timestamp and device orientation.
Are these vars that can be accessed at any time with JS ?
I'm not sure. That's what I've been trying to find out. Theoretically, it seems possible, but I don't know how.
I applaud your investigative efforts!
Officially, I should tell you that anything you do or we discuss from this point on is COMPLETELY UNSUPPORTED. It might change in future versions. If you hack the runtime you're gonna be in a world of pain. It isn't something we as a company want or should spend time on.
But since you seem quite curious, I'll elaborate a bit more.
The easiest way to get a grasp on how the Hype runtime works is to get an unminified version of the source. We ship a version for debugging purposes. It still is heavily pre-processed and has some custom minification steps applied, but is much more legible. You can get to it by right-clicking on the Hype application and choosing "Show Package Contents" then navigating to the Contents/Resources/HYPE.full.js file. You'll even find some comments (for our benefit when developing, not yours) in it 
.
It should be much easier to find Matter.js in this version, as it occupies most of the bottom third of the javascript file. Do note that we use a custom build from our own fork, so it isn't a 100% match with what you'll find in their repository.
I believe the unminified version can be swapped into an exported document and used instead. You'll need to change the filename to match the version HYPE.full.js would become HYPE-466.full.min.js. Now you can have more fun debugging. Ultimately we run this code through google closure compiler to produce the minified version.
This is the result of the minifier, it extracts strings that are used in multiple places and assigns very short names to them. Don't rely on these variable names, as any re-compile will likely result in new ones!
It is used for the Swap scene transition - you can see one scene moves in front of another in the Z direction.
haha! concat is a standard function for concatenating two arrays together; Matter.js simply uses it.
Matrix mathematics is heavily used in graphics programming. It is the general basis of CSS3 transforms which allow translation, 3D rotation, scaling, and skew. We use the specific named functions for these, but IE6-8 does not support CSS transform syntax. They do however support matrix operations, so we use this instead and you're seeing it in the code.
The ultimate problem you're running into is our encapsulation. We try to be a very good citizen and do not leak our variables into the global javascript namespace. Hype only exposes a few top level variables on the window object. We also don't want people mucking around too much with our internal code, as we'll wind up in a situation that does not allow us to make internal changes without breaking people's animations.
Basically, to do any modification you need to figure out a way to break our encapsulation - this can't be done outside of the runtime, you'd need to change the javascript itself. At least, if you can access these variables without changing our code, then our code isn't working right!
I'm surprised these would show up as new, but it might just have to do with minification changes. These are not as exciting as they sound, they simply have to do with the controller of video and audio elements .
99.9% of anything in our runtime is in active use; for file size concerns we don't ship unused code. As you can tell by the minification we take file size of our engine very seriously!
4 Likes
I should have known that. Ha!
While I don't think it's so dire, it does discourage me from continuing with this project.
I figured that all of those two-letter thingies were probably generated automatically and could change. I didn't know what software was doing it though. This thread is full with knowledge.
I tried swapping the JavaScript files and it worked. With access to the source, I probably can do a lot, but that's not the point of using Hype though. The idea is that I don't have to code. HA!
I'm not sure what to do next, but nice reply! It's a lot to think about.
Why is this a good thing? I did some quick reading on encapsulation and it seems that there are strong arguments against private variables/functions.
The current situation certainly makes it challenging for advanced game development. I've already seen some grumbling about the limited use of the new physics feature. Hype can't be everything to everyone, but opening up the code might attract more customers and make the software more flexible. Hype is often referred to as a replacement for Flash. One of the main attractions for Flash was gaming. It started numerous online communities. Developers could make games and people could play them.
I'm not quite seeing the Tumult perspective. How would accessing Matter.js or Hype functions/variables be bad? Sure, the software can change, but isn't it healthier and more exciting for the community to be tinkering? When I saw the raw JavaScript, it reminded of me of the guys from the 50's and 60's working on their muscle cars. While cars (and even Apple computers) are becoming less and less common for tinkering with hardware, web development is a place where people can create.
I'm thinking that if Hype did open their functions or variables, and something changed with a major upgrade, it probably wouldn't be as dramatic as HTML4 to HTML5 or Drupal 7 to Drupal 8. Have you seen what it's like to go from Drupal 7 to Drupal 8?
Yes, I'm one of the few developers that misses the blink tag, but I'm not about to write stern letters to the World Wide Web Consortium, Google, Microsoft, Apple and the Mozilla Foundation. Ha!
Here's an example... what if "collisionActive" is actually a way to detect collisions. The community gets together and adds advanced code. For some reason, the new attribute is now called "cActive" in version 4.0 of Hype – or perhaps Matter.js is replaced with something else and collision detection is completely different. Wouldn't just the community pull together and make suggestions on how to fix the problem? That makes this a more popular place. Wouldn't seeing what people build with their customizations show you the best areas to automate and improve Hype?
You don't need a degree or a certification to be a web developer. Learning by doing seems to work best. I think web developers are fairly resilient regarding changes. That's what keeps us employed.
2 Likes
This JavaScript is more complex than I usually have to work with. I decided to read the comments, to better understand what's going on.
var getElementById = function (id) { // public, do not change signature without wrapping in _hype['API']!
Public... is that us?
Signature?!
I did see the phrase, API. That seems encouraging. Also, I'm wondering, what's the license on this code? Since it uses matter, is this automatically MIT licensed? If it's open source, that's exciting. It means that developers can contribute code.
I'm thinking not, as I saw this interesting comment...
// HypeAudio.js
// Hype
//
// Created by Jonathan Deutsch on 7/17/12.
// Copyright (c) 2012 Tumult Inc. All rights reserved.
Anyway, that hype[API] comment appears multiple times in the JavaScript file.
It's like a work of art to read this code. Seeing how cross browser issues are handled is what makes HYPE useful. With Flash, it just worked across multiple operating systems and browsers. With HTML5, it's a bit of a mess. The extra work to straighten out this issue is impressive.
Also, I have a story, if you're still worried about adding additional Physics features or expanding the API. Stencyl had a major change from version 2.x to 3.0. They dropped ActionScript and switched to Haxe / OpenFL. For those sticking to the core blocks, it was a non-issue. For those doing custom coding, it created a big problem. I'm surprised at how well the community survived that. It's so polite over there.
return { x: origin.x, y: origin.y, angle: angle };
};
// returns an { x, y } point
// cannot calculate width/height as these are dependent on proportionality (we'd also need the bounding width/height, but I don't think we'll ever be in a position to supply this)
// generically useful function, but I'm keeping in PhysicsTemplate so it doesn't bloat the runtime
That's an interesting comment. This seems like part of the gaming trinity... Position, Velocity and Collision Detection. The origin of an element is important. If the top left corner is know, and knowing the width/height of the actor is also nice, elements can be moved dynamically. The words, "I don't think we'll ever be in a position to supply this" is interesting. What isn't being supplied?
Also, matter.js has a feature called "view"... http://brm.io/matter-js-demo/#views ...which works like a camera and could be huge for Hype.
When I tested the demo and scrolled the whole scene with the mouse wheel, I was happy. I knew it could be used to solve problems like this... Scaling content together - #5 by MarkHunte
The view could be used to create scrolling games or scrolling scenes. It could also be another way to handle responsive design.
My JavaScript coding doesn't seem to be up to the challenge of the Physics API project. But if this thread changes the views of Tumult, showing how adding a Physics API is important to Hype, then it was successful. I still felt like trying, so I kept reading.
// if there's been no width/height is likely a text box without explicit dimensions. We still need to know what it is
if(widthValue == null) {
widthValue = currentElementSize.width;
}
if(heightValue == null) {
heightValue = currentElementSize.height;
}
"We still need to know what it is" ...those words alone makes a strong argument for exposing variables. Where's the harm in making the width and height variables accessible in Hype? Where's the harm in making the origin (X,Y) accessible? Where's the harm in letting developers change that information dynamically with JavaScript? Hype will likely grow, but origin, velocity and rotation seems fairly consistent.