🎉Project Description
“Aura Farming” is an interactive game inspired by Dragon Ball Z, where players take control of Goku and help him transform into a Super Saiyan by rapidly pressing the spacebar. The game challenges players to increase Goku’s power level within a 30-second time limit, visually represented by the growth of his aura and transformation into his iconic Super Saiyan form. The game combines dynamic animations, sound effects, and scoring mechanics to create an engaging experience.
The gameplay revolves around pressing the spacebar to “power up” Goku, increasing his power level and triggering visual changes such as aura expansion and sprite animations. Once Goku’s power level exceeds 9000, he transforms into a Super Saiyan, with golden aura effects and looping animations representing his heightened state.
📋Assignment Brief
The assignment required creating an interactive artwork or game using p5.js while incorporating certain elements:
The game responds to user input via:
- Pressing the spacebar to increase Goku’s power level.
- Clicking the mouse to navigate between game states (e.g., start screen, instructions screen, and score page).
- The score page allows restarting the game by clicking anywhere on the screen.
The aura visuals are created using shapes:
- A combination of ellipses and vertex-based polygons.
- The aura dynamically grows in size as Goku’s power level increases.
Multiple images (sprites) are used throughout the game:
- Goku’s base form transformation is represented by 8 sprites, which cycle during animation.
- Super Saiyan mode is represented by 6 sprites, which loop continuously while in that state.
- Background images are used for different screens (start screen, instructions screen, gameplay, and score page).
The project includes both sound effects and background music:
- Background music plays during different game states:
- Start screen: Non-battle music.
- Gameplay: Battle music.
- Score page: Victory music.
- Sound effects play when powering up (e.g., pressing the spacebar).
On-screen text is used for:
- Instructions on the start screen and instructions screen.
- Displaying Goku’s current power level during gameplay.
- Showing the final score and high score on the score page.
- Feedback such as “Time Left” during gameplay.
The game utilizes OOP principles through the Character class:
- Encapsulates properties such as powerLevel, auraSize, and isSuperSaiyan.
- Includes functions such as powerUp(), drawEnergyAura(), and transformToSuperSaiyan().
- Handles animations by cycling through arrays of sprites based on game state.
After the experience is completed, there is a way to start a new session (without restarting the sketch)
- The experience starts with a start screen that waits for user input (mouse click) to proceed to the instructions or gameplay screen.
- After gameplay ends (30-second timer), a score page is displayed, showing the player’s final score and high score.
- Players can restart the game from the score page without needing to reload or restart the sketch.
💻Process
Initial Setup and Planning
Initially, the project began with the idea of creating a simple interactive game inspired by Dragon Ball Z. The goal was to replicate Goku’s iconic transformation into Super Saiyan while providing players with an engaging challenge through rapid key presses.
- Defining Core Mechanics: The primary mechanic involved pressing the spacebar to increase Goku’s power level, which would trigger visual changes (aura growth and sprite animations) and sound effects.
- Outlining Game States: The game required distinct states: a start screen, instructions screen, gameplay screen, and score page. Each state would serve a specific purpose in the user experience.
- Sketching Designs: Basic designs for Goku’s aura effects were sketched out to guide development.
Loading Assets
The next step was to load all necessary assets- images, sounds, and fonts- into the project using the preload() function. This was crucial to ensure smooth gameplay without runtime delays.
- Arrays of images were created for Goku’s base form transformation (8 frames) and Super Saiyan mode (6 frames). With a for loop, I was able to dynamically load these images into arrays powerUpFrames and superSaiyanFrames, reducing repetitive code.
for (let i = 1; i <= 8; i++) {
powerUpFrames.push(loadImage(`/images/Base Goku- Sprite ${i}.png`));
}
for (let j = 1; j <= 6; j++) {
superSaiyanFrames.push(loadImage(`/images/Super Saiyan Goku- Sprite ${j}.png`));
}
- Four different backgrounds were loaded for the start screen, instructions screen, gameplay screen, and score page.
- Background music tracks were loaded for each game state (non-battle music, battle music, victory music), along with sound effects for powering up.
Creating the Character Class
To encapsulate Goku’s properties and behaviors, I created the Character class. This class served as the foundation for managing animations, aura effects, and transformations. Key features of the class included:
- powerLevel: Tracks Goku’s current power level.
- aurasSize: Controls the size of Goku’s aura.
- isSuperSaiyan: Boolean flag indicating whether Goku is in Super Saiyan mode.
- Arrays for animation frames (powerUpFrames and superSaiyanFrames) were used to manage sprite animations.
- powerUp(): Increases Goku’s power level and aura size when the spacebar is pressed.
- transformToSuperSaiyan(): Triggers Goku’s transformation into Super Saiyan once his power level exceeds 9000.
- drawEnergyAura(): Dynamically draws Goku’s aura using shapes (ellipses and vertex-based polygons) with Perlin noise for organic movement.
- reset(): Resets all properties to their initial values when restarting the game.
class Character {
constructor(name, x, y) {
// Name of the character (e.g., "Goku").
this.name = name;
// X and Y coordinates for positioning the character on the canvas.
this.x = x;
this.y = y;
// Tracks the current power level of the character.
this.powerLevel = 0;
// Multiplier used to increase power level faster during Super Saiyan mode.
this.powerLevelMultiplier = 1.0;
// Controls the size of the aura surrounding the character.
this.auraSize = 0;
// Stores the current sprite image for the character (e.g., normal or Super Saiyan).
this.sprite = null;
// Scale factor used to resize sprites when drawing them on the canvas.
this.scaleFactor = 0.5;
// Number of points used to create the aura shape (polygon).
this.auraPoints = 12;
// Offset value for Perlin noise, used to create organic movement in the aura.
this.auraNoiseOffset = random(1000);
// Offset value for aura color animation (e.g., cycling between yellow and red).
this.auraColorOffset = 50;
// Boolean flag indicating whether the character is in Super Saiyan mode.
this.isSuperSaiyan = false;
// Delay between animation frames (controls animation speed).
this.animFrameDelay = 1000;
}
// The display() method handles rendering the character and its associated visuals (sprite, aura, power level text).
display() {
// Draws Goku's energy aura using the drawEnergyAura() method.
this.drawEnergyAura();
// Determines which sprite to display based on Goku's state (normal, powering up, or Super Saiyan).
let currentSprite;
if (this.isSuperSaiyan) {
// If Goku is in Super Saiyan mode, cycle through Super Saiyan animation frames.
let index = floor(frameCount / 5) % superSaiyanFrames.length;
currentSprite = superSaiyanFrames[index];
} else if (this.powerLevel > 0) {
// If Goku is powering up, cycle through base form transformation animation frames.
let index = floor(frameCount / 5) % powerUpFrames.length;
currentSprite = powerUpFrames[index];
} else {
// If no transformation is active, display Goku's normal sprite.
currentSprite = normalSprite;
}
// Draws the selected sprite at Goku's position with scaling applied.
let scaledWidth = currentSprite.width * this.scaleFactor;
let scaledHeight = currentSprite.height * this.scaleFactor;
image(currentSprite, this.x, this.y, scaledWidth, scaledHeight);
// Displays Goku's current power level at the top of the screen.
fill(255);
stroke(117, 117, 116);
fill(149, 152, 173);
rect(200, 70, 400, 150, 30);
noFill();
fill(255, 166, 0);
rect(220, 80, 360, 130, 20);
noFill();
fill(255);
textFont("Helvetica", 50);
textAlign(CENTER);
text("Power Level", 400, 120);
text(`${this.powerLevel}`, 400, 180);
noFill();
}
// The drawEnergyAura() method creates dynamic visuals for Goku's aura based on his power level and state.
drawEnergyAura() {
push(); // Saves the current drawing state.
translate(this.x, this.y); // Moves the origin to Goku's position.
if (this.isSuperSaiyan) {
// If Goku is in Super Saiyan mode, use a golden color for his aura.
fill(255, 215, 0, 150);
stroke(255, 215, 0, 200);
} else {
// If Goku is in base form or powering up, use a yellow color for his aura.
fill(255, 255, 0, 100);
stroke(255, 255, 0, 150);
}
strokeWeight(2); // Sets the thickness of the aura outline.
beginShape(); // Starts defining a custom shape for the aura.
const baseRadius = this.auraSize * 0.8; // Base size of the aura shape.
const spikeMagnitude = this.auraSize * 0.2; // Magnitude of spikes in the aura for a dynamic effect.
// Loop through points to define the aura shape.
for (let i = 0; i < this.auraPoints; i++) {
const angle = map(i, 0, this.auraPoints, 0, TWO_PI); // Calculate angle for each point.
const noiseVal = noise(
this.auraNoiseOffset + i * 0.1 + frameCount * 0.05
); // Use Perlin noise for organic movement.
const dynamicRadius = baseRadius + spikeMagnitude * noiseVal; // Adjust radius based on noise value.
const variedAngle = angle + radians(map(noiseVal, 0, 1, -10, 10)); // Add randomness to angles.
// Define each vertex of the aura shape.
vertex(
dynamicRadius * cos(variedAngle),
dynamicRadius * sin(variedAngle)
);
}
endShape(CLOSE); // Close the custom shape.
// Update animation parameters for smooth movement.
this.auraNoiseOffset += 0.02; // Increment noise offset to animate aura.
this.auraColorOffset += 0.1; // Increment color offset for potential color cycling.
pop(); // Restores the previous drawing state.
}
// The powerUp() method increases Goku's power level and aura size when called (e.g., pressing the spacebar).
powerUp() {
this.powerLevel += 100 * this.powerLevelMultiplier; // Increase power level based on multiplier.
this.auraSize += 3; // Gradually increase the size of Goku's aura.
}
// The reset() method reverts Goku's properties to their initial values (used when restarting the game).
reset() {
this.powerLevel = 0; // Reset power level to zero.
this.auraSize = 10; // Reset aura size to its default value.
this.isSuperSaiyan = false; // Reset Super Saiyan mode to false.
this.powerLevelMultiplier = 1.0; // Reset power level multiplier to its default value.
this.sprite = normalSprite; // Set Goku's sprite back to his base form.
}
// The transformToSuperSaiyan() method triggers Goku's transformation into Super Saiyan mode.
transformToSuperSaiyan() {
this.isSuperSaiyan = true; // Set Super Saiyan mode to true.
this.powerLevelMultiplier = 50; // Dramatically increase the power level multiplier (e.g., x50 boost).
this.auraSize += 50; // Increase aura size significantly to reflect transformation.
// Change Goku's sprite to his Super Saiyan form.
this.sprite = superSaiyanSprite;
}
}
Implementing Game States
The game required distinct states to guide players through the experience:
- Start Screen: Displayed the game title (“Aura Farming”) along with buttons for starting the game or viewing instructions. Mouse clicks were used to navigate between screens.
- Instructions Screen: Provided players with guidance on how to play the game (e.g., “Press SPACEBAR rapidly to power up”).
- Gameplay Screen: Served as the main interactive phase where players pressed the spacebar to increase Goku’s power level within a 30-second timer.
- Score Page: Displayed the player’s final score, high score, and an option to restart the game.
State management logic was implemented in the draw() function using boolean flags (startScreen, instructionScreen, gameScreen, scorePage) to control which screen was displayed.
Adding Animations
An array of 8 sprites (powerUpFrames) was used to represent Goku powering up and an array of 6 sprites (superSaiyanFrames) represented Goku in his Super Saiyan form.
The display() method cycled through these frames using frameCount:
let index = floor(frameCount / animFrameDelay) % powerUpFrames.length;
currentSprite = powerUpFrames[index];
Integrating Sound Effects and Music
To enhance immersion, sound effects and background music were added using p5.js sound functions:
- Background music tracks were assigned to each game state (e.g., non-battle music on start screen, battle music during gameplay).
- A powering-up sound effect played whenever the spacebar was pressed. Conditional checks (isPlaying()) ensured sounds did not overlap or restart unnecessarily.
Implementing Scoring System
A scoring system was added to track the player’s performance
-
- The player’s current power level was displayed during gameplay
- After gameplay ended (30-second timer), a score page displayed:
- Final score based on Goku’s highest power level achieved.
- High score saved across multiple play sessions using an array (previousScores).
let previousScores = [];
Restart Functionality
The final milestone involved adding functionality to restart the game without reloading or restarting the sketch:
- Clicking anywhere on the score page reset all properties (e.g., power level, aura size) using the reset() method in the Character class.
- State flags were updated to return players to the start screen.
🚩Challenges Faced
Assest Loading Issues: One of the initial challenges was loading images correctly due to incorrect file paths or naming conventions. This caused errors where sprites failed to appear in the game.
Solution: Carefully checked file paths, ensured consistency in naming conventions.
Animation Logic: Initially struggled with sprite animations cycling incorrectly or not looping smoothly during transformations.
Solution: Adjusted animation logic in the display() method of the Character class to cycle frames based on frameCount, ensuring smooth transitions.
Sound Overlapping: Sounds repeatedly played or overlapped when keys were pressed rapidly during gameplay.
Solution: Used conditional checks (isPlaying()) before playing sounds to prevent overlapping audio playback.
Game Restart Logic: Ensuring that all game states reset properly when restarting from the score page was challenging.
Solution: Added a reset() method in the Character class to revert all properties (e.g., power level, aura size) to their initial values.
function mouseClicked() {
if (
startScreen == true &&
mouseX > 270 &&
mouseX < 530 &&
mouseY > 310 &&
mouseY < 390
) {
gameScreen = true;
startScreen = false;
gameStartTime = millis(); // Record the starting time of the game
}
if (
startScreen == true &&
mouseX > 170 &&
mouseX < 630 &&
mouseY > 510 &&
mouseY < 590
) {
instructionScreen = true;
startScreen = false;
}
if (
instructionScreen == true &&
mouseX > 340 &&
mouseX < 460 &&
mouseY > 610 &&
mouseY < 650
) {
instructionScreen = false;
startScreen = true;
}
if (scorePage == true) {
// Restart the game:
victoryMusic.stop();
scorePage = false;
startScreen = true; // Return to the start menu
player.reset(); // Reset player's power level and aura size
}
}
📶Key Take Aways and Future direction
This project has taught and solidified a lot of skills that the class established.
-
- Improved proficiency in handling animations using arrays of images and frame-based logic.
- Enhanced problem-solving skills through debugging asset loading issues and refining animation transitions.
- Learned how to manage sound effects effectively in interactive applications.
- Developed a better understanding of OOP principles by structuring code with classes and methods.
I particularly enjoyed designing Goku’s transformation sequence into Super Saiyan- his was technically challenging yet felt extremely fulfilling for when I did manage.
If I were to revisit this project, I would consider adding more dynamic gameplay elements, such as obstacles or enemies that interact with Goku’s aura. Another thing I would do is introduce multiple playable characters, such as Vegeta, Piccolo, or other iconic figures from Dragon Ball Z. Players could select their character on the start screen, with each character having unique abilities and animations. For example, Vegeta might power up faster but have a smaller aura, while Piccolo could regenerate power when idle. To implement this, I would extend the Character class to include properties like characterName, spriteSet, and specialAbility. This feature would add replayability and variety to the game, encouraging players to explore different characters and strategies.
To visually reflect Goku’s increasing power level, I would implement dynamic backgrounds that change as the player progresses. At low levels, the background could feature a calm landscape like Planet Namek. At mid-levels, the sky could darken with storm clouds forming, while at high levels, lightning strikes and debris flying around could create a chaotic environment. This feature could be implemented by layering multiple background images and transitioning between them using alpha blending or animations triggered by power level thresholds. Dynamic backgrounds would add excitement to gameplay and visually emphasise the intensity of Goku’s transformation.
✅Delivered Project
The final version of Aura Farming successfully delivers:
-
- A complete interactive experience where players help Goku transform into Super Saiyan by rapidly pressing the spacebar.
- Smooth animations for both base form transformation (8 frames) and Super Saiyan mode (6 frames).
- Dynamic aura visuals that grow organically as Goku powers up.
- Background music tailored to different game states (start screen, gameplay, score page) along with sound effects for powering up.
- A scoring system that tracks high scores across multiple play sessions.
- Fully functioning start screen, instructions screen, gameplay timer (30 seconds), and score page with restart functionality.
