CatCafe is an arcade game where you have to fed the cats in the bar while avoiding other cats who jump at you. If you take too long to deliver the food, or if a cat makes you drop it, you will lose one heart.
Each stage represents one day of work, and in order to complete it you have to survive until 5:00PM. Stages vary on their obstacles layout and the amount of cats you have to deal with at the same time. There are two difficulty levels, survive for seven days and you’ll win.
Motivation
- Learning more about real time / arcade games and physics systems.
- I missed last year’s “A Game By Its Cover” jam and I really wanted to participate because I love Famicases and I have the power to develop games.
- I wanted to make a fun, light game that anyone can play without instructions but is still challenging.
- Everybody loves cats
Design
For this game I followed a process I rarely do: I had no idea how the game would play when I started developing! All I had was a couple of very rough ideas for gameplay, first off the famicase description:
Cat Cafe Dessert Panic! Is an action-adventure game where you, as Pera, are the waitress at a cafe for cats. The cats are excited to eat, and they’ll do anything to get in your way. Do not drop the desserts or it’s game over!
And then, some ideas I got directly from the artist who drew the famicase:
“[…] like frogger except you’re trying to avoid cats and not cars, and if they hit you you lose your food […] instead of top-down view, it’s side scrolling (I guess jumping over cats).”
So I just started building a stage for it… an area where the waitress could move around, and cats would follow her and jump over her. It was only after playing around with it a bit, to get a feeling of what would be fun, that an actual “game” starting shaping up.
All I knew is I wanted to make a simple game that could be controlled with only the directional keys. In that sense, I guess the gameplay was defined in an “organic” way, without giving it too much thought from the upstart.
One of the things that got me thinking tho was whether having obstacles on the field was easier or harder. It was easier because it meant less cats would be chasing you around, but harder because you could get stuck on the obstacles and be savaged by the cats.
I guess I could have gone the statistics way and just play a lot of games (automatically?) and check the scores and lost hearts to draw a conclusion. In the end I opted to make the number of obstacles increase with the levels, but having a level amidst each one where there’s a single obstacle. I made this to encourage approaching the solution to each level differently, as you need different tactics to survive on each (I think that, in the end, both are equally hard).
Code
Development of the game span from July 21 to July 31. I started by replicating the structure of other game I had made recently (Lorenzo), since I knew they were going to be similar.
The game is made on Javascript and uses phaser.io with its arcade physics subsystem (making a lot more of use of it compared to Lorenzo, though still not FULL usage). Single characters like Pera, Shoey and Lali are represented as objects, while the rest of character types (Cats) are represented as classes. There is also a single object representing the game where all initialization is done, and it also acts as the main game controller.
Being a game developed for a jam, the code is a bit messy as it just kept growing as I was defining the gameplay and refining the user experience, you can find it at github here.
Art
CatCafe was created for the “A Game By Its Cover” Game Jam, where developers were asked to pick a fictional famicase (From famiCase16) and create a game around it. This influenced the choice for aesthetics, to try to match the famicom/NES style (without being strict at all about it, specially regarding sprite color count limitations). The comic style depicted on the famicase also influenced the style for the in game characters.
I contacted Diana Pacheco (okuroy), asking if she would be interested on working on the project… we had previously worked together in the development of Failure Pixal (back on 2008, the art she made for that project was never released sadly) and kept in touch since then. She made an awesome tileset with very fluid animations for both the cats and Pera, as well as an amazing pixel art rendition of the original famicase cover.
Meanwhile, I worked on the stage itself. It was a single stage, I based the design in this screen from Déjà Vu on the NES.
I expanded it a bit to get the initial stage
I also read a bit on the Catnip Circle webcomic (read it!), to get a glimpse of the universe where Pera lives, it eventually evolved to include some of its elements, as well as to accommodate to the border-less sprites that Diana was making.
Finally Diana complemented the stage with her pixelart skills, putting some fancy stuff around to make it look better.
Music and Sounds
Initially, I planned to do the music and sounds with a guy from the jam forums, unfortunately he wasn’t able to participate…
Then Ashton came to the rescue! I had already worked with him in ArcherFire and Ananias, and he really liked how the game was shaping up. He created a couple of great tunes in a very short time, as well as lots of very fitting SFX.
TV-like appearance and responsiveness
In addition to constraining to a low resolution stage (256×240), additional processing is done in order to make the game appear more NES-like, this includes stretching the display so that it fits a 4:3 ratio (similar to a standard TV set) as well as rendering some scanlines over it.
In order to do this, first thing I do is detecting if the current window dimensions allow for stretching by increasing the width of it by 33% of the height. If not I just resort to phaser’s SHOW_ALL scaling option (and I hide the TV/Scanlines overlay, thus making it look like a standard phaser game).
If it fits, I do a manual USER_SCALE, and relocate the TV overlay so it matches with the autopositioning and scaling of the canvas on viewport size change.
Additional filters like simulating the round “bulge” of a fat CRT TV were considered and even implemented but ultimately dismissed (at least for an initial version) because they would have required considerable additional effort. They were based on an article by Zachstronaut which pointed out the idea to use webgl shaders via glfx.js to postprocess canvas frames on the fly. The main issue I had was that since the game canvas was very low resultion (256×240), and it was scaled by means of CSS instead of redrawing over a big canvas, the shader that did the bulge effect caused a lot of aliasing on the pixel art… I think it would look much better if the effect was applied to a bigger canvas with most pixel data, but I didn’t have enough time to check.
Mobile
I used Photonstorm Virtual Joystick in order to allow input on mobile devices. At first I used the DPad implementation which worked but had the great issue of not allowing diagonal movement (which is critical to the game), so then I changed it to use one of the “stick” implementations, which worked pretty great.
Conclusion
I made a fun, challenging game and got to work with Okuroy and Ashton around a theme that people loves.
Credits
- Pixel Art by Diana Esperanza Pachecho (@okuroy)
- Music and SFX by Ashton Morris (@ashtonmorris)
- Original Famicase by Cassie Freire (@FerretParty), Catnip Circle
- Design and Programming: Santiago Zapata (@slashie_), Slashware Interactive
- Powered by Phaser
Slashie's Journal 