Posted September 29, 2022 by Melky
#phaser #game jam #dev #art
Cozy Bean Cafe was a game made for the Cozy Autumn Game Jam 2022. Thank you to all who played the game! I appreciate your kind comments. Making the game was a very fun experience, and as the game jam suggested to not stress out, it was also a very chill experience. I tried not to put too many tasks on my plate (or tray, get it?) and kept the game as simple as possible. In this devlog, I will go through how I made the game.
Overview
To play the game, drag and drop items from the counter to the tray at the bottom of the screen to match their positions displayed in the caption bubble in the top right of the screen.
Game Logic
For the game, I used Phaser 3, a Javascript game engine, version 3.55.2. Basically, the tray at the bottom had five different sections, and the items that you placed on those sections had to overlap in order to count as a match. These tray sections were sprites that had setVisible to false but also had setInteractive to allow overlap checking. The food and drink items that you dragged and dropped were also sprites. I always do game functionality before the artwork, so here is an early version of the game with placeholder art. Also, I set the game size to 1024x768 so that the objects were more or less in their final places, plus or minus a few pixels.
The main objects in the game were:
The game steps were:
Here are the steps in more detail:
And the tray sections are:
I set each order array position individually, starting from 0, and generated a random number between 0 and 4 inclusively to represent drink0 to drink4 or food0 to food4. Also, I wanted to prevent duplicate food or drinks, so if I’m setting position 3, I make sure it doesn’t match position 2, and if it does, I set that position to food0. Here’s an example snippet of what I mean:
let order3 = `food${this.getRandomNum()}`; order[3] = order3 === order[2] ? 'food0' : order3;
let trayKey = parseInt(tray.texture.key.slice(-1), 10); playerOrder[trayKey - 1] = sprite.texture.key;
For any incorrect orders, I added that string to the placedIncorrectOrderItems array.
if (incorrectOrder.includes(sprite.texture.key)) { if (!placedIncorrectItems.includes(sprite.texture.key)) { placedIncorrectItems.push(sprite.texture.key); } }
In the drop function, I also checked the coordinates of the dropped sprite. The food/drink sprite that didn’t belong in the order needed to be off of the tray, so the sprite should be y <= 440 or x <= 170 or x >= 870. This was a very last minute additional check in the game (and I am sure there are better ways to do this), as I noticed a bug in which we could add as many wrong food and drinks as we want on the tray, as long as the goalOrder matched!
I then checked if that dropped item matched what was in the goalOrder.
if (goalOrder[trayKey - 1] === sprite.texture.key) {
I also checked if placedIncorrectItems was empty, before I proceeded to check the entire order.
if (placedIncorrectItems.length === 0) { this.checkOrder(); }
The checkOrder function is very simple and just iterates through the goalOrder array if everything is complete.
for (let i = 0; i < goalOrder.length; i++) { if (goalOrder[i] === playerOrder[i]) { totalMatched++; if (totalMatched === goalOrder.length) { // play “correct!” animation // after half a second, increment the score and reset the tray and make a new order } }
Art
For the artwork, I still have Adobe CS6 (the version before the creative cloud monthly subscriptions, whew!), so I used Adobe Flash CS6, because it uses vectors for art, so I can easily resize things without losing quality. I initially tried to color the game in Adobe Photoshop CS6 with watercolor brushes, as I really wanted to develop my coloring skills with more lighting, shading, texture, etc. Here’s a glimpse of a watercolor brush test:
Unfortunately, the program kept crashing, and coloring was taking too long for the short time available in the game jam. I then switched to all drawing and coloring in Adobe Flash CS6 and stuck with a flat color style. Here’s a glimpse of the line art:
Also, most colors (all except for the lines, chalkboards, background wall, ground, and character skins) were from the autumn glow color palette that the game jam provided. All in all, I think the art turned out okay!
Conclusion
And that wraps it up! I had a lot of fun with this jam. Did you get to play the game? What did you think? If there is anything in particular that you wanted to know more about, let me know in the comments!