{"author_name":"Gipzo","cat":"LD #37","comments":[],"epoch":1482157740,"likes":3,"metadata":{"p_key":"898","p_author":"Gipzo","p_authorkey":"32280","p_urlkey":"35745","p_title":"Swinging the axe \u2013 Attack Animation HowTo","p_cat":"LD #37","p_event":"LD37","p_time":"1482157740","p_likes":"3","p_comments":"0","p_status":"UPD5","us_key":"32280","us_name":"Gipzo","us_username":"gipzo","event_start":"1481241600","event_key":"81","event_name":"Ludum Dare 37"},"text":"<p>Hello again,<\/p>\n <p>I&#8217;m continuing postmortem posts about our game &#8211; <a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-37\/?action=preview&amp;uid=32280\" target=\"_blank\">Cure4Life<\/a>.<\/p>\n <p>And in this post I want to explain how we did axe attack animation.<br \/>\n Other weapons behave simpler as they don&#8217;t have any animation at all <img src=\"http:\/\/ludumdare.com\/compo\/wp-includes\/images\/smilies\/simple-smile.png\" alt=\":)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n <p><a href=\"http:\/\/ludumdare.com\/compo\/2016\/12\/19\/swinging-the-axe\/\"><img class=\"alignnone wp-image-601466 size-large\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/title-6-550x183.png\" alt=\"title\" width=\"550\" height=\"183\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/title-6-300x100.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/title-6-550x183.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/title-6.png 600w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n <p><span id=\"more-601459\"><\/span><\/p>\n <p><a href=\"https:\/\/goo.gl\/q7osPC\" target=\"_blank\">Unity 5.5 project archive<\/a><\/p>\n <h4>Hierarchy<\/h4>\n <p>First, let me show\u00a0how weapons are connected to the Player and how each Weapon is organised:<\/p>\n <p><img class=\"alignnone size-full wp-image-601460\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/hierarchy.png\" alt=\"hierarchy\" width=\"263\" height=\"151\" \/><\/p>\n <p>Hero has <em>Weapons\u00a0<\/em>game object that is positioned in the middle of his chest.<br \/>\n This way\u00a0<em>Weapons\u00a0<\/em>object can be rotated to aim weapon in some particular direction:<\/p>\n <p><img class=\"alignnone wp-image-601471\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/weapon_rotation.gif\" alt=\"weapon_rotation\" width=\"337\" height=\"145\" \/><br \/>\n <em>(red dot is the pivot position of Weapons object)<\/em><\/p>\n <p>This position is independent of weapon animation and it is also useful to know our weapon aiming to decide which enemies we hit <img src=\"http:\/\/ludumdare.com\/compo\/wp-includes\/images\/smilies\/simple-smile.png\" alt=\":)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><\/p>\n <p>Inside <em>Weapons<\/em> game object we have separate objects for each weapon.<br \/>\n Each weapon contains separate object for it&#8217;s sprite and other effects.<\/p>\n <p>For example this is Cure4Life hierarchy:<\/p>\n <p><img class=\"alignnone size-full wp-image-601480\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/cure4life_hierarchy.png\" alt=\"cure4life_hierarchy\" width=\"232\" height=\"294\" \/><\/p>\n <h4>Animation<\/h4>\n <p>Animation-wise axe is simple:<\/p>\n <p>We have 3 animation:<\/p>\n <ol>\n <li>Idle &#8211; just one frame<\/li>\n <li>AxeSwing1 &#8211; axe swings from top to bottom<\/li>\n <li>AxeSwing2 &#8211; axe swings from bottom to the top<\/li>\n <\/ol>\n <p><img class=\"alignnone size-large wp-image-601470\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/axe_swing_1.gif\" alt=\"axe_swing_1\" width=\"480\" height=\"293\" \/> \u00a0 \u00a0<img class=\"alignnone size-large wp-image-601469\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/axe_swing_2.gif\" alt=\"axe_swing_2\" width=\"480\" height=\"293\" \/><\/p>\n <p>The interesting part is Animation controller.<\/p>\n <p>We added Fire trigger and set up\u00a0Idle animation as default.<br \/>\n There are 3 transitions: Idle-&gt;AxeSwing2, AxeSwing2-&gt;AxeSwing1, AxeSwing1-&gt;AxeSwing2.<br \/>\n They all are configured the same:<\/p>\n <p><img class=\"alignnone size-large wp-image-601482\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/axe_animation_trigger-550x398.png\" alt=\"axe_animation_trigger\" width=\"550\" height=\"398\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/axe_animation_trigger-300x217.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/axe_animation_trigger-550x398.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/axe_animation_trigger.png 588w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><br \/>\n No exit time, zero transition duration and they are activated on Fire trigger.<br \/>\n This way, each time Fire is triggered, animation will switch between AxeSwing1 and AxeSwing2:<\/p>\n <p><img class=\"alignnone size-large wp-image-601468\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/animation_controller.gif\" alt=\"animation_controller\" width=\"480\" height=\"189\" \/><\/p>\n <h4>Particle System<\/h4>\n <p>Another crucial part of attack animation is swing particles:<\/p>\n <p><img class=\"alignnone wp-image-601465\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/swing_particles.gif\" alt=\"swing_particles\" width=\"244\" height=\"250\" \/><\/p>\n <p>This is done mostly with default particle system and particle texture, which consists of 4 frames.<\/p>\n <p>Here are axe&#8217;s swing particle system setting with some explanation:<\/p>\n <p><img class=\"alignnone size-large wp-image-601463\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_rotation-550x123.png\" alt=\"particles_rotation\" width=\"550\" height=\"123\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_rotation-300x67.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_rotation-550x123.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_rotation.png 579w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n <p><img class=\"alignnone size-large wp-image-601461\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles-550x544.png\" alt=\"particles\" width=\"550\" height=\"544\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles-300x297.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles-550x544.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles.png 574w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n <p><img class=\"alignnone size-large wp-image-601464\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_animation-550x142.png\" alt=\"particles_animation\" width=\"550\" height=\"142\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_animation-300x78.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_animation-550x142.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_animation.png 572w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n <p><img class=\"alignnone size-large wp-image-601462\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_renderer-550x321.png\" alt=\"particles_renderer\" width=\"550\" height=\"321\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_renderer-300x175.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_renderer-550x321.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/particles_renderer.png 575w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/p>\n <h4>Making it Move<\/h4>\n <p>Activating animation and particle system is pretty simple:<\/p>\n <pre>Animator.SetTrigger (\"Fire\");\n Particles.Emit (Random.Range (1, 3));\n <\/pre>\n <p>Add some timeouts and input logic and we get this:<\/p>\n <p><img class=\"alignnone wp-image-601504\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/final_result.gif\" alt=\"final_result\" width=\"358\" height=\"272\" \/><\/p>\n <p>I hope this post is somewhat useful <img src=\"http:\/\/ludumdare.com\/compo\/wp-includes\/images\/smilies\/simple-smile.png\" alt=\":)\" class=\"wp-smiley\" style=\"height: 1em; max-height: 1em;\" \/><br \/>\n Here full Unity 5.5 project archive &#8211; <a href=\"https:\/\/goo.gl\/q7osPC\" target=\"_blank\">Download Sample Project<\/a>.<\/p>\n <p>P.S. Don&#8217;t forget to play, rate and comment our game &#8211;\u00a0<a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-37\/?action=preview&amp;uid=32280\">Cure4Life<\/a>\u00a0\ud83d\ude09<\/p>\n \n <p>Tags: <a href=\"http:\/\/ludumdare.com\/compo\/tag\/ld37\/\" rel=\"tag\">LD37<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/postmortem\/\" rel=\"tag\">postmortem<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/unity\/\" rel=\"tag\">unity<\/a><\/p>","time":"December 19th, 2016 9:29 am","title":"Swinging the axe \u2013 Attack Animation HowTo"}