Flux Link

2018

Flux Link is the third internally developed Facebook Instant Game my team worked on at Mobilityware, and by this point we had Instant Game development under lock down-- within a mere 5 weeks, the game was feature-complete, extremely polished, and in geo beta. We chose a deceptively simple yet addictive game in which players must draw links between colored node pairs on a square grid without intersecting.

UI Design

I knew right away that I wanted to go with a sleek, minimal, semi futuristic sci-fi theme for the art and UI to complement the clean simplicity of the gameplay. A monochromatic and subdued UI laid over elegant dark backgrounds brought the gameboard to the forefront, with attractive and brightly colored nodes lighting up gameplay.

Flux Link is a simple but addictive game of drawing links between colored shape nodes on a grid. The goal is connect all node pairs without intersecting any links on the board in as few moves as possible.

Players begin the FTUE by seeing a pair of nodes on screen with an animation drawing a link between them. After making the first link, the rest of the board appears below, with instructions to draw the rest of the links without intersecting.

After making it past the first FTUE screen, players are introduced to the Zone Map. Zones have anywhere between 4 and 15 levels, and are dynamically generated in a polygonal layout. Completed levels light up, and are blue or gold depending on whether the player perfected them.

Tapping on a level brings the player to the Level game board. I needed at least 12 different colors for the node pairs, so I opted to include shapes to help differentiate colors that were similar. Levels are dynamically generated grid sizes and difficulties, giving the game unlimited content.

Various overlays and effects: Hint video ad popup, Level Completion animation still, and a Zone Perfected overlay.

All Facebook Instant Games require 3 base graphics to be made, which are then automatically assembled into a loading screen for each game. This loading screen looks different depending on what device you are using, and Facebook controls these layouts exclusively; I made a template in Photoshop that would simulate how these base graphics would be dynamically populated so that I could better design them to fit together.

More UI overlays/menus: the Settings menu, a results popup from completing the Daily Zone, the Stats menu where players can check out their lifetime stats.

Rich Messages

Rich Messages are an important aspect of Instant Games, as they are one of the primary drivers of retention and socialization between players. Friends can ask others for help, the game can notify players about new content, and graphics can be dynamically generated to create things like leaderboards.

Rich Messages are dynamic graphics that can be sent to friends via Facebook Messenger from within game. This graphic is sent to players automatically on D7 to improve retention.

This Rich Message graphic appears when inviting friends to play Flux Link from the main menu, and features dynamic compositing of the player's Facebook avatar and name.

Another Rich Message sent by the game automatically on D2 to improve retention. This generic message calls players to keep up their progression in game.

This Rich Message graphic appears when asking a friend for help on a level. In addition to dynamic compositing of the player's name and Facebook avatar, a snapshot of the board that the player is stuck on is also generated.

This Rich Message graphic appears when a friend sends help to the player. A snapshot of the solved level is taken in game and composited into the Rich Message automatically.

This Rich Message graphic appears when a new Daily Zone is ready for the player to play.