www/src/editor_tut.html

Editor Tutorial

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

<p>
So, you don't know much about crossfire and or programming, but
you want to make maps? This Tutorial will explain how to
install the Crossfire TRT 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: 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 Crossfire TRT (map) development
should take place:
</p>

<pre>
root@localhost: ~# mkdir ~/crossfire/
</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 ~/crossfire/
</pre>


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

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

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

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

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

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

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

<pre>
root@localhost: ~/crossfire# 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 2: 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: ~/crossfire# cd server
root@localhost: ~/crossfire/server# ln -s /root/crossfire/arch lib/arch
root@localhost: ~/crossfire/server# ./configure --prefix=/opt/crossfire/
</pre>

<p>
The prefix argument tells the configure script to choose /opt/crossfire/ 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: ~/crossfire/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/crossfire/</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: ~/crossfire/server# cd ..
root@localhost: ~/crossfire# ln -s ~/crossfire/maps /opt/crossfire/share/crossfire/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: ~/crossfire# echo "CROSSFIRE_LIBDIR=/opt/crossfire/share/crossfire/ /opt/crossfire/bin/crossfire" > startcf
root@localhost: ~/crossfire# 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: ~/crossfire# ./startcf
</pre>

<p>
You should see lots of output running accross your screen. 
Congratulations, you just setup a Crossfire TRT 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>

<h3>Step 3: 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="http://dist.schmorp.de/gce/gce-gnu-linux-x86.bin">gce-gnu-linux-x86.bin</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: ~/crossfire# 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: ~/crossfire# 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: ~/crossfire# echo "CROSSFIRE_LIBDIR=/opt/crossfire/share/crossfire/ ./gce-gnu-linux-x86.bin" &gt; startgce
root@localhost: ~/crossfire# chmod a+x startgce
root@localhost: ~/crossfire# ./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_s.png" 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_s.png" 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_s.png" 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_s.png" 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 4: 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_s.png" 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_s.png" 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_s.png" 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_s.png" alt="map editor with floor and walls" /></a>

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

</div>
Revision:	1.1
Committed:	Thu Sep 13 19:15:50 2007 UTC (16 years, 9 months ago) by pippijn
Content type:	text/html
Branch:	MAIN
Log Message:	initial import
#	User	Rev	Content
1	pippijn	1.1	Editor Tutorial
2
3			<div class="tutorial">
4			<h2>Crossfire TRT map making and server installation tutorial for Linux</h2>
5
6			<p>
7			So, you don't know much about crossfire and or programming, but
8			you want to make maps? This Tutorial will explain how to
9			install the Crossfire TRT 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: Downloading the maps and the server from CVS</h3>
21
22			<p>
23			I assume here you have <tt>cvs</tt> installed. (the debian shortcut would
24			be: <tt>apt-get install cvs</tt>).
25			</p>
26
27			<p>
28			Create a directory in your home where all your Crossfire TRT (map) development
29			should take place:
30			</p>
31
32			<pre>
33			root@localhost: ~# mkdir ~/crossfire/
34			</pre>
35
36			<p> <em>
37			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
39			as user 'root' your homedirectory should be something like /root.
40			</em> </p>
41
42			<p> Go into that directory: </p>
43
44			<pre>
45			root@localhost: ~# cd ~/crossfire/
46			</pre>
47
48
49			<p>Now, we are going to get the files, first the maps:</p>
50
51			<pre>
52			root@localhost: ~/crossfire# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de:636/schmorpforge co -d maps cf.schmorp.de/maps
53			</pre>
54
55			<p>And then the archetypes (needed for building the server, and could take a while):</p>
56
57			<pre>
58			root@localhost: ~/crossfire# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de:636/schmorpforge co -d arch cf.schmorp.de/arch
59			</pre>
60
61			<p>Finnally the server source itself:</p>
62
63			<pre>
64			root@localhost: ~/crossfire# cvs -z3 -d :pserver:anonymous@cvs.schmorp.de:636/schmorpforge co -d server cf.schmorp.de/server
65			</pre>
66
67			<p>
68			Now a <tt>ls -l</tt> should show something like this:
69			</p>
70
71			<pre>
72			root@localhost: ~/crossfire# ls -l
73			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
75			1 drwxr-xr-x 17 root users 1072 2006-05-26 11:34 server
76			</pre>
77
78			<h3>Step 2: Compiling and installing the server</h3>
79
80			<p>
81			Start by going into the server CVS checkout directory and just call configure (the script that
82			will find all the neccessary tools to compile the server). Please make sure you have
83			development tools like gcc (gnu c compiler) and headers installed:
84			</p>
85
86			<pre>
87			root@localhost: ~/crossfire# cd server
88			root@localhost: ~/crossfire/server# ln -s /root/crossfire/arch lib/arch
89			root@localhost: ~/crossfire/server# ./configure --prefix=/opt/crossfire/
90			</pre>
91
92			<p>
93			The prefix argument tells the configure script to choose /opt/crossfire/ as installation
94			destination. This is done to prevent the server installation from polluting your
95			system and to keep all files together.
96			</p>
97
98			<p> Next step is the compilation and installation of the server: </p>
99
100			<pre>
101			root@localhost: ~/crossfire/server# make install
102			</pre>
103
104			<p>
105			That should build the sources and install them. If you encounter problems here you could try to contact us.
106			If everythin went fine, there should be a <tt>/opt/crossfire/</tt> directory now with files in it.
107			</p>
108
109			<p>
110			Next step is to link the maps into the installed server directory. First go back into the parent
111			directory and then link the maps dir to the right location:
112			</p>
113
114			<pre>
115			root@localhost: ~/crossfire/server# cd ..
116			root@localhost: ~/crossfire# ln -s ~/crossfire/maps /opt/crossfire/share/crossfire/maps
117			</pre>
118
119			<p>
120			Now everything is in place and all thats left is to write a
121			startup script for the server:
122			</p>
123
124			<pre>
125			root@localhost: ~/crossfire# echo "CROSSFIRE_LIBDIR=/opt/crossfire/share/crossfire/ /opt/crossfire/bin/crossfire" > startcf
126			root@localhost: ~/crossfire# chmod a+x startcf
127			</pre>
128
129			<p><em>
130			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
132			</em></p>
133
134			<p>Now try to shoot it up:</p>
135
136			<pre>
137			root@localhost: ~/crossfire# ./startcf
138			</pre>
139
140			<p>
141			You should see lots of output running accross your screen.
142			Congratulations, you just setup a Crossfire TRT server.
143			You maybe want to dive into the server tree and look around in the <tt>doc/</tt>
144			directory to find more about the server.
145			</p>
146
147			<h3>Step 3: Getting the map editor and setting it up</h3>
148
149			<p>
150			Now download the editor! You can either install all the Perl modules and stuff by yourself
151			or just choose the binary: <a href="http://dist.schmorp.de/gce/gce-gnu-linux-x86.bin">gce-gnu-linux-x86.bin</a>.
152			I'm not going to discuss the installation procedure for the CVS here, as it requires much
153			knowledge about your system and how to install (perl) software from source. If you only want to
154			make maps, the binary will do very fine (on x86 systems).
155			</p>
156
157			<p>
158			So, the next thing is to download the editor. </p>
159
160			<pre>
161			root@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>
167			root@localhost: ~/crossfire# chmod a+x gce-gnu-linux-x86.bin
168			</pre>
169
170			<p>
171			Now 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>
176			root@localhost: ~/crossfire# echo "CROSSFIRE_LIBDIR=/opt/crossfire/share/crossfire/ ./gce-gnu-linux-x86.bin" > startgce
177			root@localhost: ~/crossfire# chmod a+x startgce
178			root@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>
191			Now i could let you run around for yourself, if you are planning to figure out stuff
192			yourself 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_s.png" 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_s.png" alt="main view with layout" /></a>
202
203			<p>
204			You notice that the pickers are still empty, go to the drop-down box on the top of the pickers
205			and select 'wall' and 'floor' from there:
206			</p>
207
208			<a href="tutscrs/mainview3.png"><img src="tutscrs/mainview3_s.png" alt="main view with finished layout" /></a>
209
210			<p>
211			Now it's time to click the <em>Save Layout</em> entry in the <em>File</em> menu. It will save all the
212			window sizes and positions. So you don't have to make all the layout work next time again.
213			As you go on with map editing you maybe find other layouts more useful, try around, and of course: use more
214			pickers. 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_s.png" 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>
224			This step will introduce some tools and shortcuts you may use on a regular basis when making maps.
225			</p>
226
227			<p>
228			First make a new map. Go to the <em>File->New</em> menu for that an click on it.
229			Next a dialog will open up, that will ask you for a map size. The default is 20x20. You
230			can adjust that like you want. But we recommend not to make maps much larger than 50x50 or 60x60.
231			It reduces the server load somewhat. Better use tiled maps or linked maps (with exits between them).
232			</p>
233
234			<p>
235			Click 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_s.png" alt="clean map editor" /></a>
239
240			<p>
241			You recognize the ugly color on the backgrounds of the pickers and the map editor window.
242			It'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>
251			Now resize the map editor window a little bit and select the <em>Select</em> tool from the
252			left and draw a rectangle over the map with it. Next select a floor from the picker. The floor will appear in the
253			attribute editor.
254			</p>
255
256			<a href="tutscrs/mapedit2.png"><img src="tutscrs/mapedit2_s.png" alt="map editor with selection" /></a>
257
258			<p>
259			Now 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
261			and erase executes the erase tool on every cell in the selection. The perl thing is something advanced,
262			it 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>
266			Select the <em>place</em> radio button, and press the <em>invoke</em> button. The selection will be filled
267			with the selected floor:
268			</p>
269
270			<a href="tutscrs/mapedit3.png"><img src="tutscrs/mapedit3_s.png" alt="map editor with floor" /></a>
271
272			<p>
273			Next we are using the autojoining placement of walls, pick the "awall_0" tile from the picker with the walls.
274			Make 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>
286			When you picked the wall, just draw some walls like you would draw in a graphics program (like GIMP).
287			Draw something similiar like you see in the screenshot. With some holes in the walls.
288			</p>
289
290			<p>
291			If you make a mistake while drawing the wall just hold the <i>CTRL</i> key to temporarily switch to the
292			erase mode and erase all the bad walls and redraw the area. Or just <em>Edit->Undo</em> it. (Shortcut key
293			combination 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_s.png" alt="map editor with floor and walls" /></a>
297
298			<b>to be continued...</b>
299
300			</div>