renpy/doc/transforms.html

357 lines
21 KiB
HTML
Raw Normal View History

2023-01-18 22:13:55 +00:00
<!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>Transforms &#8212; Ren&#39;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="Transitions" href="transitions.html" />
<link rel="prev" title="Displayables" href="displayables.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&#39;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 &amp; 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"><a class="reference internal" href="displayables.html">Displayables</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">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="#">Transforms</a><ul>
<li><a class="reference internal" href="#default-transforms">Default Transforms</a></li>
<li><a class="reference internal" href="#creator-defined-transforms">Creator-Defined Transforms</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-9 content">
<div class="section" id="transforms">
<span id="id1"></span><h1>Transforms<a class="headerlink" href="#transforms" title="Permalink to this headline"> link</a></h1>
<p>A transform can be applied to a displayable to yield another
displayable. The built-in transforms are used to control where an
object is placed on the screen, while user-defined transforms
can cause more complex effects, like motion, zoom, and rotation.</p>
<p>Transforms can be applied by giving the at clause to the scene and
show statements. The following applies the &quot;right&quot; transform to
the eileen happy displayable.:</p>
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">show</span> <span class="n">eileen</span> <span class="n">happy</span> <span class="k">at</span> <span class="n">right</span>
</pre></div>
</div>
<p>Multiple transforms can be applied by separating them with commas. These
transforms are applied from left-to-right, with the rightmost
transform taking precedence in the case of conflicts.</p>
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">show</span> <span class="n">eileen</span> <span class="n">happy</span> <span class="k">at</span> <span class="n">halfsize</span><span class="p">,</span> <span class="n">right</span>
</pre></div>
</div>
<p>A displayable always has a transform associated with it. If no
transform is given, the prior transform is used. When the transform is
changed, undefined values are taken from the prior transform, or from
<code class="docutils literal notranslate"><span class="pre">default</span></code> if there is no prior transform.</p>
<div class="section" id="default-transforms">
<h2>Default Transforms<a class="headerlink" href="#default-transforms" title="Permalink to this headline"> link</a></h2>
<p>Ren'Py ships with a number of transforms defined by default. These
transforms position things on the screen. Here's a depiction of where
each default transform will position an image.</p>
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span> <span class="o">+-----------------------------------------------------------+</span>
<span class="o">|</span><span class="n">topleft</span><span class="p">,</span> <span class="n">reset</span> <span class="n">top</span> <span class="n">topright</span><span class="o">|</span>
<span class="o">|</span> <span class="o">|</span>
<span class="o">|</span> <span class="o">|</span>
<span class="o">|</span> <span class="o">|</span>
<span class="o">|</span> <span class="o">|</span>
<span class="o">|</span> <span class="n">truecenter</span> <span class="o">|</span>
<span class="o">|</span> <span class="o">|</span>
<span class="o">|</span> <span class="o">|</span>
<span class="o">|</span> <span class="o">|</span>
<span class="o">|</span> <span class="o">|</span>
<span class="n">offscreenleft</span><span class="o">|</span><span class="n">left</span> <span class="n">center</span><span class="p">,</span> <span class="k">default</span> <span class="n">right</span><span class="o">|</span><span class="n">offscreenright</span>
<span class="o">+-----------------------------------------------------------+</span>
</pre></div>
</div>
<p>The offscreenleft and offscreenright transforms position images off the
screen. These transforms can be used to move things off the screen
(remember to hide them afterwards, to ensure that they do not consume
resources).</p>
<p>The transforms are:</p>
<dl class="var">
<dt id="var-center">
<code class="descname">center</code><a class="headerlink" href="#var-center" title="Permalink to this definition"> link</a></dt>
<dd><p>Centers horizontally, and aligns to the bottom of the screen.</p>
</dd></dl>
<dl class="var">
<dt id="var-default">
<code class="descname">default</code><a class="headerlink" href="#var-default" title="Permalink to this definition"> link</a></dt>
<dd><p>Centers horizontally, and aligns to the bottom of the screen. This
can be redefined via <a class="reference internal" href="config.html#var-config.default_transform"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.default_transform</span></code></a> to change the
default placement of images shown with the show or scene statements.</p>
</dd></dl>
<dl class="var">
<dt id="var-left">
<code class="descname">left</code><a class="headerlink" href="#var-left" title="Permalink to this definition"> link</a></dt>
<dd><p>Aligns to the bottom-left corner of the screen.</p>
</dd></dl>
<dl class="var">
<dt id="var-offscreenleft">
<code class="descname">offscreenleft</code><a class="headerlink" href="#var-offscreenleft" title="Permalink to this definition"> link</a></dt>
<dd><p>Places the displayable off the left side of the screen,
aligned to the bottom of the screen.</p>
</dd></dl>
<dl class="var">
<dt id="var-offscreenright">
<code class="descname">offscreenright</code><a class="headerlink" href="#var-offscreenright" title="Permalink to this definition"> link</a></dt>
<dd><p>Places the displayable off the left side of the screen,
aligned to the bottom of the screen.</p>
</dd></dl>
<dl class="var">
<dt id="var-reset">
<code class="descname">reset</code><a class="headerlink" href="#var-reset" title="Permalink to this definition"> link</a></dt>
<dd><p>Resets the transform. Places the displayable in the top-left
corner of the screen, and also eliminates any zoom, rotation, or
other effects.</p>
</dd></dl>
<dl class="var">
<dt id="var-right">
<code class="descname">right</code><a class="headerlink" href="#var-right" title="Permalink to this definition"> link</a></dt>
<dd><p>Aligns to the bottom-right corner of the screen.</p>
</dd></dl>
<dl class="var">
<dt id="var-top">
<code class="descname">top</code><a class="headerlink" href="#var-top" title="Permalink to this definition"> link</a></dt>
<dd><p>Centers horizontally, and aligns to the top of the screen.</p>
</dd></dl>
<dl class="var">
<dt id="var-topleft">
<code class="descname">topleft</code><a class="headerlink" href="#var-topleft" title="Permalink to this definition"> link</a></dt>
<dd><p>Aligns to the top-left corner of the screen.</p>
</dd></dl>
<dl class="var">
<dt id="var-topright">
<code class="descname">topright</code><a class="headerlink" href="#var-topright" title="Permalink to this definition"> link</a></dt>
<dd><p>Aligns to the top-right corner of the screen.</p>
</dd></dl>
<dl class="var">
<dt id="var-truecenter">
<code class="descname">truecenter</code><a class="headerlink" href="#var-truecenter" title="Permalink to this definition"> link</a></dt>
<dd><p>Centers both horizontally and vertically.</p>
</dd></dl>
</div>
<div class="section" id="creator-defined-transforms">
<h2>Creator-Defined Transforms<a class="headerlink" href="#creator-defined-transforms" title="Permalink to this headline"> link</a></h2>
<p>A creator can define a transform using the
<a class="reference internal" href="atl.html"><span class="doc">animation and transformation language</span></a>, or the
<a class="reference internal" href="trans_trans_python.html#Transform" title="Transform"><code class="xref py py-class docutils literal notranslate"><span class="pre">Transform</span></code></a> function.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-right">
<a href="#">Back to top</a>
</p>
<p>
&copy; 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>