{"id":1038,"date":"2015-11-08T14:01:30","date_gmt":"2015-11-08T19:01:30","guid":{"rendered":"http:\/\/www.bootdiskrevolution.com\/?p=1038"},"modified":"2015-11-08T14:01:30","modified_gmt":"2015-11-08T19:01:30","slug":"more-fun-with-render-targets","status":"publish","type":"post","link":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/more-fun-with-render-targets\/","title":{"rendered":"More Fun With Render Targets"},"content":{"rendered":"<p>Another week full of work, this time with a frustrating outcome \u2013 the work wasn&#8217;t very good. I&#8217;ve found that when exploring new ideas, you have to fail a bunch of times before you get something right \u2013 learning what doesn&#8217;t work helps you create what does. I&#8217;m making the second-last boss of the game now, and it&#8217;s sorta weird and high-concept, so this success-through-repeated-failure scenario is kind of to be expected, but that doesn&#8217;t make it any more pleasant to go through. It&#8217;ll be done next week, or I&#8217;ll eat my hat!<\/p>\n<p>While I&#8217;m spinning my wheels here, I&#8217;m gonna show off some more fun with render targets! Check out this virtual-reality environment I made a while back.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1045 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/gameplay.gif?resize=480%2C270\" alt=\"\" width=\"480\" height=\"270\" \/><\/p>\n<p>Different areas of the environment pulse, scrolling grid lines fade in and out, and the entire level slowly shifts colour over time.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1046 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/manyColours.png?resize=480%2C328\" alt=\"\" width=\"480\" height=\"328\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/manyColours.png?w=480&amp;ssl=1 480w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/manyColours.png?resize=300%2C205&amp;ssl=1 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/p>\n<p>I&#8217;m using render targets to create and morph the tileset while the game is running, resulting in all the effects! I&#8217;ll follow with a breakdown of what I mean.<\/p>\n<p><!--more--><\/p>\n<p>To start with, here&#8217;s the tileset. It contains all the information we need to achieve those results.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1039 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step1.png?resize=580%2C724\" alt=\"\" width=\"580\" height=\"724\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step1.png?w=580&amp;ssl=1 580w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step1.png?resize=240%2C300&amp;ssl=1 240w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/p>\n<p>Well, all of them except one. To achieve the colour shifting, I have a few variations of the same tileset, just in different strong colours &#8212; blend any two together to get a final coloured tileset.\u00a0 The colours used and the balance between them is constantly (slowly) being changed while the game is played, allowing the colour shifting to occur.<\/p>\n<figure id=\"attachment_1040\" aria-describedby=\"caption-attachment-1040\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-1040 size-full\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step2.png?resize=640%2C434\" alt=\"\" width=\"640\" height=\"434\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step2.png?w=640&amp;ssl=1 640w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step2.png?resize=300%2C203&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-1040\" class=\"wp-caption-text\">Combining tilesets to get a final colour. (Showing the top of the tileset only here.)<\/figcaption><\/figure>\n<p>For parts of the environment to pulse, we use more render target goodness. You&#8217;ll notice the bottom of the tileset has the same tiles repeated at different brightnesses. That helps with designing the level \u2013 I mark off areas I want to glow with the brightened tiles.<\/p>\n<figure id=\"attachment_1042\" aria-describedby=\"caption-attachment-1042\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-1042 size-full\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step3a.png?resize=720%2C450\" alt=\"\" width=\"720\" height=\"450\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step3a.png?w=720&amp;ssl=1 720w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step3a.png?resize=300%2C188&amp;ssl=1 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-1042\" class=\"wp-caption-text\">Here it is in the editor. You can see the marked glowy areas.<\/figcaption><\/figure>\n<p>At run time, I replace the brightened tiles with copies of the darkest set. So by default, all tiles will be dark and you won&#8217;t notice the special areas. When I mix the fully-bright tiles back over the copied dark ones, it causes parts of the world using those tiles to brighten. Having the two sets of copies allows different areas of the world to pulse at different times, making it look more organic.<\/p>\n<figure id=\"attachment_1041\" aria-describedby=\"caption-attachment-1041\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-1041 size-full\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step3-4-5.gif?resize=580%2C362\" alt=\"\" width=\"580\" height=\"362\" \/><figcaption id=\"caption-attachment-1041\" class=\"wp-caption-text\">The bottom of the tileset. At run-time, the brightened duplicates are replaced with the flat black version. The max-bright version is mixed back in as needed.<\/figcaption><\/figure>\n<p>Finally, to achieve the scrolling grid lines. The tileset contains a little grid &#8212; if I pick a section of it and draw it on top of every tile, it adds the grid image to the tileset! If I slowly shift the area of the grid I&#8217;m using, it makes it look like the grid lines are moving instead.<\/p>\n<figure id=\"attachment_1043\" aria-describedby=\"caption-attachment-1043\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-1043 size-full\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step6.png?resize=580%2C362\" alt=\"\" width=\"580\" height=\"362\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step6.png?w=580&amp;ssl=1 580w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step6.png?resize=300%2C187&amp;ssl=1 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption id=\"caption-attachment-1043\" class=\"wp-caption-text\">Drawing different areas of the grid on top of the tiles.<\/figcaption><\/figure>\n<p>In the end, you get a constantly-changing tileset that&#8217;s used to draw the game world, resulting in those neat effects! Here&#8217;s a rip from the game, showing what the tileset looks like as the game runs. I&#8217;m showing the bottom of the tileset since that&#8217;s where it&#8217;s easiest to notice the subtle effects.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1044 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/11\/step7.gif?resize=480%2C270\" alt=\"\" width=\"480\" height=\"270\" \/><\/p>\n<p>So, uh, yeah! I&#8217;m not sure what the environment will be used for, if anything&#8230; maybe a tutorial? Maybe an optional arena for Challenge Mode? Sometimes I just get excited about the challenge of implementing an idea and run with it for a day. Not that I&#8217;m giving into those urges lately &#8212; this was done a while ago. Right now I gotta focus on getting the game done!! Until next week!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Another week full of work, this time with a frustrating outcome \u2013 the work wasn&#8217;t very good. I&#8217;ve found that when exploring new ideas, you have to fail a bunch of times before you get something right \u2013 learning what doesn&#8217;t work helps you create what does. I&#8217;m making the second-last boss of the game <a class=\"read-more\" href=\"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/more-fun-with-render-targets\/\">[&hellip;]<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-1038","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\/1038","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=1038"}],"version-history":[{"count":5,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts\/1038\/revisions"}],"predecessor-version":[{"id":1051,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts\/1038\/revisions\/1051"}],"wp:attachment":[{"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/media?parent=1038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/categories?post=1038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/tags?post=1038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}