Reflex – Dev Diary 43

Over the last 2 weeks I have been continuing the redevelopment of the UI in the game to try and fit everything in on all devices (including mobile phones). This is quite tricky for phones as the display is small and you have to increase the text size so that it’s readable, but you have less space to display it, and so on.

Fortunately I have made great progress and I can happily report that Reflex is now perfectly playable on phones, tablets and desktops. In order to get the level UI to fit properly I have split out the mission briefing details into 2 or 3 screens.

The first panel that shows just displays the mission briefing for the level (previously the timing and components available were also shown).

The second panel is for the time constraints and the components available for the mission.

And finally if there are any tutorials to display for the level they now show using a new 2 column layout.

There has also been a ton of other tweaks to the UI across the game including:

1. Buttons have been tweaked so the font size scales depending on the device and resolution.
2. The level win and fail displays have been adjusted.
3. All the mission panels are now vertically centred on the screen.
4. Level select screen now shows 3 at a time instead of 5 to ensure that phones and tablets don’t look squashed in.

Not only have I been working hard on the UI but thanks to a play tester I have made an additional alteration in the game. While playing the game my friend fell foul to loosing a level because he hadn’t realised the that when you add a component onto a tile it takes a few seconds to build, during this time it is not active. The display of this has the component scale down, fade in and then snap into place. The tutorial note also explains this (but who reads those?). So, I wracked my brain to think of a better visual cue to illustrate that the component has finished construction.

As you can see from the screen shot above the socket that has a component attached has turned green. This is the last stage of the building process and indicates that the reflector is now fully active. Removing the component returns the socket to yellow. It’s also worth mentioning that the single use red sockets now turn black when the component is fully activated to illustrate that it is active and also locked in place.

I think this helps greatly and forces the player to realise that they need to time component construction carefully at times.