ViewVC Help
View File | Revision Log | Show Annotations | Download File
/cvs/deliantra/www/src/editor_tut.html
(Generate patch)

Comparing deliantra/www/src/editor_tut.html (file contents):
Revision 1.6 by root, Fri May 9 16:56:58 2008 UTC vs.
Revision 1.7 by elmex, Fri Jun 20 08:32:32 2008 UTC

… …
2 2
3<div class="tutorial"> 3<div class="tutorial">
4<h2>Deliantra map making and server installation tutorial for Linux</h2> 4<h2>Deliantra map making and server installation tutorial for Linux</h2>
5 5
6<p> 6<p>
7So, you don't know much about crossfire and or programming, but 7So, you don't know much about deliantra and or programming, but
8you want to make maps? This Tutorial will explain how to 8you want to make maps? This Tutorial will explain how to
9install the Deliantra server (from CVS) on your linux system 9install the Deliantra server (from CVS) on your linux system
10and making your first maps. If you are stuck somewhere, please 10and making your first maps. If you are stuck somewhere, please
11<a href="contact.html">contact</a> us (the developers). 11<a href="contact.html">contact</a> us (the developers).
12</p> 12</p>
… …
15 Note: I am assuming here that you are using a <tt>bash</tt>-like shell. And that you are logged in as root. 15 Note: I am assuming here that you are using a <tt>bash</tt>-like shell. And that you are logged in as root.
16 If you want to install and setup everything from a regular user account you have to take care of all permission 16 If you want to install and setup everything from a regular user account you have to take care of all permission
17 handling yourself. 17 handling yourself.
18</em> </p> 18</em> </p>
19 19
20<h3>Step 1: Getting the map editor and setting it up</h3>
21
22<p>
23Now download the editor! You can either install all the Perl modules and stuff by yourself
24or just choose the binary: <a href="editor.html">editor download page</a>.
25I'm not going to discuss the installation procedure for the CVS here, as it requires much
26knowledge about your system and how to install (perl) software from source. If you only want to
27make maps, the binary will do very fine (on x86 systems).
28</p>
29
30<p>
31So, the next thing is to download the editor. </p>
32
33<pre>
34root@localhost: ~/deliantra# wget http://dist.schmorp.de/gce/gce-gnu-linux-x86.bin
35</pre>
36
37<p>There it is, now we make it an executable and run it:</p>
38
39<pre>
40root@localhost: ~/deliantra# chmod a+x gce-gnu-linux-x86.bin
41</pre>
42
43<p>
44Now we make a start script like for the server and run it
45<em>Note: the first startup may take some while, the editor has to read all the archetypes and graphics.</em>:
46</p>
47
48<pre>
49root@localhost: ~/deliantra# echo "CROSSFIRE_LIBDIR=/opt/deliantra/share/deliantra/ ./gce-gnu-linux-x86.bin" &gt; startgce
50root@localhost: ~/deliantra# chmod a+x startgce
51root@localhost: ~/deliantra# ./startgce
52</pre>
53
54<p><em>
55 Note: If you run into problems when starting the editor make sure you have gtk2, glib2 and pango and cairo libraries
56 correctly installed. As i don't know your linux system you would have to figure out that yourself.
57</em></p>
58
59<p><em>
60 Note 2: If you are familiar with your system i recommend to set the CROSSFIRE_LIBDIR variable in your shells startup configuration.
61</em></p>
62
63<p>
64Now i could let you run around for yourself, if you are planning to figure out stuff
65yourself now, do it, but make sure you find the <b>manual of the editor in the toolbox window in the HELP menu!</b>
66</p>
67
68<p>But i guess the best thing is to explain now what to do, and how to do. The first things you will see is this:</p>
69
70<a href="tutscrs/mainview1.png"><img src="tutscrs/mainview1_tb.jpg" alt="main view" /></a>
71
72<p>Now open up 2 pickers, the stack view dialog and rearrange all the windows like this:</p>
73
74<a href="tutscrs/mainview2.png"><img src="tutscrs/mainview2_tb.jpg" alt="main view with layout" /></a>
75
76<p>
77You notice that the pickers are still empty, go to the drop-down box on the top of the pickers
78and select 'wall' and 'floor' from there:
79</p>
80
81<a href="tutscrs/mainview3.png"><img src="tutscrs/mainview3_tb.jpg" alt="main view with finished layout" /></a>
82
83<p>
84Now it's time to click the <em>Save Layout</em> entry in the <em>File</em> menu. It will save all the
85window sizes and positions. So you don't have to make all the layout work next time again.
86As you go on with map editing you maybe find other layouts more useful, try around, and of course: use more
87pickers. I mostly have 3-4 pickers open to do all the stuff i want.
88</p>
89
90<a href="tutscrs/mainview4.png"><img src="tutscrs/mainview4_tb.jpg" alt="main view with finished and saved layout" /></a>
91
92<p>Finished! You have now a layout we can work with. Go on to the next step:</p>
93
94<h3>Step 2: Making your first map</h3>
95
96<p>
97This step will introduce some tools and shortcuts you may use on a regular basis when making maps.
98</p>
99
100<p>
101First make a new map. Go to the <em>File-&gt;New</em> menu for that an click on it.
102Next a dialog will open up, that will ask you for a map size. The default is 20x20. You
103can adjust that like you want. But we recommend not to make maps much larger than 50x50 or 60x60.
104It reduces the server load somewhat. Better use tiled maps or linked maps (with exits between them).
105</p>
106
107<p>
108Click on the <em>new</em> button and the map editor will open up:
109</p>
110
111<a href="tutscrs/mapedit1.png"><img src="tutscrs/mapedit1_tb.jpg" alt="clean map editor" /></a>
112
113<p>
114You recognize the ugly color on the backgrounds of the pickers and the map editor window.
115It's not configurable, and it's there to give a clear contrast to stuff on the map.
116</p>
117
118<p><b>
119 Note: You can scroll in the map editor window and the pickers by holding down the middle mouse button
120 and drag it. (This is similar to GIMP).
121</b></p>
122
123<p>
124Now resize the map editor window a little bit and select the <em>Select</em> tool from the
125left and draw a rectangle over the map with it. Next select a floor from the picker. The floor will appear in the
126attribute editor.
127</p>
128
129<a href="tutscrs/mapedit2.png"><img src="tutscrs/mapedit2_tb.jpg" alt="map editor with selection" /></a>
130
131<p>
132Now look in the toolbox window on the bottom, where the tool-controls are. There are radio buttons:
133<em>place</em>, <em>erase</em> and <em>perl</em>. Place executes the place tool on every cell in the selection
134and erase executes the erase tool on every cell in the selection. The perl thing is something advanced,
135it runs a small perl script on every cell in the selection, it's likely to go away some day (maybe).
136</p>
137
138<p>
139Select the <em>place</em> radio button, and press the <em>invoke</em> button. The selection will be filled
140with the selected floor:
141</p>
142
143<a href="tutscrs/mapedit3.png"><img src="tutscrs/mapedit3_tb.jpg" alt="map editor with floor" /></a>
144
145<p>
146Next we are using the autojoining placement of walls, pick the "awall_0" tile from the picker with the walls.
147Make sure the place tool is in <em>auto</em> mode.
148</p>
149
150<p>
151 <em>
152 Note: In future when you want to use the autojoining placement you have to take care that the
153 wall tile you are using to draw ends in "_0". But some walls, like the cave walls, are just not autojoinable.
154 You will have to place them yourself.
155 </em>
156</p>
157
158<p>
159When you picked the wall, just draw some walls like you would draw in a graphics program (like GIMP).
160Draw something similiar like you see in the screenshot. With some holes in the walls.
161</p>
162
163<p>
164If you make a mistake while drawing the wall just hold the <i>CTRL</i> key to temporarily switch to the
165erase mode and erase all the bad walls and redraw the area. Or just <em>Edit->Undo</em> it. (Shortcut key
166combination for undo is <i>CTRL+z<i> and redo is <i>CTRL+y</i>).
167</p>
168
169<a href="tutscrs/mapedit4.png"><img src="tutscrs/mapedit4_tb.jpg" alt="map editor with floor and walls" /></a>
170
171<p> <b>to be continued...</b> </p>
172
173<hr>
174
175<h2>Installing the server for testing the maps</h2>
176
177
20<h3>Step 1: Downloading the maps and the server from CVS</h3> 178<h3>Step A: Downloading the maps and the server from CVS</h3>
21 179
22<p> 180<p>
23I assume here you have <tt>cvs</tt> installed. (the debian shortcut would 181I assume here you have <tt>cvs</tt> installed. (the debian shortcut would
24be: <tt>apt-get install cvs</tt>). 182be: <tt>apt-get install cvs</tt>).
25</p> 183</p>
… …
28Create a directory in your home where all your Deliantra (map) development 186Create a directory in your home where all your Deliantra (map) development
29should take place: 187should take place:
30</p> 188</p>
31 189
32<pre> 190<pre>
33root@localhost: ~# mkdir ~/crossfire/ 191root@localhost: ~# mkdir ~/deliantra/
34</pre> 192</pre>
35 193
36<p> <em> 194<p> <em>
37 NOTE: the 'root@localhost: ~#' stands for your shellprompt, where '~' is the 195 NOTE: the 'root@localhost: ~#' stands for your shellprompt, where '~' is the
38 current working directory. And the ~ stands for your root homedirectory, if you are working 196 current working directory. And the ~ stands for your root homedirectory, if you are working
… …
40</em> </p> 198</em> </p>
41 199
42<p> Go into that directory: </p> 200<p> Go into that directory: </p>
43 201
44<pre> 202<pre>
45root@localhost: ~# cd ~/crossfire/ 203root@localhost: ~# cd ~/deliantra/
46</pre> 204</pre>
47 205
48 206
49<p>Now, we are going to get the files, first the maps:</p> 207<p>Now, we are going to get the files, first the maps:</p>
50 208
51<pre> 209<pre>
52root@localhost: ~/crossfire# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de/schmorpforge co -d maps deliantra/maps 210root@localhost: ~/deliantra# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de/schmorpforge co -d maps deliantra/maps
53</pre> 211</pre>
54 212
55<p>And then the archetypes (needed for building the server, and could take a while):</p> 213<p>And then the archetypes (needed for building the server, and could take a while):</p>
56 214
57<pre> 215<pre>
58root@localhost: ~/crossfire# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de/schmorpforge co -d arch deliantra/arch 216root@localhost: ~/deliantra# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de/schmorpforge co -d arch deliantra/arch
59</pre> 217</pre>
60 218
61<p>Finnally the server source itself:</p> 219<p>Finnally the server source itself:</p>
62 220
63<pre> 221<pre>
64root@localhost: ~/crossfire# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de/schmorpforge co -d server deliantra/server 222root@localhost: ~/deliantra# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de/schmorpforge co -d server deliantra/server
65</pre> 223</pre>
66 224
67<p> 225<p>
68Now a <tt>ls -l</tt> should show something like this: 226Now a <tt>ls -l</tt> should show something like this:
69</p> 227</p>
70 228
71<pre> 229<pre>
72root@localhost: ~/crossfire# ls -l 230root@localhost: ~/deliantra# ls -l
73 1 drwxr-xr-x 39 root users 1192 2006-06-01 21:29 maps 231 1 drwxr-xr-x 39 root users 1192 2006-06-01 21:29 maps
74 1 drwxr-xr-x 39 root users 4096 2006-05-26 12:38 arch 232 1 drwxr-xr-x 39 root users 4096 2006-05-26 12:38 arch
75 1 drwxr-xr-x 17 root users 1072 2006-05-26 11:34 server 233 1 drwxr-xr-x 17 root users 1072 2006-05-26 11:34 server
76</pre> 234</pre>
77 235
78<h3>Step 2: Compiling and installing the server</h3> 236<h3>Step B: Compiling and installing the server</h3>
79 237
80<p> 238<p>
81Start by going into the server CVS checkout directory and just call configure (the script that 239Start by going into the server CVS checkout directory and just call configure (the script that
82will find all the neccessary tools to compile the server). Please make sure you have 240will find all the neccessary tools to compile the server). Please make sure you have
83development tools like gcc (gnu c compiler) and headers installed: 241development tools like gcc (gnu c compiler) and headers installed:
84</p> 242</p>
85 243
86<pre> 244<pre>
87root@localhost: ~/crossfire# cd server 245root@localhost: ~/deliantra# cd server
88root@localhost: ~/crossfire/server# ln -s /root/crossfire/arch lib/arch 246root@localhost: ~/deliantra/server# ln -s /root/deliantra/arch lib/arch
89root@localhost: ~/crossfire/server# ./configure --prefix=/opt/crossfire/ 247root@localhost: ~/deliantra/server# ./configure --prefix=/opt/deliantra/
90</pre> 248</pre>
91 249
92<p> 250<p>
93The prefix argument tells the configure script to choose /opt/crossfire/ as installation 251The prefix argument tells the configure script to choose /opt/deliantra/ as installation
94destination. This is done to prevent the server installation from polluting your 252destination. This is done to prevent the server installation from polluting your
95system and to keep all files together. 253system and to keep all files together.
96</p> 254</p>
97 255
98<p> Next step is the compilation and installation of the server: </p> 256<p> Next step is the compilation and installation of the server: </p>
99 257
100<pre> 258<pre>
101root@localhost: ~/crossfire/server# make install 259root@localhost: ~/deliantra/server# make install
102</pre> 260</pre>
103 261
104<p> 262<p>
105That should build the sources and install them. If you encounter problems here you could try to contact us. 263That should build the sources and install them. If you encounter problems here you could try to contact us.
106If everythin went fine, there should be a <tt>/opt/crossfire/</tt> directory now with files in it. 264If everythin went fine, there should be a <tt>/opt/deliantra/</tt> directory now with files in it.
107</p> 265</p>
108 266
109<p> 267<p>
110Next step is to link the maps into the installed server directory. First go back into the parent 268Next step is to link the maps into the installed server directory. First go back into the parent
111directory and then link the maps dir to the right location: 269directory and then link the maps dir to the right location:
112</p> 270</p>
113 271
114<pre> 272<pre>
115root@localhost: ~/crossfire/server# cd .. 273root@localhost: ~/deliantra/server# cd ..
116root@localhost: ~/crossfire# ln -s ~/crossfire/maps /opt/crossfire/share/crossfire/maps 274root@localhost: ~/deliantra# ln -s ~/deliantra/maps /opt/deliantra/share/deliantra/maps
117</pre> 275</pre>
118 276
119<p> 277<p>
120Now everything is in place and all thats left is to write a 278Now everything is in place and all thats left is to write a
121startup script for the server: 279startup script for the server:
122</p> 280</p>
123 281
124<pre> 282<pre>
125root@localhost: ~/crossfire# echo "CROSSFIRE_LIBDIR=/opt/crossfire/share/crossfire/ /opt/crossfire/bin/crossfire" > startcf 283root@localhost: ~/deliantra# echo "CROSSFIRE_LIBDIR=/opt/deliantra/share/deliantra/ /opt/deliantra/bin/deliantra" > startcf
126root@localhost: ~/crossfire# chmod a+x startcf 284root@localhost: ~/deliantra# chmod a+x startcf
127</pre> 285</pre>
128 286
129<p><em> 287<p><em>
130 Note: The CROSSFIRE_LIBDIR thing is setting an environment variable which 288 Note: The CROSSFIRE_LIBDIR thing is setting an environment variable which
131 tells the server where to look for the configuration variables and the maps 289 tells the server where to look for the configuration variables and the maps
132</em></p> 290</em></p>
133 291
134<p>Now try to shoot it up:</p> 292<p>Now try to shoot it up:</p>
135 293
136<pre> 294<pre>
137root@localhost: ~/crossfire# ./startcf 295root@localhost: ~/deliantra# ./startcf
138</pre> 296</pre>
139 297
140<p> 298<p>
141You should see lots of output running accross your screen. 299You should see lots of output running accross your screen.
142Congratulations, you just setup a Deliantra server. 300Congratulations, you just setup a Deliantra server.
143You maybe want to dive into the server tree and look around in the <tt>doc/</tt> 301You maybe want to dive into the server tree and look around in the <tt>doc/</tt>
144directory to find more about the server. 302directory to find more about the server.
145</p> 303</p>
146 304
147<h3>Step 3: Getting the map editor and setting it up</h3>
148 305
149<p>
150Now download the editor! You can either install all the Perl modules and stuff by yourself
151or just choose the binary: <a href="http://dist.schmorp.de/gce/gce-gnu-linux-x86.bin">gce-gnu-linux-x86.bin</a>.
152I'm not going to discuss the installation procedure for the CVS here, as it requires much
153knowledge about your system and how to install (perl) software from source. If you only want to
154make maps, the binary will do very fine (on x86 systems).
155</p>
156
157<p>
158So, the next thing is to download the editor. </p>
159
160<pre>
161root@localhost: ~/crossfire# wget http://dist.schmorp.de/gce/gce-gnu-linux-x86.bin
162</pre>
163
164<p>There it is, now we make it an executable and run it:</p>
165
166<pre>
167root@localhost: ~/crossfire# chmod a+x gce-gnu-linux-x86.bin
168</pre>
169
170<p>
171Now we make a start script like for the server and run it
172<em>Note: the first startup may take some while, the editor has to read all the archetypes and graphics.</em>:
173</p>
174
175<pre>
176root@localhost: ~/crossfire# echo "CROSSFIRE_LIBDIR=/opt/crossfire/share/crossfire/ ./gce-gnu-linux-x86.bin" &gt; startgce
177root@localhost: ~/crossfire# chmod a+x startgce
178root@localhost: ~/crossfire# ./startgce
179</pre>
180
181<p><em>
182 Note: If you run into problems when starting the editor make sure you have gtk2, glib2 and pango and cairo libraries
183 correctly installed. As i don't know your linux system you would have to figure out that yourself.
184</em></p>
185
186<p><em>
187 Note 2: If you are familiar with your system i recommend to set the CROSSFIRE_LIBDIR variable in your shells startup configuration.
188</em></p>
189
190<p>
191Now i could let you run around for yourself, if you are planning to figure out stuff
192yourself now, do it, but make sure you find the <b>manual of the editor in the toolbox window in the HELP menu!</b>
193</p>
194
195<p>But i guess the best thing is to explain now what to do, and how to do. The first things you will see is this:</p>
196
197<a href="tutscrs/mainview1.png"><img src="tutscrs/mainview1_tb.jpg" alt="main view" /></a>
198
199<p>Now open up 2 pickers, the stack view dialog and rearrange all the windows like this:</p>
200
201<a href="tutscrs/mainview2.png"><img src="tutscrs/mainview2_tb.jpg" alt="main view with layout" /></a>
202
203<p>
204You notice that the pickers are still empty, go to the drop-down box on the top of the pickers
205and select 'wall' and 'floor' from there:
206</p>
207
208<a href="tutscrs/mainview3.png"><img src="tutscrs/mainview3_tb.jpg" alt="main view with finished layout" /></a>
209
210<p>
211Now it's time to click the <em>Save Layout</em> entry in the <em>File</em> menu. It will save all the
212window sizes and positions. So you don't have to make all the layout work next time again.
213As you go on with map editing you maybe find other layouts more useful, try around, and of course: use more
214pickers. I mostly have 3-4 pickers open to do all the stuff i want.
215</p>
216
217<a href="tutscrs/mainview4.png"><img src="tutscrs/mainview4_tb.jpg" alt="main view with finished and saved layout" /></a>
218
219<p>Finished! You have now a layout we can work with. Go on to the next step:</p>
220
221<h3>Step 4: Making your first map</h3>
222
223<p>
224This step will introduce some tools and shortcuts you may use on a regular basis when making maps.
225</p>
226
227<p>
228First make a new map. Go to the <em>File-&gt;New</em> menu for that an click on it.
229Next a dialog will open up, that will ask you for a map size. The default is 20x20. You
230can adjust that like you want. But we recommend not to make maps much larger than 50x50 or 60x60.
231It reduces the server load somewhat. Better use tiled maps or linked maps (with exits between them).
232</p>
233
234<p>
235Click on the <em>new</em> button and the map editor will open up:
236</p>
237
238<a href="tutscrs/mapedit1.png"><img src="tutscrs/mapedit1_tb.jpg" alt="clean map editor" /></a>
239
240<p>
241You recognize the ugly color on the backgrounds of the pickers and the map editor window.
242It's not configurable, and it's there to give a clear contrast to stuff on the map.
243</p>
244
245<p><b>
246 Note: You can scroll in the map editor window and the pickers by holding down the middle mouse button
247 and drag it. (This is similar to GIMP).
248</b></p>
249
250<p>
251Now resize the map editor window a little bit and select the <em>Select</em> tool from the
252left and draw a rectangle over the map with it. Next select a floor from the picker. The floor will appear in the
253attribute editor.
254</p>
255
256<a href="tutscrs/mapedit2.png"><img src="tutscrs/mapedit2_tb.jpg" alt="map editor with selection" /></a>
257
258<p>
259Now look in the toolbox window on the bottom, where the tool-controls are. There are radio buttons:
260<em>place</em>, <em>erase</em> and <em>perl</em>. Place executes the place tool on every cell in the selection
261and erase executes the erase tool on every cell in the selection. The perl thing is something advanced,
262it runs a small perl script on every cell in the selection, it's likely to go away some day (maybe).
263</p>
264
265<p>
266Select the <em>place</em> radio button, and press the <em>invoke</em> button. The selection will be filled
267with the selected floor:
268</p>
269
270<a href="tutscrs/mapedit3.png"><img src="tutscrs/mapedit3_tb.jpg" alt="map editor with floor" /></a>
271
272<p>
273Next we are using the autojoining placement of walls, pick the "awall_0" tile from the picker with the walls.
274Make sure the place tool is in <em>auto</em> mode.
275</p>
276
277<p>
278 <em>
279 Note: In future when you want to use the autojoining placement you have to take care that the
280 wall tile you are using to draw ends in "_0". But some walls, like the cave walls, are just not autojoinable.
281 You will have to place them yourself.
282 </em>
283</p>
284
285<p>
286When you picked the wall, just draw some walls like you would draw in a graphics program (like GIMP).
287Draw something similiar like you see in the screenshot. With some holes in the walls.
288</p>
289
290<p>
291If you make a mistake while drawing the wall just hold the <i>CTRL</i> key to temporarily switch to the
292erase mode and erase all the bad walls and redraw the area. Or just <em>Edit->Undo</em> it. (Shortcut key
293combination for undo is <i>CTRL+z<i> and redo is <i>CTRL+y</i>).
294</p>
295
296<a href="tutscrs/mapedit4.png"><img src="tutscrs/mapedit4_tb.jpg" alt="map editor with floor and walls" /></a>
297
298<p> <b>to be continued...</b> </p>
299 306
300</div> 307</div>
301 308
302<p></p> 309<p></p>

Diff Legend

– Removed lines
+ Added lines
< Changed lines
> Changed lines