Retro Terminal UI
Make + Learn = Fun studios is working on the text based adventure game, command-ui.
One of the key design elements to command-ui is the look and feel of the basic UI. The game is focused on the pilot of a spacecraft interacting with the ship systems and AI through an old school crt-like terminal. Capturing this
retro terminal feel was the first task that I took on as part of creating the game.
The game itself is written entirely in HTML, CSS, and Javascript. The terminal UI is accomplished purely with CSS.
To start I assign my “crt” class to the entire body of the HTML page.
The “crt” class contians the following CSS.
The “.crt::after” creates a nearly black background positioned absolutely on the screen.
The “.crt::before” creates a repeating background image that is a linear gradient. The linear gradient is what adds the scan line effect to the text that makes it look like an old school crt display.
To add a little extra crt-iness to the dispaly, I added a CSS animation that adds misconvergence to the display. This is the effect of the different color channels not always lining up.
The effect is created by animating a text-shadow that isolates the RGB colors at different intensities and positions.
This CSS animation is added to the “crt” class.
This takes care of the basic styling for the page. The next step is to create a place to display the terminal output. To handle this I use a text area with some basic styling.
The green text color is a vibrant retro terminal green and the font is a monospaced terminal-style font keeping with the overall design aesthetic. I also removed all borders and padding.
The final step is to create the input text box with the prompt.
The “command” class is very similar to the “output” class, but just contains different sizing.
The final result is a very cool looking retro terminal.
