The Design of the Portal Locomotion

Freya Holmér
Aug 4, 2016 · 8 min read

We’ve gotten a lot of questions on why and how we came up with the design of our locomotion system in Budget Cuts — here’s the definitive guide!

Early on, we knew that that we didn’t want it to cause any sort of motion sickness. Motion sickness could be an entire post of its own, but, long story short — we can’t accelerate the player in the game, unless they also feel that acceleration in reality.

This means we’re going to need to move the player in some way that does not involve continuous motion with acceleration. How bad is it? Well, for reference, I played Half-Life 2 in VR for about 10 minutes and felt sick the rest of the day.

The problems of point-and-click teleporting

How does it work? Well, it’s okay at best.

Here’s a list of some of its problems.

There’s no natural speed limiter

It looks quite bad, and can actually trigger motion sickness if the steps are small enough to resemble continuous motion. It will also most likely ruin any timing-based gameplay unless it’s fully tied into the design of the game. There are of course solutions, but many of them are bad. For instance, you can always tack on limiters, making the teleport fade time longer or add a cooldown based on distance. From a player perspective though, they will often feel as if the developer just forced it in, and rightly so.

There’s no natural distance limiter

You could add an indicator for when the player is aiming too far away, but this is not a natural limiter. There’s nothing in the game world that says why you can’t go there.

It’s not believable in the game world

Positioning is inaccurate

The transition is jarring

Finding a solution to it all

Limiting speed

The Unreal Tournament series feature a device called the Translocator. It’s a gun that that fires a small beacon. You then press a button to teleport to wherever the beacon is at.

The Translocator of Unreal Tournament 3 by Epic Games

This solves the speed limit problem in a natural way. The player has to wait for the beacon to land, which caps the player speed at the speed of the beacon. The waiting is also natural, because the player can intuitively see that the beacon has to land before teleporting, as opposed to waiting for a cooldown.

Guess what? This doesn’t just solve the speed limiter problem.

Limiting distance

Trajectory visualization [source]

Making it believable

The Translocator fixed a whole lot of problems. Two to go!

Making positioning accurate

This is where the portal comes in.

The portals of Portal

As it turns out, showing where you’ll end up by showing where you’ll end up is a great way to show where you’ll end up. We decided to use a portal for that!

The portal in Budget Cuts

When the beacon lands, we open up a portal in your hand. The inside of the portal shows what it would look like if you were to stand at the teleport beacon. Meaning, if you look inside the portal and teleport, nothing inside the portal is changed when you press the button to teleport, because it was already showing the destination viewpoint, while the outside is then of course no longer showing where you teleported from.

So why does this help with positioning? You as a player can see, with no ambiguity, exactly where you’ll stand once you teleport. This also means that even after the portal is open, you can walk and lean around to change your positioning. You can move the portal around and look in all directions to see what the other side looks like before deciding to teleport or even cancel it, which makes it much less of a commitment.

Making the transition smooth

The portal transition

There are a few design caveats to consider when doing this transition. We had several instances of players being killed mid-transition by enemies in their previous location, which was rather frustrating.

We now put the player interactions and colliders at the remote destination immediately, while leaving the rendering behind. This makes sure that your actions mid-transition are properly done in the new location.

Another problem is that the transition time will appear to vary depending on where you hold the portal. Our first iteration simply expanded the portal until it encapsulated the player, from the position you held the portal when pressing. This caused a problem where the transition appeared to be done when it was halfway when held in front of you, even though it was not. This is because halfway through, it covers your entire field of view. This is not the case if you hold the portal behind you, where halfway through you still aren’t seeing the transition sweep.

Our solution to this was to only expand the portal halfway, but also slerping it toward the direction you’re facing, ensuring that it always covers your field of view, regardless of where you were initially holding it. The slerp also helps make sure we can have a consistent transition time even when holding the portal behind you.

Full animation of our portal locomotion method in Budget Cuts

I hope this has been a helpful insight into our design process!

Your game may have different challenges to tackle, depending on what type of gameplay you’re aiming for. The important part is to ensure you don’t trigger motion sickness while keeping a critical eye on the design of the game to see how the design of your locomotion system ties into it.

An example of a game that borrowed some of these elements, and tweaked them to fit their game, is The Lab by Valve. They have the arc drawn while aiming the teleporter, but they skip the physical object altogether, and only use it as a natural distance limiter.

In any case, that’s all for now! I’ll probably make a more technical breakdown on how we created the portal itself at some point, if you’re interested!

Thanks for reading!

Neat Corp

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store