Free Template Tuesday #39 – Tumult Hype “Controlling”

Anyone ever call you too controlling? Context matters! In the video game world, it’s really bad if you’re not controlling what’s going on. That’s the point of this week’s free Tumult Hype template. It shows how to add a 4-way controller to your game. It’s quite similar to the phenomenal Jump template, but this one has three distinct differences.

1 — It’s Easier

Starting out with a side-scrolling template, complete with sensors and wall jumping, is probably too complicated for a beginner. This template only focuses on moving the “Ball” element in four directions — Left, Up, Right, and Down.

Expand View

Unlike the “Jump” template, the “Controlling” template doesn’t use gravity, it doesn’t require invisible elements to detect collisions, it doesn’t display frames per second, and it doesn’t involve other advanced topics. This is simply a basic template for starting game development with Hype.

2 — On-Screen Controls

Although, there is something new here. This template shows how to include on-screen controls for mobile gamers. While effective, I consider this a starting point or proof-of-concept. If you want 360° of motion, or better detection in the change of direction, that’s where the coding can get more advanced. For now, the basic idea is that both the keyboard controls and the on-screen controls change the “window.direction” variable. The requestAnimationFrame method is used to create a loop. With every frame of animation, the direction is updated. Then, the velocity of the “Ball” element is updated accordingly.

3 — The Photics-Physics-Bridge

Considering how I prefer Vanilla JavaScript, avoiding most libraries, it’s unusual for me to write my own. However, the Hype Physics API is a little confusing. Here’s an example…

1
2
3
4
5

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

Three different pieces are needed to change one value. By adding the ppb.js file to your Hype project, only one line of code is needed to change the velocity. Here’s an example of moving the “ball” element to the left…

1

ppb.setVelocity("ball", 0, -s);

The “s” variable represents the speed. The template uses a value of 5. By increasing or decreasing the value, the speed can be changed accordingly.

The ppb.js file simplifies game development by reducing the amount of code. Not only is this easier to write, but it makes the code more legible.

I’m not seeing a lot of games being made with Hype. This is especially surprising to me as I consider Hype the best successor to Flash. Hype’s Physics API, which is based on Matter.js, is lightweight yet powerful. The main problem is complexity. Hopefully the “Controlling” template and the Photics-Physics-Bridge help solve that problem.

Download the Controlling Template to see how it works. To learn more about the Physics API in Tumult’s app, there’s A Book About Hype.