{"id":14530,"date":"2018-03-08T14:12:00","date_gmt":"2018-03-08T14:12:00","guid":{"rendered":"http:\/\/www.gamasutra.com\/view\/news\/315212"},"modified":"2018-03-08T14:12:00","modified_gmt":"2018-03-08T14:12:00","slug":"designing-great-hitboxes-for-a-2d-beat-em-up-with-swords-and-shields","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2018\/03\/08\/designing-great-hitboxes-for-a-2d-beat-em-up-with-swords-and-shields\/","title":{"rendered":"Designing great hitboxes for a 2D beat-&#8217;em-up with swords and shields"},"content":{"rendered":"<p>Creating satisfying, readable hitboxes is fundamental to developing a great game. If it&#8217;s too easy or too hard to hit a given character, your players will get frustrated &#8212; and more often than not, quit.<\/p>\n<p><a href=\"http:\/\/www.fullyillustrated.com\">Fully Illustrated<\/a>\u00a0and <a href=\"http:\/\/www.darkwindmedia.com\">Darkwind Media<\/a>\u00a0worried about this\u00a0while developing their 2D\u00a0beat-\u2018em-up\u00a0<em><a href=\"http:\/\/wulverblade.com\">Wulverblade<\/a>,<\/em> which debuted in January, and they took a number of steps to ensure their hitboxes were just right.\u00a0<\/p>\n<p>Most notably, they took pains to ensure\u00a0that every character had a similar reach, and they made sure to effectively\u00a0implement the hitboxes around the art.<\/p>\n<p>In <em>Wulverblade<\/em>, players\u00a0choose from three playable warriors who are revolting against the Roman Empire: Caradoc, Brennus, and Guinevere. The goal is straightforward:\u00a0move from left to right, decapitating Romans and traitorous tribes with your weapons and taking on bosses that get progressively stronger as you advance through the levels.<\/p>\n<h2><strong>Design enemies with the player&#8217;s hitbox in mind<\/strong><\/h2>\n<blockquote>\n<h6><span>&#8220;Make sure every enemy that attacks you has a weapon with a reasonable range. And if the weapon they\u2019re carrying doesn\u2019t have a reasonable range, then their primary attack has to give them that reasonable range.&#8221;<\/span><\/h6>\n<\/blockquote>\n<p>Creative director Michael Heald\u00a0(a big fan of both ancient history and classic Capcom\u00a0arcade beat-&#8217;em-ups) was responsible for all of the art within the game, and keyframed the majority of the animations.<\/p>\n<p>One major problem he had from the beginning was that the game used weapons, which meant that it was much harder to balance enemy reach than if all the characters fought with their hands.<\/p>\n<p>\u201cOne thing you find initially when you start creating a beat-\u2018em-up that uses weapons is the reach of the character is a lot further than that of a traditional beat-\u2018em-up where they\u2019re using their fists,\u201d says Heald, explaining\u00a0that this makes enemies that don\u2019t have longer weapons much easier to kill, which feels less challenging and not as rewarding.<\/p>\n<p>\u201cThat was a hurdle to overcome initially: to make sure every enemy that attacks you has a weapon with a reasonable range,&#8221; he continues. &#8220;And if the weapon they\u2019re carrying doesn\u2019t have a reasonable range, then their primary attack has to give them that reasonable range.\u201d<\/p>\n<p>He gives the example of characters who wield hammers, knives, and shorter swords. These characters all have leaping attacks, to counter their limited range. This gives them a range that is equal to the player\u2019s, allowing combat to be much more balanced and affording them a much better chance of\u00a0threatening\u00a0the player\u2019s hitbox.<\/p>\n<h2><strong>Finding the right hitbox, and dialing in the damage zones\u00a0<\/strong><\/h2>\n<p>Another challenge was deciding on the types of hitboxes used. One of the major problems was that the game was made in Unity (Unity2D was released halfway into development), meaning the game is essentially 3D with the 2D perspective achieved through off-axis projection and the game being drawn in three distinct layers: foreground, background, and battlefield.<\/p>\n<p><em>Wulverblade<\/em>&#8216;s method\u00a0of hit detection went through a bunch of revisions, because of this, before the team settled on a solution that gave them adequate control.<\/p>\n<p>For the damage zones, the team used a simple box for each character with tweaked dimensions.\u00a0 They wanted the damage zones to be tied closely to the design. This meant adjusting the hitboxes to each character\u2019s individual size.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.sickgamedev.win\/wp-content\/uploads\/2018\/03\/designing-great-hitboxes-for-a-2d-beat-em-up-with-swords-and-shields.png\" \/><\/p>\n<p>\u201cThey generally are dependent on the character\u2019s apparent width,\u201d says Brian Johnstone, the lead programmer on the game. \u201cWe didn\u2019t want it to be too disconnected from the visuals otherwise a player will think it looked like they should have hit but they don\u2019t. So, some enemies have wider hitboxes than others.\u201d<\/p>\n<h2><strong>Sometimes, the best hitbox is a hitsphere<\/strong><\/h2>\n<p>The querying, the process by which the collision is confirmed and tested against the game\u2019s date, is achieved through another method.<\/p>\n<p>Johnstone explains, \u201c[It] ended up being a series of width-adjustable sphere queries extending out along the path of attack. This allowed us to precisely control both the length and the width of the attack (how far in the Z plane up and down your attack could hit things).\u201d<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.sickgamedev.win\/wp-content\/uploads\/2018\/03\/designing-great-hitboxes-for-a-2d-beat-em-up-with-swords-and-shields-1.png\" \/><\/p>\n<p>These were used because\u00a0the game\u2019s engine is much faster at checking for sphere intersections;\u00a0this allowed a query with a lot of control over the attack zone, permitting the devs\u00a0to change the sweep angle and have as many sweeps as they want to cover an area. So, if the player is controlling the sword-wielding Cardoc, they can quickly swipe their blade\u00a0out over and over to\u00a0hit numerous incoming targets.<\/p>\n<h2><strong>Surprise! Let&#8217;s add a blocking\u00a0mechanic<\/strong><\/h2>\n<p>The addition of blocking also complicated the development process. In <em>Wulverblade<\/em>, players can block attacks using a shield, a feature not typically included in beat-\u2018em-up games. This meant that more time had to be spent on animations and that the code required altering to give out a much lower damage output\u00a0whenever players successfully block an attack.<\/p>\n<p>Initially, Heald was reluctant to add the blocking mechanic, in large part because of his desire to adhere to rules established by older games in the genre.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/www.sickgamedev.win\/wp-content\/uploads\/2018\/03\/designing-great-hitboxes-for-a-2d-beat-em-up-with-swords-and-shields.jpg\" \/><\/p>\n<p>\u201cBeing a fancy pants illustrator and only being bothered with the aesthetic, I wanted my characters to hold shields purely because I thought they looked cool,&#8221; says Heald.\u00a0&#8220;I had no interest in adding blocking in, because that wasn\u2019t really something you got in side-scrolling beat-\u2018em-ups. Blocking doesn\u2019t really exist.\u201d<\/p>\n<blockquote>\n<h6><span>&#8220;I had no interest in adding blocking in&#8230;It complicated things a lot in the sense that there was an entirely new input for the game with new actions. It opened up some nice opportunities though.&#8221;<\/span><\/h6>\n<\/blockquote>\n<p>\u201cIt was after the initial combat design but still quite early on where people constantly brought up the fact that our characters were carrying shields but could not block,&#8221; adds Johnstone. \u201cIt complicated things a lot in the sense that there was an entirely new input for the game with new actions.&#8221;<\/p>\n<p>However, he admits that &#8220;It opened up some nice opportunities though. Without blocking we wouldn\u2019t have been able to add the perfect block slowdown counter attack moves which I find endlessly satisfying to execute.\u201d<\/p>\n<p>In the end,\u00a0<em>Wulverblade\u00a0<\/em>debuted in January as a love letter to classic beat-&#8217;em-ups with a few of its own unique twists. Devs may appreciate knowing that, when asked to reflect on what he might do differently if he could do it all over again, Heald\u00a0wishes he&#8217;d\u00a0made it easier to swap in new content.\u00a0\u00a0<\/p>\n<p>\u201cI would probably make it easier [\u2026] to change the character\u2019s main weapon. Right now, it would be a case of a lot of redrawing to make that happen,&#8221; he says.\u00a0&#8220;Also, making characters more easily reskinnable would be another change. So, we can widen the character set with a lot more ease. [At the moment], it would be an absolute beast of a task.\u201d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating satisfying, readable hitboxes is fundamental to developing a great game. If it&#8217;s too easy or too hard to hit a given character, your players will get frustrated &#8212; and more often than not, quit. Fully Illustrated\u00a0and Darkwind Media\u00a0worried about this\u00a0while developing their 2D\u00a0beat-\u2018em-up\u00a0Wulverblade, which debuted in January, and they took a number of steps [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":14531,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"class_list":["post-14530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/14530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=14530"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/14530\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/14531"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=14530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=14530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=14530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}