Overview

Initially, the portal was just a rectangle that showed exactly what was in the other world at its position. Though functional, it didn't feel fitting for a magical power tied to a mystical artifact, so I implemented many effects for the portal to give it a polished, thematically fitting feel. Most of them aren't very complicated from a technical standpoint, so rather than go over algorithms as in my other technical breakdowns, I'll instead go over the rationale and design process for each of them, as well as a few small implementation details.

Note: Gemma's Great Gambit was built in Unity 5.50f3. A number of these effects seem to break in Unity 5.60f3! If you want to see them in-game yourself, you'll either need to open the project in Unity 5.50f3 or download the pre-compiled binary.

Sound effects

To make the portal feel more dynamic and tangible, I added two sound effects.

The first is a vibrating electronic sound that fits with the portal's wobbly, magically high-tech aesthetic. Its pitch and intensity rise as the portal grows, which provides a sense of resistance as if the portal is being stretched out by the player rather than just drawing a rectangle.

The second sound is a some windy, droning ambiance that represents the alternate world (as mentioned briefly at the beginning of the game, the city has been cleared out due to an approaching hurricane). This sound is filtered through a low-pass filter which allows higher frequencies as the portal grows, simulating the effect of a hole in a wall (in this case, the "wall" between two worlds) that allows more sound through as it gets wider.

Displacement shader

The first effect I added was the subtle "wobble" effect applied to the portal's contents while it's being created. This makes it feel a little more tangible, like there's a wavy "film" between the two worlds that gets broken through when the player releases the mouse button.

To achieve this effect, I wrote a small displacement shader and applied it to the camera that renders the portal's contents. The shader uses a repeating, scrolling sine wave pattern to offset the pixels vertically, then again horizontally at a different rate to produce a more irregular pattern.

The effect is also applied in screen space rather the relative to the camera, meaning that when the portal moves, the waves don't get moved with it. This adds to the illusion that the waves are occurring "inside" the portal in the other world.

Particle effects

I added two particle effects to the portal while it's being opened.

The first effect is the occasional large sparkles that appear in the middle of the portal. It complements the displacement shader effect, adding to the illusion of a shiny film on the portal's surface. Its emission rate is scaled based on the surface area of the portal so that regardless of how large the portal is, the same number of sparkles appear per visible pixel of portal surface. This is important, because otherwise a small portal would seem extremely sparkly, while a large one would be practically devoid of sparkles relative to its size.

The second effect is the particles that spiral inward from the portal's edges, creating an illusion of matter being transferred between worlds and adding a sense of depth to the portal. I achieved this by adding a particle emitter along each edge of the portal. As with the other particle effect, the rate of emission is scaled based on the edge's length. I also noticed that when the portal is small, the particles would flow past the other side of the portal, breaking the illusion that they're flowing into the portal. To solve this, their emission velocity is also scaled based on the portal's size, so they come out slower when the portal is smaller.

Procedurally-generated border

Originally, the portal's border was also a sparkly particle effect. However, it looked out of place with the game's otherwise polygonal aesthetic, so I decided to implement a polgyon-based border. I also still wanted it to be animated so the border would be interesting to look at in motion.

To do this, I wrote a script to manually set up a mesh and move its points around using trigonometric functions, approximating a circle using a dodecagonal shape around the edges of the portal. This makes an interesting swirling shape while retaining not only the game's off-kilter polygonal aesthetic, but also the exact square edges of the portal boundaries so players can still tell precisely where the cutoff is. I also added a triangular beam extending from the artifact on Gemma's necklace to the portal to situate it in the world better.

The border effect was initially entirely white, but it didn't look right in the game's colorful world. I instead wrote a shader to replace the white color with a slight scrolling rainbow effect, adding a little fun to the portal. As with the displacement shader inside the portal, the rainbow scrolls in screen space, reinforcing the portal's otherworldly nature.

Note that the code for generating the portal border is a little hard to digest because it manually sets up and moves around 20 mesh vertices. Ideally this code would have been more maintainable, but we were under a tight deadline — given the unfortunate choice between nice visual effects and nice visual effects code, the former was the best option.

Elastic movement

I wanted to the portal to feel more fun to drag around, so I added some "juicy" elastic movement effects. Essentially, as the player drags out the portal, its actual borders accelerate towards the cursor based on how far off they are from the target position. As a result, they lag behind a little, then stretch and wobble towards the cursor when it stops. This makes the portal feel cartoony, fitting the game's goofy aesthetic, but also adds to the sense that it's a physical object being stretched and manipulated by the player.

Flash effect

I noticed that when the player releases the portal, the transfer of objects between worlds looked a bit jerky: the wobble effect suddenly gets removed, so the newly-transferred objects don't line up exactly with the portal image. As well, as mentioned in the object slicing breakdown, transferring objects may occasionally take a few extra frames after the button is released, which feels a bit jarring.

To mask both of these issues, as well as to add a nice "pop" to the creation of the portal, I implemented a flash effect when the mouse button is released. The effect itself is fairly simple — a rainbow rectangle that quickly grows and fades away, and some trailing sparkles around the portal border — but the result is a much more satisfying feeling when the portal is created.

Invalid placement effects

For the sake of the plot, certain characters (namely Gemma, Al, and the loudspeakers) can't be transferred or cut by the portal. Initially, we just had the portal "ignore" these characters and leave them uncut in their original world, but this was confusing for players and could result in the characters becoming embedded in a wall. To remedy this, we simply don't allow the player to draw a portal on top of one of these characters. Of course, this requires communicating to the player that their portal placement is invalid.

A few things change about the portal when its placement is invalid. Most obviously, it turns red. The flash effect is also turned red and shortened, including a negative-sounding vocal clip from Gemma, making it clearer that no transfer has occurred when the portal is released.

Lastly, I added a red "ghost" shader that renders pulsing, semi-transparent versions of the characters blocking portal placement. The hologram-esque image is generated by determining the maximum value of the R, G, and B channels of each pixel, then multiplying it by the A channel. I then multiply by a red color whose alpha value is slowly modulated over time by a sine wave. This makes it clearer why the portal is disallowed in that location, as the object that would normally be covered up by the portal can be seen as a ghostly effect instead.

This feature was added near the end of our development time, so it unfortunately didn't get much time for playtesting. With more time, I would have liked to find ways to make the reasons for invalid portal placement clearer to the player. However, I think this effect accomplishes the task fairly well given the time contraints we had.