Radisson Hackathon: Postmortem

Mini Sim Hotel (click to play demo)

First, I must say this was a much better project that I thought it would be. I'm very happy with how it all turned out! For more general information about the demo, visit my projects page. This post will discuss the development process, what went right, and what went wrong.

Development Process

The dev process on this project went very smoothly. I started initially on the graphics, spending the most amount of my time in that area. Only two days were given to the programming, and I think the demo turned out really well considering.

This was my first project using melonJS 0.9.7 (currently in beta) and CocoonJS. For the record, I wasn't too interested in CocoonJS at first. It seemed like Safari should be able to do everything CocoonJS was capable of, and more! In reality, both have strengths and weaknesses. For one thing, audio support in Safari SUCKS! Even on iOS 6.1, where it was supposedly improved (and support for Web Audio API was added). In CocoonJS, audio just plain works. No complaints there. CocoonJS also allows locking screen orientation, which can be imperative to game design.

On the negative side, CocoonJS has incomplete support for the HTML5 canvas context API (I discovered that it does not support the createImageData method, and also reverse winding on paths does not work correctly). The current release (on iOS store) does not support XML parsing.

New features in melonJS were quite important to this project, too! First, the new support for JSON-format maps is the only way to get the game working in CocoonJS; the older map format is XML. The second useful feature is a new me.Renderable class, which I made extensive use of. This class supersedes me.Rect as a base class for any object that needs to draw.

Finally, touch event support in melonJS is excellent, and it multiplexes with mouse events, so you can use the same code on desktop and touch devices! This made me so happy to get working well during development on desktop, and then I never had to worry if it would stop woking on touch devices. (Literally cuts testing time in half because when it works on desktop, you know it also works on touch devices!)

The simple collision detection in melonJS also saved the day. I wanted to have the people do something, so they don't look so static, like part of the background. My first iteration was a one-liner that made them move left-and-right using a sine wave function. But it looks really poor.

Then I remembered I had added a collision layer "just in case", and quickly threw together a function to set their velocities to random numbers for a random duration. The effect is quite nice, for being so simple!

The very last thing I did was adding mock information window when tapping on people. Currently only two sprites will do this. There's also a "financials" info window when you tap the money counter in the corner. These were made for the presentation, explaining how you might manage the staff and guests in the hotel.

What Went Right

• I'm super happy with the art. It's tedious work, so it's always nice to see decent results. Especially for a coder (I am NOT an artist). The colors clash, some details could be drawn far better, but it's good for what it is.
• The intro screen is my favorite thing about this project! I built it originally during the Github Game-Off. So that was pretty much copy-paste and I had an intro! This time I decided to add sound effects to it, which was my original intention anyway. The sounds add the perfect punch that was lacking. It feels nice and old school now!
• I'm also pleased with the simple subtle effects that I added, and how they increased the impact of the presentation.
• The first effect is seen in the title screen; the Radisson logo slowly bobs around as if it's floating in water. And the background also slowly scrolls by. This was all done in just about 5 lines of code total; 2 lines for the scrolling background, and a few more for adjusting the logo position and rotation with a couple of sine waves.
• The other effect is the "ratio" applied to the background image on each of the four hotel floors. This gives a bit of a sense of depth as you scroll around the map. This was done entirely by adding a property to the layer in Tiled. Awesome!
• Surprisingly, I did accomplish every goal I set for this project. However ...

What Went Wrong

• I had a "nice to have" goal to demonstrate the construction phase of the game. I just didn't have time for it. That would have been the golden ticket to winning the grand prize for sure!
• I spent way too much time on art. Unfortunately I didn't have an artist working with me, so it was either do my own art, or snatch some from a website. Not wanting to risk disqualification at this hackathon, I decided to just do my own art. It took a week-and-a-half out of my build time, leaving me with only two days for programming and sound work.
• The music is forgettable. It was generated by Auto-Tracker Bottom Up, which I HIGHLY recommend for placeholder music, but not so much for demos and presentations!

What To Do Next Time

• Need a dedicated artist.
• Need a dedicated sound designer/musician.