Free Template Tuesday #6 – Tumult Hype “FPS”

I believe that Tumult Hype can be great game development software. It’s easy to use, but it’s powerful. It even has a built-in physics engine. In the HTML5 era of web development, it’s the perfect replacement for Flash. The problem is that Hype is lacking a few key features to unlock the potential. The Frames Per Second (FPS) template is a little nudge in that direction. Hype might not be totally geared for game development, but there are some features that we can add on our own.

The Hype timeline is used for keyframe animation. The notches on that timeline are spaced with 30 frames per second increments. However, this is not the only way to create motion in a Hype project. The Physics engine (powered by Matter.js) or the JavaScript API could be used to move elements. If you’re creating games with Hype, you’re probably using the timeline less and JavaScript more. Additionally, Hype 3.5 can use smooth animation. Even though the timeline is based on 30 FPS, frames can automatically be added in-between transitions. (It depends on your project settings.) This creates a more natural appearance for changes in element properties.

However, to take advantage of smooth animation, the project has to be capable of displaying at higher FPS values. This is something hardcore gamers obsess over. If the FPS count is too low, a game becomes unenjoyable. This is also an issue with Hype – even beyond game development. If the Hype project is too bloated to run at high FPS, the animation will be choppy.

Expand View

That’s the purpose of the FPS template. It shows how to get the FPS value and display that value in a more human-friendly manner.

5
6
7

var timestamp = Date.now(); 
var previous = timestamp;
var fps = 0;

The first step is to declare some variables. “timestamp” is the current time in milliseconds. “previous” is for storing the previous timestamp value. “fps” is for storing the frames per second value. These are just names. You don’t have to use the same ones. But personally, I like to use a one-word description as the variable’s name.

The next step is to create a function. I called it “calculating” because the function is for figuring out the value between the current frame and the previous frame.

function calculating() {
 
 previous = timestamp;
 timestamp = Date.now();
 fps = 1000 / (timestamp - previous);
 fps = Math.min(fps,60); // The FPS value is capped at 60 FPS
 
 hypeDocument.getElementById("fps-text").innerText = "FPS: " + Math.round(fps);
 hypeDocument.setElementProperty(Needle, "rotateZ", (fps * 3) - 180, 0.25);
 
 requestAnimationFrame(calculating);
}

Immediately before getting the new timestamp, the previous value is stored. With the old value stored, the “timestamp” variable is updated with a current timestamp value. To calculate the FPS, it’s just a matter of how much time transpired between the old frame and the new frame. Since there are 1000 milliseconds in one second, 1000 is divided by the difference between the two values.

In other words, if 20 milliseconds transpired between the two frames, that’s a speed of 50 frames per second. 20 times 50 equals 1000.

Pages: 12