The tween editor
With the tween editor we can transform values in our objects with precalculated equations. This has many possibilities, from transition effects, camera handling and even the use of mechanics for our game.
1.0 – Exploring the tween mode
You can access to the tween mode by pressing the virtual button TWEEN MODE located on our main panel.
Once in this mode, we observe a curious panel to insert animation data to our object. By the distribution of the keypad, we could compare this panel with a compact mixer. Nothing could be further from the truth. This editor has been made possible by a library of functions in GML (programming language used in GameMaker).
This library is called TweenGMS and from here we give credit to the user and programmer 8bitWarrior for the effort he has put into this extension.
The functions of this library gives us the ability to execute algorithms to pre-compute an interaction in our objects, giving us the possibility of creating timelines where we can execute an action. These actions can be from moving objects, changing our textures and even controlling parameters in our game.
I have been in charge of giving life to this library so that it is compatible with the DarkSpine editor. And in the near future, you will receive a great update.
1.1 – Quick view to our tween panel
Let’s gradually clearing this panel explaining all its functions
In the top bar, the first row, we see a player panel. In this panel we can control our reproduction / animation as if it were an MP3.
The next row of our panel represents the active data blocks in our object. As an example and as we can see in the image below, we have not yet inserted any data in the properties. The red color being an empty container, while the green color informs us that there is data in that section.
The next row, represented by blue buttons, are switches that allow us to insert data into our object. When we have different animations it will be useful to touch up certain properties of our object.
The properties that contain this green block will be the ones inserted on demand in our object.
If we continue investigating we see that the next row of blocks represent the properties to change. The list of default properties of our panel is as follows:
- X: Create a travel timeline on the X axis of our object.
- Y: Create a travel timeline on the Y axis of our object.
- XS: Create a transition in the scale on the X axis of our image.
- YS: Create a transition in the scale on the Y axis of our image.
- AN: Create a rotational transition in our object, from an angular value to the second one.
- AL: Create a transition of transparency in the image of our object.
- BL: Merge in a transition by two colors in the allotted time.
- Z: Create a travel timeline on the Z axis of our object.
- XR: Create a rotational transition on the X axis (only compatible with 3D drawing) in our object, from an angular value to a second value.
- YR: Create a rotational transition on the Y axis (only compatible with 3D drawing) in our object, from an angular value to a second value.
Let’s now look at the values we can change to create a transition. Here we show you a list and definition of each value:
- Ease: Determine the equation to execute to create different transition effects in the indicated time.
- MODE: Determine the way in which our object will act at the end of the animation. We can choose between the different preset modes:
- TWEEN MODE ONCE: Our object will not do any secondary action at the end of the animation.
- TWEEN MODE PATROL: Our object will be animated in an infinite loop, returning to its point of return and vice versa.
- TWEEN MODE REPEAT: Our object will repeat its animation indefinitely from its new destination point.
- TWEEN MODE LOOP: Our object will repeat its animation indefinitely from its point of origin.
- TWEN MODE BOUNCE: Our object will replay its animation once in reverse until it reaches the point of origin.
- DELAY: Set in seconds how much delay time there is from when our level runs until the animation starts playing.
- DURA: Set the duration in seconds of our animation.
- START VAL: Set the value of the property to modify. (The values to be inserted must be locally, this means that our objects are positioned relative to the world. We simply must add a value to the current one. With this system, we will be allowed to move our objects in the editor without losing our configuration).
- FINAL VAL: It establishes the final value that the property acquires in the indicated time (as in the previous case, the sum of its current value with the added value in that box).
In the box above we see that our data container is lit green. This is achieved with the last two buttons of our animation panel:
- INSERT DATA: This button will add all the data of the properties assigned from our panel, only the properties that have the switch activated will be added. If our object already contained data of the same property, the values will be updated with the data of our panel.
- GET DATA: This option allows us to extract all the data of an object to insert them in the panel. In this way we can modify parameters and then re-insert them or simply insert a configuration similar to that of a neighbor to other objects.
1.3 – Creating a tween
Let’s look at the example shown in the image below. In it we observe that we have created an animation about the rotation of the X axis of our object, in this case a polygon. According to the panel the value of START VAL is 0, meaning that the animation starts from the current angle of our object.
The value of FINAL VAL is 15 units, our object will rotate 15 units of direction creating a movement effect. Since the animation time is defined by the value of DURA, we know that the final value of 15 will occur in the second 1.
As we have assigned the TWEEN MODE PATROL mode, the visual effect will be of a model that rotates slightly one second in both directions. Giving the feeling that the wind moves our bushes (there are different methods to do this effect and we will talk about it with the use of SHADERS).
1.4 – Data extraction and insertion
As we have said before, panel values can be transferred to other objects.
In the following illustration we observe that by selecting another object in our scenario and pressing the virtual INSERT DATA button we add this information. Once the action is executed, our object will display an informative icon notifying us that it contains an animation.
The image below makes little sense, because if we do not visualize the attached video header, being an animation we can not observe its effect.
But it is necessary that you know that you can run your game with peace of mind to see the final result and then return to our animation menu. Our editor works in real time, and this saves a lot of compilation time.
1.5 – The Ui
The editor is compact and does its functions very well but … Can I expand this tool and add more properties? The answer is yes, DarkSpine programming is modular and easily adaptable to the needs of each.
Apart from this, thanks to the editing of objects, we can create our own systems and take advantage of this curious tool to draw planes of movement.
En la ilustración de abajo nos ponemos a prueba para programar un sencillo ejercicio. Nuestra interfaz muestra 2 copias de nuestra imagen, la copia que adquiere un tono rojo representa el punto de partida de las coordenadas de nuestro objeto, también la escala y rotación.
Thanks to these markers we will know the final result of our animation, in this way we can chain different animations. But that’s not all, we have also programmed screen-positioned objects that are automatically chained without going through the editor.
If we decide to create an animation on the Z axis, a vector representing the depth will be drawn on the screen.
In the example below we make an object travel from a depth less than we are, giving the feeling that a box is approaching from our screen.
1.6 – Making use of programming with data inherited from the editor
Thanks to the fact that we can configure objects with the editor (I have friendly named this technique as OBJECT SCRIPTING and we will see it in future articles), we will have the option of assigning logic to an object which will inherit all information added in the editor.
We will be able to create from microsystems to complex programming modules without using new data structures.
In this case we have chosen to create an object that is a father, and in turn we will tell you that if you are a child, the animations of your children will be reproduced by your father.
In other words, we will program the object so that your father reproduces the animations of his children sequentially. It may sound messy, but watching the header video you will have clearer this idea. In future deliveries we will show how to program a parented object to chain actions without the passing data through the editor.
The first thing we do in the image above is to assign the object in question, when executing the game, the father will move to his son’s position, then inherit his son’s animation and play it until he reaches our player.
In the image below we make our object the son of the camera that is positioned above our hero. And what happens now? As programmed in our object, it now has a father, the camera. And this will be the one that inherits the animations sequentially.
The final result would be that of our camera traveling through the coordinate points indicated on the other two objects (labeled as invisible during the game).
As you can see, having access to program objects that we can adjust from our editor will give us many possibilities. In this particular case, the programming has been very simple and re-usable for other occasions. We are eager to reveal how the OBJECT SCRIPTING technique works.
We strongly recommend that you view the video located at the beginning of this article to get a clear idea of this section.
The video tutorials provided on the YouTube channel support subtitle contributions from users. This means that any user can contribute to add subtitles with the editor and the new contribution program of YouTube subscribers.
And here is our basic tutorial on interactive animations. We wish you enjoyed reading. You can comment on this post and contribute what you think is convenient to improve it. Greetings and until the next article!