Hey guys! My name is Danielle, and in this breakdown tutorial, we will see how I created this 2D animation in Spine, which includes multiple animations in multiple directions with various skins. What I am about to show you have saved me a lot of work and time when creating our game Nugget & Penny. It includes some tips that completely changed the way I work and will save you tons of time. In this Spine file, we have 3 sharks Skins with some animations in 3 different directions like Idle, Swim, Eat, and Die. This video will have 3 parts: PSD file preparations Spine file preparations and Animating Let's look at how we prepare the Photoshop file for this. We work with the PhotoshopToSpine script, so we need to place all layers under folders and tag the folders to communicate our intentions for the script. Our three root folders are the Skin folders, one folder for each type of shark. These sharks are designed to move in six directions, so we need to create all of their different directions. To save time, I deliberately made the sharks symmetric, and by this, we only need to create 3 directions – South-West, West, and North-West. Later on, inside a game engine like Unity or Unreal, we can use a script to mirror the animations to achieve all of the six directions. We create 3 direction folders for each Skin. We make sure to tag the direction folder with the [folder] tag and name it only with the direction name without any addition. For example, we have [folder] NW. Under these folders, we place the Slot folders. We should give each slot folder a descriptive name of a body part. Don't forget to prefix it with a [slot] tag. Under the Slot folder, we can place a single layer with the art. Its name will contain its relevant direction and the name of the Slot folder it placed under. If we need multiple layers, we can create a wrapping folder for them prefixed by the [merge] tag that will be merged into a single attachment after export. It can get a bit confusing when we organize the PSD file, but remember, under the Skin folders, all folders and layers must have the same names. This is CRUCIAL to get an accurate Spine file after exporting. For example, both Skin folders of the Shark-Hammer and Shark-Speed has a SW folder, which contains a Slot folder named tail, with an art layer called SW-tail. To recap, we have the root folder, which is the Skin, inside it a Folder of a direction, inside it a Slot folder of a body part, and underneath it all an art layer or a Merge folder with the naming scheme of direction and body part. One last thing before we export: To control the root pivot point of the character within the Photoshop file, we click on the ruler corner, and while holding the mouse down, drag the cursor to a position of your choice. If you can't see the rulers, Control + R in Windows or CMD + R in Mac will show and hide them. So now, we can finally export the PSD file. The link for downloading the script is in the description. Once the script completes exporting, we can see its results under the folder where we saved the PSD. Notice how we now have a JSON file and an Images folder, filed with folders for each skin with folders for each direction. We import the JSON file by going to Spine –> Import Data and searching for the right folder. As you can see, we got a bit of a mess with the Draw Order. We only need to rearrange the drawing order and make sure we got it right with all the Skins. brackets (</>) to navigate between the different Skins. Exporting the PSD file using the script will organize the file correctly and saves us a lot of work. For example, we have under the body slot, the 3 Skins Placeholder we need for each direction. When we change the Skin, we can see how the attachments change accordingly. So, let's start by placing the Bones. In the Setup mode, I choose to show the South-West direction, and we are going to place the bones based only on this direction while ignoring the other two. The tricky part of these characters is the mouth. We can see how the mouth position changes for each Skin. In this case, we can place the bones in an average position that will match all Skins – it doesn't have to be precise, the more important thing is that it will be convenient for us the animators. We place two Bones for the body – body-down, and body-up. The bones for the dorsal-fin, fin-front, and fin-back we set as the child of the body-up bone. For the face, which is also a child of the body-up bone, we place a bone named face-control, to control the eyes and the mouth parts. Underneath it, we have the mouth-down and mouth-up bones. Mouth-down is the parent of the mouth-down-teeth bone, and the mouth-up is the parent of the eye-back, eye-front, and pupil-control bones. To attach the bones to their relevant slots, we click on the attachment and press P, then we click on the bone we choose to set it as the parent. Now, let's focus on the two other directions. We select the skeleton in the Tree and click on the duplicate button. We are going to reposition the West and North-West attachments, So we will later use the duplicated skeleton as a reference for their original positions. For now, let's hide the second skeleton. We take an attachment, in this case, the West front eye attachment, and reposition it to the pupil-front bone. Be sure to do the same to all the other attachments, West and North-West, which needs adjustment to the bones we have placed. After we finish repositioning the attachments, we go to Animate Mode and create what I call the Directions Bank. Now is the time to show the duplicated skeleton nd change its slots alpha to make it transparent, so we can see what we are doing. We create a new Animation and name it W. For a start, we activate all the attachments with a W direction in their name. Be sure to have the Autokey toggled on, so the keyframes will be saved in the animation. Using the duplicated skeleton as a reference, we reposition the bones to match the original position of the attachments. We also change the Draw Order as needed. We now have the West direction saved as the animation W. We do the same for the North-West direction, and for good measure, we place these two animations under a folder named directions. It is important to save those animations, do not delete or overwrite them by mistake we need those keyframes as a base for different animations in those directions. Now we are ready to create the Meshes, which we need for the squishy body and fins. To save time while creating the meshes for all the 9 different body attachments, for all the 9 different body attachments, we can duplicate a mesh we already created and drag it to the Skin Placeholder of another skin. Don't forget to double click the attachment name and change it to the name of the relevant skin Sometimes you will need to make a few adjustments, but it sure saved me a lot of time and frustration, and I am sure it will save you time as well. To create the squishy and smooth movement of the fins, We will create 2 identical bones: The first one fin-front – we will split into 2, The second, the fin-front-split, we will split into 6. Selecting the root bone and clicking on new –> Path, will create a path, we name it fin-front-path. We will then place two points of the path according to the front-fin bones, be sure to move the handles so the path will be a straight line. Next, we select all the 6 fin-front-split bones and go to new –> Path Constraint, name it and select the path we created. In the constraint we created, we change Tangent to Chain Scale. At the Weights window, Bind the path-constrain to the 2 bones. Make sure the vertices' weight can be controlled by the two bones. Our final step is to Bind the mesh of the fin-front to the 6 split bones. As you can see, the fin moves quite smoothly. Of course, the number of vertices of the mesh and their weights can affect the smoothness, so feel free to change those until you get a satisfying result. When we animate a character with different directions, I prefer to finish animating all the animation in one direction before moving to animate another This way, I can be sure I will not need to change an animation 3 different times if I needed any changes. After animating all the South-West animations, I start animating the North-West direction. he most efficient way is to duplicate the NW animation from the direction bank we created. I copied the keyframes from a finished SW animation and placed it next to the NW keyframes. What's nice about coping SW animations to NW animations is that for most animations, we will only need to adjust the Draw Order. Copying South-West animations to the West animations requires more adjustments, but nothing too complicated. Again, we duplicate the W animation from our bank and place the keyframes from a Sout-West animation next to it. Copy-paste the W animation keyframes to the first and last SW animation keyframes. Notice how the animation looks? Yeah, we will need to fix that. We find the keyframes in the middle, which make this mess and fix them. So that's it, we now have a 2D shark animation, with three different skins in three directions. I hope you found this video useful! Also, let me know in the comments which shark you liked the most. For more game dev tutorials about Spine animation and Unity, be sure to like and subscribe. We also post our own game's Devlog were we show our different Spine animated characters and our game dev process. Until next time!
