1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
<html><head><title>renpy/doc/tutorials/Adding Graphics to Your Story - Ren'Py</title><link href="../shared.css" rel="stylesheet"><link href="../monobook.css" rel="stylesheet"><link href="../common.css" rel="stylesheet"><link href="../monobook2.css" rel="stylesheet"><link href="../docs.css" rel="stylesheet" /></link></link></link></link></head><body><div id="bodyContent">
<p class="docnav"><a href="../index.html">documentation index</a></p><table class="toc" id="toc" summary="Contents">
<tr>
<td>
<div id="toctitle">
<h2>Contents</h2>
</div>
<ul>
<li class="toclevel-1"><a href="#Adding_Graphics_to_Your_Story"><span class="tocnumber">1</span> <span class="toctext">Adding Graphics to Your Story</span></a>
<ul>
<li class="toclevel-2"><a href="#Initializing_the_Graphics"><span class="tocnumber">1.1</span> <span class="toctext">Initializing the Graphics</span></a></li>
<li class="toclevel-2"><a href="#Scene_Backgrounds"><span class="tocnumber">1.2</span> <span class="toctext">Scene Backgrounds</span></a></li>
<li class="toclevel-2"><a href="#Character_Graphics"><span class="tocnumber">1.3</span> <span class="toctext">Character Graphics</span></a></li>
<li class="toclevel-2"><a href="#Hiding_Graphics"><span class="tocnumber">1.4</span> <span class="toctext">Hiding Graphics</span></a>
<ul>
<li class="toclevel-3"><a href="#Explicity"><span class="tocnumber">1.4.1</span> <span class="toctext">Explicity</span></a></li>
<li class="toclevel-3"><a href="#Implicitly_with_show"><span class="tocnumber">1.4.2</span> <span class="toctext">Implicitly with show</span></a></li>
<li class="toclevel-3"><a href="#Implicitly_with_scene"><span class="tocnumber">1.4.3</span> <span class="toctext">Implicitly with scene</span></a></li>
</ul>
</li>
<li class="toclevel-2"><a href="#Special_Effects"><span class="tocnumber">1.5</span> <span class="toctext">Special Effects</span></a></li>
<li class="toclevel-2"><a href="#Getting_What_You_Want_to_Happen.2C_to_Happen"><span class="tocnumber">1.6</span> <span class="toctext">Getting What You Want to Happen, to Happen</span></a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript">
//
if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); }
//
</script>
<p><a id="Adding_Graphics_to_Your_Story" name="Adding_Graphics_to_Your_Story"></a></p>
<h2><span class="mw-headline">Adding Graphics to Your Story</span></h2>
<p><a id="Initializing_the_Graphics" name="Initializing_the_Graphics"></a></p>
<h3><span class="mw-headline">Initializing the Graphics</span></h3>
<p>The first step in using a graphic image is to tell Ren'Py about it in an init block with an <a href="../reference/The_Ren%27Py_Language#image" title="renpy/doc/reference/The Ren'Py Language">image statement</a>. You create a Ren'Py image from either solid colors or files (really, any <a href="../reference/Displayables.html" title="renpy/doc/reference/Displayables">Displayable</a>):</p>
<pre>
<span class="kwa">init</span><span class="sym">:</span>
<span class="kwa">image</span> black <span class="sym">=</span> <span class="str">"#000000"</span>
<span class="kwa">image</span> bg park <span class="sym">=</span> <span class="str">"park.jpg"</span>
<span class="kwa">image</span> eileen happy <span class="sym">=</span> <span class="str">"eileen1.png"</span>
<span class="kwa">image</span> eileen sad <span class="sym">=</span> <span class="str">"eileen2.png"</span>
<span class="kwa">image</span> eileen surprised <span class="sym">=</span> <span class="str">"eileen3.png"</span>
</pre>
<p>As you see, image names can be more than one word. We'll talk about why this is useful in the section on hiding images. Image names and character objects don't have anything to do with each other, so you can re-use character names as image names.</p>
<p><a id="Scene_Backgrounds" name="Scene_Backgrounds"></a></p>
<h3><span class="mw-headline">Scene Backgrounds</span></h3>
<p>The <a href="../reference/The_Ren%27Py_Language#scene" title="renpy/doc/reference/The Ren'Py Language">scene statement</a> clears the display of what's on it and optionally places a new background on the display:</p>
<pre>
<span class="kwa">scene</span> bg park
</pre>
<p>(Please recall that "bg park" is the name of the image; bg is not a keyword.)</p>
<p><a id="Character_Graphics" name="Character_Graphics"></a></p>
<h3><span class="mw-headline">Character Graphics</span></h3>
<p>Character graphics and other objects which are drawn in the foreground are displayed with the <a href="../reference/The_Ren%27Py_Language#show" title="renpy/doc/reference/The Ren'Py Language">show statement</a>:</p>
<pre>
<span class="kwa">show</span> eileen happy
</pre>
<p>A show statement without any modifiers shows the image centered in the screen. You can also display images on the sides:</p>
<pre>
<span class="kwa">show</span> eileen happy <span class="kwa">at</span> right
</pre>
<pre>
<span class="kwa">show</span> eileen happy <span class="kwa">at</span> left
</pre>
<p><a id="Hiding_Graphics" name="Hiding_Graphics"></a></p>
<h3><span class="mw-headline">Hiding Graphics</span></h3>
<p>Hiding graphics which were displayed with the show statement can be accomplished in three ways:</p>
<p><a id="Explicity" name="Explicity"></a></p>
<h4><span class="mw-headline">Explicity</span></h4>
<p>First, you can explicitly hide a graphic which was shown using the <a href="../reference/The_Ren%27Py_Language#hide" title="renpy/doc/reference/The Ren'Py Language">hide statement</a>:</p>
<pre>
<span class="kwa">hide</span> eileen
</pre>
<p>If an image consists of more than one word, you only need to tell the hide statement about the first word (the "image tag"). This means that you don't have to keep track of the version of the character graphic that you've shown most recently.</p>
<p><a id="Implicitly_with_show" name="Implicitly_with_show"></a></p>
<h4><span class="mw-headline">Implicitly with show</span></h4>
<p>The show statement will automatically replace the image with the same image tag which us currently being shown (though not quite in the same way as a hide statement). For example:</p>
<pre>
<span class="kwa">show</span> eileen happy
e <span class="str">"I'm happy."</span>
<span class="kwa">show</span> eileen sad
e <span class="str">"Now I'm sad."</span>
</pre>
<p>does the right thing — you don't get two copies of eileen on top of each other.</p>
<p><a id="Implicitly_with_scene" name="Implicitly_with_scene"></a></p>
<h4><span class="mw-headline">Implicitly with scene</span></h4>
<p>The scene statement clears all images off of the screen, so if you're changing scenes you don't need to hide anything first.</p>
<p><a id="Special_Effects" name="Special_Effects"></a></p>
<h3><span class="mw-headline">Special Effects</span></h3>
<p>All of the statements which show and hide images can be modified by adding a <b>with clause</b> (see: <a href="../reference/The_Ren%27Py_Language#with" title="renpy/doc/reference/The Ren'Py Language">with statement</a>):</p>
<pre>
<span class="kwa">scene</span> bg park <span class="kwa">with</span> fade
</pre>
<pre>
<span class="kwa">show</span> eileen happy <span class="kwa">with</span> dissolve
</pre>
<p>There are many special effects available, but those are the two most commonly used. (It seems like only George Lucas can get away with stuff like side wipes, but if you want to try, you can check out the full list of <a href="../reference/Transitions#predefined" title="renpy/doc/reference/Transitions">Pre-Defined Transitions</a>.)</p>
<p><a id="Getting_What_You_Want_to_Happen.2C_to_Happen" name="Getting_What_You_Want_to_Happen.2C_to_Happen"></a></p>
<h3><span class="mw-headline">Getting What You Want to Happen, to Happen</span></h3>
<p>Neither the scene statement nor the show statement, on their own, immediately display to the screen. Rather they queue images up, so if you combined them:</p>
<pre>
<span class="kwa">scene</span> bg park
<span class="kwa">show</span> eileen happy
<span class="kwa">show</span> ted happy <span class="kwa">at</span> left
</pre>
<p>it will display all at once. The <i>with</i> statement and clause both change this. So if you wrote this:</p>
<pre>
<span class="kwa">scene</span> bg park <span class="kwa">with</span> fade
<span class="kwa">show</span> eileen happy <span class="kwa">with</span> dissolve
<span class="kwa">show</span> ted happy <span class="kwa">at</span> left <span class="kwa">with</span> dissolve
</pre>
<p>Ren'Py will first fade the background in, then dissolve eileen onto the screen, then dissolve ted onto the screen. To get a single fade into the new background with eileen and ted on it, use the statement form of "with" after you've told Ren'Py what you want on the screen:</p>
<pre>
<span class="kwa">show</span> bg park
<span class="kwa">show</span> eileen happy
<span class="kwa">show</span> ted happy
<span class="kwa">with</span> dissolve
</pre>
<p>(Please note: for historical reasons, this is not the same as:</p>
<pre>
<span class="kwa">show</span> bg park
<span class="kwa">show</span> eileen happy
<span class="kwa">show</span> ted happy <span class="kwa">with</span> dissolve
</pre>
<p>Which will cause the background and eileen to display without a transition and then show ted with a dissolve transition. In general, if you're using more than one statement, only use the <i>with</i> statement on its own line.)</p>
<p>As a result of the show statement's queueing behavior, this won't work:</p>
<pre>
<span class="kwa">show</span> eileen happy
<span class="kwa">show</span> eileen sad
<span class="kwa">show</span> eileen morose
<span class="kwa">show</span> eileen elated
</pre>
<p>the reader will only see the last one. If you want to show several versions of a character without interacting with the reader, you need to use the with clause to get them displayed:</p>
<pre>
<span class="kwa">show</span> eileen happy <span class="kwa">with</span> dissolve
<span class="kwa">show</span> eileen sad <span class="kwa">with</span> dissolve
<span class="kwa">show</span> eileen morose <span class="kwa">with</span> dissolve
<span class="kwa">show</span> eileen elated <span class="kwa">with</span> dissolve
</pre>
<table align="center" border="1" cellpadding="10" cellspacing="1" style="background: #fff0e0; text-align: center;" width="80%">
<tr>
<td width="30%">Previous:<br />
<a href="../tutorials/Your_First_Dialogue.html" title="renpy/doc/tutorials/Your First Dialogue">Your First Dialogue</a></td>
<td width="40%"><b><a href="../tutorials/Ren%27Py_Web_Tutorial.html" title="renpy/doc/tutorials/Ren'Py Web Tutorial">Ren'Py Web Tutorial</a></b></td>
<td width="30%">Next:<br />
<a href="../tutorials/Giving_the_User_a_Choice_With_Menus.html" title="renpy/doc/tutorials/Giving the User a Choice With Menus">Giving the User a Choice With Menus</a></td>
</tr>
</table>
<div class="visualClear" />
<hr /><p class="docnav"><a href="../index.html">documentation index</a></p></div>
</body></html>
|
