Customizations

[paladin-t]

Notes

In this page, ${INSTALLATION_ROOT} means:

• "Steam Apps/Bitty Engine" on Windows
• "Steam Apps/Bitty Engine/bitty.app" on MacOS
• "Steam Apps/Bitty Engine" on Linux

Startup Options

Option list:

• -a FPS Specify running FPS
• -x Disable the boot sound
• -b Run with borderless window
• -s MxN Specify window size
• -d Disable high-DPI (MacOS)
• -v Enable vsync
• -m Keep window top most
• -x1 Set renderer scale to x1
• -x2 Set renderer scale to x2
• -x3 Set renderer scale to x3
• -r 1 Use software renderer
• -p Disable plugins
• -f Debug real number precisely
• -t Disable invoking timeout

There are three ways to specify startup options:

Set from the Steam client

1. Right click the title in the Steam client
2. Click "Properties...", "Set Launch Options..."
3. Fill in with the options, i.e. "-b -s 1280x720"

Set from command line

1. Pass the options from command line, i.e. "bitty.exe -b -s 1280x720"

Set from config file

1. Create an "args.txt" config under the "${INSTALLATION_ROOT}/" directory, to specify startup arguments as well
2. It overwrites the arguments from command line, and affects exported executable for desktops

Exported Icon Customization

1. Put an icon at "../icon.png" relative to executables

Exported Splash Customization

1. Put an image at "../splash.png" relative to executables

The image could be transparent.

Fullscreen Effect Customization

Read Using fullscreen shader for details.

Exported Project Config

1. Create a "config.json" in your project to indicate for exported preferences
2. Fill in with the following content, pick whatever you need, REMOVE THE COMMENTS between /**/

{
  "application": {
    "window": {
      "fullscreen": false,
      "maximized": false,
      "size": [ 480, 320 ]
    },
    "pause_on_focus_lost": true,
    "pause_on_esc": true
  },
  "canvas": {
    "state": 0,
    "fix_ratio": true
  },
  "input": {
    "gamepad": [
      [
        { "device": 1, "index": 0, "type": 0, "value": 4 },
        { "device": 1, "index": 0, "type": 0, "value": 7 },
        { "device": 1, "index": 0, "type": 0, "value": 26 },
        { "device": 1, "index": 0, "type": 0, "value": 22 },
        { "device": 1, "index": 0, "type": 0, "value": 13 },
        { "device": 1, "index": 0, "type": 0, "value": 14 }
      ],
      [
        { "device": 2, "index": 0, "type": 2, "sub": 0, "value": -1 },
        { "device": 2, "index": 0, "type": 2, "sub": 0, "value": 1 },
        { "device": 2, "index": 0, "type": 2, "sub": 1, "value": -1 },
        { "device": 2, "index": 0, "type": 2, "sub": 1, "value": 1 },
        { "device": 2, "index": 0, "type": 0, "value": 0 },
        { "device": 2, "index": 0, "type": 0, "value": 1 }
      ]
      /*
         Note
           "device": 1/2 for keyboard/joystick,
           "index": joystick index, or always 0 for keyboard,
           "type": 0/1/2 for key, joystick hat, joystick axis,
           "sub": 0/1 for joystick hat axis (x/y),
           "value": key value on keyboard, or joystick value.
       */
    ],
    "onscreen_gamepad": {
      "enabled": true,
      "swap_ab": false,
      "scale": 1.0,
      "padding": [ 8.0, 12.0 ]
    }
  }
}

This overwrites the global config for exported package.

App/Code Font Customization

1. Copy your "*.ttf" font file to the "${INSTALLATION_ROOT}/fonts/" directory
2. Create a "*.json" config under the "${INSTALLATION_ROOT}/themes/" directory, you can name the file whatever you want
3. Fill in with the following content, REPLACE WITH YOUR OWN FONT PATH AND DATA, REMOVE THE COMMENTS between /**/

App font example:

{
  "fonts": [
    {
      "operation": "set",
      "usage": "generic",
      "path": "../fonts/*.ttf",
      "size": 24,
      "ranges": "default",
      "glyph_offset": [ 0, 0 ]
    }
  ]
}

Code font example:

{
  "fonts": [
    {
      "operation": "set",
      "usage": "code",
      "path": "../fonts/*.ttf",
      "size": 24,
      "ranges": "default",
      "glyph_offset": [ 0, 0 ]
    }
  ]
}

Full example:

{
  "fonts": [
    {
      "operation": "merge", /* Merge to the generic app font. */
      "usage": "generic",
      "path": "../fonts/*.ttf",
      "size": 14,
      "ranges": "polish",
      "glyph_offset": [ 0, 0 ]
    },
    {
      "operation": "set", /* Set the code font for ASCII. */
      "usage": "code",
      "path": "../fonts/*.ttf",
      "size": 24,
      "ranges": "default",
      "glyph_offset": [ 0, 0 ]
    },
    {
      "operation": "merge", /* Merge to the code font. */
      "usage": "code",
      "path": "../fonts/*.ttf",
      "size": 24,
      "ranges": "polish",
      "glyph_offset": [ 0, 0 ]
    }
  ]
}

For font customization in-game, see the font example.

Note: it only supports monospaced fonts, and be sure to use "/". You might need to adjust the font size and glyph offset for proper appearance. The "ranges" option supports some built-in localizations including: "default", "chinese", "cyrillic", "japanese", "korean", "polish", "thai", "vietnamese", and it also supports custom range like "\u0020\u00FF\u0100\u017F\u20A0\u20CF" for Polish + currency symbols, where it stands for:

• U+0020 ~ U+00FF: basic Latin + Latin supplement
• U+0100 ~ U+017F: Polish alphabet
• U+20A0 ~ U+20CF: currency symbols

App Color Customization

1. Create a "*.json" config under the "${INSTALLATION_ROOT}/themes/" directory, you can name the file whatever you want
2. Fill in with the following content, REPLACE WITH YOUR OWN FONT PATH AND DATA, REMOVE THE COMMENTS between /**/

App color example:

{
  "colors": {
    "all": {
      "text": [ 0, 0, 0, 255 ],
      "text_disabled": [ 255, 255, 255, 255 ],
      "window_background": [ 255, 255, 255, 255 ],
      "child_background": [ 255, 255, 255, 255 ],
      "popup_background": [ 255, 255, 255, 255 ],
      "border": [ 255, 255, 255, 255 ],
      "border_shadow": [ 255, 255, 255, 255 ],
      "frame_background": [ 255, 255, 255, 255 ],
      "frame_background_hovered": [ 255, 255, 255, 255 ],
      "frame_background_active": [ 255, 255, 255, 255 ],
      "title_background": [ 255, 255, 255, 255 ],
      "title_background_active": [ 255, 255, 255, 255 ],
      "title_background_collapsed": [ 255, 255, 255, 255 ],
      "menu_bar_background": [ 255, 255, 255, 255 ],
      "scrollbar_background": [ 255, 255, 255, 255 ],
      "scrollbar_grab": [ 255, 255, 255, 255 ],
      "scrollbar_grab_hovered": [ 255, 255, 255, 255 ],
      "scrollbar_grab_active": [ 255, 255, 255, 255 ],
      "check_mark": [ 255, 255, 255, 255 ],
      "slider_grab": [ 255, 255, 255, 255 ],
      "slider_grab_active": [ 255, 255, 255, 255 ],
      "button": [ 255, 255, 255, 255 ],
      "button_hovered": [ 255, 255, 255, 255 ],
      "button_active": [ 255, 255, 255, 255 ],
      "header": [ 255, 255, 255, 255 ],
      "header_hovered": [ 255, 255, 255, 255 ],
      "header_active": [ 255, 255, 255, 255 ],
      "separator": [ 255, 255, 255, 255 ],
      "separator_hovered": [ 255, 255, 255, 255 ],
      "separator_active": [ 255, 255, 255, 255 ],
      "resize_grip": [ 255, 255, 255, 255 ],
      "resize_grip_hovered": [ 255, 255, 255, 255 ],
      "resize_grip_active": [ 255, 255, 255, 255 ],
      "tab": [ 255, 255, 255, 255 ],
      "tab_hovered": [ 255, 255, 255, 255 ],
      "tab_active": [ 255, 255, 255, 255 ],
      "tab_unfocused": [ 255, 255, 255, 255 ],
      "tab_unfocused_active": [ 255, 255, 255, 255 ],
      "plot_lines": [ 255, 255, 255, 255 ],
      "plot_lines_hovered": [ 255, 255, 255, 255 ],
      "plot_histogram": [ 255, 255, 255, 255 ],
      "plot_histogram_hovered": [ 255, 255, 255, 255 ],
      "table_header_background": [ 255, 255, 255, 255 ],
      "table_border_strong": [ 255, 255, 255, 255 ],
      "table_border_light": [ 255, 255, 255, 255 ],
      "table_row_background": [ 255, 255, 255, 255 ],
      "table_row_background_alt": [ 255, 255, 255, 255 ],
      "text_selected_background": [ 255, 255, 255, 255 ],
      "drag_drop_target": [ 255, 255, 255, 255 ],
      "nav_highlight": [ 255, 255, 255, 255 ],
      "nav_windowing_highlight": [ 255, 255, 255, 255 ],
      "nav_windowing_mask_background": [ 255, 255, 255, 255 ],
      "window_mask_background": [ 255, 255, 255, 255 ],
      "tab_text": [ 255, 255, 255, 255 ],
      "tab_text_pending": [ 255, 255, 255, 255 ],
      "tab_pending": [ 255, 255, 255, 255 ],
      "tab_pending_hovered": [ 255, 255, 255, 255 ],
      "icon": [ 255, 255, 255, 255 ],
      "icon_disabled": [ 255, 255, 255, 255 ],
      "message": [ 255, 255, 255, 255 ],
      "warning": [ 255, 255, 255, 255 ],
      "error": [ 255, 255, 255, 255 ]
    }
  }
}

You can pick whatever you need, and delete the rest. Use "dark", "classic", "light" to set the color of a specific theme respectively.

App Padding Customization

To customize or hide the padding images of an exported package, do the following steps.

1. Create a "*.json" config under the "${INSTALLATION_ROOT}/themes/" directory, you can name the file whatever you want
2. Fill in with the following content

App padding example:

{
  "images": {
    "pad_portrait_top": null,
    "pad_portrait_bottom": null,
    "pad_portrait_left": null,
    "pad_portrait_right": null
  }
}

You can also fill in with your own images, just replace null with file path. The path is relative to the executable.