{"id":1274,"date":"2016-03-06T12:52:51","date_gmt":"2016-03-06T17:52:51","guid":{"rendered":"http:\/\/www.bootdiskrevolution.com\/?p=1274"},"modified":"2016-03-06T12:52:51","modified_gmt":"2016-03-06T17:52:51","slug":"the-main-menu","status":"publish","type":"post","link":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/the-main-menu\/","title":{"rendered":"The Main Menu"},"content":{"rendered":"<p>I got a lot of awesome work done this week! 95% of the audio is now in the game (the only remaining audio is the last boss, and a handfull of environmental sounds.) I did a first, tiny bit of playtesting. Aaaaaaand I got the main menu done!<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1278 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/0_finalpreview.jpg?resize=480%2C270\" alt=\"\" width=\"480\" height=\"270\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/0_finalpreview.jpg?w=480&amp;ssl=1 480w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/0_finalpreview.jpg?resize=300%2C169&amp;ssl=1 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/p>\n<p><a href=\"http:\/\/www.bootdiskrevolution.com\/menus\/\">Thanks to the menu system I set up a while ago<\/a>, the hard part was making Wryn&#8217;s animations. I wanted to repeat what I did with the original Bleed and use the main menu to show off Wryn&#8217;s personality. It also ties directly into the game, since the first level opens with her in front of her couch, playing video games.<\/p>\n<p>So! Here&#8217;s what went into making the animations for the main menu.<\/p>\n<p><!--more--><\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1279 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/1_drawing.jpg?resize=670%2C528\" alt=\"\" width=\"670\" height=\"528\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/1_drawing.jpg?w=670&amp;ssl=1 670w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/1_drawing.jpg?resize=300%2C236&amp;ssl=1 300w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/p>\n<p>First, I planned everything out on paper. I printed off the main menu with little borders to represent the edges of the screen, so I could draw everything to scale and make sure it all fit together. I drew the borders on the other pieces of paper to help me keep everything aligned. I drew a lot of Wryn&#8217;s head but not much of the rest of her, since I can use Photoshop to cut and paste her various expressions over her body (which doesn&#8217;t change nearly as much.)<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1284\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/2_transfer.png?resize=600%2C376\" alt=\"\" width=\"600\" height=\"376\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/2_transfer.png?w=776&amp;ssl=1 776w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/2_transfer.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/2_transfer.png?resize=768%2C481&amp;ssl=1 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>I scanned the images and traced them with with hard pixels using my tablet. If I was better with a tablet (or had a bigger\/newer one, maybe?) I wouldn&#8217;t have needed to draw and scan them first, but whatcha gonna do! I mixed and matched the heads and bodies to create all the animations I knew I needed. I added the arms and hands in Photoshop &#8212; they were simple enough that I felt comfortable drawing them with my tablet.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-1282 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/3_colour.png?resize=600%2C376\" alt=\"\" width=\"600\" height=\"376\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/3_colour.png?w=776&amp;ssl=1 776w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/3_colour.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/3_colour.png?resize=768%2C481&amp;ssl=1 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>I coloured them all in! It looked pretty ugly and discouraging at this stage but I&#8217;m glad I kept with it.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1283\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/4_shading.png?resize=600%2C376\" alt=\"\" width=\"600\" height=\"376\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/4_shading.png?w=776&amp;ssl=1 776w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/4_shading.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/4_shading.png?resize=768%2C481&amp;ssl=1 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>I added lighting. I also changed elements to bring the images more in line with Bleed 2&#8217;s art style &#8212; for example, the hard black outlines have been changed to be a darker version of the colour they surround, instead. I think it&#8217;s a lot easier on the eyes.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-1276 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/5_allSprites.jpg?resize=600%2C346\" alt=\"\" width=\"600\" height=\"346\" srcset=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/5_allSprites.jpg?w=750&amp;ssl=1 750w, https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/5_allSprites.jpg?resize=300%2C173&amp;ssl=1 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Then I did that over and over, a whole bunch of times, until I had all the frames necessary for her animations! Wryn and the couch are separate to save space &#8212; she&#8217;s the only part of the image that moves, so there&#8217;s no need to store the entire couch for every frame of her animations. I draw the couch, then I draw her over top. Bingo bango.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1277 aligncenter\" src=\"https:\/\/i0.wp.com\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-content\/uploads\/2016\/03\/6_menusLongAVI_O.gif?resize=480%2C270\" alt=\"\" width=\"480\" height=\"270\" \/><\/p>\n<p>Then it was a matter of setting it all up in code, defining her various behaviours and how she would use the frames of animation for each of them, swap between behavious, etc. Here&#8217;s the result! I think it turned out pretty cute.<\/p>\n<p>There is one, MAYBE two other scenes in Bleed 2 that will need animations like this. After that, most (if not all) of the art work will be done for the whole game! Woohoo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I got a lot of awesome work done this week! 95% of the audio is now in the game (the only remaining audio is the last boss, and a handfull of environmental sounds.) I did a first, tiny bit of playtesting. Aaaaaaand I got the main menu done! Thanks to the menu system I set <a class=\"read-more\" href=\"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/the-main-menu\/\">[&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-1274","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\/1274","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=1274"}],"version-history":[{"count":5,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts\/1274\/revisions"}],"predecessor-version":[{"id":1891,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/posts\/1274\/revisions\/1891"}],"wp:attachment":[{"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/media?parent=1274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/categories?post=1274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bootdiskrevolution.com\/NEW_BLOG\/wp-json\/wp\/v2\/tags?post=1274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}