1624 lines
97 KiB
HTML
1624 lines
97 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<title>GUI Customization Guide — Ren'Py Documentation</title>
|
|||
|
|
<link rel="stylesheet" href="_static/renpydoc.css" type="text/css" />
|
|||
|
|
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="_static/bootstrap-3.3.6/css/bootstrap.min.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="_static/bootstrap-3.3.6/css/bootstrap-theme.min.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="_static/bootstrap-sphinx.css" />
|
|||
|
|
<script type="text/javascript" id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/jquery.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/underscore.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/doctools.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/language_data.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/js/jquery-1.11.0.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/js/jquery-fix.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/bootstrap-3.3.6/js/bootstrap.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/bootstrap-sphinx.js"></script>
|
|||
|
|
<link rel="index" title="Index" href="genindex.html" />
|
|||
|
|
<link rel="search" title="Search" href="search.html" />
|
|||
|
|
<link rel="next" title="Language Basics" href="language_basics.html" />
|
|||
|
|
<link rel="prev" title="Quickstart" href="quickstart.html" />
|
|||
|
|
<meta charset='utf-8'>
|
|||
|
|
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
|
|||
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1'>
|
|||
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|||
|
|
|
|||
|
|
</head><body>
|
|||
|
|
|
|||
|
|
<div id="navbar" class="navbar navbar-default navbar-fixed-top">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="navbar-header">
|
|||
|
|
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
|
|||
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
|
|||
|
|
<span class="icon-bar"></span>
|
|||
|
|
<span class="icon-bar"></span>
|
|||
|
|
<span class="icon-bar"></span>
|
|||
|
|
</button>
|
|||
|
|
<a class="navbar-brand" href="index.html">
|
|||
|
|
Ren'Py Documentation</a>
|
|||
|
|
<span class="navbar-text navbar-version pull-left"><b>7.5.3</b></span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="collapse navbar-collapse nav-collapse">
|
|||
|
|
<ul class="nav navbar-nav">
|
|||
|
|
|
|||
|
|
<li><a href="https://www.renpy.org">Home Page</a></li>
|
|||
|
|
<li><a href="https://www.renpy.org/doc/html/">Online Documentation</a></li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="dropdown globaltoc-container">
|
|||
|
|
<a role="button"
|
|||
|
|
id="dLabelGlobalToc"
|
|||
|
|
data-toggle="dropdown"
|
|||
|
|
data-target="#"
|
|||
|
|
href="index.html">Site <b class="caret"></b></a>
|
|||
|
|
<ul class="dropdown-menu globaltoc"
|
|||
|
|
role="menu"
|
|||
|
|
aria-labelledby="dLabelGlobalToc"><ul class="current">
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="quickstart.html">Quickstart</a></li>
|
|||
|
|
<li class="toctree-l1 current"><a class="current reference internal" href="#">GUI Customization Guide</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="language_basics.html">Language Basics</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="label.html">Labels & Control Flow</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="dialogue.html">Dialogue and Narration</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="displaying_images.html">Displaying Images</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="menus.html">In-Game Menus</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="python.html">Python Statements</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="conditional.html">Conditional Statements</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="audio.html">Audio</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="movie.html">Movie</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="voice.html">Voice</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="text.html">Text</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="translation.html">Translation</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="displayables.html">Displayables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="transforms.html">Transforms</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="transitions.html">Transitions</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="atl.html">Animation and Transformation Language</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="matrixcolor.html">Matrixcolor</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="layeredimage.html">Layered Images</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="3dstage.html">3D Stage</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="live2d.html">Live2D Cubism</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="style.html">Styles</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="style_properties.html">Style Properties</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screens.html">Screens and Screen Language</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screen_actions.html">Screen Actions, Values, and Functions</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screen_special.html">Special Screen Names</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screen_optimization.html">Screen Language Optimization</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="config.html">Configuration Variables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="preferences.html">Preference Variables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="store_variables.html">Store Variables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="mouse.html">Custom Mouse Cursors</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="launcher.html">Launcher</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="developer_tools.html">Developer Tools</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="director.html">Interactive Director</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="nvl_mode.html">NVL-Mode Tutorial</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="input.html">Text Input</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="side_image.html">Side Images</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="rooms.html">Image Gallery, Music Room, and Replay Actions</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="drag_drop.html">Drag and Drop</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="sprites.html">Sprites</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="keymap.html">Customizing the Keymap</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="achievement.html">Achievements</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="history.html">Dialogue History</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="multiple.html">Multiple Character Dialogue</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="splashscreen_presplash.html">Splashscreen and Presplash</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="statement_equivalents.html">Statement Equivalents</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="save_load_rollback.html">Saving, Loading, and Rollback</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="persistent.html">Persistent Data</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="trans_trans_python.html">Transforms and Transitions in Python</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="gui_advanced.html">Advanced GUI</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screen_python.html">Screens and Python</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="modes.html">Modes</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="cdd.html">Creator-Defined Displayables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="cds.html">Creator-Defined Statements</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="custom_text_tags.html">Custom Text Tags</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="character_callbacks.html">Character Callbacks</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="file_python.html">File Access</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="color_class.html">Color Class</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="matrix.html">Matrix</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="model.html">Model-Based Rendering</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="other.html">Other Functions and Variables</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="build.html">Building Distributions</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="updater.html">Web Updater</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="android.html">Android</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="chromeos.html">Chrome OS/Chromebook</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="ios.html">iOS</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="iap.html">In-App Purchasing</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="gesture.html">Gestures</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="raspi.html">Raspberry Pi</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="security.html">Security</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="problems.html">Dealing with Problems</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="environment_variables.html">Environment Variables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="self_voicing.html">Self-Voicing</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="editor.html">Text Editor Integration</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="skins.html">Skins</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="translating_renpy.html">Translating Ren'Py</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="changelog.html">Changelog (Ren'Py 7.x-)</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="changelog6.html">Changelog (Ren'Py 6.11 - 6.99)</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="incompatible.html">Incompatible Changes</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="distributor.html">Distributor Notes</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="license.html">License</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="credits.html">Credits</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="sponsors.html">Ren'Py Development Sponsors</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="thequestion.html">Script of The Question</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="thequestion_nvl.html">NVL-mode script for The Question</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<form class="navbar-form navbar-right" action="search.html" method="get">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<input type="text" name="q" class="form-control" placeholder="Search" />
|
|||
|
|
</div>
|
|||
|
|
<input type="hidden" name="check_keywords" value="yes" />
|
|||
|
|
<input type="hidden" name="area" value="default" />
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-3">
|
|||
|
|
<div id="sidebar" class="bs-sidenav" role="complementary"><ul>
|
|||
|
|
<li><a class="reference internal" href="#">GUI Customization Guide</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#simple-gui-customization">Simple GUI Customization</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#change-size-and-colors">Change Size and Colors</a></li>
|
|||
|
|
<li><a class="reference internal" href="#options-rpy">Options.rpy</a></li>
|
|||
|
|
<li><a class="reference internal" href="#game-and-main-menu-background-images">Game and Main Menu Background Images</a></li>
|
|||
|
|
<li><a class="reference internal" href="#window-icon">Window Icon</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li><a class="reference internal" href="#intermediate-gui-customization">Intermediate GUI Customization</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#dialogue">Dialogue</a></li>
|
|||
|
|
<li><a class="reference internal" href="#choice-menus">Choice Menus</a></li>
|
|||
|
|
<li><a class="reference internal" href="#overlay-images">Overlay Images</a></li>
|
|||
|
|
<li><a class="reference internal" href="#colors-fonts-and-font-sizes">Colors, Fonts, and Font Sizes</a></li>
|
|||
|
|
<li><a class="reference internal" href="#borders">Borders</a></li>
|
|||
|
|
<li><a class="reference internal" href="#buttons">Buttons</a></li>
|
|||
|
|
<li><a class="reference internal" href="#save-slot-buttons">Save Slot Buttons</a></li>
|
|||
|
|
<li><a class="reference internal" href="#sliders">Sliders</a></li>
|
|||
|
|
<li><a class="reference internal" href="#scrollbars">Scrollbars</a></li>
|
|||
|
|
<li><a class="reference internal" href="#bars">Bars</a></li>
|
|||
|
|
<li><a class="reference internal" href="#skip-and-notify">Skip and Notify</a></li>
|
|||
|
|
<li><a class="reference internal" href="#dialogue-continued">Dialogue, Continued</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#textbox">Textbox</a></li>
|
|||
|
|
<li><a class="reference internal" href="#name-and-namebox">Name and Namebox</a></li>
|
|||
|
|
<li><a class="reference internal" href="#id1">Dialogue</a></li>
|
|||
|
|
<li><a class="reference internal" href="#examples">Examples</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li><a class="reference internal" href="#history">History</a></li>
|
|||
|
|
<li><a class="reference internal" href="#nvl">NVL</a></li>
|
|||
|
|
<li><a class="reference internal" href="#text">Text</a></li>
|
|||
|
|
<li><a class="reference internal" href="#translation-and-gui-variables">Translation and GUI Variables</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li><a class="reference internal" href="#advanced-customization">Advanced Customization</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#styles">Styles</a></li>
|
|||
|
|
<li><a class="reference internal" href="#screens-navigation">Screens - Navigation</a></li>
|
|||
|
|
<li><a class="reference internal" href="#screens-game-menu">Screens - Game Menu</a></li>
|
|||
|
|
<li><a class="reference internal" href="#screens-click-to-continue">Screens - Click to Continue</a></li>
|
|||
|
|
<li><a class="reference internal" href="#total-gui-replacement">Total GUI Replacement</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li><a class="reference internal" href="#see-also">See Also</a></li>
|
|||
|
|
<li><a class="reference internal" href="#incompatible-gui-changes">Incompatible GUI Changes</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#id2">6.99.12.3</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-9 content">
|
|||
|
|
|
|||
|
|
<div class="section" id="gui-customization-guide">
|
|||
|
|
<span id="gui"></span><h1>GUI Customization Guide<a class="headerlink" href="#gui-customization-guide" title="Permalink to this headline"> link</a></h1>
|
|||
|
|
<div class="admonition note">
|
|||
|
|
<p class="first admonition-title">Note</p>
|
|||
|
|
<p class="last">This version of the documentation has the images omitted to
|
|||
|
|
save space. To view the full version, please visit
|
|||
|
|
<a class="reference external" href="https://www.renpy.org/doc/html/gui.html">https://www.renpy.org/doc/html/gui.html</a></p>
|
|||
|
|
</div>
|
|||
|
|
<p>Ren'Py features a GUI system that (we hope) looks attractive out of the box,
|
|||
|
|
can be customized somewhat, and can be replaced entirely if necessary. This
|
|||
|
|
page explains how to do simple and intermediate levels of GUI customization.</p>
|
|||
|
|
<p>For more advanced customization, please take a look at the documentation for
|
|||
|
|
<a class="reference internal" href="style.html"><span class="doc">styles</span></a> (including the list of <a class="reference internal" href="style_properties.html"><span class="doc">style properties</span></a>)
|
|||
|
|
and <a class="reference internal" href="screens.html"><span class="doc">screens</span></a> (including <a class="reference internal" href="screen_actions.html"><span class="doc">screen actions</span></a>
|
|||
|
|
and <a class="reference internal" href="screen_special.html"><span class="doc">special screens</span></a>).</p>
|
|||
|
|
<p>This assumes that you're using a new-style Ren'Py GUI (contained in the gui.rpy
|
|||
|
|
file). Older GUIs (that use the screens.rpy file) should be treated as advanced
|
|||
|
|
GUI customization for the purposes of this guide.</p>
|
|||
|
|
<div class="section" id="simple-gui-customization">
|
|||
|
|
<h2>Simple GUI Customization<a class="headerlink" href="#simple-gui-customization" title="Permalink to this headline"> link</a></h2>
|
|||
|
|
<p>There are a few simple pieces of GUI customization that make sense for
|
|||
|
|
all but the simplest visual novels. What these customizations have in
|
|||
|
|
common is that they do not require editing gui.rpy. These customizations
|
|||
|
|
change the GUI somewhat, but do not drastically change the look of the
|
|||
|
|
GUI.</p>
|
|||
|
|
<div class="section" id="change-size-and-colors">
|
|||
|
|
<h3>Change Size and Colors<a class="headerlink" href="#change-size-and-colors" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The easiest thing to change about the GUI is to change the size and
|
|||
|
|
color of the GUI. Ren'Py will prompt you to make these choices when
|
|||
|
|
you first create a project, but choosing "Change/Update GUI" in the
|
|||
|
|
launcher will let you change your choice.</p>
|
|||
|
|
<p>When changing the GUI through the launcher, Ren'Py will prompt if you
|
|||
|
|
want to simply change the launcher, or update gui.rpy. Both choices
|
|||
|
|
will overwrite most image files, and overwriting gui.rpy will get rid
|
|||
|
|
of changes to that file.</p>
|
|||
|
|
<p>As a result, you probably want to do this before any other customization.</p>
|
|||
|
|
<p>Ren'Py will prompt for the default resolution of the project, and then
|
|||
|
|
also for the color scheme to use. Once you select those, it will update
|
|||
|
|
the GUI to match your choices.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="options-rpy">
|
|||
|
|
<h3>Options.rpy<a class="headerlink" href="#options-rpy" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>There are a couple of variables in options.rpy that are used by the
|
|||
|
|
GUI.</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt><a class="reference internal" href="config.html#var-config.name"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.name</span></code></a></dt>
|
|||
|
|
<dd>A string giving a human-readable name for the game. This is used as the
|
|||
|
|
window title, and throughout the GUI wherever the title of the
|
|||
|
|
game is needed.</dd>
|
|||
|
|
<dt><code class="xref std std-var docutils literal notranslate"><span class="pre">gui.show_name</span></code></dt>
|
|||
|
|
<dd>This should be set to False to hide the title and version number from
|
|||
|
|
the main menu. (Say, because the title is "baked into" the main menu
|
|||
|
|
image.)</dd>
|
|||
|
|
<dt><a class="reference internal" href="config.html#var-config.version"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.version</span></code></a></dt>
|
|||
|
|
<dd>A string giving the version of the game. This is presented to the
|
|||
|
|
user in various places in the default GUI. It has other uses apart
|
|||
|
|
from that, such as error messages or tracebacks.</dd>
|
|||
|
|
<dt><code class="xref std std-var docutils literal notranslate"><span class="pre">gui.about</span></code></dt>
|
|||
|
|
<dd>Additional text that is added to the about screen. If you want multiple
|
|||
|
|
paragraphs of credits, \n\n can be used to separate the paragraphs.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>Here's an example of these defines:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">config</span><span class="o">.</span><span class="n">name</span> <span class="o">=</span> <span class="n">_</span><span class="p">(</span><span class="s1">'Old School High School'</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">show_name</span> <span class="o">=</span> <span class="kc">True</span>
|
|||
|
|
|
|||
|
|
<span class="k">define</span> <span class="n">config</span><span class="o">.</span><span class="n">version</span> <span class="o">=</span> <span class="s2">"1.0"</span>
|
|||
|
|
|
|||
|
|
<span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">about</span> <span class="o">=</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Created by PyTom.</span><span class="se">\n\n</span><span class="s2">High school backgrounds by Mugenjohncel."</span><span class="p">)</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>For convenience, it might make sense to define gui.about using a triple-quoted
|
|||
|
|
string, in which case line endings are respected.</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">about</span> <span class="o">=</span> <span class="n">_</span><span class="p">(</span><span class="s2">"""</span><span class="se">\</span>
|
|||
|
|
<span class="s2">Created by PyTom.</span>
|
|||
|
|
|
|||
|
|
<span class="s2">High school backgrounds by Mugenjohncel."""</span><span class="p">)</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="game-and-main-menu-background-images">
|
|||
|
|
<h3>Game and Main Menu Background Images<a class="headerlink" href="#game-and-main-menu-background-images" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The images used by the GUI can be found in the game/gui directory,
|
|||
|
|
which can be opened by choosing "Open Directory: gui" from the
|
|||
|
|
launcher. The relevant files are:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/main_menu.png</dt>
|
|||
|
|
<dd>A file that contains an image that is used in the background of
|
|||
|
|
all screens of the main menu.</dd>
|
|||
|
|
<dt>gui/game_menu.png</dt>
|
|||
|
|
<dd>A file that contains an image that is used in the background of
|
|||
|
|
all screens of the game menu.</dd>
|
|||
|
|
</dl>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="window-icon">
|
|||
|
|
<h3>Window Icon<a class="headerlink" href="#window-icon" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The window icon is the icon that is displayed (in places like the Windows
|
|||
|
|
task bar and Macintosh dock) by a running application.</p>
|
|||
|
|
<p>The window icon can be changed by replacing gui/window_icon.png.</p>
|
|||
|
|
<p>Note that this only changes the icon used by the running game. To change
|
|||
|
|
the icon used by Windows .exe files and Macintosh applications, see the
|
|||
|
|
<a class="reference internal" href="build.html#special-files"><span class="std std-ref">build documentation</span></a>.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="intermediate-gui-customization">
|
|||
|
|
<h2>Intermediate GUI Customization<a class="headerlink" href="#intermediate-gui-customization" title="Permalink to this headline"> link</a></h2>
|
|||
|
|
<p>Next, we will demonstrate the intermediate level of GUI customization.
|
|||
|
|
At the intermediate level, it's possible to change the colors, fonts,
|
|||
|
|
and images used by the game. In general, intermediate customization
|
|||
|
|
keeps the screens mostly the same, with buttons and bars in the same
|
|||
|
|
places, although modifying the screens to add new functionality
|
|||
|
|
is certainly possible.</p>
|
|||
|
|
<p>Many of these changes involve editing variables in gui.rpy. For example,
|
|||
|
|
to increase the dialogue font size, find the line that reads:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="na">text_size</span> <span class="o">=</span> <span class="mi">22</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>and increase or decrease it, for example, to:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="na">text_size</span> <span class="o">=</span> <span class="mi">20</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>Note that the default values are often different than what's found in
|
|||
|
|
this documentation. The default values can changed based on size and
|
|||
|
|
colors selected for the game, and the values in this file are an example
|
|||
|
|
of extensive GUI customization. It's best to search gui.rpy for define and
|
|||
|
|
the variable in question – for example, "define gui.text_size".</p>
|
|||
|
|
<p>Some of the adjustments below either partially or completely effect image
|
|||
|
|
files. As a result, the changes only take effect when the image files
|
|||
|
|
themselves are updated, which can be done by choosing "Change GUI" in
|
|||
|
|
the launcher, and telling it to regenerate image files. (But note that
|
|||
|
|
doing so will overwrite any image files you have already modified.)</p>
|
|||
|
|
<p>You may want to consider waiting until your game is nearly complete before
|
|||
|
|
customizing gui.rpy in this way. While old gui.rpys will work in newer
|
|||
|
|
Ren'Py versions, newer gui.rpys may have features and fixes that older
|
|||
|
|
versions lack. Customizing the GUI early may make it harder to take
|
|||
|
|
advantage of such improvements.</p>
|
|||
|
|
<div class="section" id="dialogue">
|
|||
|
|
<h3>Dialogue<a class="headerlink" href="#dialogue" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>There are a number of relatively easy customizations that can be performed
|
|||
|
|
to change how dialogue is displayed to the player. The first is changing
|
|||
|
|
the textbox.</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/textbox.png</dt>
|
|||
|
|
<dd>This file contains the background of the text window, displayed as part
|
|||
|
|
of the say screen. While this should be the full width of the game, text
|
|||
|
|
is only displayed in the central 60% of the screen, with a 20% border
|
|||
|
|
on either side.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>In addition, there are a number of variables that can be customized to change
|
|||
|
|
dialogue.</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.text_color">
|
|||
|
|
define <code class="descname">gui.text_color</code> = "#402000"<a class="headerlink" href="#var-gui.text_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>This sets the color of the dialogue text.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.text_font">
|
|||
|
|
define <code class="descname">gui.text_font</code> = "ArchitectsDaughter.ttf"<a class="headerlink" href="#var-gui.text_font" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>This sets the font that is used for dialogue text, menus, inputs, and
|
|||
|
|
other in-game text. The font file should exist in the game directory.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.text_size">
|
|||
|
|
define <code class="descname">gui.text_size</code> = 33<a class="headerlink" href="#var-gui.text_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Sets the size of the dialogue text. This may need to be increased or
|
|||
|
|
decreased to fit the selected font in the space allotted.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.name_text_size">
|
|||
|
|
define <code class="descname">gui.name_text_size</code> = 45<a class="headerlink" href="#var-gui.name_text_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Sets the size of character names.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.textbox_height">
|
|||
|
|
define <code class="descname">gui.textbox_height</code> = 278<a class="headerlink" href="#var-gui.textbox_height" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The height of the textbox. This should be the same height as the height
|
|||
|
|
of gui/textbox.png.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<p>By default, the character name label uses the accent color. The color can
|
|||
|
|
be easily changed when defining a character:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">e</span> <span class="o">=</span> <span class="n">Character</span><span class="p">(</span><span class="s2">"Eileen"</span><span class="p">,</span> <span class="n">who_color</span><span class="o">=</span><span class="s2">"#104010"</span><span class="p">)</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="choice-menus">
|
|||
|
|
<h3>Choice Menus<a class="headerlink" href="#choice-menus" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The choice screen is used by the menu statement to display choices to
|
|||
|
|
the player. Again, there are some relatively easy customizations that
|
|||
|
|
can be performed on the choice screen. The first are the two image
|
|||
|
|
files:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/button/choice_idle_background.png</dt>
|
|||
|
|
<dd>This image is used as the background of choice buttons that are not
|
|||
|
|
focused.</dd>
|
|||
|
|
<dt>gui/button/choice_hover_background.png</dt>
|
|||
|
|
<dd>This image is used as the background of choice buttons that are focused.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>By default, text is placed in the central 75% of these images. There are
|
|||
|
|
also a couple of variables that control the color of the text in choice
|
|||
|
|
buttons.</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.choice_button_text_idle_color">
|
|||
|
|
define <code class="descname">gui.choice_button_text_idle_color</code> = '#888888'<a class="headerlink" href="#var-gui.choice_button_text_idle_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The color used for the text of unfocused choice buttons.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.choice_text_hover_color">
|
|||
|
|
define <code class="descname">gui.choice_text_hover_color</code> = '#0066cc'<a class="headerlink" href="#var-gui.choice_text_hover_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The color used for the text of focused choice buttons.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<p>These should suffice for simple customization, where the size of the images
|
|||
|
|
does not need to be changed. For more complex customizations, check out the
|
|||
|
|
section on buttons, below.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="overlay-images">
|
|||
|
|
<h3>Overlay Images<a class="headerlink" href="#overlay-images" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>There are also a pair of overlay images. These are used to darken or
|
|||
|
|
lighten the background image to make buttons and other user interface
|
|||
|
|
components more readable. These images are in the overlay directory:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/overlay/main_menu.png</dt>
|
|||
|
|
<dd>The overlay used by the main menu screen.</dd>
|
|||
|
|
<dt>gui/overlay/game_menu.png</dt>
|
|||
|
|
<dd>The overlay used by game-menu-like screens, including load, save,
|
|||
|
|
preferences, about, help, etc. This overlay is selected by the
|
|||
|
|
screen in question, and is used even when at the main menu.</dd>
|
|||
|
|
<dt>gui/overlay/confirm.png</dt>
|
|||
|
|
<dd>The overlay used in the confirm screen to darken the background.</dd>
|
|||
|
|
</dl>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="colors-fonts-and-font-sizes">
|
|||
|
|
<h3>Colors, Fonts, and Font Sizes<a class="headerlink" href="#colors-fonts-and-font-sizes" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>There are a number of GUI variables that can be used to change the color, font,
|
|||
|
|
and size of text.</p>
|
|||
|
|
<p>These variables should generally be set to hexadecimal color codes, which are
|
|||
|
|
are strings of the form "#rrggbb" (or "#rrggbbaa" to specify an alpha component),
|
|||
|
|
similar to color codes used by web browsers. For example, "#663399" is the code
|
|||
|
|
for a shade of <a href="http://www.economist.com/blogs/babbage/2014/06/digital-remembrance" style="text-decoration: none; color: rebeccapurple">purple</a>.
|
|||
|
|
There are many tools online that let you create HTML color codes, such as
|
|||
|
|
<a href="http://htmlcolorcodes.com/color-picker/">this one</a>.</p><p>In addition to <a class="reference internal" href="#var-gui.text_color"><code class="xref std std-var docutils literal notranslate"><span class="pre">gui.text_color</span></code></a>, <code class="xref std std-var docutils literal notranslate"><span class="pre">gui.choice_idle_color</span></code>, and <code class="xref std std-var docutils literal notranslate"><span class="pre">gui.choice_hover_color</span></code>,
|
|||
|
|
documented above, the following variables exist:</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.accent_color">
|
|||
|
|
define <code class="descname">gui.accent_color</code> = '#000060'<a class="headerlink" href="#var-gui.accent_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The accent color is used in many places in the GUI, including titles
|
|||
|
|
and labels.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.idle_color">
|
|||
|
|
define <code class="descname">gui.idle_color</code> = '#606060'<a class="headerlink" href="#var-gui.idle_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The color used for most buttons when not focused or selected.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.idle_small_color">
|
|||
|
|
define <code class="descname">gui.idle_small_color</code> = '#404040'<a class="headerlink" href="#var-gui.idle_small_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The color used for small text (like the date and name of a save slot,
|
|||
|
|
and quick menu buttons) when not hovered. This color often needs to be a
|
|||
|
|
bit lighter or darker than idle_color to compensate for the smaller size
|
|||
|
|
of the font.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.hover_color">
|
|||
|
|
define <code class="descname">gui.hover_color</code> = '#3284d6'<a class="headerlink" href="#var-gui.hover_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The color used by focused items in the GUI, including the text of
|
|||
|
|
of buttons and the thumbs (movable areas) of sliders and scrollbars.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.selected_color">
|
|||
|
|
define <code class="descname">gui.selected_color</code> = '#555555'<a class="headerlink" href="#var-gui.selected_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The color used by the text of selected buttons. (This takes priority
|
|||
|
|
over the hover and idle colors.)</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.insensitive_color">
|
|||
|
|
define <code class="descname">gui.insensitive_color</code> = '#8888887f'<a class="headerlink" href="#var-gui.insensitive_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The color used by the text of buttons that are insensitive to user input.
|
|||
|
|
(For example, the rollback button when no rollback is possible.)</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.interface_text_color">
|
|||
|
|
define <code class="descname">gui.interface_text_color</code> = '#404040'<a class="headerlink" href="#var-gui.interface_text_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The color used by static text in the game interface, such as text on the
|
|||
|
|
help and about screens.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.muted_color">
|
|||
|
|
define <code class="descname">gui.muted_color</code> = '#6080d0'<a class="headerlink" href="#var-gui.muted_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.hover_muted_color">
|
|||
|
|
define <code class="descname">gui.hover_muted_color</code> = '#8080f0'<a class="headerlink" href="#var-gui.hover_muted_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Muted colors, used for the sections of bars, scrollbars, and sliders that
|
|||
|
|
do not represent the value or visible area. (These are only used when
|
|||
|
|
generating images, and will not take effect until images are regenerated
|
|||
|
|
in the launcher.)</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<p>In additional to <a class="reference internal" href="#var-gui.text_font"><code class="xref std std-var docutils literal notranslate"><span class="pre">gui.text_font</span></code></a>, the following variables selects the
|
|||
|
|
fonts used for text. These fonts should also be placed in the game directory.</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.interface_text_font">
|
|||
|
|
define <code class="descname">gui.interface_text_font</code> = "ArchitectsDaughter.ttf"<a class="headerlink" href="#var-gui.interface_text_font" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The font used for text for user interface elements, like the main and
|
|||
|
|
game menus, buttons, and so on.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.glyph_font">
|
|||
|
|
define <code class="descname">gui.glyph_font</code> = "DejaVuSans.ttf"<a class="headerlink" href="#var-gui.glyph_font" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>A font used for certain glyphs, such as the arrow glyphs used by the skip
|
|||
|
|
indicator. DejaVuSans is a reasonable default for these glyphs, and is
|
|||
|
|
automatically included with every Ren'Py game.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<p>In addition to <a class="reference internal" href="#var-gui.text_size"><code class="xref std std-var docutils literal notranslate"><span class="pre">gui.text_size</span></code></a> and <a class="reference internal" href="#var-gui.name_text_size"><code class="xref std std-var docutils literal notranslate"><span class="pre">gui.name_text_size</span></code></a>, the following
|
|||
|
|
variables control text sizes.</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.interface_text_size">
|
|||
|
|
define <code class="descname">gui.interface_text_size</code> = 36<a class="headerlink" href="#var-gui.interface_text_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The size of static text in the game's user interface, and the default size
|
|||
|
|
of button text in the game's interface.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.label_text_size">
|
|||
|
|
define <code class="descname">gui.label_text_size</code> = 45<a class="headerlink" href="#var-gui.label_text_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The size of section labels in the game's user interface.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.notify_text_size">
|
|||
|
|
define <code class="descname">gui.notify_text_size</code> = 24<a class="headerlink" href="#var-gui.notify_text_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The size of notification text.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.title_text_size">
|
|||
|
|
define <code class="descname">gui.title_text_size</code> = 75<a class="headerlink" href="#var-gui.title_text_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The size of the game's title.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="borders">
|
|||
|
|
<h3>Borders<a class="headerlink" href="#borders" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>There are a number of GUI components – such as buttons and bars – that use
|
|||
|
|
scalable backgrounds configured using Border objects. Before discussing,
|
|||
|
|
how to customize buttons and bars, we'll first describe how this works.</p>
|
|||
|
|
<p>Borders are given to the <a class="reference internal" href="displayables.html#Frame" title="Frame"><code class="xref py py-func docutils literal notranslate"><span class="pre">Frame()</span></code></a> displayable.
|
|||
|
|
A Frame takes an image, and divides it into nine parts – the four corners,
|
|||
|
|
the four sides, and the center. The corners always remain the same size,
|
|||
|
|
the left and right sides are stretched vertically, the top and bottom sides
|
|||
|
|
are stretched horizontally, and the center is stretched in both directions.</p>
|
|||
|
|
<p>A Borders object gives the size of each of the borders, in left, top, right,
|
|||
|
|
bottom order. So if the following border image is used:</p>
|
|||
|
|
<img alt="_images/borders.png" src="_images/borders.png" />
|
|||
|
|
<p>along with the following borders:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="n">Borders</span><span class="p">(</span><span class="mi">40</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">40</span><span class="p">)</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>one possible result is this:</p>
|
|||
|
|
<img alt="_images/borders1.png" src="_images/borders1.png" />
|
|||
|
|
<p>As the child changes size, so will the background.</p>
|
|||
|
|
<p>A Border object can also be given padding, including negative padding that
|
|||
|
|
causes the child to overlap the borders. For example, these borders:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="n">Borders</span><span class="p">(</span><span class="mi">40</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">)</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>allow the child to overlap the sides. Note that due to this overlap, the
|
|||
|
|
result is smaller, since the borders themselves now take up less space.</p>
|
|||
|
|
<img alt="_images/borders2.png" src="_images/borders2.png" />
|
|||
|
|
<p>Borders can also be tiled, rather than scaled. This is invoked by variables,
|
|||
|
|
and produces this result.</p>
|
|||
|
|
<img alt="_images/borders3.png" src="_images/borders3.png" />
|
|||
|
|
<p>These example images are a bit ugly, since we need to show what's going on.
|
|||
|
|
In practice, this system can produce quite pleasing results. This is the case when
|
|||
|
|
a Frame displayable is used as the background of a frame window holding
|
|||
|
|
user interface components.</p>
|
|||
|
|
<p>These frame windows can be customized in two ways. The first is by changing the
|
|||
|
|
background image file:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/frame.png</dt>
|
|||
|
|
<dd>The image used as the background of frames windows.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>And the second is by customizing variables.</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.frame_borders">
|
|||
|
|
define <code class="descname">gui.frame_borders</code> = Borders(15, 15, 15, 15)<a class="headerlink" href="#var-gui.frame_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders applied to frame windows.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.confirm_frame_borders">
|
|||
|
|
define <code class="descname">gui.confirm_frame_borders</code> = Borders(60, 60, 60, 60)<a class="headerlink" href="#var-gui.confirm_frame_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders applied to the fame used in the confirm screen.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.frame_tile">
|
|||
|
|
define <code class="descname">gui.frame_tile</code> = True<a class="headerlink" href="#var-gui.frame_tile" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>If true, the sides and center of the confirm screen are tiled. If false,
|
|||
|
|
they are scaled.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="buttons">
|
|||
|
|
<h3>Buttons<a class="headerlink" href="#buttons" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The Ren'Py user interface includes a large number of buttons, buttons
|
|||
|
|
that come in different sizes and that are used for different purposes.
|
|||
|
|
The various kinds of buttons are:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>button</dt>
|
|||
|
|
<dd>A basic button. Used for navigation within the user interface.</dd>
|
|||
|
|
<dt>choice_button</dt>
|
|||
|
|
<dd>A button used for choices in the in-game menu.</dd>
|
|||
|
|
<dt>quick_button</dt>
|
|||
|
|
<dd>A button, displayed in-game, that is intended to allow quick access
|
|||
|
|
to the game menu.</dd>
|
|||
|
|
<dt>navigation_button</dt>
|
|||
|
|
<dd>A button used in main and game menu for navigation between screens,
|
|||
|
|
and to start the game.</dd>
|
|||
|
|
<dt>page_button</dt>
|
|||
|
|
<dd>A button used to switch between pages on the load and save screens.</dd>
|
|||
|
|
<dt>slot_button</dt>
|
|||
|
|
<dd>Buttons that represent file slots, and contain a thumbnail, the save
|
|||
|
|
time, and an optional save name. These are described in more detail
|
|||
|
|
below.</dd>
|
|||
|
|
<dt>radio_button</dt>
|
|||
|
|
<dd>A button used for multiple-choice preferences on the preferences
|
|||
|
|
screen.</dd>
|
|||
|
|
<dt>check_button</dt>
|
|||
|
|
<dd>A button used for toggleable preferences on the preferences screen.</dd>
|
|||
|
|
<dt>test_button</dt>
|
|||
|
|
<dd>A button used to test audio playback on the preferences screen. This
|
|||
|
|
should be the same height as a horizontal slider.</dd>
|
|||
|
|
<dt>help_button</dt>
|
|||
|
|
<dd>A button used to select what kind of help the player wants.</dd>
|
|||
|
|
<dt>confirm_button</dt>
|
|||
|
|
<dd>A button used on the confirm screen to select yes or no.</dd>
|
|||
|
|
<dt>nvl_button</dt>
|
|||
|
|
<dd>A button used for an NVL-mode menu choice.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>The following image files are used to customize button backgrounds,
|
|||
|
|
if they exist.</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/button/idle_background.png</dt>
|
|||
|
|
<dd>The background image used by buttons that are not focused.</dd>
|
|||
|
|
<dt>gui/button/hover_background.png</dt>
|
|||
|
|
<dd>The background image used by buttons that are focused.</dd>
|
|||
|
|
<dt>gui/button/selected_idle_background.png</dt>
|
|||
|
|
<dd>The background image used by buttons that are selected but not
|
|||
|
|
focused. This is optional, and is used in preference to
|
|||
|
|
idle_background.png if it exists.</dd>
|
|||
|
|
<dt>gui/button/selected_hover_background.png</dt>
|
|||
|
|
<dd>The background image used by buttons that are selected but not
|
|||
|
|
focused. This is optional, and is used in preference to
|
|||
|
|
hover_background.png if it exists.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>More specific backgrounds can be given for each kind of button, by
|
|||
|
|
prefixing it with the kind. For example, gui/button/check_idle_background.png
|
|||
|
|
is used as the background of check buttons that are not focused.</p>
|
|||
|
|
<p>Four image files are used as foreground decorations on radio and check
|
|||
|
|
buttons, to indicate if the option is chosen or not.</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/button/check_foreground.png, gui/button/radio_foreground.png</dt>
|
|||
|
|
<dd>These images are used when a check or radio button is not selected.</dd>
|
|||
|
|
<dt>gui/button/check_selected_foreground.png, gui/button/radio_selected_foreground.png</dt>
|
|||
|
|
<dd>These images are used when a check or radio button is selected.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>The following variables set various properties of buttons:</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_width">
|
|||
|
|
define <code class="descname">gui.button_width</code> = None<a class="headerlink" href="#var-gui.button_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_height">
|
|||
|
|
define <code class="descname">gui.button_height</code> = 64<a class="headerlink" href="#var-gui.button_height" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The width and height of a button, in pixels. If None, the size is
|
|||
|
|
automatically determined based on the size of the text inside a button,
|
|||
|
|
and the borders given below.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_borders">
|
|||
|
|
define <code class="descname">gui.button_borders</code> = Borders(10, 10, 10, 10)<a class="headerlink" href="#var-gui.button_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders surrounding a button, in left, top, right, bottom order.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_tile">
|
|||
|
|
define <code class="descname">gui.button_tile</code> = True<a class="headerlink" href="#var-gui.button_tile" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>If true, the sides and center of the button background are tiled to
|
|||
|
|
increase or decrease their size. If false, the sides and center are
|
|||
|
|
scaled.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_text_font">
|
|||
|
|
define <code class="descname">gui.button_text_font</code> = gui.interface_font<a class="headerlink" href="#var-gui.button_text_font" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_text_size">
|
|||
|
|
define <code class="descname">gui.button_text_size</code> = gui.interface_text_size<a class="headerlink" href="#var-gui.button_text_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The font and size of the button text.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_text_idle_color">
|
|||
|
|
define <code class="descname">gui.button_text_idle_color</code> = gui.idle_color<a class="headerlink" href="#var-gui.button_text_idle_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_text_hover_color">
|
|||
|
|
define <code class="descname">gui.button_text_hover_color</code> = gui.hover_color<a class="headerlink" href="#var-gui.button_text_hover_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_text_selected_color">
|
|||
|
|
define <code class="descname">gui.button_text_selected_color</code> = gui.accent_color<a class="headerlink" href="#var-gui.button_text_selected_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_text_insensitive_color">
|
|||
|
|
define <code class="descname">gui.button_text_insensitive_color</code> = gui.insensitive_color<a class="headerlink" href="#var-gui.button_text_insensitive_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The color of the button text in various states.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_text_xalign">
|
|||
|
|
define <code class="descname">gui.button_text_xalign</code> = 0.0<a class="headerlink" href="#var-gui.button_text_xalign" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The horizontal alignment of the button text. 0.0 is left-aligned,
|
|||
|
|
0.5 is centered, and 1.0 is right-aligned.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.button_image_extension">
|
|||
|
|
define <code class="descname">gui.button_image_extension</code> = ".png"<a class="headerlink" href="#var-gui.button_image_extension" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The extension for button images. This could be changed to .webp
|
|||
|
|
to use WEBP button images instead of png ones.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<p>These variables can be prefixed with the button kind to configure a
|
|||
|
|
property for a particular kind of button. For example,
|
|||
|
|
<a class="reference internal" href="#var-gui.choice_button_text_idle_color"><code class="xref std std-var docutils literal notranslate"><span class="pre">gui.choice_button_text_idle_color</span></code></a> configures the color of
|
|||
|
|
an idle choice button.</p>
|
|||
|
|
<p>For example, we customize these variables in our sample game.</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.navigation_button_width">
|
|||
|
|
define <code class="descname">gui.navigation_button_width</code> = 290<a class="headerlink" href="#var-gui.navigation_button_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Increases the width of navigation buttons.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.radio_button_borders">
|
|||
|
|
define <code class="descname">gui.radio_button_borders</code> = Borders(40, 10, 10, 10)<a class="headerlink" href="#var-gui.radio_button_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.check_button_borders">
|
|||
|
|
define <code class="descname">gui.check_button_borders</code> = Borders(40, 10, 10, 10)<a class="headerlink" href="#var-gui.check_button_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Increases the width of radio and check button borders, leaving extra
|
|||
|
|
space on the left for the check mark.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="save-slot-buttons">
|
|||
|
|
<h3>Save Slot Buttons<a class="headerlink" href="#save-slot-buttons" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The load and save screens use slot buttons, which are buttons that present
|
|||
|
|
a thumbnail and information about when the file was saved. The following
|
|||
|
|
variables are quite useful when it comes to customizing the size of
|
|||
|
|
the save slots.</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.slot_button_width">
|
|||
|
|
define <code class="descname">gui.slot_button_width</code> = 414<a class="headerlink" href="#var-gui.slot_button_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.slot_button_height">
|
|||
|
|
define <code class="descname">gui.slot_button_height</code> = 309<a class="headerlink" href="#var-gui.slot_button_height" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The width and height of the save slot button.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.slot_button_borders">
|
|||
|
|
define <code class="descname">gui.slot_button_borders</code> = Borders(15, 15, 15, 15)<a class="headerlink" href="#var-gui.slot_button_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders applied to each save slot.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-config.thumbnail_width">
|
|||
|
|
define <code class="descname">config.thumbnail_width</code> = 384<a class="headerlink" href="#var-config.thumbnail_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-config.thumbnail_height">
|
|||
|
|
define <code class="descname">config.thumbnail_height</code> = 216<a class="headerlink" href="#var-config.thumbnail_height" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The width and height of the save thumbnails. Note that these live in
|
|||
|
|
the config namespace, not the gui namespace. These do not take effect
|
|||
|
|
until the file is saved and loaded.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.file_slot_cols">
|
|||
|
|
define <code class="descname">gui.file_slot_cols</code> = 3<a class="headerlink" href="#var-gui.file_slot_cols" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.file_slot_rows">
|
|||
|
|
define <code class="descname">gui.file_slot_rows</code> = 2<a class="headerlink" href="#var-gui.file_slot_rows" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The number of columns and rows in the grid of save slots.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<p>There are the background images used for save slots.</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/button/slot_idle_background.png</dt>
|
|||
|
|
<dd>The image used for the background of save slots that are not focused.</dd>
|
|||
|
|
<dt>gui/button/slot_hover_background.png</dt>
|
|||
|
|
<dd>The image used for the background of save slots that are focused.</dd>
|
|||
|
|
</dl>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="sliders">
|
|||
|
|
<h3>Sliders<a class="headerlink" href="#sliders" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>Sliders are a type of bar that is used in the preferences screen to
|
|||
|
|
allow the player to adjust preference with a large number of values.
|
|||
|
|
By default, the GUI only uses horizontal sliders, but a game
|
|||
|
|
may also use vertical sliders.</p>
|
|||
|
|
<p>Sliders are customized with the following images:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/slider/horizontal_idle_bar.png, gui/slider/horizontal_hover_bar.png, gui/slider/vertical_idle_bar.png, gui/slider/vertical_hover_bar.png</dt>
|
|||
|
|
<dd>Images used for vertical and idle bar backgrounds in idle and
|
|||
|
|
hover states.</dd>
|
|||
|
|
<dt>gui/slider/horizontal_idle_thumb.png, gui/slider/horizontal_hover_thumb.png, gui/slider/vertical_idle_thumb.png, gui/slider/vertical_hover_thumb.png</dt>
|
|||
|
|
<dd>Images used for the thumb – the movable part of the bar.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>The following variables are also used:</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.slider_size">
|
|||
|
|
define <code class="descname">gui.slider_size</code> = 64<a class="headerlink" href="#var-gui.slider_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The height of horizontal sliders, and width of vertical sliders.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.slider_tile">
|
|||
|
|
define <code class="descname">gui.slider_tile</code> = True<a class="headerlink" href="#var-gui.slider_tile" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>If true, the frame containing the bar of a slider is tiled. If False,
|
|||
|
|
if it scaled.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.slider_borders">
|
|||
|
|
define <code class="descname">gui.slider_borders</code> = Borders(6, 6, 6, 6)<a class="headerlink" href="#var-gui.slider_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.vslider_borders">
|
|||
|
|
define <code class="descname">gui.vslider_borders</code> = Borders(6, 6, 6, 6)<a class="headerlink" href="#var-gui.vslider_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders that are used with the Frame containing the bar image.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="scrollbars">
|
|||
|
|
<h3>Scrollbars<a class="headerlink" href="#scrollbars" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>Scrollbars are bars that are used to scroll viewports. In the GUI,
|
|||
|
|
the most obvious place a scrollbar is used is the history screen,
|
|||
|
|
but vertical scrollbars can be used on other screens as well.</p>
|
|||
|
|
<p>Sliders are customized with the following images:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/scrollbar/horizontal_idle_bar.png, gui/scrollbar/horizontal_hover_bar.png, gui/scrollbar/vertical_idle_bar.png, gui/scrollbar/vertical_hover_bar.png</dt>
|
|||
|
|
<dd>Images used for vertical and idle bar backgrounds in idle and
|
|||
|
|
hover states.</dd>
|
|||
|
|
<dt>gui/scrollbar/horizontal_idle_thumb.png, gui/scrollbar/horizontal_hover_thumb.png, gui/scrollbar/vertical_idle_thumb.png, gui/scrollbar/vertical_hover_thumb.png</dt>
|
|||
|
|
<dd>Images used for the thumb – the movable part of the bar.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>The following variables are also used:</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.scrollbar_size">
|
|||
|
|
define <code class="descname">gui.scrollbar_size</code> = 24<a class="headerlink" href="#var-gui.scrollbar_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The height of horizontal scrollbars, and width of vertical scrollbars.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.scrollbar_tile">
|
|||
|
|
define <code class="descname">gui.scrollbar_tile</code> = True<a class="headerlink" href="#var-gui.scrollbar_tile" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>If true, the frame containing the bar of a scrollbar is tiled. If False,
|
|||
|
|
if it scaled.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.scrollbar_borders">
|
|||
|
|
define <code class="descname">gui.scrollbar_borders</code> = Borders(10, 6, 10, 6)<a class="headerlink" href="#var-gui.scrollbar_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.vscrollbar_borders">
|
|||
|
|
define <code class="descname">gui.vscrollbar_borders</code> = Borders(6, 10, 6, 10)<a class="headerlink" href="#var-gui.vscrollbar_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders that are used with the Frame containing the bar image.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.unscrollable">
|
|||
|
|
define <code class="descname">gui.unscrollable</code> = "hide"<a class="headerlink" href="#var-gui.unscrollable" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>This controls what to do if the bar is unscrollable. "hide" hides
|
|||
|
|
the bar, while None keeps it shown.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="bars">
|
|||
|
|
<h3>Bars<a class="headerlink" href="#bars" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>Plain old bars are used to display a number to the player. They're not
|
|||
|
|
used in the GUI, but can be used in creator-defined screens.</p>
|
|||
|
|
<p>A bar can customized by editing the following images:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/bar/left.png, gui/bar/bottom.png</dt>
|
|||
|
|
<dd>Images that are used for the filled section of horizontal and vertical bars.</dd>
|
|||
|
|
<dt>gui/bar/right.pbg, gui/bar/top.png</dt>
|
|||
|
|
<dd>Images that are used for the filled section of horizontal and vertical bars.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>There are also the usual variables that control bars:</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.bar_size">
|
|||
|
|
define <code class="descname">gui.bar_size</code> = 64<a class="headerlink" href="#var-gui.bar_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The height of horizontal bars, and width of vertical bars.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.bar_tile">
|
|||
|
|
define <code class="descname">gui.bar_tile</code> = False<a class="headerlink" href="#var-gui.bar_tile" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>If true, the bar images are tiled. If false, the images are linearly
|
|||
|
|
scaled.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.bar_borders">
|
|||
|
|
define <code class="descname">gui.bar_borders</code> = Borders(10, 10, 10, 10)<a class="headerlink" href="#var-gui.bar_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.vbar_borders">
|
|||
|
|
define <code class="descname">gui.vbar_borders</code> = Borders(10, 10, 10, 10)<a class="headerlink" href="#var-gui.vbar_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders that are used with the Frames containing the bar images.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="skip-and-notify">
|
|||
|
|
<h3>Skip and Notify<a class="headerlink" href="#skip-and-notify" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The skip and notify screens both display frames with messages in them. Both
|
|||
|
|
use custom frame background images:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/skip.png</dt>
|
|||
|
|
<dd>The background of the skip indicator.</dd>
|
|||
|
|
<dt>gui/notify.png</dt>
|
|||
|
|
<dd>The background of the notify screen.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>The variables that control these are:</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.skip_frame_borders">
|
|||
|
|
define <code class="descname">gui.skip_frame_borders</code> = Borders(24, 8, 75, 8)<a class="headerlink" href="#var-gui.skip_frame_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders of the frame that is used by the skip screen.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.notify_frame_borders">
|
|||
|
|
define <code class="descname">gui.notify_frame_borders</code> = Borders(24, 8, 60, 8)<a class="headerlink" href="#var-gui.notify_frame_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders of the frame that is used by the notify screen.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.skip_ypos">
|
|||
|
|
define <code class="descname">gui.skip_ypos</code> = 15<a class="headerlink" href="#var-gui.skip_ypos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The vertical position of the skip indicator, in pixels from the top of the
|
|||
|
|
window.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.notify_ypos">
|
|||
|
|
define <code class="descname">gui.notify_ypos</code> = 68<a class="headerlink" href="#var-gui.notify_ypos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The vertical position of the notify message, in pixels from the top of the
|
|||
|
|
window.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="dialogue-continued">
|
|||
|
|
<h3>Dialogue, Continued<a class="headerlink" href="#dialogue-continued" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>In addition to the simple customizations given above, there are a number
|
|||
|
|
of ways to control how dialogue is presented to the player.</p>
|
|||
|
|
<div class="section" id="textbox">
|
|||
|
|
<h4>Textbox<a class="headerlink" href="#textbox" title="Permalink to this headline"> link</a></h4>
|
|||
|
|
<p>The textbox (or window) is the window the dialogue is displayed in. In addition
|
|||
|
|
to changing gui/textbox.png, the following variables control how the textbox
|
|||
|
|
is displayed.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="name-and-namebox">
|
|||
|
|
<h4>Name and Namebox<a class="headerlink" href="#name-and-namebox" title="Permalink to this headline"> link</a></h4>
|
|||
|
|
<p>The character's name is placed inside a frame that uses gui/namebox.png as
|
|||
|
|
its background. In addition, there are a number of variables that control
|
|||
|
|
the presentation of the name. The namebox is only show if the speaking character
|
|||
|
|
has a name (an empty name, like " ", counts).</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.name_xpos">
|
|||
|
|
define <code class="descname">gui.name_xpos</code> = 360<a class="headerlink" href="#var-gui.name_xpos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.name_ypos">
|
|||
|
|
define <code class="descname">gui.name_ypos</code> = 0<a class="headerlink" href="#var-gui.name_ypos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The horizontal and vertical positions of the name and namebox. These
|
|||
|
|
are usually a number of pixels from the left or top side of the textbox.
|
|||
|
|
Setting a variable to 0.5 centers the name in the textbox (see below).
|
|||
|
|
These numbers can also be negative – for example, setting gui.name_ypos
|
|||
|
|
to -22 causes it to be places 22 pixels above the top of the textbox.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.name_xalign">
|
|||
|
|
define <code class="descname">gui.name_xalign</code> = 0.0<a class="headerlink" href="#var-gui.name_xalign" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The horizontal alignment of the character's name. This can be 0.0 for left-
|
|||
|
|
aligned, 0.5 for centered, and 1.0 for right-aligned. (It's almost always
|
|||
|
|
0.0 or 0.5.) This is used for both the position of the namebox relative
|
|||
|
|
to gui.name_xpos, and to select the side of of the namebox that is aligned
|
|||
|
|
with xpos.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.namebox_width">
|
|||
|
|
define <code class="descname">gui.namebox_width</code> = None<a class="headerlink" href="#var-gui.namebox_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.namebox_height">
|
|||
|
|
define <code class="descname">gui.namebox_height</code> = None<a class="headerlink" href="#var-gui.namebox_height" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.namebox_borders">
|
|||
|
|
define <code class="descname">gui.namebox_borders</code> = Borders(5, 5, 5, 5)<a class="headerlink" href="#var-gui.namebox_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.namebox_tile">
|
|||
|
|
define <code class="descname">gui.namebox_tile</code> = False<a class="headerlink" href="#var-gui.namebox_tile" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>These variables control the display of the frame containing the namebox.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="id1">
|
|||
|
|
<h4>Dialogue<a class="headerlink" href="#id1" title="Permalink to this headline"> link</a></h4>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.dialogue_xpos">
|
|||
|
|
define <code class="descname">gui.dialogue_xpos</code> = 402<a class="headerlink" href="#var-gui.dialogue_xpos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.dialogue_ypos">
|
|||
|
|
define <code class="descname">gui.dialogue_ypos</code> = 75<a class="headerlink" href="#var-gui.dialogue_ypos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The horizontal and vertical positions of the actual dialogue. These
|
|||
|
|
are usually a number of pixels from the left or top side of the textbox.
|
|||
|
|
Setting a variable to 0.5 centers the dialogue in the textbox (see below).</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.dialogue_width">
|
|||
|
|
define <code class="descname">gui.dialogue_width</code> = 1116<a class="headerlink" href="#var-gui.dialogue_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>This variable gives the maximum width of a line of dialogue, in pixels.
|
|||
|
|
When dialogue reaches this width, it will be wrapped by Ren'Py.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.dialogue_text_xalign">
|
|||
|
|
define <code class="descname">gui.dialogue_text_xalign</code> = 0.0<a class="headerlink" href="#var-gui.dialogue_text_xalign" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The horizontal alignment of dialogue text. 0.0 is left aligned, 0.5 is
|
|||
|
|
centered, and 1.0 is right-aligned.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="examples">
|
|||
|
|
<h4>Examples<a class="headerlink" href="#examples" title="Permalink to this headline"> link</a></h4>
|
|||
|
|
<p>To center the character's name, use:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">name_xpos</span> <span class="o">=</span> <span class="mf">0.5</span>
|
|||
|
|
<span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">name_xalign</span> <span class="o">=</span> <span class="mf">0.5</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>To center dialogue text, use:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">dialogue_xpos</span> <span class="o">=</span> <span class="mf">0.5</span>
|
|||
|
|
<span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">dialogue_text_xalign</span> <span class="o">=</span> <span class="mf">0.5</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>Our example game uses these statements to customize the centered namebox:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">namebox_width</span> <span class="o">=</span> <span class="mi">300</span>
|
|||
|
|
<span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">name_ypos</span> <span class="o">=</span> <span class="o">-</span><span class="mi">22</span>
|
|||
|
|
<span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">namebox_borders</span> <span class="o">=</span> <span class="n">Borders</span><span class="p">(</span><span class="mi">15</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">7</span><span class="p">)</span>
|
|||
|
|
<span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">namebox_tile</span> <span class="o">=</span> <span class="kc">True</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="history">
|
|||
|
|
<h3>History<a class="headerlink" href="#history" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>There are a few variables that control the way the history screen
|
|||
|
|
is displayed.</p>
|
|||
|
|
<p>The <a class="reference internal" href="config.html#var-config.history_length"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.history_length</span></code></a> variable, which defaults to 250,
|
|||
|
|
sets the number of blocks of dialogue Ren'Py will keep at history.</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.history_height">
|
|||
|
|
define <code class="descname">gui.history_height</code> = 210<a class="headerlink" href="#var-gui.history_height" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The height of a history entry, in pixels. This can be None to allow
|
|||
|
|
the height of a history entry to vary at the cost of performance –
|
|||
|
|
config.history_length may need to be lowered significantly when this
|
|||
|
|
is None.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.history_name_xpos">
|
|||
|
|
define <code class="descname">gui.history_name_xpos</code> = 0.5<a class="headerlink" href="#var-gui.history_name_xpos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.history_text_xpos">
|
|||
|
|
define <code class="descname">gui.history_text_xpos</code> = 0.5<a class="headerlink" href="#var-gui.history_text_xpos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The horizontal positions of the name label and dialogue text. These
|
|||
|
|
can be a number of pixels from the left side of the history entry,
|
|||
|
|
or 0.5 to center.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.history_name_ypos">
|
|||
|
|
define <code class="descname">gui.history_name_ypos</code> = 0<a class="headerlink" href="#var-gui.history_name_ypos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.history_text_ypos">
|
|||
|
|
define <code class="descname">gui.history_text_ypos</code> = 60<a class="headerlink" href="#var-gui.history_text_ypos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The vertical positions of the name label and dialogue text, relative
|
|||
|
|
to the top of a history entry, in pixels.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.history_name_width">
|
|||
|
|
define <code class="descname">gui.history_name_width</code> = 225<a class="headerlink" href="#var-gui.history_name_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.history_text_width">
|
|||
|
|
define <code class="descname">gui.history_text_width</code> = 1110<a class="headerlink" href="#var-gui.history_text_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The width of the name label and dialogue text, in pixels.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.history_name_xalign">
|
|||
|
|
define <code class="descname">gui.history_name_xalign</code> = 0.5<a class="headerlink" href="#var-gui.history_name_xalign" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.history_text_xalign">
|
|||
|
|
define <code class="descname">gui.history_text_xalign</code> = 0.5<a class="headerlink" href="#var-gui.history_text_xalign" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>This controls the alignment of text and the side of the text that is
|
|||
|
|
aligned with xpos. 0.0 is left-aligned, 0.5 is center-aligned, 1.0 is
|
|||
|
|
right-aligned.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="nvl">
|
|||
|
|
<h3>NVL<a class="headerlink" href="#nvl" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The nvl screen displays NVL-mode dialogue. There are a number of ways it
|
|||
|
|
can be customized. The first is to customize the NVL-mode background image:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>gui/nvl.png</dt>
|
|||
|
|
<dd>The background image used in NVL-mode. This should be the same size as
|
|||
|
|
the game window.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>There are also a number of variables that are used to customize the way
|
|||
|
|
NVL-mode text is displayed.</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_borders">
|
|||
|
|
define <code class="descname">gui.nvl_borders</code> = Borders(0, 15, 0, 30)<a class="headerlink" href="#var-gui.nvl_borders" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The borders around the background of the NVL-mode. Since the
|
|||
|
|
background is not a frame, this is only used to pad out the NVL-mode
|
|||
|
|
to prevent it from pressing up against the sides of the screen.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_height">
|
|||
|
|
define <code class="descname">gui.nvl_height</code> = 173<a class="headerlink" href="#var-gui.nvl_height" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The height of a single NVL-mode entry. Setting this to a fixed height
|
|||
|
|
makes it possible to have NVL-mode without paging, showing a fixed number
|
|||
|
|
of entries at once. Setting this to None allows entries to be of a
|
|||
|
|
variable size.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_spacing">
|
|||
|
|
define <code class="descname">gui.nvl_spacing</code> = 15<a class="headerlink" href="#var-gui.nvl_spacing" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The spacing between entries when gui.nvl_height is None, and the spacing
|
|||
|
|
between NVL-mode menu buttons.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_name_xpos">
|
|||
|
|
define <code class="descname">gui.nvl_name_xpos</code> = 0.5<a class="headerlink" href="#var-gui.nvl_name_xpos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_text_xpos">
|
|||
|
|
define <code class="descname">gui.nvl_text_xpos</code> = 0.5<a class="headerlink" href="#var-gui.nvl_text_xpos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_thought_xpos">
|
|||
|
|
define <code class="descname">gui.nvl_thought_xpos</code> = 0.5<a class="headerlink" href="#var-gui.nvl_thought_xpos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The positioning of character names, dialogue text, and thought/narration
|
|||
|
|
text, relative to the left side of the entry. This can be a number of
|
|||
|
|
pixels, or 0.5 to represent the center of the entry.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_name_xalign">
|
|||
|
|
define <code class="descname">gui.nvl_name_xalign</code> = 0.5<a class="headerlink" href="#var-gui.nvl_name_xalign" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_text_xalign">
|
|||
|
|
define <code class="descname">gui.nvl_text_xalign</code> = 0.5<a class="headerlink" href="#var-gui.nvl_text_xalign" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_thought_xalign">
|
|||
|
|
define <code class="descname">gui.nvl_thought_xalign</code> = 0.5<a class="headerlink" href="#var-gui.nvl_thought_xalign" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The alignment of the text. This controls both the alignment of the text,
|
|||
|
|
and the side of the text that is placed at xpos. This can be 0.0 for left,
|
|||
|
|
0.5 for center, and 1.0 for right.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_name_ypos">
|
|||
|
|
define <code class="descname">gui.nvl_name_ypos</code> = 0<a class="headerlink" href="#var-gui.nvl_name_ypos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_text_ypos">
|
|||
|
|
define <code class="descname">gui.nvl_text_ypos</code> = 60<a class="headerlink" href="#var-gui.nvl_text_ypos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_thought_ypos">
|
|||
|
|
define <code class="descname">gui.nvl_thought_ypos</code> = 0<a class="headerlink" href="#var-gui.nvl_thought_ypos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The position of character names, dialogue text, and thought/narration text,
|
|||
|
|
relative to the top of the entry. This should be a number of pixels from
|
|||
|
|
the top.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_name_width">
|
|||
|
|
define <code class="descname">gui.nvl_name_width</code> = 740<a class="headerlink" href="#var-gui.nvl_name_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_text_width">
|
|||
|
|
define <code class="descname">gui.nvl_text_width</code> = 740<a class="headerlink" href="#var-gui.nvl_text_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_thought_width">
|
|||
|
|
define <code class="descname">gui.nvl_thought_width</code> = 740<a class="headerlink" href="#var-gui.nvl_thought_width" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The width of each kind of text, in pixels.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_button_xpos">
|
|||
|
|
define <code class="descname">gui.nvl_button_xpos</code> = 0.5<a class="headerlink" href="#var-gui.nvl_button_xpos" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd></dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.nvl_button_xalign">
|
|||
|
|
define <code class="descname">gui.nvl_button_xalign</code> = 0.5<a class="headerlink" href="#var-gui.nvl_button_xalign" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>The position and alignment of NVL-mode menu buttons.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<p>Ren'Py does not use NVL-mode by default. It must be invoked using NVL-mode
|
|||
|
|
characters, and by defining a few variables in script.rpy.</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">e</span> <span class="o">=</span> <span class="n">Character</span><span class="p">(</span><span class="s2">"Eileen"</span><span class="p">,</span> <span class="n">kind</span><span class="o">=</span><span class="k">nvl</span><span class="p">)</span>
|
|||
|
|
<span class="k">define</span> <span class="n">narrator</span> <span class="o">=</span> <span class="n">nvl_narrator</span>
|
|||
|
|
<span class="k">define</span> <span class="k">menu</span> <span class="o">=</span> <span class="n">nvl_menu</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="text">
|
|||
|
|
<h3>Text<a class="headerlink" href="#text" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>Most text can be customized using GUI variables. The variables used
|
|||
|
|
are of the form:</p>
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.kind_text_font">
|
|||
|
|
define <code class="descname">gui.kind_text_font</code><a class="headerlink" href="#var-gui.kind_text_font" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>If present, the font used for the text.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.kind_text_size">
|
|||
|
|
define <code class="descname">gui.kind_text_size</code><a class="headerlink" href="#var-gui.kind_text_size" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>If present, the size of the text.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="var">
|
|||
|
|
<dt id="var-gui.kind_text_color">
|
|||
|
|
define <code class="descname">gui.kind_text_color</code><a class="headerlink" href="#var-gui.kind_text_color" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>If present, the color of the text.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<p>Other <a class="reference internal" href="style_properties.html#text-style-properties"><span class="std std-ref">text style properties</span></a> cam also be
|
|||
|
|
set in the same way. For example, gui.kind_text_outlines sets the
|
|||
|
|
<a class="reference internal" href="style_properties.html#style-property-outlines"><code class="xref std std-propref docutils literal notranslate"><span class="pre">outlines</span></code></a> property.</p>
|
|||
|
|
<p>The kind prefix can be omitted, in which case it customizes the default look
|
|||
|
|
of text. Otherwise, it may be one of the button kinds above, or one of:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt>interface</dt>
|
|||
|
|
<dd>For default text in the out-of-game interface.</dd>
|
|||
|
|
<dt>input</dt>
|
|||
|
|
<dd>For text in a text input widget.</dd>
|
|||
|
|
<dt>input_prompt</dt>
|
|||
|
|
<dd>For the prompt portion of a text input.</dd>
|
|||
|
|
<dt>label</dt>
|
|||
|
|
<dd>For decorative labels.</dd>
|
|||
|
|
<dt>prompt</dt>
|
|||
|
|
<dd>For confirmation prompts asking the player a question.</dd>
|
|||
|
|
<dt>name</dt>
|
|||
|
|
<dd>For character names.</dd>
|
|||
|
|
<dt>dialogue</dt>
|
|||
|
|
<dd>For dialogue.</dd>
|
|||
|
|
<dt>notify</dt>
|
|||
|
|
<dd>For notification text.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>For example:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">dialogue_text_outlines</span> <span class="o">=</span> <span class="p">[</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="s2">"#00000080"</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span> <span class="p">]</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>puts a drop shadow to the right of and below dialogue text.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="translation-and-gui-variables">
|
|||
|
|
<h3>Translation and GUI Variables<a class="headerlink" href="#translation-and-gui-variables" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The gui namespace is special, in that it is saved after the init phase,
|
|||
|
|
but before any <code class="docutils literal notranslate"><span class="pre">translate</span> <span class="pre">python</span></code> blocks are run. This makes it possible to
|
|||
|
|
change any GUI variable in a <code class="docutils literal notranslate"><span class="pre">translate</span> <span class="pre">python</span></code> block to accommodate a second
|
|||
|
|
language. For example, the following code changes the default text font
|
|||
|
|
and size.</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">translate</span> <span class="n">japanese</span> <span class="k">python</span><span class="p">:</span>
|
|||
|
|
<span class="n">gui</span><span class="o">.</span><span class="na">text_font</span> <span class="o">=</span> <span class="s2">"MTLc3m.ttf"</span>
|
|||
|
|
<span class="n">gui</span><span class="o">.</span><span class="na">text_size</span> <span class="o">=</span> <span class="mi">24</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>There is one issue that translators need to be aware of, and that is that
|
|||
|
|
in some places in gui.rpy, one variable is assigned the value of another.
|
|||
|
|
For example, the default gui.rpy has:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">interface_text_font</span> <span class="o">=</span> <span class="s2">"DejaVuSans.ttf"</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>and later on:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">button_text_font</span> <span class="o">=</span> <span class="n">gui</span><span class="o">.</span><span class="n">interface_text_font</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>Since both of these statements run before any <code class="docutils literal notranslate"><span class="pre">translate</span></code> block runs, both
|
|||
|
|
variables need to be changed.</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">translate</span> <span class="n">japanese</span> <span class="k">python</span><span class="p">::</span>
|
|||
|
|
|
|||
|
|
<span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">interface_text_font</span> <span class="o">=</span> <span class="s2">"MTLc3m.ttf"</span>
|
|||
|
|
<span class="k">define</span> <span class="n">gui</span><span class="o">.</span><span class="n">button_text_font</span> <span class="o">=</span> <span class="s2">"MTLc3m.ttf"</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>If the second statement was missing, DejaVuSans would still be used.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="advanced-customization">
|
|||
|
|
<h2>Advanced Customization<a class="headerlink" href="#advanced-customization" title="Permalink to this headline"> link</a></h2>
|
|||
|
|
<p>More advanced customization is possible by customizing screens.rpy,
|
|||
|
|
up to and including deleting the entire contents of the file and replacing
|
|||
|
|
it with something of your own. Here are a few places to get started.</p>
|
|||
|
|
<div class="section" id="styles">
|
|||
|
|
<h3>Styles<a class="headerlink" href="#styles" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p><a class="reference internal" href="style.html"><span class="doc">Styles</span></a> and <a class="reference internal" href="style_properties.html"><span class="doc">style properties</span></a> control how displayables
|
|||
|
|
are displayed. To find out what style a displayable is using, put the mouse
|
|||
|
|
over it and type Shift+I. This invokes the style inspector, which shows
|
|||
|
|
style names. Once the style name is known, a style statement can be used
|
|||
|
|
to customize it.</p>
|
|||
|
|
<p>For example, say we've lost our minds writing GUI documentation, and want to
|
|||
|
|
add a bright red outline to the dialogue text. We can hover the text and press
|
|||
|
|
Shift+I to find out the style used is named say_dialogue. We can then
|
|||
|
|
add (to the end of screens.rpy, or somewhere in options.rpy) the style statement:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">style</span> <span class="n">say_dialogue</span><span class="p">:</span>
|
|||
|
|
<span class="na">outlines</span> <span class="p">[</span> <span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="s2">"#f00"</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span> <span class="p">)</span> <span class="p">]</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>A huge number of customizations are possible using style statements.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="screens-navigation">
|
|||
|
|
<h3>Screens - Navigation<a class="headerlink" href="#screens-navigation" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>The next level of customization is to modify the screens. The most
|
|||
|
|
important documentation about screens is located in the <a class="reference internal" href="screens.html"><span class="doc">Screens and Screen Language</span></a>
|
|||
|
|
and <a class="reference internal" href="screen_actions.html"><span class="doc">Screen Actions, Values, and Functions</span></a> sections.</p>
|
|||
|
|
<p>One of the most important screens is the navigation screen, which serves
|
|||
|
|
both as the main menu, and to provide navigation for the game menu. This
|
|||
|
|
screen can be edited to add more buttons to one or both of those. For
|
|||
|
|
example, by changing the navigation screen to:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">screen</span> <span class="n">navigation</span><span class="p">():</span>
|
|||
|
|
|
|||
|
|
<span class="k">vbox</span><span class="p">:</span>
|
|||
|
|
<span class="na">style_prefix</span> <span class="s2">"navigation"</span>
|
|||
|
|
|
|||
|
|
<span class="na">xpos</span> <span class="n">gui</span><span class="o">.</span><span class="n">navigation_xpos</span>
|
|||
|
|
<span class="na">yalign</span> <span class="mf">0.5</span>
|
|||
|
|
|
|||
|
|
<span class="na">spacing</span> <span class="n">gui</span><span class="o">.</span><span class="n">navigation_spacing</span>
|
|||
|
|
|
|||
|
|
<span class="k">if</span> <span class="n">main_menu</span><span class="p">:</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Start"</span><span class="p">)</span> <span class="na">action</span> <span class="n">Start</span><span class="p">()</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Prologue"</span><span class="p">)</span> <span class="na">action</span> <span class="n">Start</span><span class="p">(</span><span class="s2">"prologue"</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">else</span><span class="p">:</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Codex"</span><span class="p">)</span> <span class="na">action</span> <span class="n">ShowMenu</span><span class="p">(</span><span class="s2">"codex"</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"History"</span><span class="p">)</span> <span class="na">action</span> <span class="n">ShowMenu</span><span class="p">(</span><span class="s2">"history"</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Save"</span><span class="p">)</span> <span class="na">action</span> <span class="n">ShowMenu</span><span class="p">(</span><span class="s2">"save"</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Load"</span><span class="p">)</span> <span class="na">action</span> <span class="n">ShowMenu</span><span class="p">(</span><span class="s2">"load"</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Preferences"</span><span class="p">)</span> <span class="na">action</span> <span class="n">ShowMenu</span><span class="p">(</span><span class="s2">"preferences"</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">if</span> <span class="n">_in_replay</span><span class="p">:</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"End Replay"</span><span class="p">)</span> <span class="na">action</span> <span class="n">EndReplay</span><span class="p">(</span><span class="n">confirm</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">elif</span> <span class="k">not</span> <span class="n">main_menu</span><span class="p">:</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Main Menu"</span><span class="p">)</span> <span class="na">action</span> <span class="n">MainMenu</span><span class="p">()</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"About"</span><span class="p">)</span> <span class="na">action</span> <span class="n">ShowMenu</span><span class="p">(</span><span class="s2">"about"</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Extras"</span><span class="p">)</span> <span class="na">action</span> <span class="n">ShowMenu</span><span class="p">(</span><span class="s2">"extras"</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">if</span> <span class="n">renpy</span><span class="o">.</span><span class="na">variant</span><span class="p">(</span><span class="s2">"pc"</span><span class="p">):</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Help"</span><span class="p">)</span> <span class="na">action</span> <span class="n">ShowMenu</span><span class="p">(</span><span class="s2">"help"</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">textbutton</span> <span class="n">_</span><span class="p">(</span><span class="s2">"Quit"</span><span class="p">)</span> <span class="na">action</span> <span class="n">Quit</span><span class="p">(</span><span class="n">confirm</span><span class="o">=</span><span class="k">not</span> <span class="n">main_menu</span><span class="p">)</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>We add access to a prologue screen from the main menu, a codex screen from
|
|||
|
|
the game menu, and an extras screen from both menus.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="screens-game-menu">
|
|||
|
|
<h3>Screens - Game Menu<a class="headerlink" href="#screens-game-menu" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>Custom game menu screens can also be created. These screens can use the
|
|||
|
|
game_menu screen to provide a title and scrollable viewport. An minimal
|
|||
|
|
custom game menu screen is:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">screen</span> <span class="n">codex</span><span class="p">():</span>
|
|||
|
|
|
|||
|
|
<span class="k">tag</span> <span class="k">menu</span>
|
|||
|
|
|
|||
|
|
<span class="k">use</span> <span class="n">game_menu</span><span class="p">(</span><span class="n">_</span><span class="p">(</span><span class="s2">"Codex"</span><span class="p">),</span> <span class="n">scroll</span><span class="o">=</span><span class="s2">"viewport"</span><span class="p">):</span>
|
|||
|
|
|
|||
|
|
<span class="na">style_prefix</span> <span class="s2">"codex"</span>
|
|||
|
|
|
|||
|
|
<span class="k">has</span> <span class="k">vbox</span><span class="p">:</span>
|
|||
|
|
<span class="na">spacing</span> <span class="mi">20</span>
|
|||
|
|
|
|||
|
|
<span class="k">text</span> <span class="n">_</span><span class="p">(</span><span class="s2">"</span><span class="si">{b}</span><span class="s2">Mechanical Engineering:{/b} Where we learn to build things like missiles and bombs."</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">text</span> <span class="n">_</span><span class="p">(</span><span class="s2">"</span><span class="si">{b}</span><span class="s2">Civil Engineering:{/b} Where we learn to build targets."</span><span class="p">)</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>Clearly, a functional codex would need to be more elaborate than this.</p>
|
|||
|
|
<p>Note
|
|||
|
|
the "tag menu" line. This line is important, as it hides other menu screens
|
|||
|
|
when the codex is shown. Without it, it would be hard to switch to and
|
|||
|
|
from the other menu screens.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="screens-click-to-continue">
|
|||
|
|
<h3>Screens - Click to Continue<a class="headerlink" href="#screens-click-to-continue" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>A screen we expect to be commonly added is the click to continue screen. This
|
|||
|
|
is a screen that is shown when text finishes displaying. Here's a simple
|
|||
|
|
example:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">screen</span> <span class="n">ctc</span><span class="p">():</span>
|
|||
|
|
|
|||
|
|
<span class="k">frame</span><span class="p">:</span>
|
|||
|
|
<span class="k">at</span> <span class="n">ctc_appear</span>
|
|||
|
|
<span class="na">xalign</span> <span class="o">.</span><span class="mi">99</span>
|
|||
|
|
<span class="na">yalign</span> <span class="o">.</span><span class="mi">99</span>
|
|||
|
|
|
|||
|
|
<span class="k">text</span> <span class="n">_</span><span class="p">(</span><span class="s2">"(click to continue)"</span><span class="p">):</span>
|
|||
|
|
<span class="na">size</span> <span class="mi">18</span>
|
|||
|
|
|
|||
|
|
<span class="k">transform</span> <span class="n">ctc_appear</span><span class="p">:</span>
|
|||
|
|
<span class="na">alpha</span> <span class="mf">0.0</span>
|
|||
|
|
<span class="k">pause</span> <span class="mf">5.0</span>
|
|||
|
|
<span class="n">linear</span> <span class="mf">0.5</span> <span class="na">alpha</span> <span class="mf">1.0</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>This particular ctc screen uses a transform to show the frame after 5 seconds.
|
|||
|
|
It's a good idea to delay CTC animations for several seconds, to give Ren'Py
|
|||
|
|
time to predict and load images.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="total-gui-replacement">
|
|||
|
|
<h3>Total GUI Replacement<a class="headerlink" href="#total-gui-replacement" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<p>Advanced creators can replace some or all of screens.rpy in its entirely.
|
|||
|
|
When doing so, some or all of the contents of gui.rpy may become redundant.
|
|||
|
|
It's probably a good idea to call <a class="reference internal" href="gui_advanced.html#gui.init" title="gui.init"><code class="xref py py-func docutils literal notranslate"><span class="pre">gui.init()</span></code></a> to reset styles – but after
|
|||
|
|
that, a creator can do whatever they want. It usually makes sense to include
|
|||
|
|
some or all of the <a class="reference internal" href="screen_special.html"><span class="doc">special screens</span></a>, to make sure
|
|||
|
|
players can have access to all the functionality Ren'Py provides.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="see-also">
|
|||
|
|
<h2>See Also<a class="headerlink" href="#see-also" title="Permalink to this headline"> link</a></h2>
|
|||
|
|
<p>For more information about the GUI, see the <a class="reference internal" href="gui_advanced.html"><span class="doc">Advanced GUI</span></a>
|
|||
|
|
section.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="incompatible-gui-changes">
|
|||
|
|
<span id="gui-changes"></span><h2>Incompatible GUI Changes<a class="headerlink" href="#incompatible-gui-changes" title="Permalink to this headline"> link</a></h2>
|
|||
|
|
<p>As the GUI is changed, occasionally some of the variables change name. These
|
|||
|
|
changes only take effect when the GUI is regenerated – until then, the game
|
|||
|
|
will continue to use the old variable names in the new Ren'Py.</p>
|
|||
|
|
<div class="section" id="id2">
|
|||
|
|
<h3>6.99.12.3<a class="headerlink" href="#id2" title="Permalink to this headline"> link</a></h3>
|
|||
|
|
<ul class="simple">
|
|||
|
|
<li>gui.default_font -> gui.text_font</li>
|
|||
|
|
<li>gui.name_font -> gui.name_text_font</li>
|
|||
|
|
<li>gui.interface_font -> gui.interface_text_font</li>
|
|||
|
|
<li>gui.text_xpos -> gui.dialogue_xpos</li>
|
|||
|
|
<li>gui.text_ypos -> gui.dialogue_ypos</li>
|
|||
|
|
<li>gui.text_width -> gui.dialogue_width</li>
|
|||
|
|
<li>gui.text_xalign -> gui.dialogue_text_xalign</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<footer class="footer">
|
|||
|
|
<div class="container">
|
|||
|
|
<p class="pull-right">
|
|||
|
|
<a href="#">Back to top</a>
|
|||
|
|
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
© Copyright 2012-2022, Tom Rothamel.<br/>
|
|||
|
|
Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.8.6.<br/>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</body>
|
|||
|
|
</html>
|