[{"data":1,"prerenderedAt":551},["ShallowReactive",2],{"tutorial-2020-01-spine-animation-breakdown-shark":3},{"tutorial":4,"series":269,"author":540},{"id":5,"title":6,"author":7,"body":8,"category":250,"cover":251,"date":254,"description":255,"extension":256,"meta":257,"navigation":258,"path":259,"seo":260,"series":261,"stem":262,"tags":263,"youtube":265,"youtubeRange":266,"__hash__":267,"slug":268},"posts\u002Fposts\u002F2020\u002F01\u002Fspine-animation-breakdown-shark.md","3 Skins Shark","danielle",{"type":9,"value":10,"toc":242},"minimark",[11,15,18,23,28,36,41,57,60,75,81,92,96,99,114,120,124,131,141,159,169,172,179,186,190,194,197,217,236,239],[12,13,14],"p",{},"This breakdown tutorial shows the steps of how I created a 2D sharks animation in Spine, which includes multiple animations in multiple directions with various skins.\nThe tutorial includes some tips that have saved me a lot of work and time when creating our game Nugget & Penny.",[12,16,17],{},"In the final Spine file, we have three sharks Skins with some animations in 3 different directions, like Idle, Swim, and Eat.",[19,20,22],"article-giphy",{"gif":21},"KCwTC8VwMb00LBpmQ7","\nAnimated sharks, from Nugget & Penny.\n",[24,25,27],"h2",{"id":26},"psd-file-preparation","PSD File Preparation",[12,29,30,31,35],{},"Let's look at how we prepare the Photoshop file.\nWhen we work with the ",[32,33,34],"code",{},"PhotoshopToSpine"," script, we need to place all layers under folders and tag the folders to communicate our intentions for the script.",[37,38],"article-download",{"href":39,"title":40},"https:\u002F\u002Fgithub.com\u002FEsotericSoftware\u002Fspine-scripts\u002Ftree\u002Fmaster\u002Fphotoshop","Download the PhotoshopToSpine script",[12,42,43,44,48,49,52,53,56],{},"These sharks are designed to move in six directions, so we need to create all of their different directions.\nTo save time, I deliberately made the sharks symmetric, and by this, we only need to create three directions – ",[45,46,47],"strong",{},"South–West",", ",[45,50,51],{},"West",", and ",[45,54,55],{},"North–West",".\nLater 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.",[58,59],"article-assets",{},[12,61,62,63,66,67,70,71,74],{},"Our three root folders are the Skin folders, one folder for each type of shark.\nWe create three direction folders for each Skin, tag them with the ",[32,64,65],{},"[folder]"," tag and name it only with the direction name without any addition.\nUnder these folders, we place the Slot folders.\nWe give each slot folder a descriptive name of a body part and prefix it with a ",[32,68,69],{},"[slot]"," tag.\nUnder 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.\nIf we need multiple layers, we can create a wrapping folder for them prefixed by the ",[32,72,73],{},"[merge]"," tag that will be merged into a single attachment after export.",[76,77,80],"article-image",{"src":78,"alt":79},"\u002Fposts\u002F2020\u002F01-01\u002Fshark-psd-file.jpg","Shark PSD file for Spine","\nPhotoshop layers’ hierarchy.\n",[12,82,83,84,87,88,91],{},"One last thing before exporting:\nTo 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.\nIf you can't see the rulers, ",[32,85,86],{},"Control + R"," in Windows or ",[32,89,90],{},"CMD + R"," in Mac will show and hide them.",[24,93,95],{"id":94},"spine-file-preparation","Spine File Preparation",[12,97,98],{},"Once the script completes exporting, we can see its results under the folder where we saved the PSD.\nWe will have a JSON file and an Images folder, filed with folders for each Skin with folders for each direction.",[12,100,101,102,105,106,109,110,113],{},"We import the JSON file by going to ",[32,103,104],{},"Spine > Import Data"," and searching for the right folder.\nWe rearrange the drawing order and make sure we got it right with all the Skins. Click the Angle brackets (",[32,107,108],{},"\u003C"," and ",[32,111,112],{},">",") to navigate between the different Skins.",[12,115,116,117,119],{},"In the Setup mode, I choose to show the ",[45,118,47],{}," direction, and we place the bones based only on this direction while ignoring the other two.\nThe tricky part of these characters is the mouth as 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.",[19,121,123],{"gif":122},"Ynvaxu05CFx4206uj6","\nMultiple skins, same bones rig.\n",[12,125,126,127,130],{},"To attach the bones to their relevant slots, we click on the attachment and press ",[32,128,129],{},"P",", and then we click on the bone we choose to set it as the parent.",[12,132,133,134,109,137,140],{},"Now, focusing on the two other directions:\nWe are going to reposition the ",[135,136,51],"em",{},[135,138,139],{},"North-West"," attachments, and we will use a duplicated skeleton as a reference for their original positions.",[12,142,143,144,147,148,151,152,154,155,158],{},"We take the attachments and reposition them to their relevant bones. After we finish repositioning the attachments, we go to Animate Mode and create what I call the ",[135,145,146],{},"Directions Bank",".\nWe create a new Animation and name it ",[45,149,150],{},"W",". Activate all the attachments with a ",[45,153,150],{}," direction in their name while the ",[135,156,157],{},"Autokey"," is toggled on, so the keyframes will be saved in the animation.",[12,160,161,162,165,166,168],{},"Using the duplicated skeleton as a reference, we reposition the bones to match the original position of the attachments. We also change the ",[135,163,164],{},"Draw Order"," as needed. We do the same for the ",[135,167,55],{}," direction and place these two animations under a folder named directions.\nIt is essential 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.",[170,171],"article-affiliate-group",{},[12,173,174,175,178],{},"For a squishy body and fins, we will create Meshes.\nTo save time while creating the meshes for all the nine different body attachments, we can duplicate a mesh we already created and drag it to the ",[135,176,177],{},"Skin Placeholder"," of another skin. Don't forget to double click the attachment name and change it to the name of the relevant Skin.",[12,180,181,182,185],{},"We will create two identical bones, one we will split into two, and the other into six.\nWe will create a Path, by selecting the root bone and clicking on ",[32,183,184],{},"New > Path",", and placed it according to the bones. Next, we select all the six split bones and create a Path Constraint, which we attach to the Path. The Path Constraint we bind to the two split bones, and the attachment Mesh, we bind to the six split bones.",[19,187,189],{"gif":188},"S8laCh3230z9sq9nTy","\nFin animation in Spine.\n",[24,191,193],{"id":192},"animation","Animation",[12,195,196],{},"When we animate a character in 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 three different times if I needed any changes.",[12,198,199,200,202,203,205,206,209,210,213,214,216],{},"After animating all the ",[135,201,47],{}," animations, we start animating the ",[135,204,55],{}," direction. The most efficient way is to duplicate the ",[135,207,208],{},"NW"," animation from the direction bank we created. I copied the keyframes from a finished ",[135,211,212],{},"SW"," animation and placed it next to the ",[135,215,208],{}," keyframes.",[12,218,219,220,222,223,225,226,229,230,232,233,235],{},"Copying ",[135,221,47],{}," animations to the ",[135,224,51],{}," animations requires more adjustments.\nAgain, we duplicate the W animation from our bank and place the keyframes from a ",[135,227,228],{},"South-West"," animation next to it. Copy and paste the ",[135,231,150],{}," animation keyframes to the first and last ",[135,234,212],{}," animation keyframes. As the animation needs more adjustments, we find the keyframes in the middle, which make this mess and fix them.",[237,238],"hr",{},[12,240,241],{},"So that's it, we now have a 2D shark animation, with three different skins in three directions.",{"title":243,"searchDepth":244,"depth":244,"links":245},"",3,[246,248,249],{"id":26,"depth":247,"text":27},2,{"id":94,"depth":247,"text":95},{"id":192,"depth":247,"text":193},"tutorial",{"480w":252,"960w":253},"\u002Fposts\u002F2020\u002F01-01\u002F6-direction-3-skin-shark-480w.jpg","\u002Fposts\u002F2020\u002F01-01\u002F6-direction-3-skin-shark-960w.jpg","2020-01-01","Breaking down the steps for creating an animation in Spine with multiple directions with various skins.","md",{},true,"\u002Fposts\u002F2020\u002F01\u002Fspine-animation-breakdown-shark",{"title":6,"description":255},"2019-spine-breakdown","posts\u002F2020\u002F01\u002Fspine-animation-breakdown-shark",[264,192],"spine","-fRRAQDOMBU",null,"Ujk5yhbzjDqlbM5B8Y64Bw8OvEXmyD2P3YrxrSWERko","spine-animation-breakdown-shark",{"id":270,"title":271,"description":243,"extension":272,"hideParts":258,"meta":273,"shortTitle":266,"stem":274,"__hash__":275,"posts":276},"tutorials\u002Ftutorials\u002F2019-spine-breakdown.yaml","Spine Breakdowns","yaml",{},"tutorials\u002F2019-spine-breakdown","rNSFMSZEO4RQ9MTKzHnj2SbUSQBNStfAeHjUZc98GMk",[277,400],{"id":278,"title":279,"author":7,"body":280,"category":250,"cover":387,"date":390,"description":391,"extension":256,"meta":392,"navigation":258,"path":393,"seo":394,"series":261,"stem":395,"tags":396,"youtube":397,"youtubeRange":266,"__hash__":398,"slug":399},"posts\u002Fposts\u002F2019\u002F12\u002Fspine-animation-breakdown-voxel-g8.md","4 Direction Robot",{"type":9,"value":281,"toc":385},[282,289,293,300,302,308,310,318,322,330,347,352,363,367,377,379],[12,283,284,285,288],{},"In Nugget & Penny, supporting characters can move, face, and interact in ",[45,286,287],{},"4 different directions",".\nThe process of creating and animating a 4–direction character can be time–consuming and exhausting, but thanks to our workflow and Spine support for broad tools, we optimized the process.",[19,290,292],{"gif":291},"Y3w6joRVtQ2S4fpbgh","\nVoxel G8 animations.\n",[12,294,295,296,299],{},"This character, known as ",[135,297,298],{},"Voxel G8",", has 3 different animations: Idle, fly, and look–down.\nBecause Voxel G8 is symmetric, I only need to create two directions and can mirror its animations using a script to save time.",[58,301],{},[12,303,304,305,307],{},"This image below is the character’s Photoshop file,\nAs you can see, I have organized all the parts of the drone in separated folders.\nI am using ",[32,306,34],{}," script to export the character's layers to Spine. ",[37,309],{"href":39,"title":40},[12,311,312,313,109,315,317],{},"We describe our intentions to the script by using tags, such as ",[32,314,65],{},[32,316,69],{},", which I used in this file.",[19,319,321],{"gif":320},"ZcKrRG0PSFaifxPFRD","\nVoxel G8 idle animation, from Nugget & Penny\n",[12,323,324,326,327,329],{},[32,325,65],{}," tag for creating a new folder inside the images folder the script creates, and ",[32,328,69],{}," tag for creating a new slot inside our Spine project.",[12,331,332,333,335,336,339,340,343,344,346],{},"I created two folders with the ",[32,334,65],{}," tag for the two directions, ",[135,337,338],{},"south–east",", and ",[135,341,342],{},"north–east",".\nUnder the folders with the ",[32,345,69],{}," tag, I placed the desired attachments. Most of the attachments have two versions, one for each direction, so I retain the same name schema.",[76,348,351],{"src":349,"alt":350},"\u002Fposts\u002F2019\u002F12-11\u002Fpsd-voxel-g8.jpg","Photoshop layers for Spine Animation","\nVoxel G8 Photoshop hierarchy.\n",[12,353,354,355,358,359,362],{},"After exporting the PSD file and importing the ",[32,356,357],{},"json"," file created by the script, I began placing the bones.\nIn the SETUP mode, I choose to display the drone's south–east direction. For the north–east direction, I keyframed the relevant attachments and made some changes to the position of the shoulder bones.\nI have named this animation – ",[135,360,361],{},"NE",".",[19,364,366],{"gif":365},"TIFc7oZcuMgVe9q1FD","\nVoxel G8 mesh, inside Spine.\n",[12,368,369,370,109,373,376],{},"To create the subtle 3D illusion, I added a mash to body attachment and bound it to 2 bones – ",[135,371,372],{},"face-control",[135,374,375],{},"back–control",". I tweak and modify the number of vertices, their position, and their's weight until I got it right.",[170,378],{},[12,380,381,382,384],{},"Each animation I completed, I duplicate and combine with the keyframes of the ",[135,383,361],{}," animation I saved before. After a few adjustments, I had a north-east version for each animation.",{"title":243,"searchDepth":244,"depth":244,"links":386},[],{"480w":388,"960w":389},"\u002Fposts\u002F2019\u002F12-11\u002F4-direction-voxel-g8-480w.jpg","\u002Fposts\u002F2019\u002F12-11\u002F4-direction-voxel-g8-960w.jpg","2019-12-11","Creating and animating a 4-direction character can be time–consuming, thanks to our workflow we optimized the process.",{},"\u002Fposts\u002F2019\u002F12\u002Fspine-animation-breakdown-voxel-g8",{"title":279,"description":391},"posts\u002F2019\u002F12\u002Fspine-animation-breakdown-voxel-g8",[264,192],"-_Uj5nnjWNQ","38XlJmRCDo8MihngVn3tM66TSWoG83fQZpYTvoyDU2o","spine-animation-breakdown-voxel-g8",{"id":5,"title":6,"author":7,"body":401,"category":250,"cover":536,"date":254,"description":255,"extension":256,"meta":537,"navigation":258,"path":259,"seo":538,"series":261,"stem":262,"tags":539,"youtube":265,"youtubeRange":266,"__hash__":267,"slug":268},{"type":9,"value":402,"toc":531},[403,405,407,409,411,415,417,425,427,435,437,443,445,447,455,459,461,465,471,481,487,489,493,497,499,501,503,515,527,529],[12,404,14],{},[12,406,17],{},[19,408,22],{"gif":21},[24,410,27],{"id":26},[12,412,30,413,35],{},[32,414,34],{},[37,416],{"href":39,"title":40},[12,418,43,419,48,421,52,423,56],{},[45,420,47],{},[45,422,51],{},[45,424,55],{},[58,426],{},[12,428,62,429,66,431,70,433,74],{},[32,430,65],{},[32,432,69],{},[32,434,73],{},[76,436,80],{"src":78,"alt":79},[12,438,83,439,87,441,91],{},[32,440,86],{},[32,442,90],{},[24,444,95],{"id":94},[12,446,98],{},[12,448,101,449,105,451,109,453,113],{},[32,450,104],{},[32,452,108],{},[32,454,112],{},[12,456,116,457,119],{},[45,458,47],{},[19,460,123],{"gif":122},[12,462,126,463,130],{},[32,464,129],{},[12,466,133,467,109,469,140],{},[135,468,51],{},[135,470,139],{},[12,472,143,473,147,475,151,477,154,479,158],{},[135,474,146],{},[45,476,150],{},[45,478,150],{},[135,480,157],{},[12,482,161,483,165,485,168],{},[135,484,164],{},[135,486,55],{},[170,488],{},[12,490,174,491,178],{},[135,492,177],{},[12,494,181,495,185],{},[32,496,184],{},[19,498,189],{"gif":188},[24,500,193],{"id":192},[12,502,196],{},[12,504,199,505,202,507,205,509,209,511,213,513,216],{},[135,506,47],{},[135,508,55],{},[135,510,208],{},[135,512,212],{},[135,514,208],{},[12,516,219,517,222,519,225,521,229,523,232,525,235],{},[135,518,47],{},[135,520,51],{},[135,522,228],{},[135,524,150],{},[135,526,212],{},[237,528],{},[12,530,241],{},{"title":243,"searchDepth":244,"depth":244,"links":532},[533,534,535],{"id":26,"depth":247,"text":27},{"id":94,"depth":247,"text":95},{"id":192,"depth":247,"text":193},{"480w":252,"960w":253},{},{"title":6,"description":255},[264,192],{"id":541,"authorPage":258,"extension":272,"meta":542,"name":543,"social":544,"stem":549,"__hash__":550},"team\u002Fteam\u002Fdanielle.yaml",{},"Danielle Elias",{"twitter":545,"instagram":546,"linkedin":547,"website":548},"ddanielleelias","https:\u002F\u002Fwww.instagram.com\u002Fdanielle_elias_","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdanielle-elias-847a1816a","https:\u002F\u002Fwww.danielleelias.com","team\u002Fdanielle","P4cpTrFv0g83_T48iFqh7voUrrlvEAlt5tc_ZtZvusk",1790297819561]