{"id":1192,"date":"2014-11-06T07:04:28","date_gmt":"2014-11-05T23:04:28","guid":{"rendered":"http:\/\/www.gridsagegames.com\/blog\/?p=1192"},"modified":"2015-04-21T14:12:48","modified_gmt":"2015-04-21T06:12:48","slug":"anatomy-ascii-title-screen","status":"publish","type":"post","link":"https:\/\/www.gridsagegames.com\/blog\/2014\/11\/anatomy-ascii-title-screen\/","title":{"rendered":"Anatomy of an ASCII Title Screen"},"content":{"rendered":"

The design philosophy behind Cogmind emphasizes maximum immersion wherever possible. For this reason I’d like to avoid game-y interface elements--those which are not part of the game world itself but instead remove your mind from that world and remind you that it’s a game. (A fact you’re obviously unlikely to forget, but anything that breaks the illusion is still bad.)<\/p>\n

As discussed earlier, we tucked the options and game menus<\/a> away with the help and manual interface\u00a0using the same animated style as the rest of the game to make the transition to “non-game-world space” a little less jarring. An options menu accessible from anywhere, plus mandatory permadeath (and no save menu--games aren’t <\/em>so long you might play multiple runs in parallel), mean we could almost do away with the title screen entirely.<\/p>\n

I like how the the 7DRL has no title screen--immediately on opening the game you are dumped right into the action regardless of whether starting a new game or continuing an old one. So for a long while I’ve been operating under the assumption that the game may not even have a title screen, doing away with an unnecessary “gateway” into the game itself.<\/p>\n

More recently I’ve reconsidered that direction, since even without any interactive functionality (we’ve now removed or relocated everything that would apply), a title screen does have other advantages. One of the most important is name recognition in various places the game may appear, e.g. screenshots, and more importantly YouTube LPs.<\/p>\n

Plus it’s an opportunity to have a cool-looking title logo.<\/p>\n

And that’s actually where the change in direction originated from. It started with a Twitter follower pointing out that the official Cogmind logo as seen on the new website<\/a>\u00a0doesn’t reflect the art style of the game. It “needs the ASCII treatment.”<\/p>\n

Thus I began sketching an alternative design in REXPaint<\/a> for whatever purpose:<\/p>\n

\"cogmind_title_concepts\"<\/a>

First concept sketch evolution for an ASCII-fied Cogmind title logo. (Click for full size, as with all other images in this post.)<\/p><\/div>\n

As it started to look promising, I imagined how fun it would be to animate it and put it in the game. So of course I had to try :)<\/p>\n

Flow-wise we already had an intro<\/a> that plays when starting a new game, so the title was inserted before that and leads directly into it--the two work pretty well together since they share the same animated ASCII style. Both the title and intro are skipped completely if continuing a previous game.<\/p>\n

Title Art Composition<\/h1>\n

When the title is<\/em> shown, the goal is to minimize its “intrusive nature” and make it look like it belongs in the game world. This isn’t too hard since everything uses the same ASCII animation engine, and in terms of composition you’ll notice the title also uses the same style of line art used for items. (I still have yet to do a dedicated post showing off the different types of art in their final form, but some examples were previously shown here<\/a>.)<\/p>\n

I already liked the concepts, though the last iteration seemed a bit overdone, so I aimed to use something like the second to last one. First I redid some of the ASCII “circuitry” to rebalance the overall shape and flow of the title.<\/p>\n

\"cogmind_title_redone_ascii\"<\/a>

Rebalanced “ASCII circuitry” and some slight color adjustments.<\/p><\/div>\n

The animation plan was to actively draw the background circuitry, then have the word appear on top of that. This means we’ll also want to draw parts that are under<\/em> the word itself, as they’ll be showing before the word appears. So I split the art into two layers, one for the word itself, and another for everything behind it:<\/p>\n

\"cogmind_title_2layers\"<\/a>

Title art separated into layers.<\/p><\/div>\n

Minimalist is good, but I didn’t think this would be enough substance for a fully animated title which could really use at least a tiny bit of buildup. What better than even more<\/em> circuitry! So I drew a third layer under both of those:<\/p>\n

\"cogmind_title_3layers\"<\/a>

Stacking three art layers. (The bottom layer is drawn in a single flat gray--no shading--because the shading will be applied during animation as necessary.)<\/p><\/div>\n

This bottom layer should look good both by itself and when combined with either or both of the layers above it. This meant a lot of layer toggling during the editing process. The bottom layer is only used fleetingly, though, (and is not a part of the final appearance) so the attention to this kind of detail is mostly overkill.<\/p>\n

The animation part was pretty easy, only requiring a handful of scripts. For the curious:<\/p>\n

\"cogmind_title_scripts\"<\/a>

Title screen animation scripts.<\/p><\/div>\n

The second half of the above scripts are used to animate the title itself; the first half actually animates the “Grid Sage Games presents” text which appears before it. (Yes, might as well put that in there since we have a title now.)<\/p>\n

The bottom-most layer, and first to animate, is seeded with 20 randomly located emitters from which the ASCII lines are traced in gray along cardinal paths (i.e. no diagonal drawing). Half a second later 20 more emitters are created on the middle layer, which is traced in green (this one allows diagonal paths as well, to ensure quicker complete coverage). Another second layer the title flashes in with a special glitch effect, while at the same time the bottom layer flashes in its entirety for a moment before quickly fading out. See it below:<\/p>\n

\"cogmind_title_animation\"<\/a>

Cogmind title animation. (Click!)<\/p><\/div>\n

That’s it, three layers of ASCII art imported from a REXPaint .xp file. Notice one key difference between the result of the animation and the art itself: The “COGMIND” lines are brighter and have a background color to them. Turns out that when I borrowed an existing script to draw that part of the title, its design happens to leave the background color behind. I liked the fact that it stands out more and also melds the letters with the background circuitry via the few half-cell blocks scattered around the edges. So I kept it that way.<\/p>\n

\"cogmind_title_final\"<\/a>

A static shot of the final title appearance, in game.<\/p><\/div>\n

There you have it, Cogmind’s new “title screen.” Conceptually it’s still an out-of-game element, but at least it doesn’t require interaction--the game automatically starts about two seconds after the animation is complete.<\/p>\n

Update 4\/21\/2015: Surprisingly, because most everyone by this point was very familiar with the name of the game, no one mentioned that to first-time viewers the title logo looks a bit too much like “COGMINO.” It was only mentioned once, but months later as part of the trailer production the topic came up again and I thought to survey more people, finding<\/em> that <\/em>most were reading it that way! So, back in April 2015 shortly before launch we went back through all media and changed the logo design to the following in which the ‘C’ and ‘D’ are both curved and symmetrical:<\/em><\/p>\n

\"cogmind_title_logo_updated\"<\/a>

Updated logo to better differentiate the ‘D’ from the ‘O’.<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

The design philosophy behind Cogmind emphasizes maximum immersion wherever possible. For this reason I’d like to avoid game-y interface elements–those which are not part of the game world itself but instead remove your mind from that world and remind you that it’s a game. (A fact you’re obviously unlikely to forget, but anything that breaks […]<\/p>\n","protected":false},"author":2,"featured_media":1202,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63],"tags":[28,64,4,61,84,13],"class_list":["post-1192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art","tag-animation","tag-ascii-art","tag-cogmind","tag-particle-effects","tag-rexpaint","tag-ui"],"_links":{"self":[{"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/posts\/1192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/comments?post=1192"}],"version-history":[{"count":12,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/posts\/1192\/revisions"}],"predecessor-version":[{"id":1652,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/posts\/1192\/revisions\/1652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/media\/1202"}],"wp:attachment":[{"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/media?parent=1192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/categories?post=1192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gridsagegames.com\/blog\/wp-json\/wp\/v2\/tags?post=1192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}