551 lines
39 KiB
HTML
551 lines
39 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>Styles — 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="Style Properties" href="style_properties.html" />
|
|
<link rel="prev" title="Live2D Cubism" href="live2d.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>
|
|
<li class="toctree-l1"><a class="reference internal" href="quickstart.html">Quickstart</a></li>
|
|
<li class="toctree-l1"><a class="reference internal" href="gui.html">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 class="current">
|
|
<li class="toctree-l1 current"><a class="current reference internal" href="#">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="#">Styles</a><ul>
|
|
<li><a class="reference internal" href="#using-styles-and-style-inheritance">Using Styles and Style Inheritance</a></li>
|
|
<li><a class="reference internal" href="#style-inspector">Style Inspector</a></li>
|
|
<li><a class="reference internal" href="#defining-styles-style-statement">Defining Styles: Style Statement</a></li>
|
|
<li><a class="reference internal" href="#defining-styles-python">Defining Styles: Python</a><ul>
|
|
<li><a class="reference internal" href="#indexed-styles">Indexed Styles</a></li>
|
|
<li><a class="reference internal" href="#style-preferences">Style Preferences</a></li>
|
|
<li><a class="reference internal" href="#other-style-functions">Other Style Functions</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9 content">
|
|
|
|
<div class="section" id="styles">
|
|
<span id="id1"></span><h1>Styles<a class="headerlink" href="#styles" title="Permalink to this headline"> link</a></h1>
|
|
<p>Styles allow the look of displayables to be customized. This is done by
|
|
changing the value of style properties for displayables. For example,
|
|
changing the <a class="reference internal" href="style_properties.html#style-property-background"><code class="xref std std-propref docutils literal notranslate"><span class="pre">background</span></code></a> property allows the background of a window
|
|
or button to be customized.</p>
|
|
<p>Style properties consist of two parts, a prefix that
|
|
specifies when the property is used, and the property itself. For example, a
|
|
button's <code class="docutils literal notranslate"><span class="pre">hover_background</span></code> property is used when a button is focused,
|
|
while its <code class="docutils literal notranslate"><span class="pre">idle_background</span></code> property is used when the button is unfocused.
|
|
(Setting the <code class="docutils literal notranslate"><span class="pre">background</span></code> property sets the <code class="docutils literal notranslate"><span class="pre">idle_background</span></code> and
|
|
<code class="docutils literal notranslate"><span class="pre">hover_background</span></code>, among others.)</p>
|
|
<p>While Ren'Py has over 100 style properties, only a few properties are
|
|
used in this section. Along with <code class="docutils literal notranslate"><span class="pre">background</span></code>, we use <code class="docutils literal notranslate"><span class="pre">color</span></code>, <code class="docutils literal notranslate"><span class="pre">font</span></code>,
|
|
<code class="docutils literal notranslate"><span class="pre">outlines</span></code> and <code class="docutils literal notranslate"><span class="pre">size</span></code> as style properties. For a full list of style
|
|
properties, please read the <a class="reference internal" href="style_properties.html"><span class="doc">style properties</span></a>
|
|
documentation.</p>
|
|
<div class="section" id="using-styles-and-style-inheritance">
|
|
<h2>Using Styles and Style Inheritance<a class="headerlink" href="#using-styles-and-style-inheritance" title="Permalink to this headline"> link</a></h2>
|
|
<p>Each displayable has a style built-into it. When the displayable is created,
|
|
either directly or using the screen system, style properties can be supplied
|
|
to it, and these styles are used to update the look of the displayable. In
|
|
the following example:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">big</span> <span class="n">hello</span> <span class="n">world</span> <span class="o">=</span> <span class="n">Text</span><span class="p">(</span><span class="s2">"Hello, World"</span><span class="p">,</span> <span class="na">size</span><span class="o">=</span><span class="mi">40</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>the <a class="reference internal" href="style_properties.html#style-property-size"><code class="xref std std-propref docutils literal notranslate"><span class="pre">size</span></code></a> property is supplied to a Text displayable, allowing us to
|
|
change its text size. This will customize the look of the text displayable by
|
|
displaying the text 40 pixels high.</p>
|
|
<p>Similarly, when using Screen Language, each user interface statement takes
|
|
relevant style properties:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">screen</span> <span class="n">big_hello_world</span><span class="p">:</span>
|
|
<span class="k">text</span> <span class="s2">"Hello, World"</span> <span class="na">size</span> <span class="mi">40</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>Ren'Py supports style inheritance, with each style having a single
|
|
parent. If a style property is not defined in a style, the value of the
|
|
property is inherited from the closest parent, grandparent, or other
|
|
ancestor.</p>
|
|
<p>Each displayable takes a property named <code class="docutils literal notranslate"><span class="pre">style</span></code>, which gives the parent
|
|
of the displayable's style:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">big</span> <span class="n">hello</span> <span class="n">world</span> <span class="o">=</span> <span class="n">Text</span><span class="p">(</span><span class="s2">"Hello World"</span><span class="p">,</span> <span class="k">style</span><span class="o">=</span><span class="s2">"big"</span><span class="p">)</span>
|
|
|
|
<span class="k">screen</span> <span class="n">hello_world</span><span class="p">:</span>
|
|
<span class="k">text</span> <span class="s2">"Hello, World"</span> <span class="k">style</span> <span class="s2">"big"</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>When no <code class="docutils literal notranslate"><span class="pre">style</span></code> property is given, a parent is chosen based on the kind of
|
|
displayable be that has been supplied. The parent chosen can be influenced
|
|
by the <a class="reference internal" href="screens.html#style-prefix"><span class="std std-ref">style_prefix</span></a> property of user interface statements
|
|
in the screen language.</p>
|
|
<p>When a style is defined without a parent being specified, a default
|
|
parent is chosen for the style. If the style contains an underscore (_)
|
|
in its name, the parent is named by removing everything up to and
|
|
including the first underscore. For example, a style named <code class="docutils literal notranslate"><span class="pre">my_button</span></code>
|
|
will inherit from <code class="docutils literal notranslate"><span class="pre">button</span></code>. This inheritance can be changed using the
|
|
style statement or by calling a method on a style object. When a style that
|
|
does not exist is used, and the style has an underscore in its name, Ren'Py will create
|
|
it using the default parent.</p>
|
|
<p>Style names beginning with an underscore are reserved for Ren'Py use.</p>
|
|
<p>As Ren'Py builds styles on startup, named styles should not be changed
|
|
outside of a style statement or <code class="docutils literal notranslate"><span class="pre">init</span></code> block.</p>
|
|
</div>
|
|
<div class="section" id="style-inspector">
|
|
<h2>Style Inspector<a class="headerlink" href="#style-inspector" title="Permalink to this headline"> link</a></h2>
|
|
<p>When <a class="reference internal" href="config.html#var-config.developer"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.developer</span></code></a> is true, the style inspector can be used to
|
|
see which styles are being used by a displayable.</p>
|
|
<p>To activate the style inspector, place the mouse over a displayable, and
|
|
press Shift+I. Ren'Py will display a list of displayables that include
|
|
the mouse position, in the order they are drawn to the screen. (That is,
|
|
the last displayable is the one on top of the others.)</p>
|
|
<p>Click the name of a style to display the styles the displayable inherits
|
|
from, and the properties each style contributes the to the final displayable.</p>
|
|
</div>
|
|
<div class="section" id="defining-styles-style-statement">
|
|
<h2>Defining Styles: Style Statement<a class="headerlink" href="#defining-styles-style-statement" title="Permalink to this headline"> link</a></h2>
|
|
<p>The preferred way to define styles is through the style statement:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">style</span> <span class="n">my_text</span> <span class="k">is</span> <span class="k">text</span><span class="p">:</span>
|
|
<span class="na">size</span> <span class="mi">40</span>
|
|
<span class="na">font</span> <span class="s2">"gentium.ttf"</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>If a style does not exist, the style statement creates it. Otherwise,
|
|
the existing style is modified by the style statement.</p>
|
|
<p>A style statement begins with the keyword <code class="docutils literal notranslate"><span class="pre">style</span></code> and the name of the
|
|
style to define. This is followed on the first line by zero or more
|
|
clauses, and an optional colon.</p>
|
|
<p>If the colon is present, a block must follow. Each line of the block should
|
|
contain one ore more clauses. Otherwise, the statement is complete.</p>
|
|
<p>The style statement accepts the following clauses:</p>
|
|
<dl class="docutils">
|
|
<dt><cite>style-property</cite> <cite>simple-expression</cite></dt>
|
|
<dd>Assigns the value of the simple expression to the given style
|
|
property.</dd>
|
|
<dt><code class="docutils literal notranslate"><span class="pre">is</span></code> <cite>parent</cite></dt>
|
|
<dd>Sets the parent of this style. The parent must be a word giving the
|
|
name of a style.</dd>
|
|
<dt><code class="docutils literal notranslate"><span class="pre">clear</span></code></dt>
|
|
<dd>Removes all properties of this style that were assigned before
|
|
this style statement was run. This does not prevent the style
|
|
from inheriting property values from its parents.</dd>
|
|
<dt><code class="docutils literal notranslate"><span class="pre">take</span></code> <cite>style-name</cite></dt>
|
|
<dd>Removes all properties of this style that were assigned before
|
|
this style statement was run, and replaces them with the properties
|
|
of the named style. This does not change the parent of this style.</dd>
|
|
<dt><code class="docutils literal notranslate"><span class="pre">variant</span></code> <cite>simple-expression</cite></dt>
|
|
<dd>Evaluates the simple expression, to yield a string or list of strings,
|
|
which are interpreted as <a class="reference internal" href="screens.html#screen-variants"><span class="std std-ref">screen variants</span></a>. If at
|
|
least one of the variants given is active, the style statement is run,
|
|
otherwise it is ignored.</dd>
|
|
<dt><code class="docutils literal notranslate"><span class="pre">properties</span></code> <cite>simple-expression</cite></dt>
|
|
<dd>Evaluates the simple expression to get a dictionary. The dictionary is
|
|
expected to map style properties to values, and the values are assigned
|
|
as if they were provided to the style statement.</dd>
|
|
</dl>
|
|
<p>Examples of style statements are:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="c1"># Creates a new style, inheriting from default.</span>
|
|
<span class="k">style</span> <span class="n">big_red</span><span class="p">:</span>
|
|
<span class="na">size</span> <span class="mi">40</span>
|
|
|
|
<span class="c1"># Updates the style.</span>
|
|
<span class="k">style</span> <span class="n">big_red</span> <span class="na">color</span> <span class="s2">"#f00"</span>
|
|
|
|
<span class="c1"># Takes the properties of label_text from big_red, but only if we're</span>
|
|
<span class="c1"># on a touch system.</span>
|
|
|
|
<span class="k">style</span> <span class="n">label_text</span><span class="p">:</span>
|
|
<span class="na">variant</span> <span class="s2">"touch"</span>
|
|
<span class="k">take</span> <span class="n">big_red</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>Style statements are always run at init time. If a style statement is not
|
|
in an <code class="docutils literal notranslate"><span class="pre">init</span></code> block, it is automatically placed into an <code class="docutils literal notranslate"><span class="pre">init</span> <span class="pre">0</span></code> block.</p>
|
|
</div>
|
|
<div class="section" id="defining-styles-python">
|
|
<h2>Defining Styles: Python<a class="headerlink" href="#defining-styles-python" title="Permalink to this headline"> link</a></h2>
|
|
<p>Named styles exists as fields on the global <code class="docutils literal notranslate"><span class="pre">style</span></code> object. To create a new
|
|
style, create an instance of the Style class, and assign it to a field on the
|
|
<code class="docutils literal notranslate"><span class="pre">style</span></code> object.:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">init</span> <span class="k">python</span><span class="p">:</span>
|
|
<span class="k">style</span><span class="o">.</span><span class="n">big_red</span> <span class="o">=</span> <span class="n">Style</span><span class="p">(</span><span class="k">style</span><span class="o">.</span><span class="k">default</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>Style properties can be set by assigning to field-like properties of the
|
|
Styles.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">init</span> <span class="k">python</span><span class="p">:</span>
|
|
<span class="k">style</span><span class="o">.</span><span class="n">big_red</span><span class="o">.</span><span class="na">color</span> <span class="o">=</span> <span class="s2">"#f00"</span>
|
|
<span class="k">style</span><span class="o">.</span><span class="n">big_red</span><span class="o">.</span><span class="na">size</span> <span class="o">=</span> <span class="mi">42</span>
|
|
</pre></div>
|
|
</div>
|
|
<dl class="class">
|
|
<dt id="Style">
|
|
<em class="property">class </em><code class="descname">Style</code><span class="sig-paren">(</span><em>parent</em><span class="sig-paren">)</span><a class="headerlink" href="#Style" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>Creates a new style object. Style properties can be assigned to
|
|
the fields of this object.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>parent</cite></dt>
|
|
<dd>The styles parent. This can be another style object, or a
|
|
string.</dd>
|
|
</dl>
|
|
<dl class="method">
|
|
<dt id="Style.clear">
|
|
<code class="descname">clear</code><span class="sig-paren">(</span><span class="sig-paren">)</span><a class="headerlink" href="#Style.clear" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This removes all style properties from this object. Values will be
|
|
inherited from this object's parent.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="method">
|
|
<dt id="Style.set_parent">
|
|
<code class="descname">set_parent</code><span class="sig-paren">(</span><em>parent</em><span class="sig-paren">)</span><a class="headerlink" href="#Style.set_parent" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>Sets the parent of this style object to <cite>parent</cite>.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="method">
|
|
<dt id="Style.take">
|
|
<code class="descname">take</code><span class="sig-paren">(</span><em>other</em><span class="sig-paren">)</span><a class="headerlink" href="#Style.take" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This takes all style properties from <cite>other</cite>. <cite>other</cite> must be a
|
|
style object.</p>
|
|
</dd></dl>
|
|
|
|
</dd></dl>
|
|
|
|
<div class="section" id="indexed-styles">
|
|
<span id="id2"></span><h3>Indexed Styles<a class="headerlink" href="#indexed-styles" title="Permalink to this headline"> link</a></h3>
|
|
<p>Indexed styles are lightweight styles that can be used to customize the look
|
|
of a displayable based on the data supplied to that displayable. An index
|
|
style is created by indexing a style object with a string or integer. If an
|
|
indexed style does not exist, indexing creates it.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">init</span> <span class="k">python</span><span class="p">:</span>
|
|
<span class="k">style</span><span class="o">.</span><span class="k">button</span><span class="p">[</span><span class="s1">'Foo'</span><span class="p">]</span><span class="o">.</span><span class="na">background</span> <span class="o">=</span> <span class="s2">"#f00"</span>
|
|
<span class="k">style</span><span class="o">.</span><span class="k">button</span><span class="p">[</span><span class="s1">'Bar'</span><span class="p">]</span><span class="o">.</span><span class="na">background</span> <span class="o">=</span> <span class="s2">"#00f"</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>An index style is used by supplying the indexed style to a displayable.:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">screen</span> <span class="n">indexed_style_test</span><span class="p">:</span>
|
|
<span class="k">vbox</span><span class="p">:</span>
|
|
<span class="k">textbutton</span> <span class="s2">"Foo"</span> <span class="k">style</span> <span class="k">style</span><span class="o">.</span><span class="k">button</span><span class="p">[</span><span class="s2">"Foo"</span><span class="p">]</span>
|
|
<span class="k">textbutton</span> <span class="s2">"Bar"</span> <span class="k">style</span> <span class="k">style</span><span class="o">.</span><span class="k">button</span><span class="p">[</span><span class="s2">"Bar"</span><span class="p">]</span>
|
|
</pre></div>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="style-preferences">
|
|
<span id="id3"></span><h3>Style Preferences<a class="headerlink" href="#style-preferences" title="Permalink to this headline"> link</a></h3>
|
|
<div class="admonition note">
|
|
<p class="first admonition-title">Note</p>
|
|
<p class="last"><a class="reference internal" href="gui_advanced.html#gui-preferences"><span class="std std-ref">GUI Preferences</span></a> may often provide a better way of accomplishing
|
|
the same thing, as a gui preference can change a variable used in multiple
|
|
styles.</p>
|
|
</div>
|
|
<p>It's often desirable to allow the user to customize aspects of the user
|
|
interface that are best expressed as styles. For example, a creator may want
|
|
to give players of his game the ability to adjust the look, color, and size
|
|
of the text. Style preferences allow for this customization.</p>
|
|
<p>A style preference is a preference that controls one or more style properties.
|
|
A style preference has a name and one or more alternatives. At any given
|
|
time, one of the alternatives is the selected alternative for the style
|
|
preference. The selected alternative is saved in the persistent data, and
|
|
defaults to the first alternative registered for a style property.</p>
|
|
<p>An alternative has one or more associations of style, property, and value
|
|
associated with it, and represents a promise that when the alternative
|
|
becomes the selected alternative for the style preference, the property on
|
|
the style will be assigned the given value. This occurs when Ren'Py first
|
|
initializes, and then whenever a new alternative is selected.</p>
|
|
<p>One should ensure that every alternative for a given style preference updates
|
|
the same set of styles and properties. Otherwise, some styles may not be
|
|
assigned values, and the result will not be deterministic.</p>
|
|
<p>The style preference functions are:</p>
|
|
<dl class="function">
|
|
<dt id="StylePreference">
|
|
<code class="descname">StylePreference</code><span class="sig-paren">(</span><em>preference</em>, <em>alternative</em><span class="sig-paren">)</span><a class="headerlink" href="#StylePreference" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>An action that causes <cite>alternative</cite> to become the selected alternative for the given style preference.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>preference</cite></dt>
|
|
<dd>A string giving the name of the style preference.</dd>
|
|
<dt><cite>alternative</cite></dt>
|
|
<dd>A string giving the name of the alternative.</dd>
|
|
</dl>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="renpy.get_style_preference">
|
|
<code class="descclassname">renpy.</code><code class="descname">get_style_preference</code><span class="sig-paren">(</span><em>preference</em><span class="sig-paren">)</span><a class="headerlink" href="#renpy.get_style_preference" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>Returns a string giving the name of the selected alternative for the named style preference.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>preference</cite></dt>
|
|
<dd>A string giving the name of the style preference.</dd>
|
|
</dl>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="renpy.register_style_preference">
|
|
<code class="descclassname">renpy.</code><code class="descname">register_style_preference</code><span class="sig-paren">(</span><em>preference</em>, <em>alternative</em>, <em>style</em>, <em>property</em>, <em>value</em><span class="sig-paren">)</span><a class="headerlink" href="#renpy.register_style_preference" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>Registers information about an alternative for a style preference.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>preference</cite></dt>
|
|
<dd>A string, the name of the style preference.</dd>
|
|
<dt><cite>alternative</cite></dt>
|
|
<dd>A string, the name of the alternative.</dd>
|
|
<dt><cite>style</cite></dt>
|
|
<dd>The style that will be updated. This may be a style object or a string giving the style name.</dd>
|
|
<dt><cite>property</cite></dt>
|
|
<dd>A string giving the name of the style property that will be update.</dd>
|
|
<dt><cite>value</cite></dt>
|
|
<dd>The value that will be assigned to the style property.</dd>
|
|
</dl>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="renpy.set_style_preference">
|
|
<code class="descclassname">renpy.</code><code class="descname">set_style_preference</code><span class="sig-paren">(</span><em>preference</em>, <em>alternative</em><span class="sig-paren">)</span><a class="headerlink" href="#renpy.set_style_preference" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>Sets the selected alternative for the style preference.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>preference</cite></dt>
|
|
<dd>A string giving the name of the style preference.</dd>
|
|
<dt><cite>alternative</cite></dt>
|
|
<dd>A string giving the name of the alternative.</dd>
|
|
</dl>
|
|
</dd></dl>
|
|
|
|
<p>Here's an example of registering a style property that allows the user to
|
|
choose between large, simple text and smaller outlined text.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">init</span> <span class="k">python</span><span class="p">:</span>
|
|
<span class="n">renpy</span><span class="o">.</span><span class="n">register_style_preference</span><span class="p">(</span><span class="s2">"text"</span><span class="p">,</span> <span class="s2">"decorated"</span><span class="p">,</span> <span class="k">style</span><span class="o">.</span><span class="n">say_dialogue</span><span class="p">,</span> <span class="s2">"outlines"</span><span class="p">,</span> <span class="p">[</span> <span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="s2">"#000"</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>
|
|
<span class="n">renpy</span><span class="o">.</span><span class="n">register_style_preference</span><span class="p">(</span><span class="s2">"text"</span><span class="p">,</span> <span class="s2">"decorated"</span><span class="p">,</span> <span class="k">style</span><span class="o">.</span><span class="n">say_dialogue</span><span class="p">,</span> <span class="s2">"size"</span><span class="p">,</span> <span class="mi">22</span><span class="p">)</span>
|
|
|
|
<span class="n">renpy</span><span class="o">.</span><span class="n">register_style_preference</span><span class="p">(</span><span class="s2">"text"</span><span class="p">,</span> <span class="s2">"large"</span><span class="p">,</span> <span class="k">style</span><span class="o">.</span><span class="n">say_dialogue</span><span class="p">,</span> <span class="s2">"outlines"</span><span class="p">,</span> <span class="p">[</span> <span class="p">])</span>
|
|
<span class="n">renpy</span><span class="o">.</span><span class="n">register_style_preference</span><span class="p">(</span><span class="s2">"text"</span><span class="p">,</span> <span class="s2">"large"</span><span class="p">,</span> <span class="k">style</span><span class="o">.</span><span class="n">say_dialogue</span><span class="p">,</span> <span class="s2">"size"</span><span class="p">,</span> <span class="mi">24</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>The following will allow the user to select these alternatives using
|
|
buttons:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">textbutton</span> <span class="s2">"Decorated"</span> <span class="na">action</span> <span class="n">StylePreference</span><span class="p">(</span><span class="s2">"text"</span><span class="p">,</span> <span class="s2">"decorated"</span><span class="p">)</span>
|
|
<span class="k">textbutton</span> <span class="s2">"Large"</span> <span class="na">action</span> <span class="n">StylePreference</span><span class="p">(</span><span class="s2">"text"</span><span class="p">,</span> <span class="s2">"large"</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</div>
|
|
<div class="section" id="other-style-functions">
|
|
<h3>Other Style Functions<a class="headerlink" href="#other-style-functions" title="Permalink to this headline"> link</a></h3>
|
|
<dl class="function">
|
|
<dt id="style.rebuild">
|
|
<code class="descclassname">style.</code><code class="descname">rebuild</code><span class="sig-paren">(</span><span class="sig-paren">)</span><a class="headerlink" href="#style.rebuild" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This causes named styles to be rebuilt, allowing styles to be
|
|
changed after the init phase has finished.</p>
|
|
<div class="admonition warning">
|
|
<p class="first admonition-title">Warning</p>
|
|
<p class="last">Named styles are not saved as part of the per-game data. This
|
|
means that changes to them will not be persisted through a save
|
|
and load cycle.</p>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
</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> |