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
#	Content
1	Editor Tutorial
2
3	<div class="tutorial">
4	<h2>Deliantra map making and server installation tutorial for Linux</h2>
5
6	<p>
7	So, you don't know much about deliantra and or programming, but
8	you want to make maps? This Tutorial will explain how to
9	install the Deliantra server (from CVS) on your linux system
10	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	<h3>Step 1: Getting the map editor and setting it up</h3>
21
22	<p>
23	Now download the editor! You can either install all the Perl modules and stuff by yourself
24	or just choose the binary: <a href="editor.html">editor download page</a>.
25	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	root@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>
40	root@localhost: ~/deliantra# chmod a+x gce-gnu-linux-x86.bin
41	</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	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	</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	<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>
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	<a href="tutscrs/mainview3.png"><img src="tutscrs/mainview3_tb.jpg" alt="main view with finished layout" /></a>
82
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	<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>
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	<a href="tutscrs/mapedit1.png"><img src="tutscrs/mapedit1_tb.jpg" alt="clean map editor" /></a>
112
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	<a href="tutscrs/mapedit2.png"><img src="tutscrs/mapedit2_tb.jpg" alt="map editor with selection" /></a>
130
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	<a href="tutscrs/mapedit3.png"><img src="tutscrs/mapedit3_tb.jpg" alt="map editor with floor" /></a>
144
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	<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
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	</div>
308
309	<p></p>