{"id":784,"date":"2015-06-28T13:54:58","date_gmt":"2015-06-28T17:54:58","guid":{"rendered":"http:\/\/www.bootdiskrevolution.com\/?p=784"},"modified":"2015-08-23T14:25:04","modified_gmt":"2015-08-23T18:25:04","slug":"more-levels","status":"publish","type":"post","link":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/more-levels\/","title":{"rendered":"More Levels!"},"content":{"rendered":"<p>This week was the start of fixing up level 4! A year and a half ago I&#8217;d just finished the background art for it and posted this image to Twitter. Weird to think it&#8217;s been that long.<br \/>\n<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-785\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/2014-02-23-screenie.jpg?resize=480%2C270\" alt=\"\" width=\"480\" height=\"270\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/2014-02-23-screenie.jpg?w=960&amp;ssl=1 960w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/2014-02-23-screenie.jpg?resize=300%2C169&amp;ssl=1 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/>Level 4 is the one I made first to test everything out, and as a result it&#8217;s one of the roughest. I have to re-do a lot of its layout, so I thought I&#8217;d document the process!<\/p>\n<p>The level layouts are created in the 2D tile editor, Tiled. I try not be concerned with visuals at the beginning, instead just boxing in a rough idea of how the level will play. I do know how the level will look and what enemies will go in it, so that helps inform the design. I just need to get something on there, because a blank canvas is really intimidating.<\/p>\n<figure id=\"attachment_788\" aria-describedby=\"caption-attachment-788\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-788\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-a.png?resize=600%2C372\" alt=\"\" width=\"600\" height=\"372\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-a.png?w=1009&amp;ssl=1 1009w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-a.png?resize=300%2C186&amp;ssl=1 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-788\" class=\"wp-caption-text\">A first stab at a section of level. I&#8217;ve indicated where I plan to place enemies.<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p>Once I&#8217;m done, I export the Tiled level map into an array of integers. It&#8217;s literally the same information &#8212; each integer tells my program which tile in the tileset to use for that section of the level. If you squint your eyes you can almost see the level in the numbers!<\/p>\n<figure id=\"attachment_795\" aria-describedby=\"caption-attachment-795\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-numbers.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-795\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-numbers.png?resize=792%2C262\" alt=\"\" width=\"792\" height=\"262\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-numbers.png?w=1726&amp;ssl=1 1726w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-numbers.png?resize=300%2C99&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-numbers.png?resize=1024%2C339&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-numbers.png?w=1584 1584w\" sizes=\"auto, (max-width: 792px) 100vw, 792px\" \/><\/a><figcaption id=\"caption-attachment-795\" class=\"wp-caption-text\">It&#8217;s like a Magic Eye image!<\/figcaption><\/figure>\n<p>Once the int array is put into the code, I can start playing the level and managing the camera. The camera is frequently being controlled to frame the action in an optimal way. Here&#8217;s a comparison of before and after having camera instructions implemented.<\/p>\n<figure id=\"attachment_796\" aria-describedby=\"caption-attachment-796\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-796\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/cZones-noAVI_O.gif?resize=480%2C270\" alt=\"Without camera management.\" width=\"480\" height=\"270\" \/><figcaption id=\"caption-attachment-796\" class=\"wp-caption-text\">Without camera management.<\/figcaption><\/figure>\n<figure id=\"attachment_787\" aria-describedby=\"caption-attachment-787\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-787\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/cZones-yesAVI_O.gif?resize=480%2C270\" alt=\"With camera management!\" width=\"480\" height=\"270\" \/><figcaption id=\"caption-attachment-787\" class=\"wp-caption-text\">With camera management!<\/figcaption><\/figure>\n<p>There&#8217;s a lot to take into account with the camera. I want it to show a fair distance in front of Wryn and give warning to upcoming obstacles. I want it to follow her vertically, but not until she&#8217;s far enough away from the ground or it&#8217;s annoying. I want to keep Wryn on-screen, and prefer to keep her inside the title-safe area. I want to keep the action from being overlapped by the HUD. I don&#8217;t want transitions from one area to the next to be too jarring. Etc etc etc.<\/p>\n<p>Then I add the enemies and start trying it out! Sometimes my ideas work, sometimes they need some tweaking. I keep refining until it feels good.<\/p>\n<figure id=\"attachment_789\" aria-describedby=\"caption-attachment-789\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-789\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-aAVI_O.gif?resize=480%2C270\" alt=\"Not what many would call 'good flow'.\" width=\"480\" height=\"270\" \/><figcaption id=\"caption-attachment-789\" class=\"wp-caption-text\">Not what many would call &#8216;good flow&#8217;.<\/figcaption><\/figure>\n<figure id=\"attachment_791\" aria-describedby=\"caption-attachment-791\" style=\"width: 480px\" class=\"wp-caption aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-791\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-bAVI_O.gif?resize=480%2C270\" alt=\"Getting better!\" width=\"480\" height=\"270\" \/><figcaption id=\"caption-attachment-791\" class=\"wp-caption-text\">Getting better!<\/figcaption><\/figure>\n<p>Once I&#8217;ve got it to a place I like, I can finally add the foreground and background tile layers in Tiled!<br \/>\n<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-793\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-d.png?resize=600%2C372\" alt=\"\" width=\"600\" height=\"372\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-d.png?w=1009&amp;ssl=1 1009w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-d.png?resize=300%2C186&amp;ssl=1 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/>Add some background and foreground environment images in code, and bam! Level constructed.<br \/>\n<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-794 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2015\/06\/level-finalAVI_O.gif?resize=480%2C270\" alt=\"\" width=\"480\" height=\"270\" \/>There&#8217;s a lot more after that, like programming checkpoints, cinematics, boss encounters, blah blah blah, but you get the idea.<\/p>\n<p>If you read through this and thought &#8220;what an inefficient process!&#8221;, well&#8230; you&#8217;re right! It gets really annoying to constantly re-export the int arrays in Tiled and import them into the game every time I make a change, for example. For my next game, I&#8217;m definitely gonna try making a level editor. It can only save time in the long run, and would let people make custom levels, too.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week was the start of fixing up level 4! A year and a half ago I&#8217;d just finished the background art for it and posted this image to Twitter. Weird to think it&#8217;s been that long. Level 4 is the one I made first to test everything out, and as a result it&#8217;s one <a class=\"read-more\" href=\"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/more-levels\/\">[&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-784","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\/784","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=784"}],"version-history":[{"count":4,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts\/784\/revisions"}],"predecessor-version":[{"id":800,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts\/784\/revisions\/800"}],"wp:attachment":[{"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/media?parent=784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/categories?post=784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/tags?post=784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}