Does anyone have any good ways to make a Twine game look pixelated and similar to a Windows 95 or 98 program? Thanks!
3 Likes
I’m definitely not a Twine expert, but some of this question can be answered without. You want to start with the color palette for windows 95. Here is the color palette and specific hex codes for the actual win95 logo, this was the standard desktop color, and this is the base 16 color palette that windows used (later expanded to 20) for their default theme.
To get that pixelated look, consider this: The typical screen resolution mid-nineties was 800x600, but the average computer screen was 15 inches, measured diagonally corner to corner. The average resolution now is 1080p, with a screen size of 24 inches, measured the same way. If you do some homework and calculation, that should inform you of what size your pixels need to be to emulate the same gritty full-screen look on the average modern screen.
As far as actually implementing all of this on Twine, that I’ll leave for someone who knows better than I. Good luck on your project!
Here is a quick theme I whipped up for Sugarcube. It may not be quite what you are looking for. But just put it in a passage tagged stylesheet if you want to try it.
You can change the color in the the first line from grey to another color if you like. Try teal or darkblue. And the next line, which controls the text color, to white or black as needed.
This uses an open source font called Chicago FLF. There are more pixelated choices out there probably. (Edit: I just realized I used the old Mac font by mistake.)
/* bg color */
body {background-color: grey}
/* text color */
#passages {color: white !important}
body > *, button, a {color: black !important}
#ui-bar > *, #ui-bar.stowed {background-color: #C0C7C8}
#ui-bar > * {border: 2px outset #A7A7A7}
#ui-dialog-titlebar {background-color: blue}
#ui-dialog-body {background-color: #C0C7C8}
#ui-bar-history {background-color: darkblue; border: blue}
#ui-dialog {border: 2px outset #A7A7A7}
#ui-dialog-title {color: white}
button:disabled {color: #C0C7C8}
button, button:hover, #ui-dialog-close, #ui-dialog-close:hover, button:disabled, li a:hover, li a {background-color: #C0C7C8 !important; border: 2px outset #A7A7A7 !important}
@font-face {font-family: 'ChicagoFLFRegular'; src: url("https://raw.githubusercontent.com/pbparjeter2/font/main/ChicagoFLF.ttf");}
body {font-family: 'ChicagoFLFRegular'; }
2 Likes
To replace the font with a pixelated Windows-like font, replace the last section with this. Credit this font: W95A.
@font-face {font-family: 'w95'; src: url("https://raw.githubusercontent.com/pbparjeter2/font/main/w95.otf");}
body {font-family: 'w95'; }
Large text and headings will look bad if pixelated, so you can add this to make them normal:
h1 {font-family: Arial, sans serif; font-style: italic;}
1 Like
Thanks! I was gonna just make it in Harlowe but I’ll branch out and try Sugarcube.
2 Likes
You may also wish to steal some code or ideas from 98.css - A design system for building faithful recreations of old UIs, which reproduces that aesthetic quite faithfully. (It’s just CSS, so it’s possible you could include it in your project directly? I don’t really know Twine.)
2 Likes
Also take care when including images (like that Windows logo) that are likely to be covered by Trade Mark or Copyright laws in a project.
2 Likes
Oops, yes, that logo is from Wikipedia/Wikimedia Commons, forgot to mention that.
It’s not actually in the CSS code @sourdoughgames, just an example to show you what you can do if you include an image in the passage titled StoryCaption.