Hypnospace Outlaw

Hypnospace Outlaw

Modified content, additional content, and total conversions for Hypnospace Outlaw! Must have HypnOS v2.15 or above to create and use mods.

Learn more and find the game on Steam, GOG.com, itch.io, Discord.

HypnOS Visual Theme Guide

How to make visual themes for your HypnOS operating system!

Posted by on


GETTING STARTED

Create a folder in your mod files at [yourmod]\os\themes\[theme name]. Please use all lowercase characters here! You can choose to refer to the theme in-game with any casing you choose, but the folder itself must be lowercase. I recommend copying the image files from the 'default' theme folder into your theme folder then editing them, and not create each individual image from scratch.

THEME IMAGE GUIDE

Every image required for a theme, with screenshot example and description. Any missing images will simply have their associated game elements keep the image of the last loaded theme. We will be using the Boppos theme as an example, because 'mmmmmm, delicious'.

All items with a * next to them below have their size controlled via the windowmargins.ini file. See the 'Theme INI File Guide' section below for more details.

IMAGE FILE

SCREENSHOT

DESCRIPTION

button

ss button
The static (1) and clicked (2) state of normal buttons
buttonnextprev
[UNUSED IN-GAME]
[UNUSED IN-GAME]
buttontool1-6
ss buttontool

The static (1) and clicked (2) state of the Stamp Page buttons.

[buttontool3-6 are unsused in-game]

buttontoolg1 2
ss buttontoollg1 2
The static (1) and selected (2) state of the Select Law buttons.
checkbox
ss checkbox
The disabled (1) and enabled (2) state of checkboxes.
citizentiles
citizentiles 1

The tiled background of the Citizen Data app.

This image repeats both horizontally and vertically to fill the space of the app window.

You can resize this image horizontally to add more detail, and add additional rows vertically if you'd like more than 2 colors. [MIKE'S NOTE: NEED TO CONFIRM THIS]

dropmenu
dropmenu 1
  • drophighlight is the light color that appears upon mouse-over of a drop-menu item
  • dropmenu is unused in-game [MIKE'S NOTE: CONFIRM THIS]
  • dropmenu1-2 are the static (1) and clicked (2) state of the drop menu button
  • dropmenu9p* is the background of the drop-menu. The top, bottom, left, and right edges are tiled horizontally or vertically, the center is stretched to fit the inner area, and the corners are not altered.
explorerbar
explorerbar 1
The toolbar at the top of the Explorer window.
filemanagertiles
filemanagertiles 1

The tiled background of the Download Manager app.

This image repeats both horizontally and vertically to fill the space of the app window - the default size of this image fills the entire space horizontally, so only vertical tiling actually happens.

Only 2 rows are supported, you cannot add additional row colors to this element. [MIKE'S NOTE: NEED TO CONFIRM THIS]

hud
ss hud

The HypnOS Info Bar.

  • hud1* is the info bar when it is at the top of the screen
  • hud2* is the info bar when it is at the bottom of the screen
  • hudbud1 is the notification window that pops up under the info bar (at top)
  • hudbud2 is the notification window that pops up over the info bar (at bottom)
inboxtiles
ss inboxtiles

The tiled background of the HSPD - Inbox app.

This image repeats both horizontally and vertically to fill the frame within the app window - the default size of this image fills the entire space horizontally, so only vertical tiling actually happens.

You can resize this image vertically if you'd like to add if you'd like more than 2 row colors. [MIKE'S NOTE: NEED TO CONFIRM THIS]

musicplay
stampbox
ss musicplayer

The Play/Pause button at the bottom-left of the Explorer app. The transparent area allows the player to see a little animation behind the button while music is playing.

  • musicplay1-2 are the static (1) and clicked (2) states of this button (while playing)
  • musicplay3-4 are the static (3) and clicked (4) states of this button (while paused)
  • musicend is the little end-piece on the far-right side of the ribbon that appears when you hover your mouse over the button while music is playing (not pictured)

stampbox is the little window at the bottom-left of the Explorer app in which you can see what icon this page is stamped with.

plaintiles
ss plaintiles

The tiled background of the Tunbox Library and Hypnocure apps.

This image repeats both horizontally and vertically to fill the space of the app window.

You can resize this image horizontally to add more detail, but only 2 rows are supported vertically, you cannot add additional row colors to this element. [MIKE'S NOTE: NEED TO CONFIRM THIS]

scrollbar
ss scrollbar

The Scrollbar used throughout HypnOS.

  • scrollbar is the element you click and drag up and down to scroll
  • scrolldown1-2 is the static (1) and clicked (2) states of the scrollbar's down arrow
  • scrollup1-2 is the static (1) and clicked (2) states of the scrollbar's up arrow

The checkered background colors are controlled by colortable.ini, see the 'Theme INI File Guide' section below for details.

slider
ss sliders

The Sliders used in the Settings app.

  • slider is the element you click and drag left and right to change the number value
  • sliderbg1 is the background
  • sliderbg2 is an alternate background, used in the Pizzazz tab for the mouse-trail setting (not pictured)
sortbutton1 3
ss sort

The sort buttons at the top of the Download Manager and Tunebox Library apps.

  • sortbutton1 is the "unsorted" state
  • sortbutton2 is the "descending sort" state
  • sortbutton3 is the "ascending sort" state
tagtitle
ss tagtitle

The background behind the "Tags: " text at the top-right of the Explorer. Players can click this to show/hide page tags.

toolbar
ss toolcancel2ss toolclearlist2

Title background and buttons for the Stamps and Laws toolbars.

  • toolcancel1-2 are the static (1) and clicked (2) states of the 'CANCEL' button under the Laws toolbar
  • toolclear1-2 are the static (1) and clicked (2) states of the 'CLEAR' button under the Stamps toolbar
  • toollist1-2 are the static (1) and clicked (2) states of the 'VIEW LIST' button under the Stamps toolbar
  • tooltitle is background image of the title on each of these toolbars
windowinset
ss windowinset

Used primarily in the Input Box app as the place where you input text, windowinset is also used in other apps as a frame or other decorative element (HypnoCure+/Pro, Pets, Installer, etc).

The top, bottom, left, and right edges are stretched horizontally or vertically, the center is stretched to fit the inner area, and the corners are not altered.

This object's margins are hardcoded (not handled by windowmargins.ini) at: left - 3px, right - 2px, top - 3px, bottom - 2px.

windowtab
ss tabs

windowtab1-2 are the static (1) and clicked (2) states of the tab elements in the subtitle area of some windows that allow the player switch between app views.

popupwindow
ss popup

popupwindow* is the window frame of Pop-up, Ad, Installer, QuickCheck, and various other apps. This is used when a window does not need a subtitle text area.

The top, bottom, left, and right edges are tiled horizontally or vertically, the center is a tiled solid magenta that fits the inner area, and the corners are not altered.

windowpane trans
ss windowss windowtrans

windowpane* is the window frame of many applications, including Pets, Settings, Citizen Data, Tutorial, etc. This is used when a window needs a subtitle and a solid color center.

The top, bottom, left, and right edges are tiled horizontally or vertically, the center is a tiled solid magenta that fits the inner area, and the corners are not altered.


windowtrans* is the window frame of many applications, including HypnoCure, Download Manager, Tunebox Library, etc. This is used when a window needs a subtitle and a transparent center. #transrights

The top, bottom, left, and right edges are tiled horizontally or vertically, the center is transparent, and the corners are not altered.

securewindow
ss securewindow

securewindow* is the window frame of a few applications, including QuickCheck, the On-Screen Keyboard (for gamepad mode), and other windows that do not have titles, icons, or exit buttons.

The top, bottom, left, and right edges are tiled horizontally or vertically, the center is a tiled solid color that fits the inner area, and the corners are not altered.

windowchin inner
ss windowchinss windowinner

windowchin is used at the bottom of certain apps to give them a bit more frame area at the bottom for buttons and text. Examples include Citizen Data, Hypnocure+, and Tunebox Library.

The top, bottom, left, and right edges are tiled horizontally or vertically, the center is a tiled solid color that fits the inner area, and the corners are not altered.

This object's margins are hardcoded (not handled by windowmargins.ini) at: left - 9px, right - 9px, top - 1px, bottom - 3px.


windowinner and windowinnerb is used inside of certain apps to give them a bit more frame area for buttons and text. Examples include Download Manager, Inbox, and Hypnocure Pro.

windowinnerb differs slightly from windowinner - instead of a solid chin underneath, it instead is transparent.

The top, bottom, left, and right edges are tiled horizontally or vertically, the center is transparent, and the corners are not altered.

This object's margins are hardcoded (not handled by windowmargins.ini) at: left - 5px, right - 5px, top - 14px, bottom - 19px.

windowanim
ss windowanim

windowanim is the object that handles the stylized window transition animation that happens whenever you open, close, or transition an app window.

The top, bottom, left, and right edges are stretched horizontally or vertically, the center is transparent, and the corners are not altered.

This object's margins are hardcoded (not handled by windowmargins.ini) at: left - 22px, right - 22px, top - 21px, bottom - 4px.

icon recyclebin1 3
icon settings1 3
ss customicons

Some system icons can be customized to match your theme. These images represent the static (1), selected (2), and clicked (3) states of the icon.

NOTE: These files NOT necessary to include in your mod! If not included, they will simply load in the default theme's icon images.

The following icons are supported, filenames must exactly match the following with 1, 2, and 3 suffixes:

settings, highway, hspd, explorer, sticky, downloads, hypnocure, tutorial, pets, tombstone, tunebox


THEME INI FILE GUIDE

All items with a * next to them above have their size controlled via the windowmargins.ini file.

underconstruc

Some elements in HypnOS are simply solid colors, and are not loaded in via image but instead just have their color altered in-engine. These theme colors are set via the colortable.ini file. The theme's text element colors are also set in this ini file.

underconstruc

Comments

Join the community or sign in with your gaming account to join the conversation: