{"id":244,"date":"2014-10-11T17:36:42","date_gmt":"2014-10-11T21:36:42","guid":{"rendered":"http:\/\/www.bootdiskrevolution.com\/?p=244"},"modified":"2015-08-23T14:30:59","modified_gmt":"2015-08-23T18:30:59","slug":"scene-construction","status":"publish","type":"post","link":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/scene-construction\/","title":{"rendered":"Scene Construction"},"content":{"rendered":"<p>I&#8217;ve reached a point in development where I need to finish the environment art before I can continue (you&#8217;d be surprised how far you can get with no art! &#8230;heh&#8230;) Right now I&#8217;m working on the first environment of the game &#8212; a city. So far I&#8217;ve got the exterior done, which looks something like this.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/shot2.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-252 size-full aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/shot2.jpg?resize=640%2C400\" alt=\"\" width=\"640\" height=\"400\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/shot2.jpg?w=640&amp;ssl=1 640w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/shot2.jpg?resize=300%2C187&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>I thought it might be interesting to break the scene down a bit in terms of how it&#8217;s constructed and displayed, so that&#8217;s what I&#8217;m gonna do! Warning, some sizeable gifs coming up. <!--more--><\/p>\n<p>There are two main components to the scene here: the background and the foreground. The background is just a series of large images that repeat over and over, giving the impression of an endless environment. The foreground is made using a tileset. For those not familiar with them: a tileset is like a collection of images (or &#8220;tiles&#8221;) that are used as building blocks to create your level.<\/p>\n<figure id=\"attachment_254\" aria-describedby=\"caption-attachment-254\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/tileset.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-254 size-full\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/tileset.jpg?resize=450%2C400\" alt=\"\" width=\"450\" height=\"400\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/tileset.jpg?w=450&amp;ssl=1 450w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/tileset.jpg?resize=300%2C266&amp;ssl=1 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><figcaption id=\"caption-attachment-254\" class=\"wp-caption-text\">It&#8217;s kind of like a jigsaw puzzle where you have an infinite number of each piece. You keep laying them out to make the picture you want.<\/figcaption><\/figure>\n<p>There are two layers of tiles in the environment &#8212; one goes behind Wryn, and the other goes in front. Here&#8217;s an animation of everything coming together.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/breakdownAVI.gif\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-245 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/breakdownAVI.gif?resize=480%2C270\" alt=\"\" width=\"480\" height=\"270\" \/><\/a><\/p>\n<p>You can see a final, third layer of tiles come in at the end. That layer is usually hidden from view, being used to tell the game where the floors and walls are. Here&#8217;s another view of the scene breakdown, because I like images.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/breakdownJPG.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-246 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/breakdownJPG.jpg?resize=480%2C290\" alt=\"\" width=\"480\" height=\"290\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/breakdownJPG.jpg?w=480&amp;ssl=1 480w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/breakdownJPG.jpg?resize=300%2C181&amp;ssl=1 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/a><\/p>\n<p>Finally, a few cool things going on behind the scenes:<br \/>\n-You don&#8217;t want to draw the entire level&#8217;s worth of tiles at once &#8212; levels can be really large, so that&#8217;s a lot of work for the GPU. Instead, the game only draws the tiles that the camera can see.<br \/>\n-The images in the background move slower than the tiles, and they all move at different speeds &#8212; this is called &#8220;parallax scrolling&#8221; and it gives the scene the illusion of depth.<\/p>\n<figure id=\"attachment_247\" aria-describedby=\"caption-attachment-247\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/camAVI.gif\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-247 size-full\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/camAVI.gif?resize=480%2C270\" alt=\"\" width=\"480\" height=\"270\" \/><\/a><figcaption id=\"caption-attachment-247\" class=\"wp-caption-text\">Only tiles in range of the camera are drawn, and the backgrounds move at different speeds.<\/figcaption><\/figure>\n<figure id=\"attachment_248\" aria-describedby=\"caption-attachment-248\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/gamAVI.gif\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-248 size-full\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2014\/10\/gamAVI.gif?resize=480%2C270\" alt=\"\" width=\"480\" height=\"270\" \/><\/a><figcaption id=\"caption-attachment-248\" class=\"wp-caption-text\">You never notice the rest of the world is being hidden, and the moving backgrounds create the illusion of depth!<\/figcaption><\/figure>\n<p>Aaaand that&#8217;s how my scenes are put together! When I get further in development they&#8217;ll look more dynamic and exciting, although I&#8217;m not there yet&#8230; I mostly just wanted to share how things were coming. I guess I&#8217;ll stop slacking off and get back to it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve reached a point in development where I need to finish the environment art before I can continue (you&#8217;d be surprised how far you can get with no art! &#8230;heh&#8230;) Right now I&#8217;m working on the first environment of the game &#8212; a city. So far I&#8217;ve got the exterior done, which looks something like <a class=\"read-more\" href=\"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/scene-construction\/\">[&hellip;]<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-244","post","type-post","status-publish","format-standard","hentry","category-bleed-2"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":9,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts\/244\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts\/244\/revisions\/260"}],"wp:attachment":[{"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/media?parent=244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/categories?post=244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/tags?post=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}