Map redesign, Tutorials, Tips, Loading Screens

Share and discuss skins, mapres, artworks and logos.
User avatar
Lady Saavik
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: http://ddnet.tw/players/Lady-32-Saavik/
Mapper profile: http://ddnet.tw/mappers/Saavik/

Map redesign, Tutorials, Tips, Loading Screens

Post by Lady Saavik »

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 290 times
But how I made it?
I deleted all Layers and Images. I wanted to make everything new.
I deleted all Layers and Images. I wanted to make everything new.
1.png (115.09 KiB) Viewed 10936 times
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.
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.
2.png (279.91 KiB) Viewed 10936 times
Rainbow sun! You can see how to make your favorite colors :)
Rainbow sun! You can see how to make your favorite colors :)
3.png (254.72 KiB) Viewed 10936 times
Added Snow-stars, clouds behind the sun. It looks great, never saw it before.
Added Snow-stars, clouds behind the sun. It looks great, never saw it before.
4.png (270.52 KiB) Viewed 10936 times
Moar clouds, but not like you think. Let's be creative! Shadows look mysteriously.
Moar clouds, but not like you think. Let's be creative! Shadows look mysteriously.
5.png (258.96 KiB) Viewed 10936 times
Just a screenshot, take a closer look.
Just a screenshot, take a closer look.
A.png (265.66 KiB) Viewed 10936 times
Would you guess what I used?
Would you guess what I used?
B.png (258.85 KiB) Viewed 10936 times

Let's learn something and see examples. I know... it's a bit random.
Yes, these numbers mean something! Touch buttons with your cursor and read description.
Yes, these numbers mean something! Touch buttons with your cursor and read description.
tipp.png (214.49 KiB) Viewed 10936 times
Yes, it makes sense too ;) Let me explain:
Yes, it makes sense too ;) Let me explain:
tippp.png (358.99 KiB) Viewed 10936 times
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 294 times
tipppp.png
tipppp.png (142.32 KiB) Viewed 10936 times
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
Posts: 43
Joined: Thu May 08, 2014 2:54 pm
Player profile: http://ddnet.tw/players/Bossk/
Mapper profile: http://ddnet.tw/mappers/Bossk/

Re: Map redesign, Tutorials, Tips

Post by Bossk »

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
Posts: 48
Joined: Wed May 07, 2014 1:24 am
Player profile: http://ddnet.tw/players/Flummi/

Re: Map redesign, Tutorials, Tips

Post by Flummi »

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
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: http://ddnet.tw/players/Lady-32-Saavik/
Mapper profile: http://ddnet.tw/mappers/Saavik/

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik »

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 291 times
It looks like this:
A.png
A.png (263.93 KiB) Viewed 10871 times
3.png
3.png (289.24 KiB) Viewed 10871 times
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 10871 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.
Without: sometimes it looks good, but when you move - it's weird.
Without: sometimes it looks good, but when you move - it's weird.
weird.png (248.91 KiB) Viewed 10871 times
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
BGs.png (182.62 KiB) Viewed 10871 times
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 296 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
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: http://ddnet.tw/players/Lady-32-Saavik/
Mapper profile: http://ddnet.tw/mappers/Saavik/

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik »

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 267 times
dm9.png
dm9.png (134.38 KiB) Viewed 10776 times
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 292 times
Image
test.png
test.png (31.59 KiB) Viewed 10776 times
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 258 times
Image
test2.png
test2.png (83.6 KiB) Viewed 10776 times
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
rainbow.png (380.65 KiB) Viewed 10776 times
Have a nice day ;)
User avatar
Lady Saavik
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: http://ddnet.tw/players/Lady-32-Saavik/
Mapper profile: http://ddnet.tw/mappers/Saavik/

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik »

THIRD LOADING SCREEN
Image
TEST3.map
(86.14 KiB) Downloaded 271 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
Posts: 65
Joined: Wed Jul 16, 2014 7:15 pm
Player profile: http://ddnet.tw/players/-61-CuBe-61-/
Mapper profile: http://ddnet.tw/mappers/-61-CuBe-61-/
Clan: Eagle
Website: http://eagleclan.tw

Re: Map redesign, Tutorials, Tips

Post by CuBe »

I loved that loading screen, very nice lady saavik :)
Ama
Posts: 921
Joined: Sun Jun 01, 2014 12:28 pm
Player profile: http://ddnet.tw/players/Ama/
Mapper profile: http://ddnet.tw/mappers/Ama/

Re: Map redesign, Tutorials, Tips

Post by Ama »

Could you tell us how long it took you to make that loading screen ?
User avatar
Lady Saavik
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: http://ddnet.tw/players/Lady-32-Saavik/
Mapper profile: http://ddnet.tw/mappers/Saavik/

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik »

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
Posts: 1763
Joined: Tue May 13, 2014 4:02 pm
Player profile: http://ddnet.tw/players/Lady-32-Saavik/
Mapper profile: http://ddnet.tw/mappers/Saavik/

Re: Map redesign, Tutorials, Tips

Post by Lady Saavik »

Hey hey, it's me again with...
TEST5
TEST5.map
(5.62 KiB) Downloaded 274 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
test5.png (75.45 KiB) Viewed 10628 times
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 3 guests