{"id":606,"date":"2021-12-17T17:45:55","date_gmt":"2021-12-17T15:45:55","guid":{"rendered":"http:\/\/www.amazement.fi\/sixt\/?p=606"},"modified":"2021-12-17T18:14:50","modified_gmt":"2021-12-17T16:14:50","slug":"anatomy-of-a-background","status":"publish","type":"post","link":"https:\/\/www.amazement.fi\/sixt\/anatomy-of-a-background\/","title":{"rendered":"Anatomy of a background"},"content":{"rendered":"<p>[vc_row css_animation=&#8221;&#8221; row_type=&#8221;row&#8221; use_row_as_full_screen_section=&#8221;no&#8221; type=&#8221;full_width&#8221; angled_section=&#8221;no&#8221; text_align=&#8221;left&#8221; background_image_as_pattern=&#8221;without_pattern&#8221;][vc_column][\/vc_column][\/vc_row][vc_row css_animation=&#8221;&#8221; row_type=&#8221;row&#8221; use_row_as_full_screen_section=&#8221;no&#8221; type=&#8221;full_width&#8221; angled_section=&#8221;no&#8221; text_align=&#8221;left&#8221; background_image_as_pattern=&#8221;without_pattern&#8221;][vc_column]<div class=\"qode-simple-quote-holder qode-simple-quote-enabled-shadow\">\n\t<div class=\"qode-simple-quote-triangle-shadow\">\n\t\t\n\t<\/div>\n\t<div class=\"qode-simple-quote-triangle\" style=\"border-bottom-color: #1d1b24\">\n\t\t\n\t<\/div>\n\t<div class=\"qode-simple-quote-holder-inner\" style=\"background-color: #1d1b24;border-color: #1d1b24;border-radius: 0pxpx;padding: 0px 0px 0px 0px\">\n\t\t<div class=\"qode-simple-quote-icon-holder\"  style=\"fill: #8224e3\">\n\t\t\t<svg x=\"0px\" y=\"0px\" width=\"118px\" height=\"97px\" viewBox=\"0 0 118 97\" enable-background=\"new 0 0 118 97\" xml:space=\"preserve\">\n\t\t\t\t<g>\n\t\t\t\t\t<path d=\"M31.1,73.998c5.688-7.111,8.535-14.316,8.535-21.617c0-3.09-0.371-5.751-1.113-7.978c-4.332,3.34-9.031,5.009-14.102,5.009\n\t\t\t\t\t\tc-6.929,0-12.71-2.194-17.349-6.586c-4.639-4.389-6.958-10.298-6.958-17.72c0-6.926,2.348-12.71,7.051-17.349\n\t\t\t\t\t\tc4.7-4.639,10.452-6.958,17.256-6.958c9.77,0,17.256,4.021,22.451,12.061c4.329,6.68,6.494,15.029,6.494,25.049\n\t\t\t\t\t\tc0,12.742-3.247,24.154-9.741,34.234C37.13,82.227,27.325,90.357,14.215,96.541l-3.525-6.865\n\t\t\t\t\t\tC18.604,86.336,25.409,81.113,31.1,73.998z M95.67,73.998c5.688-7.111,8.535-14.316,8.535-21.617c0-3.09-0.371-5.751-1.113-7.978\n\t\t\t\t\t\tc-4.206,3.34-8.906,5.009-14.102,5.009c-6.804,0-12.556-2.194-17.256-6.586c-4.702-4.389-7.051-10.298-7.051-17.72\n\t\t\t\t\t\tc0-4.575,1.113-8.721,3.34-12.432s5.195-6.616,8.906-8.721c3.711-2.102,7.729-3.154,12.061-3.154\n\t\t\t\t\t\tc9.771,0,17.256,4.021,22.451,12.061c4.329,6.68,6.494,15.029,6.494,25.049c0,12.742-3.247,24.154-9.741,34.234\n\t\t\t\t\t\tC101.7,82.227,91.896,90.357,78.785,96.541l-3.525-6.865C83.175,86.336,89.979,81.113,95.67,73.998z\"\/>\n\t\t\t\t<\/g>\n\t\t\t<\/svg>\n\t\t<\/div>\n\t\t<div class=\"qode-simple-quote-content-holder\">\n\t\t\t<div class=\"qode-simple-quote-content-holder-inner\">\n\t\t\t\t<div class=\"qode-simple-quote-text-holder\"  style=\"margin-bottom: 20px\">\n\t\t\t\t\t<h5 class=\"qode-simple-quote-text-title\"> I HAVE NO IDEA WHERE THIS WILL LEAD US, BUT I HAVE A DEFINITE FEELING IT WILL BE A PLACE BOTH WONDERFUL AND STRANGE.  <\/h5>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"qode-simple-quote-author-holder\">\n\t\t\t\t\t<h6 class=\"qode-simple-quote-author-title\"> DALE COOPER, TWIN PEAKS (1990)  <\/h6>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>[vc_empty_space height=&#8221;50px&#8221;][vc_column_text]When it comes to point&#8217;n&#8217;click adventure games, background graphics are CRUCIAL to success. And I&#8217;m certainly not talking about monetary success alone: when playing these games, you WILL be spending a LOT of time staring at the screen, thinking of a puzzle. It&#8217;s essential that the environment where you place your player feels beautiful\/exciting\/scary\/weird or just moody, whatever it may be you&#8217;re going for. The atmosphere needs to be just right. Music and sound play important roles here, too, sometimes even more so.<\/p>\n<p>Of course if you&#8217;ve reached the stage that someone is playing your game, an important battle is already won! I mean to get there, they must first:[\/vc_column_text][vc_empty_space height=&#8221;20px&#8221;]<div class=\"q_icon_list\"><i class=\"qode_icon_font_awesome fa fa-chevron-right qode-ili-icon-holder transparent\" style=\"font-size: 16px;color: #8224e3;\" ><\/i><p style=\"color:#d8d5d5;\">learn about your game's existence<\/p><\/div><div class=\"q_icon_list\"><i class=\"qode_icon_font_awesome fa fa-chevron-right qode-ili-icon-holder transparent\" style=\"font-size: 16px;color: #8224e3;\" ><\/i><p style=\"color:#d8d5d5;\">go buy it (or at least download it)<\/p><\/div><div class=\"q_icon_list\"><i class=\"qode_icon_font_awesome fa fa-chevron-right qode-ili-icon-holder transparent\" style=\"font-size: 16px;color: #8224e3;\" ><\/i><p style=\"color:#d8d5d5;\">find time to actually play it<\/p><\/div>[vc_empty_space height=&#8221;20px&#8221;][vc_column_text]There&#8217;s no shortage of games these days so getting noticed isn&#8217;t an easy task. And you can&#8217;t rely on music there \u2013 online, first impressions are pretty much always based on graphics. The trailer comes soon thereafter, sure \u2013 but only after the decision to watch it is made. And that decision is made when looking at the graphics. So they ought to be good.<\/p>\n<h5>The following is a story of how our first background art was created.<\/h5>\n<p>First of all, I can&#8217;t really draw. So when I began designing the first room I had in mind for the underground world we descend to, I chose a familiar starting point. Knowing we&#8217;re going to be spending some time in the sewers, the first thing that came to mind was&#8230; naturally the Lost City of Atlantis! \ud83d\ude42 Indiana Jones and the Fate of Atlantis has always been among my TOP3 games of all time. I simply took a screencap, edited it a bit and indicated actionable objects by text:<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" loading=\"lazy\" width=\"1729\" height=\"633\" class=\"size-full wp-image-610 aligncenter\" src=\"http:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sixt_sewer2.jpg\" alt=\"\" srcset=\"https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sixt_sewer2.jpg 1729w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sixt_sewer2-300x110.jpg 300w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sixt_sewer2-1024x375.jpg 1024w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sixt_sewer2-768x281.jpg 768w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sixt_sewer2-1536x562.jpg 1536w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sixt_sewer2-700x256.jpg 700w\" sizes=\"(max-width: 1729px) 100vw, 1729px\" \/> <span style=\"font-size: 14px; color: #3ff5ff;\">First vision of Sewer room #2<\/span><br \/>\n<span style=\"font-size: 10px;\">Background graphics \u00a9 LucasFilm Games, Disney<\/span><\/p>\n<p>Next, I gave the pic above to my team&#8217;s graphicians. Quickly \u2013 and with a legacy <strong>320 x 240<\/strong> aspect ratio in mind \u2013 one of them made the following first draft:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-628 size-full aligncenter\" src=\"http:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_vile_2x.png\" alt=\"\" width=\"640\" height=\"480\" srcset=\"https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_vile_2x.png 640w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_vile_2x-300x225.png 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>This was the first time I ever saw a version of a background for my game and instantly the project seemed more real.<\/p>\n<p>My mind, however, was blown only when our concept artist <strong><a href=\"https:\/\/www.tuomaskorpi.com\" target=\"_blank\" rel=\"noopener\">Tuomas Korpi<\/a><\/strong> came up with this:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-623 aligncenter\" src=\"http:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_korpi.jpg\" alt=\"\" width=\"1600\" height=\"756\" srcset=\"https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_korpi.jpg 1600w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_korpi-300x142.jpg 300w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_korpi-1024x484.jpg 1024w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_korpi-768x363.jpg 768w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_korpi-1536x726.jpg 1536w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_room2_korpi-700x331.jpg 700w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p>All right, this was really beginning to go somewhere! We used the above background as the first asset in our Unity project and it remained there for a good while&#8230; until the first pixel art version was created by a third graphician. We also got to see it in colours for the first time (this version of the protagonist was shorter than the character is in the final game)!<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-626 aligncenter\" src=\"http:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer2_1st_draft.png\" alt=\"\" width=\"960\" height=\"540\" srcset=\"https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer2_1st_draft.png 960w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer2_1st_draft-300x169.png 300w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer2_1st_draft-768x432.png 768w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer2_1st_draft-700x394.png 700w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer2_1st_draft-539x303.png 539w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<p>The version above was pretty much done with my first reference image (FoA) in mind, so a rather realistic take on the matter.<\/p>\n<p>At this stage, it was time to really start thinking about the visual style for the game. We had decided to go with <strong>320 x 180<\/strong> aspect ratio in order to nicely fit the modern 16:9 screens. It was then when I found another spectacular background artist <a href=\"https:\/\/twitter.com\/ANOKAKI1\" target=\"_blank\" rel=\"noopener\"><strong>anokaki<\/strong><\/a> and asked him to join us \u2013 which he did, to my pleasant surprise. We had a lengthy discussion and his first version already added a great amount of style to the room:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-630 aligncenter\" src=\"http:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_alternative_v1.jpg\" alt=\"\" width=\"640\" height=\"352\" srcset=\"https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_alternative_v1.jpg 640w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/sewer_alternative_v1-300x165.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>It was such a joy seeing this, but the goofy looking piping in the foreground kind of took you straight to Day of the Tentacle, or that&#8217;s what I thought. DoTT is a game I love to bits, but I didn&#8217;t want to go to such level of cartooniness here. So what WAS the style I was going for?<\/p>\n<p>To clarify things, one of our team members handed me this image and asked me to do a tone chart, so I quickly placed SIXT among some great LucasArts titles:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-633 aligncenter\" src=\"http:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/SIXT_gfx_tone_chart.jpg\" alt=\"\" width=\"2048\" height=\"1430\" srcset=\"https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/SIXT_gfx_tone_chart.jpg 2048w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/SIXT_gfx_tone_chart-300x209.jpg 300w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/SIXT_gfx_tone_chart-1024x715.jpg 1024w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/SIXT_gfx_tone_chart-768x536.jpg 768w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/SIXT_gfx_tone_chart-1536x1073.jpg 1536w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/12\/SIXT_gfx_tone_chart-700x489.jpg 700w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/p>\n<p>I stress the word <em>quickly <\/em>here \u2013 I would have to change the positions a bit if I really wanted to make the chart accurate.<\/p>\n<p>The artist&#8217;s next version? Well&#8230; you&#8217;ve seen it already. \ud83d\ude42<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-329\" src=\"http:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/10\/sewer2bg.png\" alt=\"\" width=\"1920\" height=\"1112\" srcset=\"https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/10\/sewer2bg.png 1920w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/10\/sewer2bg-300x174.png 300w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/10\/sewer2bg-1024x593.png 1024w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/10\/sewer2bg-768x445.png 768w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/10\/sewer2bg-1536x890.png 1536w, https:\/\/www.amazement.fi\/sixt\/wp-content\/uploads\/2021\/10\/sewer2bg-700x405.png 700w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>-luuk[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to point&#8217;n&#8217;click adventure games, background graphics are CRUCIAL to success.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/posts\/606"}],"collection":[{"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/comments?post=606"}],"version-history":[{"count":51,"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/posts\/606\/revisions"}],"predecessor-version":[{"id":666,"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/posts\/606\/revisions\/666"}],"wp:attachment":[{"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/media?parent=606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/categories?post=606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.amazement.fi\/sixt\/wp-json\/wp\/v2\/tags?post=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}