Map redesign, Tutorials, Tips, Loading Screens

Guides about mapping and everything Teeworlds related.

User avatar
Lady Saavik
Testing Team: Tester
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: Lady Saavik
Mapper profile: Saavik

Map redesign, Tutorials, Tips, Loading Screens

Post by Lady Saavik » Wed May 14, 2014 8:28 pm

Hey.
I saw Kintaro*'s speedmapping videos and I wanted to redesign some ctf maps too! I would like to show you my work, explain few things, give ideas, tell something about animations and editor (what maybe not everyone knows). I hope it will be useful for you. Please read comments below the images.

ctf3_saavik
My first map. I'm proud of it. Note that all Images are External, nothing Embedded! Download the map and run it on your server (or ddnet test srv) to see animations. The map is online on the Vanilla CTF Network servers."
ctf3_saavik.map
(13.4 KiB) Downloaded 93 times
But how I made it?
1.png
I deleted all Layers and Images. I wanted to make everything new.
2.png
I was trying to make nice heart from clouds. For walls I used automapper. I liked those colors, but changed it a bit later. Nothing is perfect after first try.
3.png
Rainbow sun! You can see how to make your favorite colors :)
4.png
Added Snow-stars, clouds behind the sun. It looks great, never saw it before.
5.png
Moar clouds, but not like you think. Let's be creative! Shadows look mysteriously.
A.png
Just a screenshot, take a closer look.
B.png
Would you guess what I used?

Let's learn something and see examples. I know... it's a bit random.
tipp.png
Yes, these numbers mean something! Touch buttons with your cursor and read description.
tippp.png
Yes, it makes sense too ;) Let me explain:
Whole animation takes 108s (then it repeats). I made few points to mix colors (see white numbers):
  • 0.000s
  • 18.000s
  • 36.000s
  • 54.000s
  • 72.000s
  • 90.000s
  • 108.000s
On the screen I clicked blue ray. You can see "Color TO: 72000". It means 72.000s (5. - blue). Here will start my animation (not 0s like always)! My pink ray has Color TO: 90000 and it will change pink -> red -> orange -> yellow -> green -> blue -> pink -> red -> ...

Your homework: How to start with orange? (Tip: it's between 1 and 2)

My animation takes 108s (108000). What if I make Color TO: 144000? 144 = 108 + 36. It's the same as 36000 for us! Has the same effect.
750 means 0.750s. And so on.


Here my other idea where to use Color TO:
ColorTO.map
If you are too lazy to make it, but want to see how it works!
(1.35 KiB) Downloaded 85 times
tipppp.png
Thank you, I'm waiting for your comments and questions.

Next map: ctf1 ;) In few days I will show you how cool Grid is and how to make an interesting background. Some things fit together and look good when you utilize them for something which they were not meant to be used for.
Last edited by Lady Saavik on Sun Jul 27, 2014 10:49 pm, edited 1 time in total.

User avatar
Bossk
User
Posts: 43
Joined: Thu May 08, 2014 2:54 pm
Player profile: Bossk
Mapper profile: Bossk

Re: Map redesign, Tutorials, Tips

Post by Bossk » Wed May 14, 2014 10:39 pm

I don't understand how to make a good background, so i see forward to your guide for that :)

Make colors change and so on is no problem now, ty.

But i still don't know how to make graphics move.
If there is a good guide/video about it, it would be cool if someone could post that.
I would like to be able to do atleast a sun with moving rays and moving clouds :D

Flummi
User
Posts: 48
Joined: Wed May 07, 2014 1:24 am
Player profile: Flummi

Re: Map redesign, Tutorials, Tips

Post by Flummi » Thu May 15, 2014 1:53 am

Bossk wrote:I don't understand how to make a good background, so i see forward to your guide for that :)

Make colors change and so on is no problem now, ty.

But i still don't know how to make graphics move.
If there is a good guide/video about it, it would be cool if someone could post that.
I would like to be able to do atleast a sun with moving rays and moving clouds :D
go here and click the links dude :D http://ddnet.tw/howto/

User avatar
Lady Saavik
Testing Team: Tester
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: Lady Saavik
Mapper profile: Saavik

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik » Tue May 27, 2014 3:46 pm

Hey hey. I didn't have time for it :x.

Here my next map: Please hit Anim button if you want to see the map in editor. Only fadeout Embedded.
ctf1_saavik.map
(22.77 KiB) Downloaded 92 times
It looks like this:
A.png
3.png
Yes, I like rainbows!
Walls and Moon change colors.
For small colorful stones on the walls I used:
KILL.png
KILL.png (54.04 KiB) Viewed 3767 times
I noticed, that fadeout and desert_main have the same form, so I used both for my walls.
Stars closer to the mountains are more transparent. I like how it looks. I used 3 sizes and 4 transparency levels.
I animated lights between the mountains. They are shiny.

*********************************************************************************************************
I used 6 Quads to make Rainbow Background. It's not possible without GRID.
weird.png
Without: sometimes it looks good, but when you move - it's weird.
This tool is really helpful if you want to connect Quads or place rays exactly in the middle of the sun.
Just hit the Grid button, zoom in/out if needed and move red and green (hold Shift) dots on the intersection points. Now you can play easily with your puzzles.

I made few examples. I want to show you what's possible and give you ideas for your backgrounds (yes, I like rainbows).
BGs.png
You can find it here if you want to see how many Quads I needed: You can see I used Grid everywhere.
ExampleBG.map
(2.26 KiB) Downloaded 93 times
PS Did you know you can hold Shift, click (mark) all corners and then change color of whole Quad?


Do you have ideas what else should I explain? Or any questions? I'm happy if I can help you.

User avatar
Lady Saavik
Testing Team: Tester
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: Lady Saavik
Mapper profile: Saavik

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik » Tue Jul 08, 2014 1:59 am

DM9
Here I finished dm9 (I was looking for a small map). Maybe it's a bit ugly, hmm. Nevermind.
dm9_saavik.map
(15.98 KiB) Downloaded 70 times
dm9.png
What can I say. Spikes, more spikes. I used coins as border. Some colors. Simple, no animations, nothing special.

*********************************************************************************************************************
I'm sure you saw those loading screens 2min before the tournaments.
I just saw some gifs and wanted to try it in teeworlds.

FIRST
TEST.map
(13.44 KiB) Downloaded 86 times
Image
test.png
I had to fix it 939358 times. I had to make it bigger and bigger. I know it's not connected so perfect buuuut... Not my fault.


SECOND
TEST2.map
(1.92 KiB) Downloaded 70 times
Image
test2.png
If you don't know it - nothing rotates, circles move in a straight lines.The biggest problem was timing/delay. I even tried to calculate it, but I failed (there were more fails ^^). As you can see I made it not so boring and prettier (and wrong direction). Did you notice that I like rainbows? No? So look at that:
rainbow.png
Have a nice day ;)

User avatar
Lady Saavik
Testing Team: Tester
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: Lady Saavik
Mapper profile: Saavik

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik » Sun Jul 20, 2014 11:03 pm

THIRD LOADING SCREEN
Image
TEST3.map
(86.14 KiB) Downloaded 70 times
Layers and Envelopes are described with their names. Should be easy to understand.

Took me few days to do it :)
"Loading" is made with 149 small square Quads (each letter: 32+18+17+23+10+17+32 if I didn't fail at counting it).
I had to set Color TO for every square ^^ At end I noticed that I have to set Pos. Env too. Click Click. x1000. Boring work.
There are 10 animations, shiny sun, standard blue background. I wanted to make a nice, typically-teeish picture with grass_main and clouds.
To be honest: this white screen with ddnet logo is like pausing the game before the tournament. Just waiting for people with slower internet ^^
When I'm looking at it now... I would fix few things, but nevermiiind! And I forgot something but shhhh.

Yes, I have an idea for TEST4. I will start soon. It will be a bit like this. A little bit.
Maybe something with a rainbow?! :O
Last edited by Lady Saavik on Fri Jul 25, 2014 9:51 pm, edited 2 times in total.

User avatar
CuBe
User
Posts: 65
Joined: Wed Jul 16, 2014 7:15 pm
Player profile: =CuBe=
Mapper profile: =CuBe=
Clan: Eagle
Website: http://eagleclan.tw

Re: Map redesign, Tutorials, Tips

Post by CuBe » Mon Jul 21, 2014 8:38 am

I loved that loading screen, very nice lady saavik :)

Ama
User
Posts: 921
Joined: Sun Jun 01, 2014 12:28 pm
Player profile: Ama
Mapper profile: Ama

Re: Map redesign, Tutorials, Tips

Post by Ama » Mon Jul 21, 2014 11:54 am

Could you tell us how long it took you to make that loading screen ?

User avatar
Lady Saavik
Testing Team: Tester
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: Lady Saavik
Mapper profile: Saavik

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik » Mon Jul 21, 2014 2:50 pm

I didn't look at the time but I remember last night and day before the tournament. I made grass_main + doodads (with Color TO), set position envelopes for "Loading" and last small fixes. It was 3,5h. But I will look later when I saved the first version (will edit this post). Maybe it took too long, because I didn't have whole plan for it and needed to chage timing few times aaand everything had to be perfect and exactly 15.000sec etc. :)

Testing and fixing Planet Venus was also 3,5h ^^ Good that I have vacations!
I will count how many hours I worked on TEST4 haha.

EDIT
Let's say 1 week. But not every day and night few hours in editor ^^
I always need some time, can't map so fast :(

User avatar
Lady Saavik
Testing Team: Tester
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: Lady Saavik
Mapper profile: Saavik

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik » Fri Jul 25, 2014 9:46 pm

Hey hey, it's me again with...
TEST5
TEST5.map
(5.62 KiB) Downloaded 76 times
Yes, the fourth Loading screen is finished too, but it will stay top secret untill next tournament ;) Let me surprise you.

This is next, boring GIF with rainbow rotating balls but hey, I love it.

Image
test5.png
I have nothing important/interesting to say. It's just many Color Envelopes (I had to add 3 more at end because of my(?) fault).
I also figured out how to rotate something 12,5°, what I needed.
It was harder to make than I excepted/imagined. But I WILL NOT DO IT?!
I always make colors a bit darker, otherwise it hurts my eyes. Circles are again desert_sun (I know it's ugly, faded out and not even white... but hey, I'm lazy :P)
It was not sooo much work, 3h today + something at night.
Nananana.

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest