www/src/editor_tut.html

Editor Tutorial

<div class="tutorial">
<h2>Deliantra map making and server installation tutorial for Linux</h2>

<p>
So, you don't know much about deliantra and or programming, but
you want to make maps? This Tutorial will explain how to
install the Deliantra server (from CVS) on your linux system
and making your first maps. If you are stuck somewhere, please
<a href="contact.html">contact</a> us (the developers).
</p>

<p> <em>
   Note: I am assuming here that you are using a <tt>bash</tt>-like shell. And that you are logged in as root.
   If you want to install and setup everything from a regular user account you have to take care of all permission
   handling yourself.
</em> </p>

<h3>Step 1: Getting the map editor and setting it up</h3>

<p>
Now download the editor! You can either install all the Perl modules and stuff by yourself
or just choose the binary: <a href="editor.html">editor download page</a>.
I'm not going to discuss the installation procedure for the CVS here, as it requires much
knowledge about your system and how to install (perl) software from source. If you only want to
make maps, the binary will do very fine (on x86 systems).
</p>

<p>
So, the next thing is to download the editor. </p>

<pre>
root@localhost: ~/deliantra# wget http://dist.schmorp.de/gce/gce-gnu-linux-x86.bin
</pre>

<p>There it is, now we make it an executable and run it:</p>

<pre>
root@localhost: ~/deliantra# chmod a+x gce-gnu-linux-x86.bin
</pre>

<p>
Now we make a start script like for the server and run it
<em>Note: the first startup may take some while, the editor has to read all the archetypes and graphics.</em>:
</p>

<pre>
root@localhost: ~/deliantra# echo "CROSSFIRE_LIBDIR=/opt/deliantra/share/deliantra/ ./gce-gnu-linux-x86.bin" &gt; startgce
root@localhost: ~/deliantra# chmod a+x startgce
root@localhost: ~/deliantra# ./startgce
</pre>

<p><em>
   Note: If you run into problems when starting the editor make sure you have gtk2, glib2 and pango and cairo libraries
   correctly installed. As i don't know your linux system you would have to figure out that yourself.
</em></p> 

<p><em>
   Note 2: If you are familiar with your system i recommend to set the CROSSFIRE_LIBDIR variable in your shells startup configuration.
</em></p> 

<p>
Now i could let you run around for yourself, if you are planning to figure out stuff
yourself now, do it, but make sure you find the <b>manual of the editor in the toolbox window in the HELP menu!</b>
</p>

<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>

<a href="tutscrs/mainview1.png"><img src="tutscrs/mainview1_tb.jpg" alt="main view" /></a>

<p>Now open up 2 pickers, the stack view dialog and rearrange all the windows like this:</p>

<a href="tutscrs/mainview2.png"><img src="tutscrs/mainview2_tb.jpg" alt="main view with layout" /></a>

<p>
You notice that the pickers are still empty, go to the drop-down box on the top of the pickers
and select 'wall' and 'floor' from there:
</p>

<a href="tutscrs/mainview3.png"><img src="tutscrs/mainview3_tb.jpg" alt="main view with finished layout" /></a>

<p>
Now it's time to click the <em>Save Layout</em> entry in the <em>File</em> menu. It will save all the
window sizes and positions. So you don't have to make all the layout work next time again.
As you go on with map editing you maybe find other layouts more useful, try around, and of course: use more
pickers. I mostly have 3-4 pickers open to do all the stuff i want.
</p>

<a href="tutscrs/mainview4.png"><img src="tutscrs/mainview4_tb.jpg" alt="main view with finished and saved layout" /></a>

<p>Finished! You have now a layout we can work with. Go on to the next step:</p>

<h3>Step 2: Making your first map</h3>

<p>
This step will introduce some tools and shortcuts you may use on a regular basis when making maps.
</p>

<p>
First make a new map. Go to the <em>File-&gt;New</em> menu for that an click on it.
Next a dialog will open up, that will ask you for a map size. The default is 20x20. You
can adjust that like you want. But we recommend not to make maps much larger than 50x50 or 60x60.
It reduces the server load somewhat. Better use tiled maps or linked maps (with exits between them).
</p>

<p>
Click on the <em>new</em> button and the map editor will open up:
</p>

<a href="tutscrs/mapedit1.png"><img src="tutscrs/mapedit1_tb.jpg" alt="clean map editor" /></a>

<p>
You recognize the ugly color on the backgrounds of the pickers and the map editor window.
It's not configurable, and it's there to give a clear contrast to stuff on the map.
</p>

<p><b>
   Note: You can scroll in the map editor window and the pickers by holding down the middle mouse button
   and drag it. (This is similar to GIMP).
</b></p>

<p>
Now resize the map editor window a little bit and select the <em>Select</em> tool from the
left and draw a rectangle over the map with it. Next select a floor from the picker. The floor will appear in the
attribute editor.
</p>

<a href="tutscrs/mapedit2.png"><img src="tutscrs/mapedit2_tb.jpg" alt="map editor with selection" /></a>

<p>
Now look in the toolbox window on the bottom, where the tool-controls are. There are radio buttons: 
<em>place</em>, <em>erase</em> and <em>perl</em>. Place executes the place tool on every cell in the selection
and erase executes the erase tool on every cell in the selection. The perl thing is something advanced,
it runs a small perl script on every cell in the selection, it's likely to go away some day (maybe).
</p>

<p>
Select the <em>place</em> radio button, and press the <em>invoke</em> button. The selection will be filled
with the selected floor:
</p>

<a href="tutscrs/mapedit3.png"><img src="tutscrs/mapedit3_tb.jpg" alt="map editor with floor" /></a>

<p>
Next we are using the autojoining placement of walls, pick the "awall_0" tile from the picker with the walls.
Make sure the place tool is in <em>auto</em> mode.
</p>

<p>
   <em>
      Note: In future when you want to use the autojoining placement you have to take care that the
      wall tile you are using to draw ends in "_0". But some walls, like the cave walls, are just not autojoinable.
      You will have to place them yourself.
   </em>
</p>

<p>
When you picked the wall, just draw some walls like you would draw in a graphics program (like GIMP).
Draw something similiar like you see in the screenshot. With some holes in the walls.
</p>

<p>
If you make a mistake while drawing the wall just hold the <i>CTRL</i> key to temporarily switch to the
erase mode and erase all the bad walls and redraw the area. Or just <em>Edit->Undo</em> it. (Shortcut key
combination for undo is <i>CTRL+z<i> and redo is <i>CTRL+y</i>).
</p>

<a href="tutscrs/mapedit4.png"><img src="tutscrs/mapedit4_tb.jpg" alt="map editor with floor and walls" /></a>

<p> <b>to be continued...</b> </p>

<hr>

<h2>Installing the server for testing the maps</h2>


<h3>Step A: Downloading the maps and the server from CVS</h3>

<p>
I assume here you have <tt>cvs</tt> installed. (the debian shortcut would
be: <tt>apt-get install cvs</tt>).
</p>

<p>
Create a directory in your home where all your Deliantra (map) development
should take place:
</p>

<pre>
root@localhost: ~# mkdir ~/deliantra/
</pre>

<p> <em>
   NOTE: the 'root@localhost: ~#' stands for your shellprompt, where '~' is the
   current working directory. And the ~ stands for your root homedirectory, if you are working
   as user 'root' your homedirectory should be something like /root.
</em> </p>

<p> Go into that directory: </p>

<pre>
root@localhost: ~# cd ~/deliantra/
</pre>


<p>Now, we are going to get the files, first the maps:</p>

<pre>
root@localhost: ~/deliantra# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de/schmorpforge co -d maps deliantra/maps
</pre>

<p>And then the archetypes (needed for building the server, and could take a while):</p>

<pre>
root@localhost: ~/deliantra# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de/schmorpforge co -d arch deliantra/arch
</pre>

<p>Finnally the server source itself:</p>

<pre>
root@localhost: ~/deliantra# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de/schmorpforge co -d server deliantra/server
</pre>

<p>
Now a <tt>ls -l</tt> should show something like this:
</p>

<pre>
root@localhost: ~/deliantra# ls -l
   1 drwxr-xr-x 39 root users    1192 2006-06-01 21:29 maps
   1 drwxr-xr-x 39 root users    4096 2006-05-26 12:38 arch
   1 drwxr-xr-x 17 root users    1072 2006-05-26 11:34 server
</pre>

<h3>Step B: Compiling and installing the server</h3>

<p>
Start by going into the server CVS checkout directory and just call configure (the script that
will find all the neccessary tools to compile the server). Please make sure you have
development tools like gcc (gnu c compiler) and headers installed:
</p>

<pre>
root@localhost: ~/deliantra# cd server
root@localhost: ~/deliantra/server# ln -s /root/deliantra/arch lib/arch
root@localhost: ~/deliantra/server# ./configure --prefix=/opt/deliantra/
</pre>

<p>
The prefix argument tells the configure script to choose /opt/deliantra/ as installation
destination. This is done to prevent the server installation from polluting your
system and to keep all files together.
</p>

<p> Next step is the compilation and installation of the server: </p>

<pre>
root@localhost: ~/deliantra/server# make install
</pre>

<p>
That should build the sources and install them. If you encounter problems here you could try to contact us.
If everythin went fine, there should be a <tt>/opt/deliantra/</tt> directory now with files in it.
</p>

<p>
Next step is to link the maps into the installed server directory. First go back into the parent
directory and then link the maps dir to the right location:
</p>

<pre>
root@localhost: ~/deliantra/server# cd ..
root@localhost: ~/deliantra# ln -s ~/deliantra/maps /opt/deliantra/share/deliantra/maps
</pre>

<p>
Now everything is in place and all thats left is to write a 
startup script for the server:
</p>

<pre>
root@localhost: ~/deliantra# echo "CROSSFIRE_LIBDIR=/opt/deliantra/share/deliantra/ /opt/deliantra/bin/deliantra" > startcf
root@localhost: ~/deliantra# chmod a+x startcf
</pre>

<p><em>
   Note: The CROSSFIRE_LIBDIR thing is setting an environment variable which 
   tells the server where to look for the configuration variables and the maps
</em></p>

<p>Now try to shoot it up:</p>

<pre>
root@localhost: ~/deliantra# ./startcf
</pre>

<p>
You should see lots of output running accross your screen. 
Congratulations, you just setup a Deliantra server.
You maybe want to dive into the server tree and look around in the <tt>doc/</tt>
directory to find more about the server.
</p>


</div>

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