{"id":58,"date":"2008-11-18T23:17:32","date_gmt":"2008-11-19T04:17:32","guid":{"rendered":"http:\/\/www.vertigogaming.net\/blog\/?p=58"},"modified":"2008-11-18T23:36:09","modified_gmt":"2008-11-19T04:36:09","slug":"functionality-over-style-the-horrible-battle","status":"publish","type":"post","link":"https:\/\/www.vertigogaming.net\/blog\/?p=58","title":{"rendered":"Functionality over Style: The Horrible Battle."},"content":{"rendered":"<p>Over the last few weeks of making Spirits, I was wrapping things up, but I knew I was leaving the worst for last. No, I thought, better I get this out of the way first. So I drew it out on a notebook. Did more work in my sketchbook during workin&#8217; at Starbucks. Nothing seemed to fit. I started to finish up all the loose ends in Spirits. Today, I finished the Free Play mode which left&#8230;the Puzzle menu redesign. Oh no.<br \/>\n<!--more--><br \/>\n<center><br \/>\n<a href=\"http:\/\/www.vertigogaming.net\/images\/puz0.png\" rel=\"lightbox[ONR2]\" title=\"The old menu. Not really all that great.\" vspace=\"15\" width=\"412\" border=\"0\" height=\"309\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vertigogaming.net\/images\/puz0.png\" border=\"0\" vspace=\"15\" width=\"412\" height=\"309\" \/><\/a><br \/>\n<!--\u2013start_raw\u2013--><br \/>\n<br?><!--\u2013end_raw\u2013--><br \/>\n<\/br?><\/center><br \/>\nAbove is the old menu I posted in the blog a few weeks ago, and it was the menu that went out with the beta. People seemed to be universal in the dislike of the puzzle menu. I really didn&#8217;t want to hear that&#8230;the menu that was there was already working and ready to go&#8230;but it had to be changed.<br \/>\n<!--break--><br \/>\nMenu design up to this point had been generally easy. Most menus showed no more than 9-10 levels at a time, it flowed really well, and showed nice structure. Now i had 53 levels to display in an orderly fashion that fit the style with the main game. The easiest thing I could do was to have the user click on some arrows and move the number up and down, then pressing enter to go to that level. But it didn&#8217;t work&#8230;well, it did work, but it was not working in both functionality or design. I went back to the drawing board with multiple menus, and even joe_042293 got in on the design:<br \/>\n<center><br \/>\n<a href=\"http:\/\/www.vertigogaming.net\/images\/mockup0.jpg\" rel=\"lightbox[ONR2]\" title=\"This mockup used an unused piece of art by Amanda Redmond. Unfortunately the design was too overly complicated...the level that was unlocked, the locked levels, and information was too spaced out. You could only display four levels at a time this way.\" vspace=\"15\" width=\"412\" border=\"0\" height=\"309\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vertigogaming.net\/images\/mockup0.jpg\" border=\"0\" vspace=\"15\" width=\"412\" height=\"309\" \/><\/a><br \/>\n<!--\u2013start_raw\u2013--><br \/>\n<br?><!--\u2013end_raw\u2013--><br \/>\n<\/br?><\/center><br \/>\n<center><br \/>\n<a href=\"http:\/\/www.vertigogaming.net\/images\/mockup1.jpg\" rel=\"lightbox[ONR2]\" title=\"The easiest version to implement. But the design didn't fit well with the game, and didn't give enough information to the player.\" vspace=\"15\" width=\"412\" border=\"0\" height=\"309\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vertigogaming.net\/images\/mockup1.jpg\" border=\"0\" vspace=\"15\" width=\"412\" height=\"309\" \/><\/a><br \/>\n<!--\u2013start_raw\u2013--><br \/>\n<br?><!--\u2013end_raw\u2013--><br \/>\n<\/br?><\/center><br \/>\n<center><br \/>\n<a href=\"http:\/\/www.vertigogaming.net\/images\/mockup2.jpg\" rel=\"lightbox[ONR2]\" title=\"The design that appealed most to me, yet the style just didn't mesh either. It would have been hard to program the fading numbers sliding smoothly in and out like I wanted it as well.\" vspace=\"15\" width=\"412\" border=\"0\" height=\"309\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vertigogaming.net\/images\/mockup2.jpg\" border=\"0\" vspace=\"15\" width=\"412\" height=\"309\" \/><\/a><br \/>\n<!--\u2013start_raw\u2013--><br \/>\n<br?><!--\u2013end_raw\u2013--><br \/>\n<\/br?><\/center><br \/>\n<center><br \/>\n<a href=\"http:\/\/www.vertigogaming.net\/images\/mockup3.png\" rel=\"lightbox[ONR2]\" title=\"Joe's version, which was way better than mine, but still didn't quite fit. Please don't kill me joe. :(\" vspace=\"15\" width=\"412\" border=\"0\" height=\"309\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vertigogaming.net\/images\/mockup3.png\" border=\"0\" vspace=\"15\" width=\"412\" height=\"309\" \/><\/a><br \/>\n<!--\u2013start_raw\u2013--><br \/>\n<br?><!--\u2013end_raw\u2013--><br \/>\n<\/br?><\/center><br \/>\nAnd so, I stopped going for artistic. I went for functionality over style, and I think I finally created a menu that I can work with.<br \/>\n<center><br \/>\n<a href=\"http:\/\/www.vertigogaming.net\/images\/anewpuzzlelaunch.png\" rel=\"lightbox[ONR2]\" title=\"A semi-working version of the now final puzzle menu. WITH BLURRED OUT TOP SECRET STUFF.\" vspace=\"15\" width=\"412\" border=\"0\" height=\"309\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vertigogaming.net\/images\/anewpuzzlelaunch.png\" border=\"0\" vspace=\"15\" width=\"412\" height=\"309\" \/><\/a><br \/>\n<!--\u2013start_raw\u2013--><br \/>\n<br?><!--\u2013end_raw\u2013--><br \/>\n<\/br?><\/center><br \/>\nAt first, you might think the menu is uglier than the other mockups, and you&#8217;d be right. But this works much better from a functional standpoint: levels that are locked and beaten are easily seen. 42 levels can be instantly displayed on the screen. Arrows do not have to be used to scroll to a certain number, taking maybe 6 seconds to get to level 34 from the other designs to just a split second in this newer design. I&#8217;m also able to mix user levels and official levels, shifting the spotlight on user created levels (they will be displayed differently than what you see in the image, and they won&#8217;t have thumbnails unfortunately).<br \/>\n<!--break--><br \/>\nI wanted the user levels to have thumbnails, but this cannot be done for several reasons. Not that I didn&#8217;t try&#8230;here&#8217;s a working version of the user created levels menu:<br \/>\n<center><br \/>\n<a href=\"http:\/\/www.vertigogaming.net\/images\/oldselector.png\" rel=\"lightbox[ONR2]\" title=\"The old user created levels menu.\" vspace=\"15\" width=\"412\" border=\"0\" height=\"309\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vertigogaming.net\/images\/oldselector.png\" border=\"0\" vspace=\"15\" width=\"412\" height=\"309\" \/><\/a><br \/>\n<!--\u2013start_raw\u2013--><br \/>\n<br?><!--\u2013end_raw\u2013--><br \/>\n<\/br?><\/center><br \/>\nFirst off, Game Maker&#8217;s built in functionality allows only BMP files to be taken and exported, causing custom levels to bloat to nearly 2mb in size. The menu you see above takes four BMPs and scales them down, then blows them up at a preview size when clicked. The memory issues were very problematic, but I did get it to work. It was not quite as pretty as I wanted it, but it worked.<br \/>\n<!--break--><br \/>\nBut the new menu works much better. It will cut down the size of user levels to under 300k or so, and there won&#8217;t be any zip files to deal with (to include both the level file and the BMP)&#8230;just download the level file. Functionality over style.<br \/>\n<!--break--><br \/>\nI can&#8217;t wait to finish this game, as it&#8217;s winding down to the bare essentials. So close to the finish line. Woo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the last few weeks of making Spirits, I was wrapping things up, but I knew I was leaving the worst for last. No, I thought, better I get this out of the way first. So I drew it out on a notebook. Did more work in my sketchbook during workin&#8217; at Starbucks. Nothing seemed to fit. I started to finish up all the loose ends in Spirits. Today, I finished the Free Play mode which left&#8230;the Puzzle menu redesign.<a href=\"https:\/\/www.vertigogaming.net\/blog\/?p=58\" class=\"read-more\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[1,7],"tags":[],"class_list":["post-58","post","type-post","status-publish","format-standard","hentry","category-game-maker","category-spirits-of-metropolis"],"_links":{"self":[{"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=58"}],"version-history":[{"count":0,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/58\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}