{"assets":[],"author_link":"author\/ddrkirbyisq\/","author_name":"DDRKirby(ISQ)","cat":"LD #29","categories":["LD #29"],"comments":[],"epoch":1399243380,"event":"LD29","likes":12,"metadata":{"p_key":"80529","p_author":"DDRKirby(ISQ)","p_authorkey":"0","p_urlkey":"289646","p_title":"Ripple Runner Post-Mortem","p_cat":"LD #29","p_event":"LD29","p_time":"1399243380","p_likes":"12","p_comments":"0","p_status":"WAYBACK","us_key":null,"us_name":null,"us_username":null,"event_start":"1398384000","event_key":"22","event_name":"LD29"},"source_url":"2014\/05\/04\/ripple-runner-post-mortem\/","text":"<p>Hey there! \u00a0DDRKirby(ISQ) here with my post-mortem writeup for my chiptune rhythm game, <strong><a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-29\/?action=preview&amp;uid=7285\">Ripple Runner<\/a><\/strong>! \u00a0Please check it out if you haven\u2019t already done so!<\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 471px\"><a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-29\/?action=preview&amp;uid=7285\"><img alt=\"\" height=\"346\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/compo2\/342546\/7285-shot0.png\" width=\"461\"\/><\/a><p class=\"wp-caption-text\">The title screen for Ripple Runner \u2013 Click to play!<\/p><\/div>\n<p>\u00a0<\/p>\n<p>This is already my <em>7th<\/em> time entering Ludum Dare\u2026I\u2019m really getting to be an old veteran now! \u00a0Last time around I teamed up with my artist friend xellaya and made a puzzle platformer called <a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-28\/?action=preview&amp;uid=7285\">Match Girl<\/a> for LD28. \u00a0You can read the post-mortem for Match Girl <a href=\"http:\/\/www.ludumdare.com\/compo\/2014\/01\/01\/match-girl-post-mortem\/\">here<\/a>, if you want to see how that turned out.<\/p>\n<p>This time I ended up working by myself and entered the 48hr division. \u00a0I came\u00a0up with an 8-bit styled (more like 9-bit, really) musical runner game, with a lot of similarities to Bit.Trip Runner. \u00a0(Imagine what Canabalt would be like if it were a rhythm game) \u00a0I\u2019m really happy with the result, and it seems like other people are too! \u00a0Here\u2019s what the game looks like in action:<\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 434px\"><img alt=\"\" height=\"318\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/compo2\/342546\/7285-shot3.png\" width=\"424\"\/><p class=\"wp-caption-text\">A shot from stage 3, showcasing the spike mechanic<\/p><\/div>\n<p>Without further ado, let\u2019s dive right into what went well and what didn\u2019t go so well.<\/p>\n<p>\u00a0<\/p>\n<p><span style=\"text-decoration: underline\"><strong>What went well:<\/strong><\/span><\/p>\n<p>\u00a0<\/p>\n<p><strong>Workflow and Experience<\/strong><\/p>\n<p>I feel like I\u2019ve been saying this ever since <a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-27\/?action=preview&amp;uid=7285\">Hyper Furball<\/a>, but the process of taking a game from start to finish has gotten really streamlined now, and now that I\u2019ve got all of the basics down pat, I get to spend most of my work time on implementing the cool awesome things that are specific to the individual game, as opposed to writing lots of boilerplate code and worrying about menus, collision detection, how to recycle entities, particle emitters, screen flashes, etc. \u00a0Ever since Hyper Furball, I\u2019ve sort of had the same basic formula for the intro, title screen\/menu, and jukebox as well, and I think that\u2019s been working fantastically. \u00a0Not only is it really easy to reuse the code from before and just adjust\u00a0the menu slightly (as well as put in the appropriate background elements), but it also ties my works together aesthetically. \u00a0Having the intro there (complete with shrot musical ditty) really gives it a sense of polish, and I\u2019m really beginning to enjoy how I have it for each game I make.<\/p>\n<p>The one downside for this is that since I\u2019ve been copying code from my previous LD projects, all of it has a bunch of random hacks and terrible coding that I did in the 11th hour when all you care about is tweaking one thing or fixing one issue. \u00a0So far this has been harmless, but if I continue to do it without cleaning any of it up, I\u2019m bound to run into issues sooner or later. \u00a0One example: I have a variable for a \u201cblackImage\u201d that I used for fading the screen in\/out to black from Match Girl and Hyper Furball, but I decided that I wanted screenfades to white for Ripple Runner, so now my \u201cblackImage\u201d variable points to\u2026a <em>white<\/em> image. \u00a0Which, of course, is totally fine, because that image is only used in the title screen and it was much easier to just keep the variable name but switch the content rather than having to actually rename the variable and catch all of the places where it was used, etc etc. \u00a0Anyways, sometime in the future it would be ideal if I could avoid copying over all the hacks from existing projects\u2026<\/p>\n<p>\u00a0<\/p>\n<p><strong>Concept and Brainstorming<\/strong><\/p>\n<p>This is my favorite idea that I\u2019ve ever had for an LD game, and I was actually REALLY excited when it all started\u00a0coming together and I could see that it was going to work out. \u00a0Because of various factors (which I\u2019ll talk more about later), I actually spent quite a lot of time brainstorming different ideas for the theme this time (\u201cBeneath the Surface\u201d) and coming up with a bunch of different ideas, including a FEZ-like game that focused on water reflections, an extreme fishing game, a rhythm-based digging game, and a sort of 2D platformer version of Minesweeper (think Mr. Driller meets Minesweeper). \u00a0In the end I think I was inspired to create a rhythm game by stumbling upon\u00a0<a href=\"http:\/\/forums.tigsource.com\/index.php?topic=30628.0\">Rhythm Doctor<\/a>\u00a0in the few days leading up to LD, as I was brainstorming what kinds of games I would want to make this time around. \u00a0Seeing that someone else had successfully made a music game using flashpunk was actually really encouraging\u2013I now knew that it was possible! \u00a0If I hadn\u2019t seen that, I probably would have shied away from the concept, as music games are notoriously hard to really get right (I know\u2013I\u2019ve worked on one in the past as well).<\/p>\n<p>Because I had so much time to brainstorm, I actually had almost the entire gameplay visualized in my head (and on my scratch paper) before I even started working. \u00a0I had it all thought out, including questions such as \u201cdo I want to make the tempo stay constant or speed up throughout a song?\u201d, \u201chow exactly do I want to handle syncing the gameplay to the audio?\u201d (easy\u2013I simply mapped the player\u2019s x position to the current sound position and placed everything else accordingly), \u201cwhat art style do i want?\u201d, and \u201chow exactly do I want the musical cues to be integrated?\u201d \u00a0I knew that the idea was fairly interesting, and relatively simple to implement assuming my few basic assumptions about the flashpunk audio engine would work out (they did). \u00a0Here\u2019s what an early development screenshot looked like:<\/p>\n<div class=\"wp-caption aligncenter\" id=\"attachment_360811\" style=\"width: 310px\"><a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/Screenshot-2014-04-26-19.21.07.png\"><img alt=\"An early development screenshot, complete with derpy placeholder sprite\" class=\"wp-image-360811 size-medium\" height=\"242\" sizes=\"(max-width: 300px) 100vw, 300px\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/Screenshot-2014-04-26-19.21.07-300x242.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/Screenshot-2014-04-26-19.21.07-300x242.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/Screenshot-2014-04-26-19.21.07-550x444.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/Screenshot-2014-04-26-19.21.07.png 816w\" width=\"300\"\/><\/a><p class=\"wp-caption-text\">An early development screenshot, complete with derpy placeholder sprite<\/p><\/div>\n<p>As you can see, it\u2019s actually not too far off from the final product! \u00a0I even already knew I was going to do the watery displacement effect for the reflected half of the screen, so that was already in there at this point. \u00a0I hadn\u2019t yet thought of the spike concept, but even with just jumping and swapping it was already becoming apparent to me that the game was gonna be a success. \u00a0It\u2019s also good to note that this was probably my simplest LD idea yet in terms of execution complexity, which definitely helped out. (I finally hit my goal of not trying to bite off more than I should\u00a0chew!)<\/p>\n<p>I think the in-game tutorial was one of the best gameplay design decisions as well, and definitely beats all of my other games in terms of easing new players into the game mechanics.<\/p>\n<p>\u00a0<\/p>\n<p><strong>Art Style<\/strong><\/p>\n<p>At some point during my concepting, I decided that I was going to try out using a 4-color palette for the game. \u00a0I knew I wanted something that would look good, yet also be relatively easy for me to do, since I\u2019m pretty far from proficient in my art and pixeling skills. \u00a0This turned out to be a <em>great decision<\/em>, as all of the graphics in the game were really simple for me to draw, yet the end result looked really great! \u00a0Kudos to <a href=\"http:\/\/flashygoodness.com\/games\/plant-cat\/\">Plant Cat: First Blossom<\/a>\u00a0by flashygoodness and friends for getting me inspired to try this art style out. \u00a0I also decided to go with a greenish hue, as a throwback to the good old days of the original Game Boy. \u00a0This also made it easy for me do the hue-shifting effect that happens at certain checkpoints.<\/p>\n<p>To illustrate just how simple this made my life, here\u2019s what the three different layers of the background look like individually:<br\/>\n<a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_1.png\"><img alt=\"backdrop_1\" class=\"aligncenter wp-image-360824 size-medium\" height=\"90\" sizes=\"(max-width: 300px) 100vw, 300px\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_1-300x90.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_1-300x90.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_1.png 500w\" width=\"300\"\/><\/a><\/p>\n<p><img alt=\"backdrop_3\" class=\"aligncenter wp-image-360827 size-medium\" height=\"90\" sizes=\"(max-width: 300px) 100vw, 300px\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_3-300x90.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_3-300x90.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_3.png 500w\" width=\"300\"\/><img alt=\"backdrop_2\" class=\"aligncenter wp-image-360825 size-medium\" height=\"90\" sizes=\"(max-width: 300px) 100vw, 300px\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_2-300x90.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_2-300x90.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/backdrop_2.png 500w\" width=\"300\"\/>Dirt simple! \u00a0All I had to do was draw a solid shape with some variations at the top edge and make sure that it wrapped around nicely, repeat it for another shade, and then draw some super simple pixel clouds. \u00a0The parallax scrolling effect is very simple to do in Flashpunk as well, by just making each image into an automatically-wrapping Backdrop that scrolls at a different rate.<\/p>\n<p>Then I just had to add a layer for the water, which only shows in the bottom half:<\/p>\n<p><a href=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/water.png\"><img alt=\"water\" class=\"aligncenter size-medium wp-image-360829\" height=\"225\" sizes=\"(max-width: 300px) 100vw, 300px\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/water-300x225.png\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/water-300x225.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2014\/05\/water.png 400w\" width=\"300\"\/><\/a><\/p>\n<p>If you\u2019re paying close attention during the game or at the title screen, you\u2019ll notice that the white lines and dots on the surface of the water actually move, sort of imitating the bubbles and lighting that the surface of water makes in real life. \u00a0I actually used two separate layers of white lines for this and made them scroll at different rates, so that it looks dynamic, as opposed to seeming like just a single image that\u2019s scrolling.<\/p>\n<p>I implemented the wavy water reflection effect by modifying the \u201cGlitch\u201d filter in <a href=\"https:\/\/github.com\/azrafe7\/punk.fx\">punk.fx<\/a> to be based on a sin function instead of shifting lines at random. \u00a0It\u2019s a simple displacement effect that just shifts each horizontal line of pixels by a different amount, but it works really well!<\/p>\n<p>Finally, I used a hue shift effect for the different sections of music, also provided by punk.fx. \u00a0Here\u2019s another example of the final result:<\/p>\n<p><img alt=\"\" class=\"aligncenter\" height=\"229\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/compo2\/342546\/7285-shot2.png\" width=\"306\"\/><\/p>\n<p>I\u2019m really pleased with how the running animation turned out for my little guy too, despite being not\u00a0confident at all that I could get that right. \u00a0I had no idea what I wanted to make my character look like at first, and I actually still don\u2019t know quite what it is (some kind of squid-like aquatic being??), but it ended up working out perfectly.<\/p>\n<p>I should note that even though I said I\u2019m using a 4-color pallete, the final visual result of the game isn\u2019t really constrained to that, because of the reflection effects and transparency and all that. \u00a0Hence, the visual style of the game is very much \u201c9-bit\u201d, just like my music is\u2013in other words, it\u2019s derived from old 8-bit games, but doesn\u2019t emulate them perfectly, and instead allows for some extra capabilities.<\/p>\n<p>\u00a0<\/p>\n<p><strong>Music and Audio\u00a0<\/strong><\/p>\n<p>Well, I don\u2019t really know what I can say about this at this point, as making soundtracks like this is standard fare for me nowadays. \u00a0This game in particular was REALLY fun for me to compose for, since I got to have fun involving the player in the song as well. \u00a0I really enjoyed it, and it was helpful to write it as I was coding the game, keeping in mind the spaces where I wanted to have tutorials and checkpoints and whatnot. \u00a0People are really digging the\u00a0music already, it seems <img alt=\":)\" class=\"wp-smiley\" src=\"http:\/\/ludumdare.com\/compo\/wp-includes\/images\/smilies\/simple-smile.png\" style=\"height: 1em; max-height: 1em;\"\/><\/p>\n<p>Be sure to check out the soundtrack at my bandcamp site, too! \u00a0<a href=\"http:\/\/ddrkirbyisq.bandcamp.com\/album\/ripple-runner-original-soundtrack\">http:\/\/ddrkirbyisq.bandcamp.com\/album\/ripple-runner-original-soundtrack<\/a><\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 318px\"><a href=\"http:\/\/ddrkirbyisq.bandcamp.com\/album\/ripple-runner-original-soundtrack\"><img alt=\"\" height=\"308\" src=\"http:\/\/f0.bcbits.com\/img\/a0487677897_10.jpg\" width=\"308\"\/><\/a><p class=\"wp-caption-text\">The Ripple Runner OST \u2013 click to download!<\/p><\/div>\n<p>\u00a0<\/p>\n<p><span style=\"text-decoration: underline\"><strong>What didn\u2019t go so well:<\/strong><\/span><\/p>\n<p>\u00a0<\/p>\n<p><strong>RL Stuff Eating into LD Time<\/strong><\/p>\n<p>This certainly isn\u2019t the first time that I\u2019ve had real life issues distract me or come into conflict with Ludum Dare, so it\u2019s not like this was any surprise to me, but sheesh\u2026just once I\u2019d like to just do a Ludum Dare without getting sick or being mentally exhausted or having my timeslot screwed over in some way. \u00a0This time around I left my Friday dance event early so that I could have a bit more time to focus on LD (I was too distracted to really think about anything else anyways), but as luck would have it I needed to go perform for something on Saturday at around noon, so that ate up the first half of my Saturday. \u00a0I brought myself a pen and paper so that I could spend my downtime brainstorming ideas and concepts for the game, which actually ended up working out pretty nicely, but in the end I didn\u2019t get to sit down at my computer and start working until 4:30PM on Saturday, which is over 20 hours into the 48 hour timeframe. \u00a0Soooo yeah, I kind of got screwed over in terms of time. \u00a0On the plus side, having all my ideas planned out as well as being all anxious from having lost out on a half-day of work made me blaze through the initial dev work and I had the basic game up and running very quickly (after a few hours of work), so it wasn\u2019t the end of the world\u2026but I\u2019m pretty sure I would have been able to program more content and make more songs if it wasn\u2019t for me having lost out on all of those potential work hours.<\/p>\n<p>Here is a good time to note that I actually didn\u2019t implement the spike mechanic until preeettty late into development (At t-minus 5 hours or something like that). \u00a0After making the first two stages, I was thinking to myself that it would really be nice if I had a third mechanic, as only having jumping and swapping was fun but also not quite that interesting from a gameplay perspective. \u00a0Three is kind of the magic number for having different things to concentrate on, as I know from playing <a href=\"http:\/\/puzzlejuicegame.com\/\">Puzzlejuice<\/a>, so I was looking for something different to do. \u00a0In the end I came up with two different ideas\u2013one was the spike\/flip upside-down mechanic that I ended up implementing, and the other was that I was going to have the Jump button do an attack or kick of some sort if you pressed it in midair, so that you\u2019d have to press jump twice in quick succession to get past certain obstacles (breakable walls or something). \u00a0I wanted to implement both, but in the end didn\u2019t have time, so I just went with only the spikes. \u00a0I knew that that was the better of the two mechanics anyways, because holding a button down is a different feeling than the button presses for jump and ripple, both mentally and from a tactile sense too. \u00a0The jump-kick idea would let me introduce more eighth-note rhythms into my songs, but I already kind of had that idea going with the jump-ripple combo, so it didn\u2019t -really- introduce anything new.<\/p>\n<p>\u00a0<\/p>\n<p><strong>Not Enough Content<\/strong><\/p>\n<p>Like I mentioned above, a direct corollary of having less time was only being able to make 3 songs for the game, even though I had definitely wanted to make more. \u00a0Programming in the actual stages was actually quite time-consuming, as I had to make sure all of the platforms and obstacles were mapped to the appropriate times in the music, as well as placing special events such as checkpoints, hue shifts, changes in scrolling speed, and tutorials.<\/p>\n<p>\u00a0<\/p>\n<p><strong>A Weird FlashDevelop Issue<\/strong><\/p>\n<p>Thankfully this wasn\u2019t actually -too- bad, but every once in a while (typically when I went to import a source file from Match Girl or something and was trying to rip out all of the Match Girl-specific parts), FD would have problems with the compile process\u2013it would either fail to detect changes, or just tell you that the compile succeeded and then try to run the resulting binary, when in actuality the compile was supposed to fail (because of a missing import or something). \u00a0Again, this happened only once or twice, and I had some workarounds, but it was a bit of an annoyance when it did happen. \u00a0Other than that, my development was actually really smooth this time around, with no real surprises anywhere. \u00a0I remember having issues trying to get the ripple particle effects working properly, but I ended up figuring that out without too much pain.<\/p>\n<p>\u00a0<\/p>\n<p>Overall, Ripple Runner was a huge success, personally, and I\u2019m really looking forward to what you all think of it as well. \u00a0Again, please <strong><a href=\"http:\/\/www.ludumdare.com\/compo\/ludum-dare-29\/?action=preview&amp;uid=7285\">play and rate<\/a><\/strong> if you haven\u2019t done so already!<\/p>\n<p><strong>I\u2019m also definitely looking into working on a post-compo version of Ripple Runner<\/strong>, cleaning up a few things like adding the ability to pause the game, etc. \u00a0Mostly, though, I just want to add more songs, because 3 just isn\u2019t enough! \u00a0I also want to give songs that have a wider difficulty range\u2026the 3rd song isn\u2019t nearly hard enough to give players a *real* challenge. <img alt=\":)\" class=\"wp-smiley\" src=\"http:\/\/ludumdare.com\/compo\/wp-includes\/images\/smilies\/simple-smile.png\" style=\"height: 1em; max-height: 1em;\"\/> \u00a0Stay tuned for news on the post-compo version\u2013I\u2019m hoping to work on it over the next couple weeks!<\/p>\n<p>Tags: <a href=\"http:\/\/ludumdare.com\/compo\/tag\/flash\/\" rel=\"tag\">flash<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/flashpunk\/\" rel=\"tag\">flashpunk<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/ld29\/\" rel=\"tag\">ld29<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/post-mortem\/\" rel=\"tag\">post-mortem<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/postmortem\/\" rel=\"tag\">postmortem<\/a><\/p>","time":"May 4th, 2014 10:43 pm","title":"Ripple Runner Post-Mortem","title_was_empty":false}