Description

FlipSide is a reality-bending puzzle platformer set in a haunted Victorian mansion, wherein the protagonist (you) is trying to escape the warped confines of this mysterious new environment. In order to escape, the player must discover and complete various puzzles and activities, including a jumping puzzle, a labrinth-esque maze, and some other fun challenges. Most of the puzzles require the use of "mirror-portals" -- unique mirrors which transport the player to an alternate reality known as: The FlipSide. The player is expected to explore both the normal mansion and the FlipSide mansion in order to uncover various buttons which unlock parts of the main exit in the center room. In addition, 9 diamonds are scattered throughout the mansion, along with 9 rubies in the FlipSide, for the player to collect. Collecting them all will unlock the final part of the main door, allowing the player to excape the mansion and win the game.

Controls

Keyboard

Controller

Graphics Technologies

Camera/View

FlipSide uses a traditional 3rd-person camera view for viewing the player and surrounding environment. The camera rotates circularly around the player, with spring-based acceleration and collision detection against walls. To fit the tight corridors of the environment, the camera was set up to automatically zoom in when colliding with walls.


Complex Environment

The explorable mansion contains a plethora of unique rooms and furniture, each with its own theme or puzzle. Not all rooms have puzzles, but most every room contains hidden diamonds, which provide incentive for the player to explore them. All walls, portals, and furniture are processed through the room hierarchy when performing collision checks, to reduce the effect of all that geometry on the CPU.


Collision Detection

Collisions in FlipSide use a-priori, AABB detection. The player's position and velocity is checked against all solid entities in their current room, it is determined if they will collide next frame, and their position and velocity are updated accordingly. In addition, the camera performs sphere-AABB collision detection when determining if it is inside any walls.

Shadows

FlipSide uses complex shadow-mapping to render shadows from the various spotlight sources within the mansion. Multiple passes are performed such that shadows are rendered for every source in the current room, which provides a more realistic effect. Shadows are one of the most costly rendering techniques we use, but the room-hierarchy and management of the shadow resolution helps alleviate this problem.


Spacial Data Structure

For FlipSide, we used a custom spacial data structre we call the "room hierarchy". Essentially it a 4-level tree structure where each leaf is a "room", with a custom set bounding box and dynamically calculated contents. When rendering lights and portals, we only check the player's currently containing room, which save considerable GPU cycles. All collisions are run through the hierarchy as well, so only relevent walls will be checked.

View Frustum Culling

View frustum culling is performed on objects in our scene to reduce the amount of geometry being passed to the GPU. Any entities who lie outside of the current projection-view are culled out, which noticably improves performace in areas of the game with high geomety (maze/pool table).

Geometry Shader

A comprehensive geometry shader is used to provide an 'explosive' effect when the player teleports, and to make the character 'fuzz out' when in the FlipSide. The geometry shader offsets each triangle mesh on the characters model outward, then brings it back in, at adjustable speeds and magnitudes.


HUD

FlipSide has a basic graphical HUD which is always present, that informs the player of how many diamonds/rubies they have collected and how many they have yet to find. Diamonds are represented by the ratio and icon at the top-left, and rubies at the top-right.

Tweening

We use tweening when animating the player in order create a smooth feel to user controls. Principles of animation are also used: all movements are run over a sigmoid distribution to create an "ease in - ease out" feel, while the player will also "squash and stretch" when jumping.

Bezier Curve Pathing

Cubic Bezier splines are used for camera movement during cutscenes. By chaining together multiple bezier curves (one-after-the-other) we can generate a complex path which the camera will move smoothly along. There is a system in place such that we can simply enter a list of points and the camera will automatically follow the path set out for it. Additionally, some of the moving objects (door & locks) use 1-dimensional bezier pathing as a form of tweening between start/end points.


Particle System

A simple particle system is implemented in FlipSide, which provides emitters to generate cube-particles in random patterns. Currently the particle system is used for two features: a random 'snow'-like effect while in the flipside, and a burst of particles beneath the player when double-jumping.


References