June 29th, 2020
Welcome to the team, Siniša! Tell us a little bit about yourself and your background.
Hello! I am an animator from Zagreb, Croatia. Like many other artists, as a kid, I loved cartoons, comics, movies, games, and of course dinosaurs. And I never stopped being that kid. I enrolled in the animation department at the Zagreb Art Academy. Zagreb in the 60s had a really strong style called “Zagreb school of animated films”. That was a big inspiration for me and it was my luck that the teachers from the Academy were trained by the old masters. At the Academy we were taught to animate on paper, old school, and this taught me to plan my animation before I hit the desk. As an animator hungry for more knowledge, in 2012 I enrolled in The Animation Workshop in Denmark to learn 3D Character Animation. That expanded my horizons and made me a more versatile artist. I met some wonderful people and some amazing instructors that came from big studios like Disney, Dreamworks, Pixar, and Sony. After that, I understood how much more there was to learn and I continued to educate myself. I landed in the Czech Republic at Anomalia to study and practice more 3D with other talented students and teachers. After that, I keep enrolling in online courses and creating routines to practice my drawing skills as well. Besides all the studying, I have worked around Europe on series, short films, features, VFX, commercial, games, and now finally with Spine.
What brought you to Spine?
It’s actually a fun story. My wife is Spanish and she was taking Croatian classes around 2014. The two struggling students of the class were her and an American. One day when I came to pick her up they were chatting about their struggles with the language and we went for a drink and when he explained to me about the software that he created -- I was so impressed! And... that’s how I met Nate. I got a firsthand introduction to the world of Spine.
What's your role on the Spine team?
I approached Nate with the idea to make a series of video lessons. I collected a lot of materials through the years and I wanted to share that knowledge. Especially as I do both 2D and 3D animation, Spine is a perfect mix of both. A lot of indie teams are often very small and many times developers and artists are not trained in animation. These courses will be perfect for them. We will start with the basics, with emphasis on making it easy to follow. Then we’ll move to an intermediate level where we’ll see the typical animation cycles used in videogames, exploring different animation styles and techniques. And then some advanced techniques where we will tackle all sorts of things: combat, acting, and a lot of other tricks to get that fine polish look.
Question from the audience: what is your all-time favorite video game?
That’s a tough one. I started to play games on a Commodore and Atari. One day my mother brought us an Apple computer from work, and then I discovered the original Prince of Persia. Until then, the game I had seen only had squares moving around, but this game was much different -- the character moved so fluidly. Later I found out that the developer actually recorded his brother moving around and rotoscoped him. Genius! After that I was hooked on 2D point and click adventures, like Monkey Island, Day of the Tentacle, Discworld, and my favorite Full Throttle. But again Prince of Persia came back to surprise me, this time the Ubisoft version, The Sands of Time. This updated version was impressive with its movement and acrobatics and it set a precedent for other videogames like Assassins Creed (which I also quite enjoy). The last game I played was Spiderman from Insomniac Games, which is such a wonderfully animated game. It looks beautiful, the gameplay is nice, the story as well but the animation, it’s just perfect. I would probably put Bloodborne at the top of my list because I like to torture myself, but as a favorite, I think that I will keep Prince of Persia, The Sands of Time. That game was a revolution and I really hope to see another sequel.
Say "Hello" to Siniša on the forum!
June 15th, 2020
In this blog post we will create a rotating diamond animation using only weights and bones, without any deform keys. This advanced tutorial requires the use of Spine Professional.
To achieve this rotation effect, the skeleton combines the use of perspective rotations, weighted meshes and exact mesh vertex placement by copying and pasting vertices.
You can download the project to follow along, as well as to see the final result here.
To begin the creation of our diamond, we need to import 3 main shapes in Spine: the top as seen from the front
top, the upper square side
upper-side, and the lower triangle side
lower-side. We will later refine the images to add a color gradient and add a separate shimmer image, but to keep things simple as we start, we will only create a new Spine project and import these 3 shapes as illustrated:
After importing these images into Spine, we can start creating the bones to control them.
The final structure of this skeleton is actually simple, it only requires 5 bones to work. The objective is to create a structure that rotates in perspective for the first two sections: the top and middle of the diamond, which can be achieved by using 2 bones for each section, then have a third section at the bottom which is used to control the tail of the diamond.
The first step is to create a section that rotates in perspective, just like the windmill blades in the windmill example project. To achieve this, create two bones that overlap each other, one a child of the other, then parent the slot called
top containing the hexagon image attachment to the child bone so that the bones are in the exact middle of the image. You can ensure this by selecting the
top attachment and, with the parent axis selected, change both the translation values to
The parent bone is the one in charge of scaling the structure, therefore let's call it
top-scale. The child bone is in charge of rotating so its name is going to be
Next, switch to animate mode and create an animation that does a
360° rotation using the bone
top-rotation. To achieve that, set 4 equally distanced keyframes with the rotation values
240° and lastly
0° again to loop the animation.
It's important to create the rotation animation now, because after scaling the parent bone the values of the rotation keyframes will change after being distorted by the scale. If the rotation is done after scaling, using the values above will not produce the desired result.
After the rotation is ready, go back to setup mode and scale the bone
top-scale only vertically. In this example the scale values are set to
0.3, but this amount can be changed to achieve different perspectives. If this is done in animate mode it can simulate changing the angle of view or even changing proportions as in the initial GIF.
For now, let's just duplicate
top-scale so that also its children are duplicated. Place the copy just below and rename the two bones to
middle-rotation, then scale
top-rotation uniformly down a little so that the proportions look more like the top section of a diamond.
The new middle section is not going to be visible in the final diamond, but it's going to be fundamental for the next step.
Now that we have two sections rotating in perspective, we are going to use them as references to position each side of the diamond by copying the vertex positions of the corners and pasting them on the side images so that they will match their positions exactly.
To do so, first convert all the region attachments into meshes, then create the tightest possible meshes for each image so that each vertex is placed on a corner. This is important to avoid gaps between the diamond sides. The mesh trace feature can help to compelete this step very quickly.
For the sake of clarity, different colors have been temporarily applied to the attachments. The result should be similar to the one below.
Once all the meshes are ready, we can start matching the various vertices to create the sides of the diamond, one slice at a time. Select the two bottom middle vertices of the top hexagon image by pressing
cmd on Mac) and, while having the world axis selected, press
cmd+C on Mac) to copy the positions of the two vertices. Next, select the two top vertices from the
upper-side mesh following the same selection direction used to select the previous two vertices, then press
cmd+V on Mac) to paste the vertex positions.
Repeat the process for the two bottom vertices, this time select the two bottom middle vertices of the middle hexagon image, copy the two vertex positions, and paste them on the two bottom vertices of the
To ensure the vertices will follow the rotation of the bones we previously set, we need to bind the mesh to the bones
middle-rotation, then change the weights of the mesh so that the two upper vertices that are touching the top hexagon image are set so that they are influenced
100% by the bone
top-rotation, while the two lowest vertices should be influenced
100% by the bone
The lower triangle side called
lower-side is going to receive the same treatment for the two upper vertices, while for the bottom vertex we can just create a new bone called
lower-point and manually center the bottom vertex to it.
lower-side mesh can then be bound to the bone
middle-rotation influencing the two upper vertices at
100%, and to the bone
lower-point influencing the bottom vertex at
With this, the first slice of the diamond is ready, and if we play the animation we created earlier, this should be the result:
To add another slice to the diamond we need to duplicate the two
lower-side meshes, switch to animate mode, then choose a frame from the timeline so that the side we want to add is clearly visible, then repeat the process of selecting the vertices from the top hexagon, copying and pasting their positions on the duplicated side.
Since the mesh is already bound to the bones we need, this time we are going to press Update bindings to discard the old binding positions for the mesh and replace it with the current positions. However, modifying the vertex positions in animate mode has caused
Auto key to add a deform key. Delete that deform key to restore the correct mesh position after updating the bindings.
Repeat the process of duplicating the two meshes and binding each new side to the correct vertices until all the diamond sides are in position and weighted correctly. After this the middle hexagon image can be discarded as it isn't needed anymore.
The next step consists of adjusting the draw order during the rotation animation. The best time to change the draw order is likely when the new side that should come to the front is about to be revealed. Sometimes this happens on a keyframe, sometimes the exact moment can be captured more easily by holding
shift and dragging the timeline to place the draworder keyframe on a non-integer frame.
The slot colors add the possibility to create a shimmering effect by simply choosing different colors for the same slot during the animation. For example the same side can go from pink, to purple, to green. This is left to your artistic sense!
The placeholder colors and simple textures can also be replaced with more detailed textures and animated slot colors. The images can be repainted and replaced directly in the images folder -- Spine will automatically update the project to use the new images.
The rotating diamond is now complete, but you can add more details like sparkles, or a glow image with additive mode to turn on when the side is facing the viewer to simulate an additional shimmer, as was done here. The glow can even be weighted to the scaling bones of the diamond so that it follows any change of proportions you may decide to add.
It is possible to achieve different proportions by scaling the bones
middle-scale and translating those bones and the
lower-point bone. If done during an animation this can simulate a tilt in the spin, such as in the example below.
This advanced technique can be applied to any geometrical object with flat surfaces, so you can potentially create rotating cubes, pyramids, or even bottles, vases, lamps, chests, gift boxes, stars, books, and so on. We love to see what you create, so don't forget to tag your creations using #madewithspine! Let us know your thoughts on the Spine forum.