I developed “Dragon Ball Z: Power Level Training,” an engaging and nostalgic game that captures the essence of the iconic anime series. This interactive experience allows players to step into the shoes of a Dragon Ball Z warrior, focusing on the thrilling power-up sequences that made the show so memorable. Players start with a low power level and, through rapid clicking, increase their strength while watching their character’s energy aura grow. The game features familiar visual and audio elements from the series, including character sprites, power level displays, and the unmistakable sound of powering up. As players progress, they encounter milestones that pay homage to famous moments from the show, culminating in a final power-level goal that, when reached, declares the player a true warrior.
Assignment Brief
- Make an interactive artwork or game using everything you have learned so far
- Can have one or more users
- At least one shape
- At least one image
- At least one sound
- At least one on-screen text
- Object Oriented Programming
- The experience must start with a screen giving instructions and wait for user input (button / key / mouse / etc.) before starting
- After the experience is completed, there must be a way to start a new session (without restarting the sketch)
Conceptualisation
The idea for “Dragon Ball Z: Power Level Training” was born from a deep appreciation for the iconic anime series and a desire to recreate its most thrilling moments in an interactive format. As a long-time fan of Dragon Ball Z, I’ve always been captivated by the intense power-up sequences that often served as turning points in epic battles. The image of characters like Goku, surrounded by a growing aura of energy as they pushed their limits, has become a defining element of the series.
This project concept emerged while rewatching classic Dragon Ball Z episodes, particularly those featuring transformations and power level increases. I was struck by how these moments, despite their simplicity, generated immense excitement and anticipation among viewers. I wanted to capture this essence and allow players to experience the rush of powering up firsthand. The idea evolved to focus on the visual and auditory aspects of powering up, combining the growing energy aura, rising power level numbers, and the distinctive sounds associated with these transformations.
By digitalizing this experience, I aimed to create an interactive homage to Dragon Ball Z that would resonate with fans and newcomers alike. The game’s design intentionally incorporates key visual elements from the series, such as the character sprites and power level displays, to evoke nostalgia while offering a fresh, interactive twist on the power-up concept. This project not only serves as a tribute to the series but also as an exploration of how iconic pop culture moments can be transformed into engaging interactive experiences.
Process
I practiced making classes for certain elements as that is what I struggle with most. I created these classes for Characters, and Auras around the characters. Through this, I was able to solidify my ability with classes, now being a pro, and am able to use them for even more features.
constructor(name, x, y) {
this.powerLevel = 100; // Starting power level
this.sprite = null; // Will hold the character's image
this.aura = new Aura(this); // Create an aura for this character
this.powerUpSound = null; // Will hold the power-up sound
// Load character sprite and power-up sound
loadAssets(spritePath, soundPath) {
loadImage(spritePath, img => {
// Load the power-up sound
this.powerUpSound = loadSound(soundPath);
// Increase power level and grow aura
// Play power-up sound if loaded
if (this.powerUpSound && this.powerUpSound.isLoaded()) {
this.powerUpSound.play();
// Display the character, aura, and power level
push(); // Save current drawing style
this.aura.display(); // Display aura first (behind character)
image(this.sprite, this.x, this.y);
// Display character name and power level
text(`${this.name}: ${this.powerLevel}`, this.x, this.y + 60);
pop(); // Restore previous drawing style
// Add any character-specific update logic here
// This could include animation updates, state changes, etc.
this.character = character; // Reference to the character this aura belongs to
this.baseSize = 100; // Initial size of the aura
this.currentSize = this.baseSize;
this.maxSize = 300; // Maximum size the aura can grow to
this.color = color(255, 255, 0, 100); // Yellow, semi-transparent
this.particles = []; // Array to hold aura particles
// Increase aura size and add particles
this.currentSize = min(this.currentSize + 10, this.maxSize);
// Add new particles to the aura
for (let i = 0; i < 5; i++) {
this.particles.push(new AuraParticle(this.character.x, this.character.y));
// Display the aura and its particles
push(); // Save current drawing style
ellipse(this.character.x, this.character.y, this.currentSize, this.currentSize);
// Update and display particles
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
this.particles[i].display();
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
pop(); // Restore previous drawing style
class Character {
constructor(name, x, y) {
this.name = name;
this.x = x;
this.y = y;
this.powerLevel = 100; // Starting power level
this.sprite = null; // Will hold the character's image
this.aura = new Aura(this); // Create an aura for this character
this.powerUpSound = null; // Will hold the power-up sound
}
// Load character sprite and power-up sound
loadAssets(spritePath, soundPath) {
// Load the sprite image
loadImage(spritePath, img => {
this.sprite = img;
});
// Load the power-up sound
this.powerUpSound = loadSound(soundPath);
}
// Increase power level and grow aura
powerUp() {
this.powerLevel += 50;
this.aura.grow();
// Play power-up sound if loaded
if (this.powerUpSound && this.powerUpSound.isLoaded()) {
this.powerUpSound.play();
}
}
// Display the character, aura, and power level
display() {
push(); // Save current drawing style
this.aura.display(); // Display aura first (behind character)
if (this.sprite) {
imageMode(CENTER);
image(this.sprite, this.x, this.y);
}
// Display character name and power level
textAlign(CENTER);
textSize(16);
fill(255);
text(`${this.name}: ${this.powerLevel}`, this.x, this.y + 60);
pop(); // Restore previous drawing style
}
update() {
// Add any character-specific update logic here
// This could include animation updates, state changes, etc.
}
}
class Aura {
constructor(character) {
this.character = character; // Reference to the character this aura belongs to
this.baseSize = 100; // Initial size of the aura
this.currentSize = this.baseSize;
this.maxSize = 300; // Maximum size the aura can grow to
this.color = color(255, 255, 0, 100); // Yellow, semi-transparent
this.particles = []; // Array to hold aura particles
}
// Increase aura size and add particles
grow() {
this.currentSize = min(this.currentSize + 10, this.maxSize);
this.addParticles();
}
// Add new particles to the aura
addParticles() {
for (let i = 0; i < 5; i++) {
this.particles.push(new AuraParticle(this.character.x, this.character.y));
}
}
// Display the aura and its particles
display() {
push(); // Save current drawing style
noStroke();
fill(this.color);
// Draw main aura
ellipse(this.character.x, this.character.y, this.currentSize, this.currentSize);
// Update and display particles
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
this.particles[i].display();
// Remove dead particles
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
pop(); // Restore previous drawing style
}
}
class Character {
constructor(name, x, y) {
this.name = name;
this.x = x;
this.y = y;
this.powerLevel = 100; // Starting power level
this.sprite = null; // Will hold the character's image
this.aura = new Aura(this); // Create an aura for this character
this.powerUpSound = null; // Will hold the power-up sound
}
// Load character sprite and power-up sound
loadAssets(spritePath, soundPath) {
// Load the sprite image
loadImage(spritePath, img => {
this.sprite = img;
});
// Load the power-up sound
this.powerUpSound = loadSound(soundPath);
}
// Increase power level and grow aura
powerUp() {
this.powerLevel += 50;
this.aura.grow();
// Play power-up sound if loaded
if (this.powerUpSound && this.powerUpSound.isLoaded()) {
this.powerUpSound.play();
}
}
// Display the character, aura, and power level
display() {
push(); // Save current drawing style
this.aura.display(); // Display aura first (behind character)
if (this.sprite) {
imageMode(CENTER);
image(this.sprite, this.x, this.y);
}
// Display character name and power level
textAlign(CENTER);
textSize(16);
fill(255);
text(`${this.name}: ${this.powerLevel}`, this.x, this.y + 60);
pop(); // Restore previous drawing style
}
update() {
// Add any character-specific update logic here
// This could include animation updates, state changes, etc.
}
}
class Aura {
constructor(character) {
this.character = character; // Reference to the character this aura belongs to
this.baseSize = 100; // Initial size of the aura
this.currentSize = this.baseSize;
this.maxSize = 300; // Maximum size the aura can grow to
this.color = color(255, 255, 0, 100); // Yellow, semi-transparent
this.particles = []; // Array to hold aura particles
}
// Increase aura size and add particles
grow() {
this.currentSize = min(this.currentSize + 10, this.maxSize);
this.addParticles();
}
// Add new particles to the aura
addParticles() {
for (let i = 0; i < 5; i++) {
this.particles.push(new AuraParticle(this.character.x, this.character.y));
}
}
// Display the aura and its particles
display() {
push(); // Save current drawing style
noStroke();
fill(this.color);
// Draw main aura
ellipse(this.character.x, this.character.y, this.currentSize, this.currentSize);
// Update and display particles
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
this.particles[i].display();
// Remove dead particles
if (this.particles[i].isDead()) {
this.particles.splice(i, 1);
}
}
pop(); // Restore previous drawing style
}
}
I would like to clarify, I did use ChatGPT to help me understand classes further and it guided me as I used it to edit this code. However, the bulk of the work us mine.
Predicted Challenges
One of the most intricate tasks will be implementing a particle system to create a dynamic, flowing energy aura around the character. This will require crafting a Particle class with properties like position, velocity, and lifespan, as well as methods for updating and displaying particles. Managing the creation and removal of particles based on the character’s power level will add another layer of complexity to this feature.
Customizing sounds for each character, particularly matching their iconic screams and power-up vocalizations, presents a unique challenge in this project. Dragon Ball Z is known for its distinctive character voices, and replicating this authenticity in the game will require careful sound editing and implementation. Finding high-quality audio clips that capture the essence of each character’s voice, while also ensuring they fit seamlessly into the game’s audio landscape, will be a time-consuming process.
The use of character sprites will be another difficult process, especially given that extracting character models from sprite sheets is a relatively new technique for me. Sprite sheets are efficient for storing multiple animation frames in a single image, but working with them requires a solid understanding of image slicing and animation timing. Learning how to properly extract individual frames, create smooth animations, and manage different character states (idle, powering up, transformed) will likely involve a steep learning curve. This process may involve trial and error, as well as research into best practices for sprite animation in p5.js.
Minimum Deliverables and Extras
Minimum:
- Start screen with instructions and a start button
- Main game screen with: Character sprite, Power level display, Energy aura (shape) around the character, Power-up button
- Basic power-up mechanics (increase power level on button click)
- Growing energy aura as power level increases
- At least one sound effect (e.g., power-up sound)
- Victory screen when final goal is reached
- Option to restart the game after completion
- Object-Oriented Programming implementation (Character, PowerUpButton, and EnergyAura classes)
Extras:
The game will start with a Start Screen featuring the game title and a simple “Start” button. I also plan to add access settings, like toggling sound on or off. Once the game begins, moles will randomly pop up from a grid of holes, and the player must click or tap on them to score points. Not every hole will be safe. Occasionally, a bomb will pop up, and hitting it will result in losing points or lives. Players will have a limited time (for example, 60 seconds) to score as many points as possible before the timer runs out. As the game progresses, the difficulty will increase, with moles appearing and disappearing faster, making the game more challenging.