827 lines
56 KiB
HTML
827 lines
56 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>Displayables — 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="Transforms" href="transforms.html" />
|
|
<link rel="prev" title="Translation" href="translation.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 class="current">
|
|
<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 current"><a class="current reference internal" href="#">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="#">Displayables</a><ul>
|
|
<li><a class="reference internal" href="#images">Images</a></li>
|
|
<li><a class="reference internal" href="#image-like-displayables">Image-Like Displayables</a></li>
|
|
<li><a class="reference internal" href="#text-displayables">Text Displayables</a></li>
|
|
<li><a class="reference internal" href="#dynamic-displayables">Dynamic Displayables</a></li>
|
|
<li><a class="reference internal" href="#applying-transforms-to-displayables">Applying Transforms to Displayables</a></li>
|
|
<li><a class="reference internal" href="#layout-boxes-and-grids">Layout Boxes and Grids</a></li>
|
|
<li><a class="reference internal" href="#effects">Effects</a></li>
|
|
<li><a class="reference internal" href="#image-manipulators">Image Manipulators</a></li>
|
|
<li><a class="reference internal" href="#placeholders">Placeholders</a></li>
|
|
<li><a class="reference internal" href="#displayable-prefixes">Displayable Prefixes</a></li>
|
|
<li><a class="reference internal" href="#see-also">See also</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9 content">
|
|
|
|
<div class="section" id="displayables">
|
|
<span id="id1"></span><h1>Displayables<a class="headerlink" href="#displayables" title="Permalink to this headline"> link</a></h1>
|
|
<p>A displayable is an object that can be shown to the user. Ren'Py
|
|
displayables can be used in many ways.</p>
|
|
<ul class="simple">
|
|
<li>Assignment to an image name using the <code class="docutils literal notranslate"><span class="pre">image</span></code> statement.</li>
|
|
<li>Added to a screen using the screen language <code class="docutils literal notranslate"><span class="pre">add</span></code> statement.</li>
|
|
<li>Assignment to certain config variables.</li>
|
|
<li>Assignment to certain style properties.</li>
|
|
</ul>
|
|
<p>When a Ren'Py function or variable expects a displayable, there are
|
|
five things that can be provided:</p>
|
|
<ul class="simple">
|
|
<li>An object of type Displayable, created by calling one of the
|
|
functions given below.</li>
|
|
<li>A string with a colon <code class="docutils literal notranslate"><span class="pre">:</span></code> in it. These are rare, but see the section on
|
|
<a class="reference internal" href="#displayable-prefix"><span class="std std-ref">displayable prefixes</span></a> below.</li>
|
|
<li>A string with a dot <code class="docutils literal notranslate"><span class="pre">.</span></code> in it. Such a string is interpreted as
|
|
a filename by <a class="reference internal" href="#Image" title="Image"><code class="xref py py-func docutils literal notranslate"><span class="pre">Image()</span></code></a>.</li>
|
|
<li>A color. A color may either be given as a hexadecimal color string in "#rgb",
|
|
"#rgba", "#rrggbb", or "#rrggbbaa" form, a <a class="reference internal" href="color_class.html#Color" title="Color"><code class="xref py py-class docutils literal notranslate"><span class="pre">Color</span></code></a>, or an (r, g, b, a) tuple,
|
|
where each component is an integer between 0 and 255. Colors are
|
|
passed to <a class="reference internal" href="#Solid" title="Solid"><code class="xref py py-func docutils literal notranslate"><span class="pre">Solid()</span></code></a>.</li>
|
|
<li>An image name. Any other string is interpreted as a reference to an
|
|
image, either defined with the image statement or auto-defined from
|
|
the <a class="reference internal" href="displaying_images.html#images-directory"><span class="std std-ref">images directory</span></a>.</li>
|
|
<li>A list. If a list is provided, each item is expanded as described
|
|
below, and checked to see if it matches a filename or image name.
|
|
If so, expansion stops and the matched thing is then processed
|
|
as described above.</li>
|
|
</ul>
|
|
<p>Strings may have one or more square-bracket substitutions in them,
|
|
such as "eileen [mood]" or "eileen_[outfit]_[mood].png". When such a
|
|
string is given, a dynamic image is created. A dynamic image has
|
|
<a class="reference internal" href="text.html#text-interpolation"><span class="std std-ref">text interpolation</span></a> performed at the start
|
|
of each interaction (such as say statements and menus). The resulting
|
|
string is processed according to the rules above.</p>
|
|
<p>When a string has "[prefix_]" in it, that substitution is replaced with
|
|
each of the style prefixes associated with the current displayable.</p>
|
|
<div class="section" id="images">
|
|
<span id="id2"></span><h2>Images<a class="headerlink" href="#images" title="Permalink to this headline"> link</a></h2>
|
|
<p>The most commonly used displayable is Image, which loads a file from
|
|
disk and displays it. Since Image is so commonly used, when a string
|
|
giving a filename is used in a context that expects a displayable, an
|
|
Image is automatically created. The only time it's necessary to use
|
|
Image directly is when you want to create an image with style
|
|
properties.</p>
|
|
<dl class="function">
|
|
<dt id="Image">
|
|
<code class="descname">Image</code><span class="sig-paren">(</span><em>filename</em>, <em>*</em>, <em>optimize_bounds=True</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Image" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>Loads an image from a file. <cite>filename</cite> is a
|
|
string giving the name of the file.</p>
|
|
<p><cite>filename</cite> should be a JPEG or PNG file with an appropriate
|
|
extension.</p>
|
|
<p>If optimize_bounds is True, only the portion of the image that
|
|
inside the bounding box of non-transparent pixels is loaded into
|
|
GPU memory. (The only reason to set this to False is when using an
|
|
image as input to a shader.)</p>
|
|
</dd></dl>
|
|
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="c1"># These two lines are equivalent.</span>
|
|
<span class="k">image</span> <span class="n">logo</span> <span class="o">=</span> <span class="s2">"logo.png"</span>
|
|
<span class="k">image</span> <span class="n">logo</span> <span class="o">=</span> <span class="n">Image</span><span class="p">(</span><span class="s2">"logo.png"</span><span class="p">)</span>
|
|
|
|
<span class="c1"># Using Image allows us to specify a default position as part of</span>
|
|
<span class="c1"># an image.</span>
|
|
<span class="k">image</span> <span class="n">logo</span> <span class="n">right</span> <span class="o">=</span> <span class="n">Image</span><span class="p">(</span><span class="s2">"logo.png"</span><span class="p">,</span> <span class="na">xalign</span><span class="o">=</span><span class="mf">1.0</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>There are three image file formats we recommend you use:</p>
|
|
<ul class="simple">
|
|
<li>WEBP</li>
|
|
<li>PNG</li>
|
|
<li>JPG</li>
|
|
</ul>
|
|
<p>Non-animated GIF and BMP files are also supported, but should not be
|
|
used in modern games.</p>
|
|
<p>Loading an Image from a file on disk and decoding it so it can be
|
|
drawn to the screen takes a long amount of time. While measured in the
|
|
tenths or hundreds of seconds, the duration of the loading process is
|
|
long enough that it can prevent an acceptable framerate, and become
|
|
annoying to the user.</p>
|
|
<p>Since an Image is of a fixed size, and doesn't change in response to
|
|
input, game state, or the size of the area available to it, an Image
|
|
can be loaded before it is needed and placed into an area of memory
|
|
known as the image cache. Once an Image is decoded and in the cache,
|
|
it can be quickly drawn to the screen.</p>
|
|
<p>Ren'Py attempts to predict the images that will be used in the future,
|
|
and loads them into the image cache before they are used. When space
|
|
in the cache is needed for other images, Ren'Py will remove images
|
|
that are no longer being used.</p>
|
|
<p>By default, Ren'Py will predictively cache up to 8 screens worth of
|
|
image data. (If your screen is 800x600, then a screen's worth of data
|
|
is one 800x600 image, two 400x600 images, and so on.) This can be
|
|
changed with the <a class="reference internal" href="config.html#var-config.image_cache_size"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.image_cache_size</span></code></a> configuration
|
|
variable.</p>
|
|
<p>Although the precise amount is dependent on implementation details and
|
|
there is significant overhead, as a rule of thumb, each pixel in the
|
|
image cache consumes 4 bytes of main memory and 4 bytes of video
|
|
memory.</p>
|
|
</div>
|
|
<div class="section" id="image-like-displayables">
|
|
<h2>Image-Like Displayables<a class="headerlink" href="#image-like-displayables" title="Permalink to this headline"> link</a></h2>
|
|
<p>We call these displayables image-like because they take up a
|
|
rectangular area of the screen, and do not react to input. These
|
|
differ from normal images by varying their size to fill an area
|
|
(Frame, Tile, and Solid), or by allowing the user to specify their
|
|
size (Composite, Crop, Null). They are not image manipulators.</p>
|
|
<p>Image-like displayables take <a class="reference internal" href="style_properties.html#position-style-properties"><span class="std std-ref">Position Style Properties</span></a>.</p>
|
|
<dl class="function">
|
|
<dt id="AlphaMask">
|
|
<code class="descname">AlphaMask</code><span class="sig-paren">(</span><em>child</em>, <em>mask</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#AlphaMask" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This displayable takes its colors from <cite>child</cite>, and its alpha channel
|
|
from the multiplication of the alpha channels of <cite>child</cite> and <cite>mask</cite>.
|
|
The result is a displayable that has the same colors as <cite>child</cite>, is
|
|
transparent where either <cite>child</cite> or <cite>mask</cite> is transparent, and is
|
|
opaque where <cite>child</cite> and <cite>mask</cite> are both opaque.</p>
|
|
<p>The <cite>child</cite> and <cite>mask</cite> parameters may be arbitrary displayables. The
|
|
size of the AlphaMask is the size of <cite>child</cite>.</p>
|
|
<p>Note that this takes different arguments from <a class="reference internal" href="im.html#im.AlphaMask" title="im.AlphaMask"><code class="xref py py-func docutils literal notranslate"><span class="pre">im.AlphaMask()</span></code></a>,
|
|
which uses the mask's red channel.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="Borders">
|
|
<code class="descname">Borders</code><span class="sig-paren">(</span><em>left</em>, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>pad_left=0</em>, <em>pad_top=0</em>, <em>pad_right=0</em>, <em>pad_bottom=0</em><span class="sig-paren">)</span><a class="headerlink" href="#Borders" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This object provides border size and tiling information to a <a class="reference internal" href="#Frame" title="Frame"><code class="xref py py-func docutils literal notranslate"><span class="pre">Frame()</span></code></a>.
|
|
It can also provide padding information that can be supplied to the
|
|
<a class="reference internal" href="style_properties.html#style-property-padding"><code class="xref std std-propref docutils literal notranslate"><span class="pre">padding</span></code></a> style property of a window or frame.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>left</cite>, <cite>top</cite>, <cite>right</cite>, <cite>bottom</cite></dt>
|
|
<dd>These provide the size of the insets used by a frame, and are added
|
|
to the padding on each side. They should be zero or a positive integer.</dd>
|
|
<dt><cite>pad_left</cite>, <cite>pad_top</cite>, <cite>pad_right</cite>, <cite>pad_bottom</cite></dt>
|
|
<dd>These are added to the padding on each side, and may be positive or
|
|
negative. (For example, if <cite>left</cite> is 5 and <cite>pad_left</cite> is -3, the final
|
|
padding is 2.)</dd>
|
|
</dl>
|
|
<p>The padding information is supplied via a field:</p>
|
|
<dl class="attribute">
|
|
<dt id="padding">
|
|
<code class="descname">padding</code><a class="headerlink" href="#padding" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This is a four-element tuple containing the padding on each of the
|
|
four sides.</p>
|
|
</dd></dl>
|
|
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="Composite">
|
|
<code class="descname">Composite</code><span class="sig-paren">(</span><em>size</em>, <em>*args</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Composite" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This creates a new displayable of <cite>size</cite>, by compositing other
|
|
displayables. <cite>size</cite> is a (width, height) tuple.</p>
|
|
<p>The remaining positional arguments are used to place images inside
|
|
the Composite. The remaining positional arguments should come
|
|
in groups of two, with the first member of each group an (x, y)
|
|
tuple, and the second member of a group is a displayable that
|
|
is composited at that position.</p>
|
|
<p>Displayables are composited from back to front.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">eileen</span> <span class="n">composite</span> <span class="o">=</span> <span class="n">Composite</span><span class="p">(</span>
|
|
<span class="p">(</span><span class="mi">300</span><span class="p">,</span> <span class="mi">600</span><span class="p">),</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="s2">"body.png"</span><span class="p">,</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="s2">"clothes.png"</span><span class="p">,</span>
|
|
<span class="p">(</span><span class="mi">50</span><span class="p">,</span> <span class="mi">50</span><span class="p">),</span> <span class="s2">"expression.png"</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="Crop">
|
|
<code class="descname">Crop</code><span class="sig-paren">(</span><em>rect</em>, <em>child</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Crop" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This creates a displayable by cropping <cite>child</cite> to <cite>rect</cite>, where
|
|
<cite>rect</cite> is an (x, y, width, height) tuple.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">eileen</span> <span class="n">cropped</span> <span class="o">=</span> <span class="n">Crop</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="mi">300</span><span class="p">,</span> <span class="mi">300</span><span class="p">),</span> <span class="s2">"eileen happy"</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="DynamicImage">
|
|
<code class="descname">DynamicImage</code><span class="sig-paren">(</span><em>name</em><span class="sig-paren">)</span><a class="headerlink" href="#DynamicImage" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>A DynamicImage is a displayable that has text interpolation performed
|
|
on it to yield a string giving a new displayable. Such interpolation is
|
|
performed at the start of each interaction.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="Flatten">
|
|
<code class="descname">Flatten</code><span class="sig-paren">(</span><em>child</em>, <em>drawable_resolution=True</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Flatten" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This flattens <cite>child</cite>, which may be made up of multiple textures, into
|
|
a single texture.</p>
|
|
<p>Certain operations, like the alpha transform property, apply to every
|
|
texture making up a displayable, which can yield incorrect results
|
|
when the textures overlap on screen. Flatten creates a single texture
|
|
from multiple textures, which can prevent this problem.</p>
|
|
<p>Flatten is a relatively expensive operation, and so should only be used
|
|
when absolutely required.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>drawable_resolution</cite></dt>
|
|
<dd>Defaults to true, which is usually the right choice, but may cause
|
|
the resulting texture, when scaled, to have different artifacts than
|
|
the textures that make it up. Setting this to False will change the
|
|
artifacts, which may be more pleasing in some cases.</dd>
|
|
</dl>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="Frame">
|
|
<code class="descname">Frame</code><span class="sig-paren">(</span><em>image</em>, <em>left=0</em>, <em>top=0</em>, <em>right=None</em>, <em>bottom=None</em>, <em>tile=False</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Frame" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>A displayable that resizes an image to fill the available area,
|
|
while preserving the width and height of its borders. It is often
|
|
used as the background of a window or button.</p>
|
|
<div class="figure" id="id3">
|
|
<img alt="_images/frame_example.png" src="_images/frame_example.png" />
|
|
<p class="caption"><span class="caption-text">Using a frame to resize an image to double its size.</span></p>
|
|
</div>
|
|
<dl class="docutils">
|
|
<dt><cite>image</cite></dt>
|
|
<dd>An image manipulator that will be resized by this frame.</dd>
|
|
<dt><cite>left</cite></dt>
|
|
<dd>The size of the border on the left side. This can also be a
|
|
<a class="reference internal" href="#Borders" title="Borders"><code class="xref py py-func docutils literal notranslate"><span class="pre">Borders()</span></code></a> object, in which case that object is used in place
|
|
of the other parameters.</dd>
|
|
<dt><cite>top</cite></dt>
|
|
<dd>The size of the border on the top.</dd>
|
|
<dt><cite>right</cite></dt>
|
|
<dd>The size of the border on the right side. If None, defaults
|
|
to <cite>left</cite>.</dd>
|
|
<dt><cite>bottom</cite></dt>
|
|
<dd>The side of the border on the bottom. If None, defaults to <cite>top</cite>.</dd>
|
|
<dt><cite>tile</cite></dt>
|
|
<dd>If set to True, tiling is used to resize sections of the image,
|
|
rather than scaling. If set to the string "integer", the nearest
|
|
integer number of tiles will be used in each direction. That set of
|
|
full tiles will then be scaled up or down to fit the required area.</dd>
|
|
</dl>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="c1"># Resize the background of the text window if it's too small.</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">window</span><span class="o">.</span><span class="na">background</span> <span class="o">=</span> <span class="n">Frame</span><span class="p">(</span><span class="s2">"frame.png"</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="Null">
|
|
<code class="descname">Null</code><span class="sig-paren">(</span><em>width=0</em>, <em>height=0</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Null" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>A displayable that creates an empty box on the screen. The size
|
|
of the box is controlled by <cite>width</cite> and <cite>height</cite>. This can be used
|
|
when a displayable requires a child, but no child is suitable, or
|
|
as a spacer inside a box.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">logo</span> <span class="n">spaced</span> <span class="o">=</span> <span class="n">HBox</span><span class="p">(</span><span class="s2">"logo.png"</span><span class="p">,</span> <span class="n">Null</span><span class="p">(</span><span class="na">width</span><span class="o">=</span><span class="mi">100</span><span class="p">),</span> <span class="s2">"logo.png"</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="Solid">
|
|
<code class="descname">Solid</code><span class="sig-paren">(</span><em>color</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Solid" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>A displayable that fills the area its assigned with <cite>color</cite>.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">white</span> <span class="o">=</span> <span class="n">Solid</span><span class="p">(</span><span class="s2">"#fff"</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="Tile">
|
|
<code class="descname">Tile</code><span class="sig-paren">(</span><em>child</em>, <em>style=u'tile'</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Tile" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>Tiles <cite>child</cite> until it fills the area allocated to this displayable.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">bg</span> <span class="n">tile</span> <span class="o">=</span> <span class="n">Tile</span><span class="p">(</span><span class="s2">"bg.png"</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
</div>
|
|
<div class="section" id="text-displayables">
|
|
<h2>Text Displayables<a class="headerlink" href="#text-displayables" title="Permalink to this headline"> link</a></h2>
|
|
<p>See <a class="reference internal" href="text.html#text-displayables"><span class="std std-ref">Text Displayables</span></a>.</p>
|
|
</div>
|
|
<div class="section" id="dynamic-displayables">
|
|
<h2>Dynamic Displayables<a class="headerlink" href="#dynamic-displayables" title="Permalink to this headline"> link</a></h2>
|
|
<p>Dynamic displayables display a child displayable based on the state of
|
|
the game.</p>
|
|
<p>Note that these dynamic displayables always display their current state.
|
|
Because of this, a dynamic displayable will not participate in a
|
|
transition. (Or more precisely, it will display the same thing in both the
|
|
old and new states of the transition.)</p>
|
|
<p>By design, dynamic displayables are intended to be used for things that
|
|
change rarely and when an image defined this way is off screen (Such as
|
|
a character customization system). It is not designed for things that
|
|
change frequently, such as character emotions.</p>
|
|
<dl class="function">
|
|
<dt id="ConditionSwitch">
|
|
<code class="descname">ConditionSwitch</code><span class="sig-paren">(</span><em>*args</em>, <em>predict_all=None</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#ConditionSwitch" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This is a displayable that changes what it is showing based on
|
|
Python conditions. The positional arguments should be given in
|
|
groups of two, where each group consists of:</p>
|
|
<ul class="simple">
|
|
<li>A string containing a Python condition.</li>
|
|
<li>A displayable to use if the condition is true.</li>
|
|
</ul>
|
|
<p>The first true condition has its displayable shown, at least
|
|
one condition should always be true.</p>
|
|
<p>The conditions uses here should not have externally-visible side-effects.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>predict_all</cite></dt>
|
|
<dd>If True, all of the possible displayables will be predicted when
|
|
the displayable is shown. If False, only the current condition is
|
|
predicted. If None, <a class="reference internal" href="config.html#var-config.conditionswitch_predict_all"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.conditionswitch_predict_all</span></code></a> is
|
|
used.</dd>
|
|
</dl>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">jill</span> <span class="o">=</span> <span class="n">ConditionSwitch</span><span class="p">(</span>
|
|
<span class="s2">"jill_beers > 4"</span><span class="p">,</span> <span class="s2">"jill_drunk.png"</span><span class="p">,</span>
|
|
<span class="s2">"True"</span><span class="p">,</span> <span class="s2">"jill_sober.png"</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="DynamicDisplayable">
|
|
<code class="descname">DynamicDisplayable</code><span class="sig-paren">(</span><em>function</em>, <em>*args</em>, <em>**kwargs</em><span class="sig-paren">)</span><a class="headerlink" href="#DynamicDisplayable" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>A displayable that can change its child based on a Python
|
|
function, over the course of an interaction. It does not
|
|
take any properties, as its layout is controlled by the
|
|
properties of the child displayable it returns.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>function</cite></dt>
|
|
<dd><p class="first">A function that is called with the arguments:</p>
|
|
<ul class="simple">
|
|
<li>The amount of time the displayable has been shown for.</li>
|
|
<li>The amount of time any displayable with the same tag has been shown for.</li>
|
|
<li>Any positional or keyword arguments supplied to DynamicDisplayable.</li>
|
|
</ul>
|
|
<p>and should return a (d, redraw) tuple, where:</p>
|
|
<ul class="simple">
|
|
<li><cite>d</cite> is a displayable to show.</li>
|
|
<li><cite>redraw</cite> is the maximum amount of time to wait before calling the
|
|
function again, or None to not require the function be called again
|
|
before the start of the next interaction.</li>
|
|
</ul>
|
|
<p class="last"><cite>function</cite> is called at the start of every interaction.</p>
|
|
</dd>
|
|
</dl>
|
|
<p>As a special case, <cite>function</cite> may also be a python string that evaluates
|
|
to a displayable. In that case, function is run once per interaction.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="c1"># Shows a countdown from 5 to 0, updating it every tenth of</span>
|
|
<span class="c1"># a second until the time expires.</span>
|
|
<span class="k">init</span> <span class="k">python</span><span class="p">:</span>
|
|
|
|
<span class="k">def</span> <span class="nf">show_countdown</span><span class="p">(</span><span class="n">st</span><span class="p">,</span> <span class="k">at</span><span class="p">):</span>
|
|
<span class="k">if</span> <span class="n">st</span> <span class="o">></span> <span class="mf">5.0</span><span class="p">:</span>
|
|
<span class="k">return</span> <span class="n">Text</span><span class="p">(</span><span class="s2">"0.0"</span><span class="p">),</span> <span class="kc">None</span>
|
|
<span class="k">else</span><span class="p">:</span>
|
|
<span class="n">d</span> <span class="o">=</span> <span class="n">Text</span><span class="p">(</span><span class="s2">"</span><span class="si">{:.1f}</span><span class="s2">"</span><span class="o">.</span><span class="n">format</span><span class="p">(</span><span class="mf">5.0</span> <span class="o">-</span> <span class="n">st</span><span class="p">))</span>
|
|
<span class="k">return</span> <span class="n">d</span><span class="p">,</span> <span class="mf">0.1</span>
|
|
|
|
<span class="k">image</span> <span class="n">countdown</span> <span class="o">=</span> <span class="n">DynamicDisplayable</span><span class="p">(</span><span class="n">show_countdown</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="ShowingSwitch">
|
|
<code class="descname">ShowingSwitch</code><span class="sig-paren">(</span><em>*args</em>, <em>predict_all=None</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#ShowingSwitch" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This is a displayable that changes what it is showing based on the
|
|
images are showing on the screen. The positional argument should
|
|
be given in groups of two, where each group consists of:</p>
|
|
<ul class="simple">
|
|
<li>A string giving an image name, or None to indicate the default.</li>
|
|
<li>A displayable to use if the condition is true.</li>
|
|
</ul>
|
|
<p>A default image should be specified.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>predict_all</cite></dt>
|
|
<dd>If True, all of the possible displayables will be predicted when
|
|
the displayable is shown. If False, only the current condition is
|
|
predicted. If None, <a class="reference internal" href="config.html#var-config.conditionswitch_predict_all"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.conditionswitch_predict_all</span></code></a> is
|
|
used.</dd>
|
|
</dl>
|
|
<p>One use of ShowingSwitch is to have images change depending on
|
|
the current emotion of a character. For example:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">emotion_indicator</span> <span class="o">=</span> <span class="n">ShowingSwitch</span><span class="p">(</span>
|
|
<span class="s2">"eileen concerned"</span><span class="p">,</span> <span class="s2">"emotion_indicator concerned"</span><span class="p">,</span>
|
|
<span class="s2">"eileen vhappy"</span><span class="p">,</span> <span class="s2">"emotion_indicator vhappy"</span><span class="p">,</span>
|
|
<span class="kc">None</span><span class="p">,</span> <span class="s2">"emotion_indicator happy"</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
</div>
|
|
<div class="section" id="applying-transforms-to-displayables">
|
|
<h2>Applying Transforms to Displayables<a class="headerlink" href="#applying-transforms-to-displayables" title="Permalink to this headline"> link</a></h2>
|
|
<p>The At function produces a displayable from a displayable and one or
|
|
more <a class="reference internal" href="transforms.html"><span class="doc">transforms</span></a>.</p>
|
|
<dl class="function">
|
|
<dt id="At">
|
|
<code class="descname">At</code><span class="sig-paren">(</span><em>d</em>, <em>*args</em><span class="sig-paren">)</span><a class="headerlink" href="#At" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>Given a displayable <cite>d</cite>, applies each of the transforms in <cite>args</cite>
|
|
to it. The transforms are applied in left-to-right order, so that
|
|
the outermost transform is the rightmost argument.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">transform</span> <span class="n">birds_transform</span><span class="p">:</span>
|
|
<span class="na">xpos</span> <span class="o">-</span><span class="mi">200</span>
|
|
<span class="n">linear</span> <span class="mi">10</span> <span class="na">xpos</span> <span class="mi">800</span>
|
|
<span class="k">pause</span> <span class="mi">20</span>
|
|
<span class="k">repeat</span>
|
|
|
|
<span class="k">image</span> <span class="n">birds</span> <span class="o">=</span> <span class="n">At</span><span class="p">(</span><span class="s2">"birds.png"</span><span class="p">,</span> <span class="n">birds_transform</span><span class="p">)</span>
|
|
</pre></div>
|
|
</div>
|
|
</dd></dl>
|
|
|
|
</div>
|
|
<div class="section" id="layout-boxes-and-grids">
|
|
<h2>Layout Boxes and Grids<a class="headerlink" href="#layout-boxes-and-grids" title="Permalink to this headline"> link</a></h2>
|
|
<p>Layout boxes are displayables that lay out their children on the
|
|
screen. They can lay out the children in a horizontal or vertical
|
|
manner, or lay them out using the standard positioning algorithm.</p>
|
|
<p>The box displayables take any number of positional and keyword
|
|
arguments. Positional arguments should be displayables that are
|
|
added to the box as children. Keyword arguments are style properties
|
|
that are applied to the box.</p>
|
|
<p>Boxes take <a class="reference internal" href="style_properties.html#position-style-properties"><span class="std std-ref">Position Style Properties</span></a> and <a class="reference internal" href="style_properties.html#box-style-properties"><span class="std std-ref">Box Style Properties</span></a>.</p>
|
|
<dl class="function">
|
|
<dt id="Fixed">
|
|
<code class="descname">Fixed</code><span class="sig-paren">(</span><em>*args</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Fixed" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>A box that fills the screen. Its members are laid out
|
|
from back to front, with their position properties
|
|
controlling their position.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="HBox">
|
|
<code class="descname">HBox</code><span class="sig-paren">(</span><em>*args</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#HBox" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>A box that lays out its members from left to right.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="function">
|
|
<dt id="VBox">
|
|
<code class="descname">VBox</code><span class="sig-paren">(</span><em>*args</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#VBox" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>A layout that lays out its members from top to bottom.</p>
|
|
</dd></dl>
|
|
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="c1"># Display two logos, to the left and right of each other.</span>
|
|
<span class="k">image</span> <span class="n">logo</span> <span class="k">hbox</span> <span class="o">=</span> <span class="n">HBox</span><span class="p">(</span><span class="s2">"logo.png"</span><span class="p">,</span> <span class="s2">"logo.png"</span><span class="p">)</span>
|
|
|
|
<span class="c1"># Display two logos, one on top of the other.</span>
|
|
<span class="k">image</span> <span class="n">logo</span> <span class="k">vbox</span> <span class="o">=</span> <span class="n">VBox</span><span class="p">(</span><span class="s2">"logo.png"</span><span class="p">,</span> <span class="s2">"logo.png"</span><span class="p">)</span>
|
|
|
|
<span class="c1"># Display two logos. Since both default to the upper-left</span>
|
|
<span class="c1"># corner of the screen, we need to use Image to place</span>
|
|
<span class="c1"># those logos on the screen.</span>
|
|
<span class="k">image</span> <span class="n">logo</span> <span class="k">fixed</span> <span class="o">=</span> <span class="n">Fixed</span><span class="p">(</span>
|
|
<span class="n">Image</span><span class="p">(</span><span class="s2">"logo.png"</span><span class="p">,</span> <span class="na">xalign</span><span class="o">=</span><span class="mf">0.0</span><span class="p">,</span> <span class="na">yalign</span><span class="o">=</span><span class="mf">0.0</span><span class="p">),</span>
|
|
<span class="n">Image</span><span class="p">(</span><span class="s2">"logo.png"</span><span class="p">,</span> <span class="na">xalign</span><span class="o">=</span><span class="mf">1.0</span><span class="p">,</span> <span class="na">yalign</span><span class="o">=</span><span class="mf">1.0</span><span class="p">))</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>The Grid layout displays its children in a grid on the screen. It takes
|
|
<a class="reference internal" href="style_properties.html#position-style-properties"><span class="std std-ref">Position Style Properties</span></a> and the <a class="reference internal" href="style_properties.html#style-property-spacing"><code class="xref std std-propref docutils literal notranslate"><span class="pre">spacing</span></code></a> style
|
|
property.</p>
|
|
<dl class="function">
|
|
<dt id="Grid">
|
|
<code class="descname">Grid</code><span class="sig-paren">(</span><em>cols</em>, <em>rows</em>, <em>*args</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Grid" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>Lays out displayables in a grid. The first two positional arguments
|
|
are the number of columns and rows in the grid. This must be followed
|
|
by <cite>columns * rows</cite> positional arguments giving the displayables that
|
|
fill the grid.</p>
|
|
</dd></dl>
|
|
|
|
</div>
|
|
<div class="section" id="effects">
|
|
<h2>Effects<a class="headerlink" href="#effects" title="Permalink to this headline"> link</a></h2>
|
|
<p>These displayables are used to create certain visual effects.</p>
|
|
<dl class="function">
|
|
<dt id="AlphaBlend">
|
|
<code class="descname">AlphaBlend</code><span class="sig-paren">(</span><em>control</em>, <em>old</em>, <em>new</em>, <em>alpha=False</em><span class="sig-paren">)</span><a class="headerlink" href="#AlphaBlend" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This transition uses a <cite>control</cite> displayable (almost always some sort of
|
|
animated transform) to transition from one displayable to another. The
|
|
transform is evaluated. The <cite>new</cite> displayable is used where the transform
|
|
is opaque, and the <cite>old</cite> displayable is used when it is transparent.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>alpha</cite></dt>
|
|
<dd>If true, the image is composited with what's behind it. If false,
|
|
the default, the image is opaque and overwrites what's behind it.</dd>
|
|
</dl>
|
|
</dd></dl>
|
|
|
|
</div>
|
|
<div class="section" id="image-manipulators">
|
|
<h2>Image Manipulators<a class="headerlink" href="#image-manipulators" title="Permalink to this headline"> link</a></h2>
|
|
<p>An <a class="reference internal" href="im.html"><span class="doc">image manipulator</span></a> is a displayable that takes an image or image
|
|
manipulator, and either loads it or performs an operation on it.
|
|
Image manipulators can only take images or other
|
|
image manipulators as input.</p>
|
|
<p>An image manipulator can be used any place a displayable can, but not
|
|
vice-versa. An <a class="reference internal" href="#Image" title="Image"><code class="xref py py-func docutils literal notranslate"><span class="pre">Image()</span></code></a> is a kind of image manipulator, so an
|
|
Image can be used whenever an image manipulator is required.</p>
|
|
<p>The use of image manipulators is
|
|
historic. A number of image manipulators that had been documented in the
|
|
past should no longer be used, as they suffer from inherent problems.
|
|
In any case except for <a class="reference internal" href="im.html#im.Data" title="im.Data"><code class="xref py py-func docutils literal notranslate"><span class="pre">im.Data()</span></code></a>, the <a class="reference internal" href="trans_trans_python.html#Transform" title="Transform"><code class="xref py py-func docutils literal notranslate"><span class="pre">Transform()</span></code></a> displayable provides
|
|
similar functionality in a more general manner, while fixing the problems,
|
|
although it sometimes requires gl2 to be enabled.</p>
|
|
<p>For the list of image manipulators, see the <a class="reference internal" href="im.html"><span class="doc">image manipulator</span></a>
|
|
documentation.</p>
|
|
</div>
|
|
<div class="section" id="placeholders">
|
|
<h2>Placeholders<a class="headerlink" href="#placeholders" title="Permalink to this headline"> link</a></h2>
|
|
<p>The Placeholder displayable is used to display background or character
|
|
images as appropriate. Placeholders are used automatically when an undefined
|
|
image is used in developer mode. Placeholder displayables can also be used
|
|
manually when the defaults are inappropriate.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="c1"># By default, the girl placeholder will be used.</span>
|
|
<span class="k">image</span> <span class="n">sue</span> <span class="o">=</span> <span class="n">Placeholder</span><span class="p">(</span><span class="s2">"boy"</span><span class="p">)</span>
|
|
|
|
<span class="k">label</span> <span class="n">start</span><span class="p">:</span>
|
|
<span class="k">show</span> <span class="n">sue</span> <span class="n">angry</span>
|
|
<span class="s2">"Sue"</span> <span class="s2">"How do you do? Now you gonna die!"</span>
|
|
</pre></div>
|
|
</div>
|
|
<dl class="function">
|
|
<dt id="Placeholder">
|
|
<code class="descname">Placeholder</code><span class="sig-paren">(</span><em>base=None</em>, <em>full=False</em>, <em>flip=None</em>, <em>text=None</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Placeholder" title="Permalink to this definition"> link</a></dt>
|
|
<dd><p>This displayable can be used to display a placeholder character or
|
|
background.</p>
|
|
<dl class="docutils">
|
|
<dt><cite>base</cite></dt>
|
|
<dd><p class="first">The type of image to display. This should be one of:</p>
|
|
<dl class="last docutils">
|
|
<dt>'bg'</dt>
|
|
<dd>To display a background placeholder. This currently
|
|
fills the screen with a light-gray, and displays
|
|
the image name at the top of the screen.</dd>
|
|
<dt>'boy'</dt>
|
|
<dd>Displays a male-identified placeholder with the image
|
|
name on his chest.</dd>
|
|
<dt>'girl'</dt>
|
|
<dd>Displays a female-identified placeholder with the image
|
|
name on her chest.</dd>
|
|
<dt>None</dt>
|
|
<dd><p class="first">Attempts to automatically determine the type of image
|
|
to use. If the image name begins with "bg", "cg", or
|
|
"event", uses 'bg'.</p>
|
|
<p class="last">Otherwise, the 'girl' placeholder is used.</p>
|
|
</dd>
|
|
</dl>
|
|
</dd>
|
|
<dt><cite>full</cite></dt>
|
|
<dd>If true, a full-body sprite is used. Otherwise, a 3/4 sprite
|
|
is used.</dd>
|
|
<dt><cite>flip</cite></dt>
|
|
<dd>If true, the sprite is flipped horizontally.</dd>
|
|
<dt><cite>text</cite></dt>
|
|
<dd>If provided, no other text than this will be displayed on the
|
|
placeholder. If not, the text will reflect the show
|
|
instruction that was used to display it.</dd>
|
|
</dl>
|
|
</dd></dl>
|
|
|
|
</div>
|
|
<div class="section" id="displayable-prefixes">
|
|
<span id="displayable-prefix"></span><h2>Displayable Prefixes<a class="headerlink" href="#displayable-prefixes" title="Permalink to this headline"> link</a></h2>
|
|
<p>Displayable prefixes make it possible for a creator to define their own
|
|
displayables, and refer to them anywhere a displayable can be used in
|
|
Ren'Py. A prefixed displayable is a string with a colon in it. The prefix
|
|
is to the left of the colon, and the argument is anything to the right of
|
|
it. The <a class="reference internal" href="config.html#var-config.displayable_prefix"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.displayable_prefix</span></code></a> variable maps a prefix to a function.
|
|
The function takes the argument, and either returns a displayable or None.</p>
|
|
<p>For example, this makes the big prefix return an image that is twice as
|
|
big as the original.</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">init</span> <span class="o">-</span><span class="mi">10</span> <span class="k">python</span><span class="p">:</span>
|
|
<span class="k">def</span> <span class="nf">embiggen</span><span class="p">(</span><span class="n">s</span><span class="p">):</span>
|
|
<span class="k">return</span> <span class="n">Transform</span><span class="p">(</span><span class="n">s</span><span class="p">,</span> <span class="na">zoom</span><span class="o">=</span><span class="mi">2</span><span class="p">)</span>
|
|
|
|
<span class="n">config</span><span class="o">.</span><span class="n">displayable_prefix</span><span class="p">[</span><span class="s2">"big"</span><span class="p">]</span> <span class="o">=</span> <span class="n">embiggen</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>The <code class="docutils literal notranslate"><span class="pre">init</span> <span class="pre">-10</span></code> makes sure the prefix is defined before any images that use it.
|
|
The prefix can then be used to define images:</p>
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">image</span> <span class="n">eileen</span> <span class="n">big</span> <span class="o">=</span> <span class="s2">"big:eileen happy"</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>or in any other place where a displayable is required.</p>
|
|
</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><a class="reference internal" href="displaying_images.html"><span class="doc">Displaying Images</span></a> : the basics of how to make all these displayables
|
|
appear on the screen.</p>
|
|
</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> |