Sebaci's map editor tutorial [0.4.0 - 0.4.2] (Page 1 of 2)

1. Basic information
To open the map editor, hit Ctrl + Shift + E after running the Teeworlds. The same combination allows you to leave the editor.

This is the picture of what you see after entering the editor.
1: This is the main part of the window – a place where you can create and modify layers of maps.
2: The Envelope Editor. More advanced tool, which is used rarely and doesn’t need to be used to create good maps.
3: On the left side there are displayed some groups of layers and quads. Here you can see one group with one layer, but you can add more and manage them however you want.
4: Main menu.  It Includes some important options such as “Save As” that you will often use.
5: Tabs to switching between layers and images.
6: Use this buttons to toggle the way the map is displayed in the editor.
7: Tools for tiles and quads.
8: Tips

More details are below, in the further parts of the tutorial…

2. Create your first map
Open the “File” menu and select “New” to create a new map:

Let’s name it first, for example “test.map”. NOT “test” – the extension is necessary if you want your map to be playable. If you forget about it, it’s not a tragedy though. Just rename the map by adding the “.map” ending. To save your map, click on the “Save as” option in the “File” menu, name it as above and click on the “Save” button.

I think the “Open” option doesn’t need any explanation. The “Append” option allows you to import another map to yours.

3. The default “Game” group
Look at the group shown on the left side, it already consists of one layer called “Game”. You can’t delete that layer and the whole group neither. The “Game” layer is marked as red, it means it’s selected and you can now edit it.

Look at the main window – there’s a white border. It’s a border of that particular layer, not the entire map! Remember that.

Drag your map while holding the Alt key to move around it. Hit space to see what tiles you can place on the layer (within the white borders, of course).

1: Blank tiles. Actually nothing useful.
2: Weapons that you place on your map.
3: Health and armor. Something that tees like to collect
4: The flags of red and blue teams for CTF gametype. Use them if you make a CTF map.
5: Red and blue tees for CTF. Put these icons where you want tees to spawn. Of course it’s possible to place many of them.
6: Place these icons as spawn areas for deathmatch gametype.
7: With this you make collisions which will not allow tees to pass walls etc.
8: Actually I don’t know what it’s destined for, but with it you can mark some areas on the map that you don’t want to be filled with collision tiles (before automatic making collisions from a layer).

Right-click on the “Game” layer and this contextual menu will appear:

Now focus on “Width” and “Height” parameters. Use them to adjust the size of the layer (layer, not the entire map!). Of course you can set these parameters in any time.

4. Let’s load some images!
Now switch to “Images” which is beside the “Layers” button. Add some graphics containing tiles that will be used in our map:

The images that you’ve chosen are shown above the “Add” button. You can switch between them to see what tiles they include. In this tutorial we’ll make some summer maps, so I recommend to add:
-grass_main.png
-grass_doodads.png
-mountains.png
-sun.png

5. Design your map…
Right-click on the “Game” group and select “Add Tile Layer”.
The new layer appears just below the “#0 Game” Layer. The order DOES matter. If a layer is below another layer, it’s shown in front of that layer. Otherwise it’s behind, I mean it’s covered by a layer below.

Now it’s time to assign a proper tileset to our “#1 Tiles” layer:

Choose “grass_main” from the list. Note that you can resize your map from contextual menu, just like in “#0 Game” layer (and set the order as well). What is important: our new layer (actually most of them) should be of the same size as the game layer. To make our simple map, change the size (of both layers) to 20x20 first.

The tileset you’ve chosen will appear if you hold space.  Now click on a desired tile to select it. Left-click and drag your mouse to select a group of tiles. Now select this one…

… and fill the whole area near the borders (hold left mouse button and move your mouse close to the borders, release when you finish):

It’s necessary because this tiles will be repeated outside the border in the game. That’s why you need to use that “clear” tile. In other case, for example if you do like this:

the map will be bugged, what will be noticeable while playing:

It doesn’t look fine, you have to admit.

Much of talking so far, let’s act! Using tiles, make this on the bottom left side of the “#1 Tiles” layer:

It’s easy. Read these tips:
-you don’t have to always choose tiles from the tileset using space. You can select a tile (or a group of tiles) directly from the layer, selecting them by your mouse.  Use this especially if you often repeat some segments in your map
-click on the blank space to make your brush an eraser
-right-click to clear the brush
-take advantage of horizontal and vertical brush flipping:

The hotkeys are available: [N]  and [M]
-don’t forget to use these tiles:

in marked places:

I mentioned about it because sometimes it’s very easy to forget about this detail.

6. Symmetry and lack of space on the top and left
It’s very easy to create symmetric maps. Just create a half of the map, select it…

press [N] key on your keyboard to rotate the brush and place the tiles in the right space so it will look this way:

You may sometimes experience lack of space when you want to add some tiles, but there’s no space. Unfortunately, when increasing the size of the layer, it expands to the right and down. In situations like this…

...you think “oh, no! It’s a tragedy! I gotta change the tiles layout on my map so that it looks correctly”.
You don’t need to, really. Increase the map size to e.g. 20x30 (of all the layers):

Then select this part of the tiles you’ve already put:

and use the brush at the bottom of the layer so that the tiles stick to the border. Clear the marked area:

Lots of pictures, I know. I just wanted to explain everything particularly.

Now you can call yourself a professional tiler It’s time to make…

7. Collisions
At first, change the size again to 20x20 and make the map look like this:

Only two clicks are needed to make collisions:

Now switch to “#0 Game” layer. Modify collisions if you want and add some objects like armor or health, weapons, flags, respawn areas etc. Or do it at the end if it’s more convenient for you.

8. Background walls and depth
This step is not necessary to make simple maps and can decrease the performance (I mean FPS, on weaker machines), but gives a nice effect that I recommend to include in your future maps.

Turn off the visibility of the “#0 Game” layer:

“V” stands for “Visible”
„H” stands for „Hidden”
Note the collisions aren’t displayed on the map anymore (of course they still exist). You’ve turned it off because you won’t need this layer now.

Let’s create another group of layers:

?
Perform the actions shown on this picture:

Attention! If you’re using a newer version of the editor, you may see some additional attributies here – they aren’t shown on this picture. Yet they are described in the further part of the tutorial.
The “Order” parameter should be of “0” value (the group should be named “#0”).
Resize the “#0 Tiles” layer to 25x15. Set the parameters of the “#0” group as here:

Tip: to change a value, left-click on it and hold the button, then move your mouse to the left or to the right to adjust.

This layer will be covered by all the layers included in “#1 Game” group. Assign the “grass_main” tileset to the “#0 Tile” layer. Fill the entire map except the edges (at least the top one, because we don’t want it to be repeated outside the border in the game) using these tiles:

Now the map should look like here (the “#1 Game” layer is still hidden):

This background wall should be a little darker. Create another layer in the “#0” group, of the same size as the “#0 Tiles” (25x15), the image must be the same as well. The “Order” attribute should be of “1” value. Fill it in the same way, but using the shadow tile, I mean this:

If you move the map now you’ll see that this group is not on the same level as the “#0 Game” group. It’s behind it. It’s a substitute of perspective, it lets the player feel that something is far behind him, he can feel that “depth”. How have we achieved this? We’ve just used the “Para X” and “Para Y” attributes in the properties of the “#0” group (it’s a parallax in fact, para = parallax)! 100 is the value of the “#1 Game” group. In most cases, use values in range of 1 to 99 for your defined groups (in this case you’ve used 80 and 90), but of course you can use higher than 100 and less than 0. The “Pos X” and “Pos Y” are – as you probably know – to move groups with all contained layers (e.g. to the left, up etc).

9. Parallax and relative positioning of layers
Groups and layers can’t be in any order. It must be a strictly defined order.  Now we’ve got two groups and two layers in each. Make all the layers visible and change their order. See what happens.
Conclusion: if a layer/group is below another layer/group, it’s displayed in front of it.
Everything what is above the “#1 Game” layer is displayed behind a player, and what’s below is displayed in front of a player. Take advantage of it when placing objects on your maps.

The lower the value of the “Para X” and “Para Y” parameters is, the more distant a group is. Use low values for a background or the sun, medium for objects like mountains, and high for walls which are behind a player. The “Para X” doesn’t have to be the same as the “Para Y”. We can say that these parameters tell us how fast a group moves with a player in the game (faster = more distant). If you assign “100” to that first parameter in some group, it will look static, like it was on the same level as the game group. Even if the “Para Y” amounts to “10” – then the group will move fast if you move up/down in the game (very distant) and will not move (static, no distance between groups) if you move left/right. Overall, the distance between layers may be different for X and Y axes. I’m sorry if I explained it awkwardly for you, but I hope you understand this all.

If you decide to use these features, you must be aware of a risk related to possibility of graphical bugs occurrence. Layers need to be checked if they are displayed properly in every player position.

Enable the “Proof” option:

You should see something like this:

This shows what a player maximum can see.
-red border: sight distance for standard, 4:3 monitors
-green border: sight distance for wide screens, probably 16:10
-white borders: sight distance if a player moves the crosshair near the edge of the screen (with dynamic camera enabled).

Zoom options:

1: Zoom Out option ([-] key)
2: Zoom In option ([+] key)
3: Switches to zoom with which you play, allows you to see how you will see the map during the game.

Press that  “1:1” option, then Tab key. This is how a player sees the map while playing it. Press Tab again to unhide all bars and get back to editing your map.

What is important: a player can’s see edges of layers (like our background wall) and quads (a background image etc) within the white borders of the “Proof” tool. Use this tool to find out if there are places on a map in which a player can see the end of layers/quads that he shouldn’t. If you still don’t understand, here are some examples:

I: OK, the edge is behind these brown tiles
II: OK, the edge is outside the border
III: OK, the edge is inside the border, but outside the map
IV: Bad! The edge is inside the borders and not covered by any other tiles!
V: OK,  the mountains’ left edge is behind the border
VI: Bad! The edge is both inside the white border and the green border.

Another example that shows what you should avoid:

VIIa: If a player stands in the place “px”, he won’t see any bugs.
VIIb: But if he jumpes down and stands in “py”, he will se the edge!

To fix such bugs, manipulate the parameters of layers (“Para X”, “Pos X” etc) or modify the layers.

You may think: “so what the hell is this?”

To calm you down – this area will be covered by…

10. Another background wall
Create another group on our map and set these parameters:

Note the “Para X” and “Para Y” parameters are 95 which means the wall will be very close to the “#2 Game” group.

Create a layer in the new group. It’s size may be 20x20. Assign the “grass_main” tileset and make this:

With the “#2 Game” group hidden:

Obviously it depends on you only how many of such background walls will be on your future maps. It doesn’t have to be two, like in this map.

11. Shadows
Actually you’ve used shadows before to make to darken our wall (in the “#0” Group). Shadows make maps look better. Let’s make another one

First enlarge this:

Create a new layer in the “#2 Game” group, change it’s size to 20x20, assign the “grass_main” tileset and change the order to “1” value. Use this tiles…

… to create a shadow like here:

But haven’t done this correctly! Look below to see why. Compare:

Avoid bugs like this.

Remember to always place shadows in the game group (except if you just want to darken some background tiles as in the “#0” group here) and just below the game layer.

12. Trees, bushes, stones…
Make another layer in the “#2 Game” group, set it’s “Order” to “0”, size to 20x20 and assign the “grass_doodads” tileset.

Select this…

... from the tileset
Place it like here:

NOT like here:

Because it will cause a bug:

Add some more objects:

But look at this:

Avoid placing objects on such edges. So clear the tree and move the bole to the left a little bit.

All the objects you’ve just placed will be displayed behind you in the game (the layer is above the “#2 Game” layer so it’s behind).

You can create many layers with trees, stones, bushes etc and define what is in the front, and what’s behind. Now create another two new layers, same as the previous one. Their “Order” values should be “4” and “5”.

On the “#4 Tiles” layer put some grass, a little tree and a stone:

Then place another stone and a fence on the “#5 Tiles” layer.

These two layers will be dispayed in front of a player. And the “#0 Tiles” layer will be behind. Like here:

Don’t  put objects in front of a shadow, because it doesn’t look naturally:

Remember that you can change not only the order, but the group also, for a layer:

I have to admit I use this option very rarely.

Exercise: modify the map so that it looks like here:

The order:

1: Objects (like trees, stones, bushes etc) that should be behind a player.
2: Shadows
3: Tiles that are collisions for a player.
4: Objects that should be in front of a player.
5: Objects that will be in front of all other layers.

There should be only one group (#0 Game) now.

13. Background and quads
You can create your own background for maps if you don’t like the standard one, which is bright blue, like here:

Attention! It’s in Teeworlds 0.4.0 and 0.4.1 only! In 0.4.2 version a background is required in maps! If a map doesn’t have a background, it won’t behave properly in the game. You can fix it temporarily by typing “gfx_clear 1” in the console (there will be an awful, yellow background, but it’s better than nothing).

You can create a simple background in the editor. You can also use some image as a background if you want to. Let’s now create a background for our map.

Add a new group and change it’s “Order” to “0”. Hide the “#1 Game” group:

Next:

The “#0 Quads” layer should be selected. You can add many quads in this new layer. We’ll need only one now. To do this, click on the “Add Quad” which is on the top bar, on the right:

A new quad should appear:

You can modify it using these dots. Zoom out a little and drag all the four red dots in different directions, so that the quad looks like a big rectangle. To make it of a regular shape, right-click on the green point and select “Square”:

Important tips:
-you can change the position of the green dot. Hold shift and drag it wherever you want
-to move a simple quad, just drag the green point (without shift key) and the whole quad will move
-as you see in the picture above, you can remove needless quads using the “Delete” button.

Make the “#1 Game” layer visible, turn the “Proof” option on ([Ctrl + p] shortcut also available). Make the background smaller and move it to the right place. It should look this way:

Use the “Proof” tool to make sure that players won’t see the edges of our background (it must seem endless for them).

Time to fill it with a gradient. Left-click on the top left, red point of the background to select it. Right-click, then set the following parameters:

Of course you’re using the RGB palette here + alpha channel. In other words, you can set any 32-bit color for the background.
-R – Red
-G – Green
-B – Blue
-A – Alpha (transparency)

Now left click on the top right point of the quad to select it, then right-click and perform the same actions. Then set this color…

… for the bottom left and bottom right points.

If you’ve done everything properly, it should look like here:

The “Para X” and “Para Y” parameters of the “#0” group are “20” and “140”. These values may be much different in your future, bigger maps, for example “20” and “20”. Here the “Para X” value is rather irrelevant. If a player stands on some higher place, the sky looks darker, if he stands lower – it’s brighter. But it depends on you only how the backgrounds in your maps will look. So don’t think you have to use “20” and “140” values in all maps, just set them (and this concerns all groups) how you like (and if you make some hell map, don’t forget to make the background red rather than blue ). Usually the “Para X” and “Para Y” are the same, from “0” value to “20” (do you remember that I wrote before to use low values for the sun and background groups? So use low for most cases, but obviously you can make exceptions).

Still unclear? In short – the further (from a player) a group is, the lower the “Para X” and “Para Y” values it has, but exceptions are permissible – you decide how groups behave in the game.

14. Sun, mountains and more about quads
The map is almost complete – the only thing you need to add is the sun, some mountains, and object on the game layer.

Make a new group and set the following parameters:

?
Create a new quad layer in the group. Now assign the “sun” image to that layer in the same way as always:

Note you can’t change the width and height as in tiles layers – instead, you can modify the size of each quad included in this layer (by dragging the red points).

Click on the “Add Quad” (you’ve used this already to add the background). The sun should appear. It’s tiny, so enlarge it a little (just like the background before), then place it as here:

Hide the “#2 Game” group and zoom a little to make the work more convenient. Now we must add some sunrays. Add a new quads layer in the “#1” group, change its order to “0” (behind the sun). Add a new quad.

Change its color. It may be white or pale yellow (to make it pale yellow, change the “B” parameter of all four red points to 230 – 255). We’ll make it white.

Let’s change its shape:

Make the two left points transparent (change their alpha to “0”). Remember to left-click the point first to select it.

This is how it should look like now:

Move the sunray so that the right apex is in the center of the sun:

Time to explain the meaning of some useful tools:

1: Set by what angle you want to rotate your brush
2: Rotates the brush counter clockwise (keyboard shortcut: [R])
3: Rotates the brush clockwise (keyboard shortcut: [T])

Change the angle to “20”:

Select the sunray with your mouse and rotate the brush counter clockwise. Then place it appropriately:

?
Repeat that step until you have the sun with the rays complete:

Looks not bad, doesn’t it? (well, yours may look better )
Tip: you can put one sunray, then next, select them afterwards, use the brush, select all the four sunrays, use the brush, select all the eight sunrays etc… this method makes that process faster.

May the next task be an exercise for you: create a new group and set it in front of the sun, make the “Para X” and “Para Y” parameters of about “75” and “80” values, add a new quads layer in it, assign the “mountains” picture, create a new quad, enlarge it ant place it appropriately. This is how this all should look like:

15. Let’s get back to the game group
Nothing hard here. Select the “#1 Game” layer, then add some weapons, armor and health. Tees love collecting them, but remember not to put too many of them or too few! Don’t forget to place the spawn icons also, and decide whether you map is a CTF map, or a deathmatch map.

Don’t place the weapons very close to walls:

16. Details – to care about weaker graphics cards
We should specify what areas will not be displayed when high detail is disabled in the graphics options:

To make a layer visible only with “High Detail” on, just right-click on selected layer and switch its “Detail” to “Yes”:

Do this with the following things on our map:
-the sun (with it’s rays)
-the mountains
-shadows (you don’t have to if the shadow tiles are used to make something darker and not to create a shadow)
-bushes, trees, stones etc…

And it will result in FPS increase if a player disables the “High Detail” option. You can see in the editor how the map looks like with it turned off:

Congratulations, you’ve finished the map (yet it’s not the end of this tutorial). A screenshot from the game:

Some links to the map:
http://rapidshare.com/files/108589150/sdmt.map.html
http://www.sendspace.com/file/ps84c4
http://www.sebaci.mordawkubel.com/sdmt.rar

Download it to compare it to yours or to see how it should look like. I think it’s not playable, it’s just created for this tutorial. If you don’t know how to test the map, read the point below. Otherwise, skip it.

17. Map testing
These are only the most basic information you have to know to test your map. To learn how to create a server and how to configure it, read some other tutorials or FAQs.

Run  the game and open the console with F1 key. Type “sv_map test”. The default gametype is deathmatch. If you wanna change it to ctf, type “sv_gametype ctf”. You can also do the same by editing the settings.cfg file. Just open the “config_directory.bat” (which is in the game folder), then “settings.cfg” and edit the lines with the names mentioned above. Create a server by running the “teeworlds_srv” file, then run the game.

Alternatively open the command prompt/terminal. Use “cd” command to go to your teeworlds directory (e.g. “cd desktop\teeworlds-0.4.2-win32”). Then type:  teeworlds_srv “sv_map test” (in linux: ./teeworlds_srv "sv_map test").  This won’t modify the settings.cfg file (you could make *.bat files with  that command, different for different maps). Run the game.

Type “localhost” or “127.0.0.1” here:

And click on the “Connect” button
?
18. The Envelope editor
It’s the most advanced tool included in the editor. It enables you to create some animations of quads.

How to open it:

It’s on the right bottom of the editor. Click it twice more to increase the area of the envelope editor. Click on the button once more to close the editor.

What you can see there:

1: With this you can swich between created envelopes.
2: Options to make a new position or color envelope.

The picture below shows what additional options are available for positon envelopes (I) and color envelopes (II):

?
1: Name your envelope here.
2: Make lines alterable/unalterable with these three options (X and Y axes, and rotation)
3: Make lines alterable/unalterable with these four options (RGBA colors)
4: This lets you change curve type (L, S, F, M, N)
5: Position of a point on the timeline (X and Y)

Make some new map with a quad layer and place the sun in it. Open the envelope editor and make a new position envelope (“Pos.+”). We’ll make the sun fall down, then move to the right and rise up to its initial position.

At first, uncheck the X axis and the rotation (R) options:

Two points are already existing on the timeline. Hold shift and move the right one to the right so that it’s X position on the timeline is 3 (more or less):

It will make the animation last longer.

Important! All the alterations of points on the x axis of the timeline, and alterations of curve type are applied to all lines (X, Y, R).

Right-click on the envelope area to add a new point. Drag it to the left using shift so that its x = 1 on the timeline. Then drag it up until y = 300 (this will make the sun fall). Add another point with x = 2 and y = 300 (the sun will not fall/rise while moving to the right).

Now check the “X” option (axis). Move the third point up so y = 300 (the sun will move to the right). Check the “R”, then drag the second point up (y = 90) and the third point as well (y = 180).

Tips:
-to delete a point, right-click on it
-if y > 0, an object will move down (Y), right (X) and rotate clockwise (R). To make vice-versa, use values below 0.

Let’s see the effect. Right-click on the green dot of the sun and then:

So it’s position envelope should be “0” instead of “-1”.
A: this is to move the sun manually to a specific position on the timeline.

Now you need to enable animations:

?
See the effect Make sure the envelope looks like this:

C: change the curve type with these buttons and see the effect in the animation. I feel no need to describe what the particular curve types do. It would take too long and I think it will be better if you just test it yourself.

Important! An object always rotates around its green point.
I think you guess how to make sunrays rotate around the sun. The only you need to do is to move their green points to the center of the sun and make a position evelope for them in which the "R" curve would start from (0,0) and end at e.g. (120, 360). 120 - because it will rotate slowly (must last long), 360 - because it will rotate by 360 degrees. Simple.

If you want to make some colorful, animated background, create a color envelope, for example like this:

Assign this envelope to a quad, just like a position envelope, but change “Color Env” Instead of “Pos. Env” in the context menu.

Tip: use values from 0 to 1 in color envelopes (y axis).

Remember that you can set up transparency (the yellow curve) for your quads (for example, you can make something disappearing and appearing).

I think it’s all you should know about envelopes. The rest is practice, and to learn to make more and more complicated animations.

19. Clipping and some more
I mentioned before that it’s possible that you have some more options in the context menu of layers. These options (clipping) are available in newer versions of Teeworlds (0.4.2 and above).

Open the ctf1 map. Look what is in the context menu of the “#0” group:

?
1: Enable/disable clipping.
2: Position of the clipped area.
3: Size of the clipped area (W – width, H – height).

Clipping is to display something in a restricted area. The background in the map that you’ve open ed is clipped. Look at the red border:

?
The background isn’t displayed outside the border (and map also). We use clipping to say “you will be displayed in this area only”. Here the background (actually the “#0” group) is clipped to the map area (where a player will see it) – it’s needless outside the map (wouldn’t be seen anyway, so it’s clipped). The same without the clipping:

?
The red border is gone and the background is displayed as usual.

Clipping may influence (increase) the performance, that’s a big advantage. Clipping is also good if you want to put an image in your map but want only some part of it to be displayed.

In this tutorial I used grass tilesets. Remember there are also winter and desert tilesets, and few more graphics (moon, stars, etc) that you can use in your maps. Obviously you can use your own graphics and tilesets. I think I don’t need to describe all the tilesets. We use them all in a similar way, yet avoid bugs related to improper use of tiles.

20. Final words
I wish to thank all people reading my tutorial :] I apologise for any grammar and other mistakes, poor vocabulary (I don’t speak english very well). As for now, this tutorial if for Teeworlds 0.4.0 – 0.4.2. Perhaps it will be developed when a newer version comes out,  I’m not sure though.

Uff, that’s all, I hope it’s not too long! Over 5k words and precisely 100 images are included in this tutorial

Maybe you’d like some video tutorials ;>