Topic: [Tutorial; MAPS] Envelope Tutorial
Hello.
As promised some time ago I am going to provide an explicit tutorial on how to animate tiles and Quads.
For the following instructions you will have to have some basic understanding of mapmaking. You can probably find different tutorials on that topic all around the web. Most of you interested in this have probably already seen the Envelope window or even tried to understand it. So without further ado I will get started with this tutorial.
The Envelope window in general
To get started on how to animate, you will have to know what the different components of the Envelope window mean. First off, you can open the Envelope window with the button found in the lower right-hand corner of your editor screen that says 'Envelopes'. Upon doing so, you should see a mostly black-colored box with three grey areas. Those few buttons do the following (explained in this order);
[1.1] In this area you can see which of your added Envelopes you are on at the time (default being 0 of 0). By clicking on the plus and minus you can switch through the various Envelopes you created.
[1.2] This button is used for adding a Position Envelope. You need those for position-changing animations.
[1.3] This button is used for adding a Color Envelope. You need those for color-changing animations.
Both the Position and Color Envelopes have the following areas in common (explained in this order; unequal areas have been cut away);
[2.1] You have the option to name every single Envelope you add however you want to. This is for keeping a better overview.
[2.2] If the box here is marked, then everyone who joins the server will see the Envelope at the same point of time. If it is not checked, the Envelope will start from the beginning for the player who joins the server.
[2.3] These letters symbolize the kind of 'easing' the animation should have from one point to another (the people that know about animating with JavaScript, SCSS, and CSS3 should know about easings). It can be changed by clicking on the letter. The letters are shortcuts of mostly unknown meaning. L is for a linear easing; S is for easeInQuad; F is for easeOutQuad; M is for easeInOutQuad (also called swing); and N is for an unknown easing. An example for every easing can be found here.
[2.4] These are values. In both Color and Position Envelopes the left value displays the time in which the animation is completed (in seconds; 1.000 is equal to one full second). The right value differs in the two types of Envelopes;
[2.4.1] In the Position Envelope the right value symbolizes the distance the Quad has to travel (in pixels (rotations not included); 32 pixels = 1 tile);
[2.4.2] In the Color Envelope the right value symbolizes the color intensity in the scale of about 1:400 to normal tile or Quad coloring (because 255 is about a quarter of 1000; e.g. 130 would be about 0.520 in the Envelope; 1.000 is the maximum, 0.000 is the least).[2.5] This button deletes the Envelope you are on at the time.
The following are the 'special' areas of the Position Envelope window (explained in this order);
[1] X stands for the x-axis, which means this is the curve for horizontal movements;
[2] Y stands for the y-axis, which means this is the curve for vertical movements;
[3] R stands for rotations.
The following are the 'special' areas of the Color Envelope window (explained in this order);
[1] These curves are for the colors. R for red, G for green, B for blue;
[2] this curve is for the 'Alpha', which means the transparency;
[3] this space is reserved for previews of the colors' transitions.
You can click on the letters to turn off the curves. A greyed background to the letters indicates, that the curve is turned off and is unreachable for the mouse unless turned back on. If a higher curve than another one is turned off, the window will zoom into that smaller one, to make it easier to access.
You also get some basic information to every button if you hover over it and look down to the footer of the editor screen.
How to control the marks
Those dots in the second picture (Point A; B) are the marks for the different phases of the Envelope. To move them (it is recommended to not move the left mark because it is the start of each animation) simply click and hold it with your left mouse button. If you hold Shift in the process you can move the mark sideways, which will in- or decrease the left value, the time. If you let go of Shift you will be able to move the mark up- and downwards, in- or decreasing the right value. The precision selection works with Control (Ctrl/ Strg for Germans) here instead of the normal Shift. When you change the time you have to hold both Shift and Control. You can add a mark by right-clicking anywhere in a free spot of the Envelope window. You can delete a mark by right-clicking directly on it.
How to add an Envelope onto a Tilelayer or a Quad
To add an Envelope to a Tilelayer, you simply right click the layer and then increase the number of the tab 'Color Env' until your target Envelope (e.g.). Sadly at the time being you can only add Color Envelopes to tiles. Though it is possible to add tiles in a Quadlayer. That's a different topic though, and a hard one to explain, as well.
You can add an Envelope to a Quad by right-clicking the green dot of the Quad and then again increasing the number of the tab 'Pos. Env' or the tab 'Color Env' until you reach your targeted Envelope (e.g.). The tabs 'Color TO' and 'Pos. TO' are for giving the animation for that exact Quad or Tilelayer either a head start or a delay in milliseconds (1000 = 1 second). By upping or lowering the numbers, the 'start line' of the animation is being moved (e.g. when set to 1500 the animation will start at 1.5 seconds instead of 0).
Getting started
You now know the basics of the Envelope window, so to actually get started you will need to have a basic idea of what you want to do. A simple idea can unfold into a big project. Let your imagination flow! Oh, and don't forget: there is nothing like 'that's about right' when working with Envelopes. You always have to make sure, that you take the exact values!
Color Envelopes
Color Envelopes are really easy to understand. They are best used on brightly colored or white Quads. They can be used to simply change the color of a Quad, so you don't have to change the red dots' values four times. But the most obvious, best and most-used feature of those Envelopes are the transitions. Firstly you will need to have a good understanding of how to get which color. This website can help you with that problem. Just don't forget the 1:400 scale (250 - 255 are all equal to 1.000 as this is the maximum). The yellow curve that is in front of all the other ones is the curve for the Alpha. Set to 0.000 it means full transparency, set to 1.000 it means absolutely no transparency. Just don't forget the precision! The red, green, and blue curves are for the respective colors. In their case 0.000 means absolutely no presence and 1.000 means full presence.
With the knowledge you already have, having read the first paragraphs, you can now create any transition, fade-out, or whatever you like with any length in time whatsoever. The only thing worth telling you now is how to mirror an animation. For that matter you add a third mark and mirror the first part of your animation.
Position Envelopes
Rotations
Rotations are the easiest animations when talking about position animations. Both the X- and Y-curve can be turned off, because they are not needed. As mentioned above, the right value describes something different for the rotations. It describes the amount of degrees the Quad has to turn (360° (360.000) being the highest needed, describing a full turn). For the whole rotation, the green dot is the center. Therefore to have a Quad rotate around its own axis the green dot has to be perfectly in the middle of it. It is worth knowing that pulling the curve upwards, makes the Quad rotate clockwise and pulling it down into negative values makes it rotate counterclockwise. Rotations are mostly used for sun rays. A tutorial on how to correctly place them can be found here. Though rotations can be used differently; in this little animation I made I placed the green dot a bit farther down for the ball, so the center is down there.
Horizontal and vertical movement
If you want a Quad to move sideways or up and down, you will have to have either the x- or y-curve displayed. They both work more of the same. The animation is again starting from the green dot. You can now decide how far your Quad has to go and in which time the animation should be completed.
It is worth knowing that pulling the X-curve upwards, makes the Quad move to the left and pulling it down into negative values makes it move to the right side. Pulling the Y-curve upwards however makes the Quad move downwards, and setting it onto negative values makes it go up.
This requires a lot of creativity, patience, and practice, so don't be upset if you don't get the whole concept after your first attempts.
I hope this little tutorial was somewhat useful. If there are any questions left you would like to ask, then go ahead. I will either post a reply or edit this post. It is very much possible that I left out some important information.
Weonix
