Detective Case and Clown Bot: pixel art, mechanics and story - some kind of Post-Mortem (PART 1)
polycounter lvl 5
Hey there, fine people at Polycount.
My name is Filipe Duarte Pina and I am the creator of Detective Case and Clown Bot games. I am also the co-founder of Nerd Monkeys Ltd. I have been making video games for around 19 years but only started professionally around 12 years ago.
This post is a Post-Mortem on the art done for the 2 games of Detective Cases and Clown Bot, and how it all came to be. It is done in 2 posts / 2 parts and they should be read/seen in order.
Also, SPOILERS! If you haven’t played these games, don’t read or look at the pictures!
It spoils the games in such a way that you wouldn’t believe it! Like, TOTALLY!
Originally the idea was to do some sort of pixel art making-off but I had to include some history on the decision-making process, otherwise some things wouldn’t make any sense. (And because of that, expect lots of words in the middle of images!)
So, first of all, it is important to say that making video games is really hard, especially when there are constraints. My career hasn’t been an easy one and my art has suffered because of it. Still, I got to make the games I wanted within these constraints and they came out (almost) just fine.
Secondly, as you have probably noticed, I haven’t posted in Polycount since 2013! What a douche… My last engagement with this community was when we had a Dota2 competition for Character Sets. There is a reason for that and I will explain shortly.
And thirdly, it is important to acknowledge right away that, although I am the all-powerful “creator” of this series (easy there, ego), I could not have done it with a lot of people that I will definitely talk about. This means that there is a lot of art and animation done by me, but there is also a lot of stuff done by my colleagues and friends.
Now, with this out of the way…
…why did I choose to do a bunch of retro-games in old pixel art instead of some cool spectacular 3D?! (yeah, why Filipe? WHY?)
Unfortunately, and for the dismay of everyone involved, the 2011 launch week for Under Siege on PlayStation3 was… (drum roll) the week the infamous PlayStation Network Outage happened! YAY! How cool was that? HUMM!? Shit... I still get headaches thinking about this. There was no going back, not with an exclusive title and not with an engine done specifically for the Cell Chip. We lasted another year trying to recover before we eventually had to shut down. This meant bankruptcy and other cool capitalism terms that allows the individual to stay alive but has to go back to zero or worst with (almost) nothing and a lot of bureaucracy and banks to deal with.
So, I did what any sane person would do: decided to continue making video games! Hurray!
And you (fine people at Polycount) ask: But how do you create a video game and get back out there when you have no team, no money, etc.?
I say: you create the most low-cost video game without compromising quality and vision, that’s how!
And while you get back on your feet and do odd jobs here and there, you try and polish your skills by creating some cool 3D stuff with the community, as in, the Dota2 Polycount Contest of 2012! Which I didn’t win, by the way. But it was cool and got me back! (BACK, BABY!).
Nuno Saraiva has a style that is simple but effective. Is line art works great at any size and it is perfect for converting to pixel art. I told him about the project and also that we didn't had that much money. Regardless, he said yes immediately and went on to draw a cast of almost 20 characters plus some commercial artwork. We had 20 more characters to do but I decided it was best to leave Nuno to focus on the main ones and I would do the rest directly in pixel art.
Detective Dick became Detective Case (real name, Justin Case… I am so funny! RIGHT!?) Clown Bot lost his legs and became a flying robot and Garcia… well, didn’t change must, actually. And then there all the other crazy characters. Lot’s of talk about how they should feel and look. Most of them stayed the same on the first draft (Detective Case, Garcia, the restaurant owners) but Stephanie Love and Brian had some back and forth.
To keep things fast and low-cost I decided to try and be smart about all the mechanics and the way characters interacted.
- Animations for all characters were limited to “idle”, “talk” and “walk”
- All animations were always mirrored (left and right)
- Only main characters had a few more animations specific to some in-game moments
- All action was done in a single plane going left and right. No up and down or anything like that
Base rules for the characters
- 2 to 4 main colors. Skin, clothes, hair, items.
- Each color with only 2 shades max,
- Pure black outline all around 1-pixel width. Inside if needed a darker shade of the main color.
- No transparency.
- Limit on max height to limit problems with the speech balloons.
- Always saved as 8bit PNG files.
- No dithering. Always flat colors.
The Press Play Arcade. This is a cleaned up version without characters that usually hang out at the machines in-game.
Early on I decided to emulate the look and feel of a game on a Nintendo DS but as if we were still in the 80’s. So, the base resolution for the game would become the Nintendo DS / Spectrum resolution, basically 256x192. BUT, since we all now have 16:9 screens this would mean we would aim for something like 386x192.
Rules for the sets
- All the sets were done with a maximum width of 1024 (keeping power of 2 as reference)
- NO straight lines. They look ugly. Life is better with curved lines.
- No pure black or white colors.
- All doors and places to be interacted with within a maximum limit to the left and right ends.
- Always daylight. No big shadows or big lights, etc.
- Saved as 8bit or 24bit PNG files depending on complexity.
- No transparencies with only 1 or 2 exceptions.
- No dithering. Always flat colors.
Drawing of an overall view of all the sets with connecting doors. My sketches are not the cleanest but they get the job done.
The amount of sets was decided on the characters and places I would need to place them. So, as an example, if there are 3 main suspects (Stephanie Love lovers) then they have 3 establishments. The Bar, the restaurant and the Hotel where the suicide (murder) took place. The 5 sets that compose the streets are a way to get the player from one place to another one and also get some much-needed spatial integration and overall feeling of being in a real city.
Also, with some exceptions, I moved all the main characters, clues and items away from the streets. This way the player always (instinctively) knows that we had not placed any important stuff there and everything he needed was indoors.
A
Hotel Lisbon room. First frame is a draft for the location of important
stuff. Next frames are pieces that were moved and changed to create
different rooms.
On thing that was cut right from the start was the “crowd”. There was a crowd of people that was supposed to be walking outside from one place to another in the streets. This would create an added sense of a city that was lived in, instead of an empty one. But it created a problem, I would have to put more characters in other places too and eventually I would have to draw and animate more than 100 different pixelated people. I could not only put people in the streets and not have them at the bar, restaurant, etc. But I also didn’t want an empty city. So, I did something… different. Every character that was not interactable would be “greyed out”. A shadow. This way I could tell the player that only the fully-fledged characters had something important to say and all the other ones did not. It also meant I did not need to animate them and could actually repeat them.
In the end I did not animate the “crowd” and decided instead to put cars driving by the street, in the same style as the “greyed out” characters.
Putting anti-aliasing was totally out of the question as this would break the immersion of a complete pixel-art video game. I tried a bunch of fonts and eventually, with the fantastic insight of our only programmer and in some ways, investor (José Rua) we decided to render the text at double the resolution. It worked great and nobody could tell the difference.
In fact, what actually ended up happening is: the entire game runs at double the resolution of 386x192 and every art file has its resolution doubled using a near-pixel filtering. It’s not a perfect solution but the end result is near (pixel… AH!) perfect. Also, since we are using PNG 8bit files, the size difference in disk is negligible.
This was a key mechanic for the game as it ties in the research and discovery done with a powerful moment of “detectivation”. It also shows the characters in close-up and rewards the player with some funny animations and awkward moments.
Ultimately, I wish I had more time as I rushed it all to get it done within our calendar. I look at them with a bit of disdain, actually. Especially when compared with the more recent release, The Express Killer.
Side note. These were done so late in production that throughout production most of the interviews had a temporary art of the only character with his interview animations done, Garcia. This was really funny when, whenever we would go to test an interview with Stephanie Love or Vila-Lobos, Garcia would pop-up and say their lines 
The player can interact with the elevator buttons! TOP TECH!
Detective Case and Clown Bot in: Murder in the Hotel Lisbon came out in 2013 through our website first and in 2014 through Steam. It got lots of love and some hate. Bot for the people who loved the pixel-art, illustrations and silly interviews and for the people who hated the low-res, awkward art style and frustrating interviews. Through Steam, Humble Store, Indie Gala and many other stores, we sold around 120.000 copies and currently have a “Very Positive” rating on Steam (85% I think).
The game got seven updates, with several bug fixes, extra animations and also recently, the inclusion of game pad controls. I decided not to go back and fix or redo old animations as I would probably never see an end to it.
I am also very proud of the size on disk: 54.2 megabytes
And you can solve the mystery of the killer who started killing on a Tuesday here.
My name is Filipe Duarte Pina and I am the creator of Detective Case and Clown Bot games. I am also the co-founder of Nerd Monkeys Ltd. I have been making video games for around 19 years but only started professionally around 12 years ago.
This post is a Post-Mortem on the art done for the 2 games of Detective Cases and Clown Bot, and how it all came to be. It is done in 2 posts / 2 parts and they should be read/seen in order.
Also, SPOILERS! If you haven’t played these games, don’t read or look at the pictures!
It spoils the games in such a way that you wouldn’t believe it! Like, TOTALLY!
Originally the idea was to do some sort of pixel art making-off but I had to include some history on the decision-making process, otherwise some things wouldn’t make any sense. (And because of that, expect lots of words in the middle of images!)
So, first of all, it is important to say that making video games is really hard, especially when there are constraints. My career hasn’t been an easy one and my art has suffered because of it. Still, I got to make the games I wanted within these constraints and they came out (almost) just fine.
Secondly, as you have probably noticed, I haven’t posted in Polycount since 2013! What a douche… My last engagement with this community was when we had a Dota2 competition for Character Sets. There is a reason for that and I will explain shortly.
And thirdly, it is important to acknowledge right away that, although I am the all-powerful “creator” of this series (easy there, ego), I could not have done it with a lot of people that I will definitely talk about. This means that there is a lot of art and animation done by me, but there is also a lot of stuff done by my colleagues and friends.
Now, with this out of the way…
…why did I choose to do a bunch of retro-games in old pixel art instead of some cool spectacular 3D?! (yeah, why Filipe? WHY?)
Well, if you look at my older games, you can see I was working in 3D. In fact, most of my early work was 3D. And before Detective Case and Clown Bot with Nerd Monkeys I had another company called Seed Studios, we launched a cool Nintendo DS game and a very famous (in Portugal) PS3 game called Under Siege.
A Press Release package for Under Siege with Comic Book and one a 3D boss with concept art by André Mealha and 3D by yours truly.
So, I did what any sane person would do: decided to continue making video games! Hurray!
And you (fine people at Polycount) ask: But how do you create a video game and get back out there when you have no team, no money, etc.?
I say: you create the most low-cost video game without compromising quality and vision, that’s how!
And while you get back on your feet and do odd jobs here and there, you try and polish your skills by creating some cool 3D stuff with the community, as in, the Dota2 Polycount Contest of 2012! Which I didn’t win, by the way. But it was cool and got me back! (BACK, BABY!).
Detective Case and Clown Bot in: Murder in the Hotel Lisbon
Murder in the Hotel Lisbon was done in 8 months. It was crazy that so much was done in such a short little time, but when you don’t have anything more to lose, you see things in a new perspective and also work at a different pace.
This became the first game of Nerd Monkeys and sort of our company
identity. It was done in a very short amount of time with an extreme low
budget.
These 4 animated screenshots are done in Photoshop using the same assets from the game. This way I can compress them in an 8bit pallet.
“Detective Dick” was the original name written on my first draft. The look was dark and gritty and the humor was very dark and corrosive.
For every script I tend to start writing anything and keep going until I "dumped" all I've got in my head. Then I go back and start re-writing. With Murder in the Hotel Lisbon, I had a strange problem to solve which was the language barrier. The game takes place in Portugal in the 80's but it is suppose to be played by everyone around the world. My solution was to write in English and Portuguese at the same time, basically writing 2 scripts and 1 game design in one go.
Also, I think this is the first time I show the very first draft of Murder in the Hotel Lisbon. Inspector Dick!? Argh! What was I thinking?
I usually write in Portuguese but felt that, with Case and Bot, I needed to start in English first and then go back and do another draft in PT
This was too dark and it didn’t mix well with the positive vibe of the script. I also saw from the first playtests with a very early build that women got turned off by the extreme swearing and cursing coming from the mouths of some of the characters. It was obvious I had to change the look and feel of the game even if overall the game would remain the same.
Justin Case, Clown Bot and Garcia in Case's office. Old vs New version look like 2 different games but are, in fact, the same! WOW! 
Characters
Diogo Vasconcelos, my good friend and Nerd Monkeys co-founder, had managed to get some funding to pay for the most basic bills and although everything was very tight, we could at least afford a character artist. And I knew exactly who I wanted to redraw my characters.Nuno Saraiva painting Detective Case / Some drawings for the characters / Originals painted on his iMac
Detective Dick became Detective Case (real name, Justin Case… I am so funny! RIGHT!?) Clown Bot lost his legs and became a flying robot and Garcia… well, didn’t change must, actually. And then there all the other crazy characters. Lot’s of talk about how they should feel and look. Most of them stayed the same on the first draft (Detective Case, Garcia, the restaurant owners) but Stephanie Love and Brian had some back and forth.
Main characters for Murder in the Hotel Lisbon. And yes, the band is important as the music is a character in its own right.
Stephanie's errr.... attributes, were a bit too much. Nuno likes to go crazy but even I wasn't expecting such an exaggeration. We kept them short.
I wanted Brian not to stand out, but to have something completely different from all the others so that players could somehow "guess" he was off.
Bob was another character that got changed. I changed it only after release and as an update for the Steam version.
- Animations for all characters were limited to “idle”, “talk” and “walk”
- All animations were always mirrored (left and right)
- Only main characters had a few more animations specific to some in-game moments
- All action was done in a single plane going left and right. No up and down or anything like that
Manel is a good example of the loose nature of the animation.
- 2 to 4 main colors. Skin, clothes, hair, items.
- Each color with only 2 shades max,
- Pure black outline all around 1-pixel width. Inside if needed a darker shade of the main color.
- No transparency.
- Limit on max height to limit problems with the speech balloons.
- Always saved as 8bit PNG files.
- No dithering. Always flat colors.
Finally, NPCs don’t move while waiting for you to talk to them. They just stand there. Although they actually move in scripted moments, the standing thing helped to minimize bugs and predict where they would be for some triggers.
Sets
Most of the sets were done by Luís Bacharel. Luís had never done work for video games and was looking to get into the… err… game. He had done some pixel art and this why I picked him. I can’t say enough good things about the work he did in such a short amount of time.Case's bedroom. it's the beginning and the end of the game (if you complete all sidequests).
- All the sets were done with a maximum width of 1024 (keeping power of 2 as reference)
- NO straight lines. They look ugly. Life is better with curved lines.
- No pure black or white colors.
- All doors and places to be interacted with within a maximum limit to the left and right ends.
- Always daylight. No big shadows or big lights, etc.
- Saved as 8bit or 24bit PNG files depending on complexity.
- No transparencies with only 1 or 2 exceptions.
- No dithering. Always flat colors.
Original
drawing of some of the sets. It has seem some action and looks like it
has been kept in someones back pocket for a few years.
Also, with some exceptions, I moved all the main characters, clues and items away from the streets. This way the player always (instinctively) knows that we had not placed any important stuff there and everything he needed was indoors.
Street 1 of 5. All 5 sets that create the streets connect all the way through from one side to the other.
All sets were built in a very similar way. We had to be creative while at the same time keeping problems and bugs low.
The full layout of the sets (levels). Notice the DLC notes. The idea would be to have clients getting more cases to Justin later on.
I would do a basic sketch of the set, get it in the game and test it out. The turn around was very fast and we had all sets (finished and basic forms) in around 2 months in-game working.
The Hotel and all the floors was a special case. I asked Luís to do one floor and one bedroom but make so that all the furniture could be moved around and placed in different spots. Also, different beds and wall colors. This way I could extend the number of floors and rooms in case I needed to add an extra character in a place at the last minute.In the end I did not animate the “crowd” and decided instead to put cars driving by the street, in the same style as the “greyed out” characters.
The crowd really looks weird. The cars and the occasional tram do a much better job and keep things simple.
Text and balloons
Since the game had around 50.000 words, it meant the player had a lot to read. It was important to get this right and not be a chore and, since I decided in doing the game at such a low-resolution, the text was definitely a problem.Putting anti-aliasing was totally out of the question as this would break the immersion of a complete pixel-art video game. I tried a bunch of fonts and eventually, with the fantastic insight of our only programmer and in some ways, investor (José Rua) we decided to render the text at double the resolution. It worked great and nobody could tell the difference.
In fact, what actually ended up happening is: the entire game runs at double the resolution of 386x192 and every art file has its resolution doubled using a near-pixel filtering. It’s not a perfect solution but the end result is near (pixel… AH!) perfect. Also, since we are using PNG 8bit files, the size difference in disk is negligible.
A screenshot with the text at double the resolution from everything else.
Interviews
Besides walking around talking with people, one of the main mechanics of the game is to interview potential witnesses. The way this happens is, when the player has all the clues needed to get someone to confess something, the interview button becomes available. From this point the game jumps into a mini-game of sorts where the player has to chose one questions out of 3 and link it with an item/clue. If it works, the character gets all stressed out and the conversation moves to a “second round”. It finally ends either with a failed interview or a successful one and the story moves forward.Early Photoshop mockup of an interview in progress. Notice how the text is in the "old" resolution.
Ultimately, I wish I had more time as I rushed it all to get it done within our calendar. I look at them with a bit of disdain, actually. Especially when compared with the more recent release, The Express Killer.
Moments
To wrap the game all up in a nice way, there had to be some “moments”. These small but important animations that show our characters in a different perspective and highlight some important… moment.Clown Bot at the start of the game shows how he keeps all the items inside of him.
Others, stuff cut
A lot of stuff didn't make it here (for the post) but at some point, there was an American taxi, a map and the nemesis of Clown Bot, Mimo Bot.And to wrap it all up, here all the individual sprites from Justin Case! Uhu!
The game got seven updates, with several bug fixes, extra animations and also recently, the inclusion of game pad controls. I decided not to go back and fix or redo old animations as I would probably never see an end to it.
I am also very proud of the size on disk: 54.2 megabytes
Acknowledgements and links
Thanks to Diogo Vasconcelos for going all in with me on
this.
Thanks to José Rua for getting on this crazy journey with
us and sticking around.
Thanks to Luís Bacharel for the beautiful sets.
Thanks to Uriel Cordas for his patience and wonderful train.
Thanks to José Castanheira for answering the phone.
Thanks to Rafael Pina for the awesome classical music.
Thanks to Nuno Saraiva for the coolest character designs
in the world.
Thanks to João Sapiro for reminding me to do this post
(and for the toe nail!)
Thanks to Ricardo Gordo for the awesome Rock music. Check his band here!
And thanks to everyone who helped me make these games
possible. I love you all.
And you can solve the mystery of the killer who started killing on a Tuesday here.
PS: Continues on the next post because Polycount is telling me it's too big.
Replies