{"id":1157,"date":"2017-10-02T08:00:00","date_gmt":"2017-10-02T08:00:00","guid":{"rendered":"http:\/\/www.gamasutra.com\/view\/news\/305507"},"modified":"2017-10-02T08:00:00","modified_gmt":"2017-10-02T08:00:00","slug":"crafting-the-visuals-of-20xx-for-maximum-comprehensibility","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2017\/10\/02\/crafting-the-visuals-of-20xx-for-maximum-comprehensibility\/","title":{"rendered":"Crafting the visuals of 20XX for maximum comprehensibility"},"content":{"rendered":"

20XX<\/em><\/a> is a fast-paced sidescrolling roguelike that’s found an appreciative audience on Steam since it launched last month. It mixes a decidedly Mega Man X<\/em>-esque play style with generated levels to constantly test players\u2019 twitchy jumping and shooting reactions. That\u2019s meant that the art and animation has been a very, very important part of the game.<\/p>\n

20XX<\/em> has always worn its inspirations on its sleeve, but there\u2019s plenty beyond that that\u2019s informed the game\u2019s aesthetic. says Chris King, programmer and designer at Batterystaple Games<\/a>, developers of 20XX<\/em>.<\/p>\n

While a Mega Man X<\/em> aesthetic appeared due to its inspirations, 20XX<\/em> looks like it does not just because of where the game came from, but because its ever-shifting level structure and enemy layouts require players be able to react quickly and decisively, reading information on-screen without having to focus on it.<\/p>\n

More than just for visual appeal, 20XX<\/em> looks like it does to help players succeed at its challenging roguelike play.<\/p>\n

\"\"<\/p>\n

\n
“The skills gained by implementing a given asset made us much more capable of fixing up older assets, which is a good bit of why we\u2019ve iterated on the visuals so much.”<\/span><\/h6>\n<\/blockquote>\n

None of that is to say that the visual style doesn\u2019t have an aesthetic appeal to its developer. 20XX<\/em>\u2019s art style isn\u2019t just designed for readability, but also for that same reason any developer would choose a certain art style: because it looks good and suits the game they\u2019re striving to create. Having sprung from a Mega Man X\u00a0<\/em>inspiration, this meant a futuristic, mechanical sci-fi appearance, but it\u2019s one that has continually evolved over the game\u2019s development.<\/p>\n

\u201cWe\u2019ve learned a tremendous amount over the past four years while making 20XX<\/em>, and \u2018How to make it look better.\u2019 has been a pretty consistent part of that,” says King. “We were new enough on the scene at first that the skills gained by implementing a given asset made us much more capable of fixing up older assets, which is a good bit of why we\u2019ve iterated on the visuals so much.\u201d<\/p>\n

Part of that design process meant shifting art styles here and there, gradually changing the exact appearance of the game over time as they experimented with variations on the look they began with. They also simply learned more as they worked at the game over a four year span, growing in skill over that period.<\/p>\n

\"\"<\/p>\n

\n
“Somewhere in the game\u2019s second visual iteration it took on a very colorful, Saturday-morning-cartoon kind of vibe, which ended up working really well with the game\u2019s quick pace and need for instant player reactions.”<\/span><\/h6>\n<\/blockquote>\n

This is part of what would lead them to the look 20XX<\/em> has now \u2013 a growing skill and a slow honing of what art style felt right to the developers at Batterystaple Games.\u00a0<\/p>\n

\u201cSomewhere in the game\u2019s second visual iteration it took on a very colorful, Saturday-morning-cartoon kind of vibe, which ended up working really well with the game\u2019s quick pace and need for instant player reactions,” says King. “Zach Urte\u2019s style leans into the game\u2019s rounded edges and smooth curves, and he definitely took a good bit of inspiration from Chris Sanders\u2019 (Lilo & Stitch) work.\u201d<\/p>\n

\u201cI guess what I strive for most is consistency and fidelity,” says Urtes. “I want the game to be the best version of itself, and finding what that means has been an ever-present part of the learning process. Sometimes less is more; learning where to snipe quality and when to pull back\u2019s been a big deal for us. On a personal note, I\u2019ve just always wanted to make a game that feels like a colorful, exciting action cartoon. I think we\u2019ve done that here.\u201d<\/p>\n

That \u2018action cartoon\u2019 style was not just the result of the developers feeling their way toward the art style that felt right for 20XX<\/em>, but also a way they could work on the important features of readability and reaction.<\/p>\n

\"\"<\/p>\n

\n
“The game\u2019s foes and projectiles have to be clear enough that a player immediately knows what\u2019s come on screen without having to fully shift focus to it, which turned out to be a serious challenge”<\/span><\/h6>\n<\/blockquote>\n

That vibrant, rounded Saturday morning cartoon style was the final step in the constant struggle toward clarity the developers had been working at. 20XX<\/em> would require that same twitchy reaction time that the games that inspired it required, but the randomization aspects meant that players couldn\u2019t just memorize enemy layouts and shot patterns. They would have to react to them with no previous experience (in that exact, repeated situation) to train them.<\/p>\n

20XX\u00a0<\/em>has undergone more than one facelift since we started making it four years ago. We\u2019ve learned a lot while making and remaking it, and one of the key lessons is that the game\u2019s pace prefers instant readability to painstaking detail when it comes to asset and environment design.\u201d says King. \u201cIn order to avoid getting in the way, the game\u2019s foes and projectiles have to be clear enough that a player immediately knows what\u2019s come on screen without having to fully shift focus to it, which turned out to be a serious challenge.\u201d<\/p>\n

King and the development team would need to make enemies and their projectiles crisp and visible without requiring the player take their attention away from what they were doing, requiring their visuals be recognizable at a glance. If it required any more attention than a moment\u2019s peek, or drew even slightly more focus to identify them, the game would fall apart.<\/p>\n

\"\"<\/p>\n

\n
“Spine (our animation software) lets us layer animations on top of one another, so we don\u2019t have to be too concerned about what movement state a player is in on attack-press – we can always snap to action instantly when required.”<\/span><\/h6>\n<\/blockquote>\n

They made that less of a problem by focusing on the animations of the characters and enemies. \u201cCrisp\u00a0gameplay is key,”\u00a0 says King.\u00a0“In a game like 20XX<\/em>, it\u2019s super important that every button press results in an action instantly, and that dictates how most of the player animations need to play out. If it takes Nina three frames to raise her buster before firing, or if Ace\u2019s base sword slash takes three frames to get in front of him and deal damage, the game\u2019s immediately much worse.\u201d<\/p>\n

Players needed to be able to react to surprising situations they hadn\u2019t seen before in 20XX,<\/em> or to enemy attacks that might not immediately jump out at them. They had worked to make these attack visuals stand out, but if the player couldn\u2019t react to them quickly enough, their work would have been wasted.<\/p>\n

\u201cSpine (our animation software) lets us layer animations on top of one another, so we don\u2019t have to be too concerned about what movement state a player is in on attack-press – we can always snap to action instantly when required,” says King. “To make up for that a little, we add more weight to the non-player-action animations – things like landing, stopping, lowering your weapon, etc all get a little more detailed since they\u2019re not instant-player-input sorts of actions, and them taking a little time doesn\u2019t cost us anything.\u201d<\/p>\n

\"\"<\/p>\n

\n
“Games like 20XX are all about pattern recognition when it comes to dodging bad guys, so super conspicuous tells before enemies take action are really important.”<\/span><\/h6>\n<\/blockquote>\n

The player\u2019s attacks in 20XX<\/em> are all instantaneous, allowing players to switch it an attack animation the moment they sense they need it. This deliberate decision to animate in this was would be key to allowing players to deal with new threats or changes in the environment quickly, rather than force them through a few frames that may result in their death. Readability was important with the art style, but being able to react to what is read with a quick attack animation was the other half of the equation.<\/p>\n

And that\u2019s not to say that there aren\u2019t some elements of memorization at play, either. \u201cFor enemies, it\u2019s the exact opposite,” says King. “No enemy should attack without warning – games like 20XX<\/em> are all about pattern recognition when it comes to dodging bad guys, so super conspicuous tells before enemies take action are really important.\u201d<\/p>\n

Enemy animations would have long tells that the player could learn to recognize, as while stages were generated, enemies would still have known actions and behaviors players could pick up over time. Even for a brand new player, these kinds of animated tells would indicate that an attack was imminent, getting the player ready to use their tools to react and dodge or fight back.<\/p>\n

\"\"<\/p>\n

These three items \u2013 focusing on readability in visuals, quick player attack animations, and enemy attack tells \u2013 form a means of keeping the action at a fast pace while still giving the player tools to instantly know what is happening and how to react to it appropriately. Through these animation details, a player is given multiple levels on which to deal with a threat that they see clearly before it\u2019s coming, see clearly when it\u2019s on its way, and be able to drop everything and deal with it.<\/p>\n

\u201cFirst and foremost, the game\u2019s visuals serve to abet its rock-solid gameplay — after that, we hope it\u2019s nice to look at,\u201d says King.<\/p>\n","protected":false},"excerpt":{"rendered":"

20XX is a fast-paced sidescrolling roguelike that’s found an appreciative audience on Steam since it launched last month. It mixes a decidedly Mega Man X-esque play style with generated levels to constantly test players\u2019 twitchy jumping and shooting reactions. That\u2019s meant that the art and animation has been a very, very important part of the […]<\/p>\n","protected":false},"author":2,"featured_media":1158,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"class_list":["post-1157","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\/1157","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=1157"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/1157\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/1158"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=1157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=1157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=1157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}