Overall Concept:
Through this project, I take a chance to reflect on my work and progress during the first half of the semester. In broad terms, it is a compilation of my work in this class, designed as a mini-game where the user themselves has to jump over obstacles I faced. The idea for this concept came to me when I realized how happy I was with my evolution in terms of artistic expression as the class went on, and I wanted everyone to get a glimpse of this evolution.
The game itself is simple enough and can be thought of as a simplified version of the Google Chrome Dinosaur game – with only ground obstacles. (it is deceptively hard!). However, the design is more complex. For example, since I want my viewers to wait and watch the artworks unfold – I made it such that no new obstacles spawn when the cat is stationary. Lastly, I went for a dreamy – after image trail- look for aesthetic purposes.
Working and Strengths:
As I stated earlier, the game itself can be thought of as a simplified version of the Chrome Dinosaur game. Your journey starts the moment you step into the cat’s paws. The left and right arrow keys move the cat, and the spacebar allows it to jump. Additionally, pressing 1 lets you click a screenshot and save it to your device. Whereas, pressing 2 lets you restart the game. You also have the option to toggle the audio on/off.
The progression of the game happens at the user’s own pace. Obstacles only spawn as the cat keeps moving, and they are randomized in size – being one of three variants: “Error”, “Deadline” and “Breakdown”. The cat’s movements include a sitting animation cycle and a walking animation cycle. Aesthetically, I went for a simple color pallet making my main character – a cat white, and the background black, that complimented my color usage in previous projects. The font style I chose resembles handwritten text – a decision made to further highlight the personal tone of the work. I also went for a generally upbeat theme to add to the work!
My cat sprites in motion!
On a technical level, the collision detection and mechanics were surprisingly hard to implement due to the length of the cat. Even when I got the implementation right, it was nigh impossible to play the game as intended (as it would lead to a continuous triggering of the collision mechanism). I needed to find a way to make this mechanism work without increasing the cat’s speed and worsening the overall experience.
Ultimately, I realized I could also increase the speed on the X axis while jumping, that made the game a lot smoother.
function jump() {
if (catY >= groundHeight - catHeight / 2) {
velocity += jumpForce;
speed = boostSpeed; // boost the speed during the jump
}
} //jump function
function checkCollision(obs) {
return (
camX + width / 2 + (catWidth / 2) * 0.6 -50 > obs.x &&
camX + width / 2 - (catWidth / 2) * 0.6 +40< obs.x + obs.width &&
catY + (catHeight) * 0.6+30 > obs.y &&
catY - (catHeight) * 0.6 -30< obs.y + obs.height
);
}
Another area whose technicality I am proud of is the cat animations. I only had a sprite sheet for a right walk cycle. In code, I used this to also work for a left walk cycle (by flipping). But more importantly, I managed to find a way to connect my sitting cycle with my walk cycle. The cat now sits down when you are not moving, and then gets back up (in reverse the sit cycle) when you start again!
/ Check direction of camera movement to adjust cat's direction
if (camX > lastCamX) {
direction = -1;
} else if (camX < lastCamX) {
direction = 1;
}
// If camera is not moving and the cat was walking previously
if (camX == lastCamX && wasMoving) {
wasMoving = false;
isWalking = false;
isSitting = true;
sitFrames.reverse();
currentFrame = 0;
}
// If camera starts moving and the cat was sitting previously
if (camX != lastCamX && !wasMoving) {
wasMoving = true;
isSitting = false;
isWalking = true;
sitFrames.reverse();
currentFrame = 0;
}
// Draw the cat
let frameToDraw;
if (isWalking) {
frameToDraw = walkFrames[currentFrame % 12];
if (frameCount % 2 == 0)
//making the animation slower
currentFrame = (currentFrame + 1) % 12;
} else if (isSitting) {
frameToDraw = sitFrames[currentFrame];
if (frameCount % 2 == 0 && currentFrame < 6) {
currentFrame++;
}
}
On a more fun note, while working on the project I realized a peculiarity of the code – if you try to run away from the obstacles – they start bunching up and appear together more frequently – a fact we all know to be true from experience.
Reflections and Future Work:
Throughout this project, I ran into several problems – a couple of which I already highlighted in the above section. In general, staging the whole game was quite the task (as it involved basically a moving background created by a camera movement (that we simulate by a constant translation based on arrow keys)). This could only be resolved with meticulous testing.
Moving on, I’ve identified two crucial components of my project that might require some improvement: the way it appears and the way it functions. I believe I can further improve the project’s aesthetics and visual appeal. To make it more appealing, the background and cat’s appearance can be improved. Additionally, I want to make the text on the obstacles more legible. On a functional level – the hitboxes of the collision functions aren’t yet perfectly set – I’d like to explore using an elliptical hitbox than a rectangular one.
Finally, I would love to include my expectations and plans for the second half of the semester, as well as any abstract ideas or goals I may have as the ending scene – something that I didn’t have time to implement.
References:
Music:
Voxel Revolution – Kevin Macleod
Digital Lemonade – Kevin Macleod