P27: Postmortem
Enough of the minimal posts, it’s time for introspection!

What went right:
Minimal theme. This was my favorite theme so I was very happy to see it win. It’s specific, yet can influence art, music, and game design. Like everyone else, I rushed to the wikipedia entry and stared at Mondrian’s squares. I read that minimalist art didn’t have to say anything in particular but existed just to look good. I usually have a story and theme linking everything together but with minimalism I didn’t have to worry about that and could remove all meaning and still fit the theme. At one point during the weekend I read someone’s post that said that minimalism was the best theme ever because programmer art was the perfect art for it. I have to agree.
Quick design conecept. While taking in the internet’s examples of minimalist art, I pictured in my head a moving line and manipulating it with a button press. Depending on the location of the goals, the player would end up with interesting minimalist pictures. To keep things fun, I thought of adding pickups to modify what the button does and laying out levels that require obtaining the pickups in a certain order. After I had my prototype I noticed how crazy it was to have the button down and button up work differently. And that’s pretty much all I needed. I think Ludum Dare works well when you have a good design from the beginning that you can focus on and it flops when you start with too general of an idea and have to rush to design something coherent at the end. I got very lucky this time that my design ideas ended up working out.
SVG. Rather than use the bitmap graphics of a canvas library, I chose the Raphael SVG library for web based vector graphics. I decided on SVG because minimalism made me imagine a very clean game. With vector graphics you can rotate and scale to any size without worrying about jaggies or pixilation. It is also very easy to manipulate colors and outlines since you don’t need to create new graphics but simply change the stroke and fills. Unfortunately, I didn’t get to use much of this in the end, but ever since I came up with the design I knew I wanted to take P27 past the Ludum Dare weekend and try and get a complete fully polished game out of it. Hopefully the time I lost implementing SVG will pay off in the future.

What went wrong:
SVG. You probably saw this coming. Pretty much all of the problems and time sinks I had were the result of choosing SVG. I’m going to break them down further in the next items, but know that SVG was the root of them all.
Rolling my own. There aren’t any SVG game engines out, just graphics libraries. This meant I had to program all of the pieces that make a game a game for myself. P27 isn’t very complicated so it wasn’t too bad, but I did lose time on tracking movement and position, handling collisions (thank GOD Raphael computes bounding boxes), and level setup.
Sweating the small stuff early. Since I hadn’t done an SVG game before I had no idea how it would perform. My initial tests showed ugly jitteriness on the iPad. That had me worried that most users wouldn’t get the smooth animation I was looking for. I could fix this by swapping out Raphael’s setInterval animation with some custom css transition code, but that was risky and did I have the time? What about modifying the animation after it had started? SVG animation is mainly used today for interactive pie charts and bar graphs, could I stop it in response to an button press event and change the line’s direction? I think I spent all of the time I saved by coming up with an idea early by worrying over the perfect execution of it. I was afraid of going too far down the road with SVG and then finding some impossibility that would cause me to start all over again so before I started I spent too much time researching every little thing to make sure it would work. In LD you don’t have time to worry, you have to go with gut decisions. Before I started I spent too much time in my head and not enough time putting bits to processors.
That damn line!. My final worry came from the moving line I saw in my head. Even though I already had a dot moving and changing direction, I wanted a revealing line instead. I wasted hours thinking about how to do it and researching how to reveal an SVG path. I found some solutions, but they all sounded too slow and time consuming and I once again I found myself pre-optimizing in my brain. The quick solution I ended up with did turn out okay, and I suppose one could argue that a point is more minimal than a line, but I want a line damnit!

If Ludum Dare were a video game it would be a resource management game. You would have a finite amount of the time resource and have to figure out how to best distribute it among thinking, coding, polishing, making art, and making sounds. Last weekend I spent too much time on thinking and not enough on coding and sound (I will gladly admit the music ended up pretty awful).
In the end, however, I am very proud of the result. It fits the theme in art, music, and design and more importantly can be entertaining to play. The comments from the LD community have been very inspiring. I have a goal of spending the next 30 days fixing it up and turning it into a polished little product (I think it would be perfect for touch control on a tablet or phone). Who know, maybe I’ll even get that revealing line I’ve been looking for.
P27
by hi-scor.es
1 programmer
946 lines of javascript
Libraries:
- Raphael.js (SVG)
- Buzz.js (HTML5 sound)
- Requirejs
- Font-Awesome
- jquery (who doesn’t use jquery?)
Tools:
- Sublime Text 2
- Chrome