[{"data":1,"prerenderedAt":729},["ShallowReactive",2],{"tutorial-2020-04-spine-8-direction-character-part-4":3},{"tutorial":4,"series":117,"author":718},{"id":5,"title":6,"author":7,"body":8,"category":97,"cover":98,"date":101,"description":102,"extension":103,"meta":104,"navigation":105,"path":106,"seo":107,"series":108,"stem":109,"tags":110,"youtube":113,"youtubeRange":114,"__hash__":115,"slug":116},"posts\u002Fposts\u002F2020\u002F04\u002Fspine-8-direction-character-part-4.md","Sword Attack","danielle",{"type":9,"value":10,"toc":89},"minimark",[11,15,21,26,33,36,45,50,54,66,70,74,80,83],[12,13,14],"p",{},"In this part, we will add a weapon to our character and animate an attack animation, and create a sword holding animation to be combined with our Idle and Walk animations by code.",[16,17,20],"article-download",{"href":18,"title":19},"https:\u002F\u002Fgithub.com\u002Fnotslot\u002Ftutorial-spine-controller\u002Freleases\u002Fdownload\u002Fassets\u002FPart-4-Attack-Animation.zip","Download Spine Project & PSD File","\nFollow along! The download contains the character’s PSD and the result Spine project of this article.\n",[22,23,25],"h2",{"id":24},"adding-a-new-attachment","Adding a New Attachment",[12,27,28,29,32],{},"Off-camera, I created this sword attachment.",[30,31],"br",{},"\nI choose to create the sword only from the front view, but if you are looking for a more realistic approach, I recommend creating five different attachments for this sword – specific for each direction.",[34,35],"article-assets",{},[12,37,38,39,41,42,44],{},"To add the sword to our Spine file, place the .png file inside the images folder. In the Spine project, click on Images → Refresh to see the sword image.",[30,40],{},"\nDragging this image to the Setup mode will create a Slot for the sword.",[30,43],{},"\nAs this character is going to hold the sword with its hands, we created a new bone for the sword and placed it under the left hand.",[46,47,49],"article-giphy",{"gif":48},"efasbWJnMpdmbWhbSc","\nAttck animation frames.\n",[22,51,53],{"id":52},"jumping-attack","Jumping Attack",[12,55,56,57,59,60,62,63,65],{},"The character will swing the sword, and bang it against a lower enemy on the ground.",[30,58],{},"\nThe animation starts with one of the legs up in the air, and a hand swinging the sword back. Next comes the bending forward, and the jump, while holding the sword with both hands. Once the sword hits the ground, we land.",[30,61],{},"\nWe copy the animation to create the other directions, using the direction bank to rearrange the bones and switch to the relevant direction attachments.",[30,64],{},"\nThis animation will need some VFX, like a smudge for the sword, but I will save that for another time.",[46,67,69],{"gif":68},"hXCO1OYCbCcOsXroj9","\nMultiple tracks in Spine.\n",[22,71,73],{"id":72},"holding-animation","Holding Animation",[12,75,76,77,79],{},"To create the hold animation, we are using Track Overriding. We create an animation with the relevant keyframes for the holding action and override it with either the Walk or the Idle animations.",[30,78],{},"\nIt is important to make sure the holding animation contains only the keyframes we use for the holding. Any other random keyframes may override something important in the Idle or the Walk animation.",[81,82],"article-affiliate-group",{},[12,84,85,86,88],{},"We use the tracks at the Preview window to see how our animations are overriding.",[30,87],{},"\nThe upper layer will override the bottom layer. So we select the hold animation for track 1, and the Idle or Walk animation for track 0.",{"title":90,"searchDepth":91,"depth":91,"links":92},"",3,[93,95,96],{"id":24,"depth":94,"text":25},2,{"id":52,"depth":94,"text":53},{"id":72,"depth":94,"text":73},"tutorial",{"480w":99,"960w":100},"\u002Fposts\u002F2020\u002F04-26\u002F8-direction-character-attack-480w.jpg","\u002Fposts\u002F2020\u002F04-26\u002F8-direction-character-attack-960w.jpg","2020-04-26","We will equip our character with a sword and add spine attack animation.","md",{},true,"\u002Fposts\u002F2020\u002F04\u002Fspine-8-direction-character-part-4",{"title":6,"description":102},"2020-spine-8-direction","posts\u002F2020\u002F04\u002Fspine-8-direction-character-part-4",[111,112],"spine","animation","G7O4VpgLSy4",null,"Qam2_bHIKMNMZu-HCBYXSGdKPuizY2wW8LL05a_D6Rw","spine-8-direction-character-part-4",{"id":118,"title":119,"description":120,"extension":121,"hideParts":122,"meta":123,"shortTitle":114,"stem":124,"__hash__":125,"posts":126},"tutorials\u002Ftutorials\u002F2020-spine-8-direction.yaml","Spine 8 Direction Character","We will go through the process of creating a Spine 2D character in 8 directions.\u003Cbr \u002F>Perfect for top-down and third-person games.","yaml",false,{},"tutorials\u002F2020-spine-8-direction","XbPunD27-XHC56cF8RerHcbjzYK5z3UPjXcJiXBJ-a4",[127,306,452,662],{"id":128,"title":129,"author":7,"body":130,"category":97,"cover":293,"date":296,"description":297,"extension":103,"meta":298,"navigation":105,"path":299,"seo":300,"series":108,"stem":301,"tags":302,"youtube":303,"youtubeRange":114,"__hash__":304,"slug":305},"posts\u002Fposts\u002F2020\u002F04\u002Fspine-8-direction-character-part-1.md","Photoshop Preperation",{"type":9,"value":131,"toc":288},[132,138,141,145,149,161,167,169,178,181,185,196,200,207,214,224,230,241,243,247,253,261,264,275,279,285],[12,133,134,135,137],{},"In this Spine 2D tutorial series, we will go through the process of creating a character in 8 directions. Perfect for top-down and third-person games.",[30,136],{},"\nWe will cover the full workflow: Photoshop, rigging, animation, and Unity integration. The character will have an idle and walk cycle, and also and attack animation.",[12,139,140],{},"In this part, we will create our character in Photoshop, facing all the different directions, and organize our file for easy export to Spine.",[46,142,144],{"gif":143},"J21X0ptZ2KS2Lhu1qd","\nIllustrated directions inside Photoshop.\n",[22,146,148],{"id":147},"_5-directions","5 Directions",[12,150,151,152,156,157,160],{},"There is one trick you can use to reduce the number of animations you have to make, which is to mirror the ",[153,154,155],"em",{},"Right"," animation to get the ",[153,158,159],{},"Left"," one. It works best with symmetric characters, as implying this shortcut on unsymmetric characters, tends to break the illusion.",[12,162,163,164,166],{},"We start by creating our base directions: Down, Up, and Right.",[30,165],{},"\nWe place the body parts in different layers during the drawing process. It will save us time and effort for creating the other directions.",[34,168],{},[12,170,171,172,174,175,177],{},"We can duplicate and mirror both legs and arms in Spine, so we create only one side of limbs.",[30,173],{},"\nOnce we got the Down direction, we can duplicate it to create the Up direction. The face parts we can either delete or place under the head layer. We only need minor edits, and we got the Up direction.",[30,176],{},"\nTo create the Right direction, we can reuse parts like the ears and body.",[12,179,180],{},"For creating the 45 degrees, we can shift the shapes of the existing parts of the Down and Up directions. With some adjustments, we can get a satisfying result.",[22,182,184],{"id":183},"phothoshoptospine-export-script","PhothoshopToSpine Export Script",[12,186,187,188,192,193,195],{},"We are using the ",[189,190,191],"code",{},"PhothoshopToSpine"," script to export the PSD to Spine. ",[30,194],{},"\nWe communicate our intentions for the script by using tags. A tag is a keyword at the beginning of the name of a layer or folder, surrounded by square brackets.",[16,197],{"href":198,"title":199},"https:\u002F\u002Fgithub.com\u002FEsotericSoftware\u002Fspine-scripts\u002Ftree\u002Fmaster\u002Fphotoshop","Download the PhotoshopToSpine script",[12,201,202,203,206],{},"We will give the root folders the tag of ",[189,204,205],{},"[folder]"," and the name of its direction. When exporting to Spine, the tag will place all the layers under the folder in a subfolder.",[12,208,209,210,213],{},"Inside each root folder, we will place all body parts under a folder, tagged with the ",[189,211,212],{},"[slot]"," tag and the name of a body part. When exporting, this tag will put the layers as attachments under Slots in our Spine projects.",[12,215,216,217,219,220,223],{},"Under the Slot folder, we place a single layer with the art. Its name will contain its relevant direction and the name of the Slot folder it is placed under.",[30,218],{},"\nIf we need multiple layers, we can create a wrapping folder for them prefixed by the ",[189,221,222],{},"[merge]"," tag that will merge into a single attachment after export.",[225,226,229],"article-image",{"src":227,"alt":228},"\u002Fposts\u002F2020\u002F04-07\u002Fphotoshop-structure.jpg","Spine 8 Direction Character – photoshop structure","\nFolders hierarchy.\n",[12,231,232,233,235,236,240],{},"👉 All folders and layers must have the same names.",[30,234],{},"\nIt is ",[237,238,239],"strong",{},"crucial"," in order to get an accurate Spine file after exporting. After exporting, we will have different slots in our Spine project, each filled with the relevant attachments of all five directions.",[81,242],{},[22,244,246],{"id":245},"horizontal-guideline","Horizontal Guideline",[12,248,249,250,252],{},"After we export the PSD, we will want the character to be above the horizontal guideline in Spine. ",[30,251],{},"\nIt is essential for walkable characters, as the horizontal guideline represents the ground. This way, we can be sure the character won't walk in the air, or its legs get cut by the ground.",[46,254,256,257,260],{"gif":255},"UqdQNb93m7Ekd8kCGq","\nSetting the \n",[237,258,259],{},"root pivot","\n inside Photoshop.\n",[12,262,263],{},"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.",[12,265,266,267,270,271,274],{},"If you can't see the rulers, ",[189,268,269],{},"Ctrl+R"," on Windows or ",[189,272,273],{},"⌘R"," on Mac will show and hide them.",[16,276],{"href":277,"title":278},"https:\u002F\u002Fgithub.com\u002Fnotslot\u002Ftutorial-spine-controller\u002Freleases\u002Fdownload\u002Fassets\u002FPart-1-PSD-Setup.zip","Download PSD File",[12,280,281,282,284],{},"Now we have a PSD file ready to export.",[30,283],{},"\nFeel free to check it out and explore the folders hierarchy by yourself.",[12,286,287],{},"In the next part, we will export the character to Spine and rig it.",{"title":90,"searchDepth":91,"depth":91,"links":289},[290,291,292],{"id":147,"depth":94,"text":148},{"id":183,"depth":94,"text":184},{"id":245,"depth":94,"text":246},{"480w":294,"960w":295},"\u002Fposts\u002F2020\u002F04-07\u002F8-direction-character-photoshop-480w.jpg","\u002Fposts\u002F2020\u002F04-07\u002F8-direction-character-photoshop-960w.jpg","2020-04-07","Creating a character in Photoshop, facing all the different directions, and organize our file for easy export to Spine.",{},"\u002Fposts\u002F2020\u002F04\u002Fspine-8-direction-character-part-1",{"title":129,"description":297},"posts\u002F2020\u002F04\u002Fspine-8-direction-character-part-1",[111,112],"1GPmimEsawA","IbH_HI5Rn8y867xSDL9X66qlW72oF4yb9jJd9pQQGf8","spine-8-direction-character-part-1",{"id":307,"title":308,"author":7,"body":309,"category":97,"cover":439,"date":442,"description":443,"extension":103,"meta":444,"navigation":105,"path":445,"seo":446,"series":108,"stem":447,"tags":448,"youtube":449,"youtubeRange":114,"__hash__":450,"slug":451},"posts\u002Fposts\u002F2020\u002F04\u002Fspine-8-direction-character-part-2.md","Setup & Rigging",{"type":9,"value":310,"toc":435},[311,314,318,322,339,341,344,348,354,357,364,368,381,384,387,405,407,419,425,429,432],[12,312,313],{},"In the second part of the 8 directions character animation tutorial, we will rig our character in Spine, add mashes to create squishy movement, and organize all the different directions to simplify our work.",[16,315,20],{"href":316,"title":317},"https:\u002F\u002Fgithub.com\u002Fnotslot\u002Ftutorial-spine-controller\u002Freleases\u002Fdownload\u002Fassets\u002FPart-2-Spine-Setup.zip","Download Spine project & PSD file",[22,319,321],{"id":320},"bones-iks-mashes","Bones, IKs & Mashes",[12,323,324,325,327,328,331,332,335,336,338],{},"We are going to duplicate and mirror both arm and leg to create the left & right hands in all the directions.",[30,326],{},"\nWe create the ",[189,329,330],{},"arm-r-control"," bone and an arm bone, which we split into two.\nWe select the arm bones and go to ",[189,333,334],{},"New → IK"," Constraint. Place it between the arm and the hand bones. ",[30,337],{},"\nWe create a new mash for the arm and Bind it to the arm bones. Adjust the weights to get the smooth bending of the arm.",[34,340],{},[12,342,343],{},"We do the same for the leg. As we want to be sure our character will walk on the ground, and not get cut by it,  we create a second IK for the foot. After clicking on the foot bone and selecting IK Constraint, we place under the foot’s new IK, our leg IK. We can now bend the knee and have the foot move as well.",[46,345,347],{"gif":346},"H7ZML4oBQJh77Td4ah","\nCreating new IK in Spine.\n",[12,349,350,351,353],{},"We create a Mash for the body part.",[30,352],{},"\nI used the Generate option to create 63 Vertices and did the same for all the five body directions. The body shape is simple, and we won’t need it to move around much.",[12,355,356],{},"For a secondary motion, we add a Mash to the character’s bangs. Be sure to add it to all the directions.",[12,358,359,360,363],{},"After creating the Mashes and placing all Slots under their relevant bones, we duplicate the arm and leg and reposition them. To flip them, we change the Scale of the control bones to ",[189,361,362],{},"-1.0",". Make sure to change the name of the duplicated Bones and Slots by using the Find and replace text feature.",[22,365,367],{"id":366},"direction-bank","Direction Bank",[12,369,370,371,373,374,376,377,380],{},"In the Animate mode, we will create an animation with all the five directions, which we will use as a ",[153,372,367],{},".",[30,375],{},"\nStarting with the South direction, we keyframe its relevant attachments. To optimize our workflow, we go to the Tree and use the filter to show us only the Skin Placeholders. By writing ",[189,378,379],{},"S\u002F"," in the search box, we can easily access the relevant attachments.",[46,382],{"gif":383},"YSZ1rF6z7HYPB0ZIZP",[12,385,386],{},"We do the same in all directions.",[12,388,389,390,393,394,397,398,401,402,404],{},"Be sure to place different directions attachments at different times at the timeline. So ",[189,391,392],{},"0"," will contain the South direction, one the ",[153,395,396],{},"South-East"," direction, two the East direction, three the ",[153,399,400],{},"North-East"," direction, and four the North direction.",[30,403],{},"\nSome directions may need a change in their Draw Order, so don’t forget to Keyframe any changes.",[81,406],{},[12,408,409,410,412,413,415,416,418],{},"Not all the attachments’ places are in line with the existing bones. We will have to reposition the attachments to fix it. We duplicate our whole skeleton to use as a reference.",[30,411],{},"\nSetting the duplicated skeleton’s slots to a darker transparent color will show us the main skeleton beneath it.",[30,414],{},"\nIn our main skeleton at the setting mode, we go to each misplaced attachment and reposition it according to its relevant bone.",[30,417],{},"\nWhen we finish, we go to the animate mode and reposition the bones to recreate the original positions of the attachments. Be sure to have your Autokey toggled on, so each position change will be keyframed.",[12,420,421,422,424],{},"We need to add the arms and legs to all the different directions. Make sure you have the arms and legs attachments keyframe in all five directions.",[30,423],{},"\nWe reposition the arms control bone and the arm’s IK based on each direction. We do the same for the legs, though it can get a bit tricky with its 2 IKs, you will need to reposition the IKs and add a minus to the foot Scale.",[46,426,428],{"gif":427},"d89YwP9vnz0QJITbtb","\nDirection Bank inside Spine.\n",[430,431],"hr",{},[12,433,434],{},"In the next part, we will animate this character and create a walk cycle in five different directions.",{"title":90,"searchDepth":91,"depth":91,"links":436},[437,438],{"id":320,"depth":94,"text":321},{"id":366,"depth":94,"text":367},{"480w":440,"960w":441},"\u002Fposts\u002F2020\u002F04-14\u002F8-direction-character-setup-480w.jpg","\u002Fposts\u002F2020\u002F04-14\u002F8-direction-character-setup-960w.jpg","2020-04-14","Rigging our character in Spine, add mashes to create squishy movement, and organize all the different directions to simplify our work.",{},"\u002Fposts\u002F2020\u002F04\u002Fspine-8-direction-character-part-2",{"title":308,"description":443},"posts\u002F2020\u002F04\u002Fspine-8-direction-character-part-2",[111,112],"3Z5Bg13Ug9w","ZDxaQxuXotsUuOD7IQJ3YN_MTnzYK3h5AL_2MAYt8G4","spine-8-direction-character-part-2",{"id":453,"title":454,"author":7,"body":455,"category":97,"cover":649,"date":652,"description":653,"extension":103,"meta":654,"navigation":105,"path":655,"seo":656,"series":108,"stem":657,"tags":658,"youtube":659,"youtubeRange":114,"__hash__":660,"slug":661},"posts\u002Fposts\u002F2020\u002F04\u002Fspine-8-direction-character-part-3.md","Walk Cycle",{"type":9,"value":456,"toc":638},[457,460,464,468,474,477,483,487,508,510,513,522,526,532,536,539,543,547,552,558,561,563,566,570,574,593,597,601,617,621,625,631,635],[12,458,459],{},"In the third part of the 8 directions character animation tutorial, we will be animating our character and creating a walk cycle and an Idle for all the different directions.",[16,461,20],{"href":462,"title":463},"https:\u002F\u002Fgithub.com\u002Fnotslot\u002Ftutorial-spine-controller\u002Freleases\u002Fdownload\u002Fassets\u002FPart-3-Walk-Cycle.zip","Download Spine Project & PSB File",[22,465,467],{"id":466},"basic-walk-cycle","Basic Walk Cycle",[12,469,470,471,473],{},"Searching for ",[153,472,454],{}," on google will lead you to wonderful references, which I recommend checking it out. I am using it to double-check my animations, and I promise it is a lifesaver.",[12,475,476],{},"A basic walk cycle contains nine frames when the last keyframe is a copy of the first. We start with East direction – the standard view of a walk cycle.",[12,478,479,480,482],{},"We start with the body, as it’s movement will affect the legs bending.",[30,481],{},"\nWithin the nine keyframes, the body will move as follow – between, low, between, high, between, low, between, high, and between again.",[46,484,486],{"gif":485},"VDAO3kR7MAfhPGlV5b","\nWalk cycle animation guidelines.\n",[12,488,489,490,492,493,495,496,498,499,501,502,504,505,507],{},"As for the legs, the two legs will move identically, but not at the same time. ",[30,491],{},"\nThe legs at the first and the fifth keyframes will have contact with the ground, and in between those keyframes, the legs will move and switch places. At the second keyframe, leg one will have full contact with the ground, and leg two will bend in the air.",[30,494],{},"\nIn the third keyframe, the two legs will be at the same place at the middle, leg two – the bend one will remain bent, and leg one will stay straight on the ground.",[30,497],{},"\nKeyframe four will have the legs mirror the same position as the first keyframe, but leg one will be at the place of leg two and vice versa.",[30,500],{},"\nIn the fifth keyframe, we complete a step of one leg.",[30,503],{},"\nWe do the same prosses from the fifth keyframe to the ninth keyframe – making the other leg take a step.",[30,506],{},"\nBy this, we get the walk cycle of the legs.",[34,509],{},[12,511,512],{},"When the front leg is at the back, the front arm will be at the front. When the front leg is bent, the front arm will be in the middle, and when the front leg is at the front, the front arm will be at the back.",[12,514,515,516,518,519,521],{},"To make the arm move more realistic and less robotic, We add a little motion to the hand – causing a delay when following the movement of the arm.",[30,517],{},"\nI choose to place the finger bones under the arm bone and not under the hand bone.",[30,520],{},"\nWe will change the Shear and Scale of the hand in the other directions animation, and we don’t want the Shear and Scale to affect the fingers. So we place the fingers bones under the arm bone, and not under the hand bone.",[22,523,525],{"id":524},"preview-window","Preview Window",[12,527,528,529,531],{},"I use the Preview window to watch my animations while lowering the Speed, to find any mistakes. I always find something I want to change or correct, and most of the time, I will go back to an animation I declared finish and keep on changing keyframes.",[30,530],{},"\nSo it’s ok to not have a perfect animation right at the start.",[22,533,535],{"id":534},"secondary-motion","Secondary Motion",[12,537,538],{},"To add secondary motion to the animation, we animated the bangs, moving it right and left between the keyframes of the walking. We also added a tiny movement to the face parts of up and down to make the animation more alive.",[46,540,542],{"gif":541},"VhQYpEWOaEUbUv4Ohw","\nWalk cycle animation.\n",[22,544,546],{"id":545},"directions","Directions",[548,549,551],"h3",{"id":550},"south-east-direction","South-East Direction",[12,553,554,555,557],{},"We duplicate the East animation and copy the ",[189,556,396],{}," keyframe form the direction bank. We paste those at the first and last keyframes and fix the in-between keyframes.",[12,559,560],{},"A small tip for a sane workflow – for each face part, copy the first keyframe and paste it on the existing ones. This way, the face won’t keep breaking, and you can easily adjust the keyframes to regain the up and down movement.",[81,562],{},[12,564,565],{},"Our main focus is on the hands. The same roles as before – but in this animation, we will adjust the Shear and Scale of the front hand. This way, we create an illusion of depth for the hand when it’s reaching back.",[46,567,569],{"gif":568},"ZeLFL4OsSc9bFn2akG","\nSouth-east direction animation.\n",[548,571,573],{"id":572},"south-direction","South Direction",[12,575,576,577,579,580,582,583,585,586,589,590,592],{},"We duplicate the ",[189,578,396],{}," animation and copy-paste in it the Attach and Draw order’s keyframes form the direction bank.",[30,581],{},"\nIn this direction, we need to reanimate the legs.",[30,584],{},"\nThe main difference between a front walk cycle and a ",[153,587,588],{},"side"," walk cycle is the position of the legs.",[30,591],{},"\nWhen we animate a front walk cycle, we will only need to move the legs up and down. It has the same principles as before – we have contact with the ground, pressing down, passing, bending high, and contact again.",[46,594,596],{"gif":595},"ZCZcntX9hLFu0GVXNd","\nSouth direction animation.\n",[548,598,600],{"id":599},"north-north-east-directions","North & North-East Directions",[12,602,576,603,606,607,609,610,613,614,616],{},[189,604,605],{},"South"," and ",[189,608,396],{}," animations and place in each the attach keyframes of the ",[189,611,612],{},"North"," direction and ",[189,615,400],{}," directions. We will still need to fix and change a few keyframes in each direction.",[46,618,620],{"gif":619},"XfDR2uhKJdHkc8onBj","\nNorth and north-east directions animations.\n",[22,622,624],{"id":623},"idle-animation","Idle Animation",[12,626,627,628,630],{},"A small tip for creating an Idle animation.",[30,629],{},"\nWe want our character’s Idle to be as noticeable as it can. When the player briefly ignores the game, we still want the game to look alive, and a good noticeable Idle animation can help with that.",[46,632,634],{"gif":633},"gkEbEYZJp1k9r8ioXg","\nIdle animation.\n",[12,636,637],{},"In the next part, we will add a weapon to our character and animate an attack animation for all the directions.",{"title":90,"searchDepth":91,"depth":91,"links":639},[640,641,642,643,648],{"id":466,"depth":94,"text":467},{"id":524,"depth":94,"text":525},{"id":534,"depth":94,"text":535},{"id":545,"depth":94,"text":546,"children":644},[645,646,647],{"id":550,"depth":91,"text":551},{"id":572,"depth":91,"text":573},{"id":599,"depth":91,"text":600},{"id":623,"depth":94,"text":624},{"480w":650,"960w":651},"\u002Fposts\u002F2020\u002F04-20\u002F8-direction-character-walk-480w.jpg","\u002Fposts\u002F2020\u002F04-20\u002F8-direction-character-walk-960w.jpg","2020-04-20","In–depth look into the process of spine 2d walk cycle animation.",{},"\u002Fposts\u002F2020\u002F04\u002Fspine-8-direction-character-part-3",{"title":454,"description":653},"posts\u002F2020\u002F04\u002Fspine-8-direction-character-part-3",[111,112],"UqBwCqbku4Q","Dnh4-pHqmh1TVrsuA4aXXNmfoA8dtTQP2VlAK55U4iI","spine-8-direction-character-part-3",{"id":5,"title":6,"author":7,"body":663,"category":97,"cover":714,"date":101,"description":102,"extension":103,"meta":715,"navigation":105,"path":106,"seo":716,"series":108,"stem":109,"tags":717,"youtube":113,"youtubeRange":114,"__hash__":115,"slug":116},{"type":9,"value":664,"toc":709},[665,667,669,671,675,677,683,685,687,695,697,699,703,705],[12,666,14],{},[16,668,20],{"href":18,"title":19},[22,670,25],{"id":24},[12,672,28,673,32],{},[30,674],{},[34,676],{},[12,678,38,679,41,681,44],{},[30,680],{},[30,682],{},[46,684,49],{"gif":48},[22,686,53],{"id":52},[12,688,56,689,59,691,62,693,65],{},[30,690],{},[30,692],{},[30,694],{},[46,696,69],{"gif":68},[22,698,73],{"id":72},[12,700,76,701,79],{},[30,702],{},[81,704],{},[12,706,85,707,88],{},[30,708],{},{"title":90,"searchDepth":91,"depth":91,"links":710},[711,712,713],{"id":24,"depth":94,"text":25},{"id":52,"depth":94,"text":53},{"id":72,"depth":94,"text":73},{"480w":99,"960w":100},{},{"title":6,"description":102},[111,112],{"id":719,"authorPage":105,"extension":121,"meta":720,"name":721,"social":722,"stem":727,"__hash__":728},"team\u002Fteam\u002Fdanielle.yaml",{},"Danielle Elias",{"twitter":723,"instagram":724,"linkedin":725,"website":726},"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",1790297819562]