{"assets":[{"original":"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/map2.png","local":"\/data\/posts\/2014\/12\/af9bbc3f7822b10a61501062944326a3.png"}],"author_link":"author\/fullmontis\/","author_name":"fullmontis","cat":"LD #31","categories":["LD #31"],"comments":[],"epoch":1418100000,"event":"LD31","likes":7,"metadata":{"p_key":"82506","p_author":"fullmontis","p_authorkey":"0","p_urlkey":"293238","p_title":"Behind the Fog \u2013 Postmortem","p_cat":"LD #31","p_event":"LD31","p_time":"1418100000","p_likes":"7","p_comments":"0","p_status":"WAYBACK","us_key":null,"us_name":null,"us_username":null,"event_start":"1417737600","event_key":"26","event_name":"LD31"},"source_url":"2014\/12\/09\/behind-the-fog-postmortem\/","text":"<p>Three days ago, there was a naive me who believed things would go smoothly this time around.<\/p>\n<p>\u201cAfter 5 Ludum Dares, now I know everything. I cannot do anything wrong!\u201d.<\/p>\n<p>Oh, myself. I want to punch you in the coclea, so much.<\/p>\n<p>So the Ludum Dare came and went, and after some trouble and some fun moments, there is a little, shiny game in my lap, <a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-31\/?action=preview&amp;uid=21736\">Behind the Fog<\/a>. It is so unpolished, so crappy, and yet I like it. Ludum Dare never fails to deliver on accomplishment.<\/p>\n<p>Now it\u2019s the time to look back to the past and see the lights and darks of this weekend, and hopefully learn something for the future.<\/p>\n<hr\/>\n<h1 style=\"text-align: center\"><span style=\"color: #000000\">Day 1<\/span><\/h1>\n<h2 style=\"text-align: center\">Or: How to start on the wrong foot<\/h2>\n<p>\u00a0<\/p>\n<p>Woke up at 8:30 am. I go on and look at the theme. And I feel confused. Is that even a theme?<\/p>\n<p>I scowled at the screen for a few minutes, then I thought I might as well start thinking about something.<\/p>\n<p>I jotted down a few ideas on a piece of paper.<\/p>\n<p>Then, a cool little idea came foward. What about a multiple room point and click game that fits all on one screen? I really enjoyed the idea, the programming looked simple enough, so I open up Emacs and start devving away.<\/p>\n<p>A few hours later, I have a working engine, and I feel like this LD is going to be a cakewalk.<\/p>\n<p>Then I started working on the graphics. And here the shit hits the fan.<\/p>\n<p>I didn\u2019t consider the amount of graphics I had to make for such a game. Even if the screen is small, the amount of rooms was high, and drawing graphics and story and puzzles that fit all of them was just too much to ask for 48 hours of work.<\/p>\n<p>I could make a very simple room and use it as a template for the rest, but then the main purpose of the game, puzzles and room diversity, would fall.<\/p>\n<p>I could do instead a single room point and click. This seemed like a better idea, but then I discarded it because I hate myself. So, multiple room point and click it is. Time to work those graphics up.<\/p>\n<p>I open up Krita, and start drawing, then I close it because I think that traditional graphics\u00a0 would take too much time.<\/p>\n<p>I open up Paint.NET, then I close it cause I don\u2019t know shit about doing pixel art.<\/p>\n<div class=\"wp-caption aligncenter\" id=\"attachment_423224\" style=\"width: 310px\"><a href=\"\/data\/posts\/2014\/12\/af9bbc3f7822b10a61501062944326a3.png\"><img alt=\"map2\" class=\"wp-image-423224 size-medium\" height=\"225\" sizes=\"(max-width: 300px) 100vw, 300px\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/map2-300x225.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/map2-300x225.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/map2.png 400w\" width=\"300\"\/><\/a><p class=\"wp-caption-text\">It shows<\/p><\/div>\n<p>I open up Inkscape, then I close it since vector graphics don\u2019t fit the idea I had for the game well.<\/p>\n<div class=\"wp-caption aligncenter\" id=\"attachment_423223\" style=\"width: 310px\"><a href=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/map.png\"><img alt=\"map\" class=\"wp-image-423223 size-medium\" height=\"225\" sizes=\"(max-width: 300px) 100vw, 300px\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/map-300x225.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/map-300x225.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/map-550x412.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/map.png 800w\" width=\"300\"\/><\/a><p class=\"wp-caption-text\">Nope, not working<\/p><\/div>\n<p>Then I realize that I\u2019m an idiot by not considering the graphical part into the equation from the start. My mistake was believing that programming would be the biggest hurdle, when in fact graphics are a much bigger obstacle, especially for a point and click game.<\/p>\n<p>Also, I guess that this problem stemmed from my inexperience in doing graphics for games. I never worked much on this, and it shows.<\/p>\n<p>In the evening I leave my work with a few unfinished backgrounds and a bad taste in my mouth.<\/p>\n<hr\/>\n<h1 style=\"text-align: center\"><span style=\"color: #000000\">Day 2<\/span><\/h1>\n<h2 style=\"text-align: center\">Or: The Fall And Rise<\/h2>\n<p>\u00a0<\/p>\n<p>Things start out grim.<\/p>\n<p>I boot up my game and for some weird reason it gives an error I\u2019ve never seen in an HTML5 game. I stare at the screen, in disbelief. I watch my git log, and it looks like the last commit was more than 200 lines ago.<\/p>\n<p>I stare at my half finished assets.<\/p>\n<p>\u00a0<\/p>\n<p>I give the middle finger to the screen as hard as myself (in reality, that one is pointing at me). Alright, let\u2019s start from scratch. New day, new idea. Fuck it. I have more than 18 hours to spare.<\/p>\n<p>I spend the rest of the morning brainstorming for ideas. It is not a good feeling when you have less than a day on the clock and still no idea of what to make.<\/p>\n<p>Then, a cool, simple idea came forth. What about an exploration game? A game where you had a map the size of the screen and had to explore it? The idea intrigued me, and it was much simpler to implement than any other idea I didn\u2019t have.<\/p>\n<p>I developed a quick engine from scratch and it worked very smoothly. (I also discovered that HTML5 canvas has an excellent masking library, a little hard to get into but versatile).<\/p>\n<p>The graphics here weren\u2019t much of a problem, since it meant to draw a simple map. I booted up Inkscape and breezed through it. I wanted to get an old treasure map feel, and somehow it came out quite nice. It was both fun and fast, which is a first for this LD.<\/p>\n<p class=\"size-medium wp-image-423228\">So I have the map, now time to implement the collisions\u2026 Wait, fuck. I drew a map without considering at all a possible grid for collisions. How the hell do I implement a collision grid quickly? How do I implement logic so that collisions can disappear and appear?<\/p>\n<p>This may sound obvious to some of you, but it took me a while before I remembered that the excellent map editor Tiled exists and is at my disposal. I didn\u2019t believe I could use it at first cause last time I used it it didn\u2019t have json export, so it wasn\u2019t useful. But it looks like that the later version implements it. I was creaming my pants with joy.<\/p>\n<p>Implementing the collisions was a breeze, althought quite long.<\/p>\n<p>\u00a0<\/p>\n<div class=\"wp-caption aligncenter\" id=\"attachment_423228\" style=\"width: 310px\"><a href=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/tiled.png\"><img alt=\"Based Tiled\" class=\"size-medium wp-image-423228\" height=\"222\" sizes=\"(max-width: 300px) 100vw, 300px\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/tiled-300x222.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/tiled-300x222.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/tiled-550x407.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/tiled.png 818w\" width=\"300\"\/><\/a><p class=\"wp-caption-text\">Based Tiled<\/p><\/div>\n<p>\u00a0<\/p>\n<p>But time flew by and didn\u2019t realize it. It was midnight and I still had to implement logic, story and otehr stuff, I was tired and there were only 4 hours before the end of the compo. I could have stretched it but I didn\u2019t feel it was worth it. So instead I just dropped the compo and aimed directly for the JAM.<\/p>\n<p>Sleeping never felt so sweet.<\/p>\n<hr\/>\n<h1 style=\"text-align: center\"><span style=\"color: #000000\">Day 3<\/span><\/h1>\n<h2 style=\"text-align: center\">Or: The Good Ending<\/h2>\n<p>\u00a0<\/p>\n<p>The 8th of decemeber is a festivity here in Italy, so I had plenty of time to clean up my game.<\/p>\n<p>The morning I spent doing some house chores. I went on with the game in the afternoon. Not much to say here, things went smooth and no real problems arised. The game was \u201cdone\u201d before the deadline, as much as a game done in 3 days can be done.<\/p>\n<p>And here it is. Behind the Fog. It\u2019s real, and you can play it <a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-31\/?action=preview&amp;uid=21736\">here<\/a>!<\/p>\n<p><a href=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/29.png\"><img alt=\"Behind the Fog 2\" class=\"aligncenter size-large wp-image-421520\" height=\"408\" sizes=\"(max-width: 550px) 100vw, 550px\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/29-550x408.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/29-300x222.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/29-550x408.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/12\/29.png 800w\" width=\"550\"\/><\/a><\/p>\n<hr\/>\n<p>So yeah, that was a wild weekend. I\u2019ve learned a lot, which to me was the most important thing. And I also have a game to show for it! I hope you will play my game and ejoy it as much as I enjoyed making it.<\/p>\n<p>Now for the best part: playing stuff! I have already played some stuff and it\u2019s wicked. Can\u2019t wait to see more.<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>Tags: <a href=\"http:\/\/ludumdare.com\/compo\/tag\/behind-the-fog\/\" rel=\"tag\">behind the fog<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/html5\/\" rel=\"tag\">html5<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/javascript\/\" rel=\"tag\">javascript<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/js\/\" rel=\"tag\">js<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/point-and-click\/\" rel=\"tag\">point-and-click<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/postmortem\/\" rel=\"tag\">postmortem<\/a><\/p>","time":"December 9th, 2014 4:40 am","title":"Behind the Fog \u2013 Postmortem","title_was_empty":false}