Concept:
I was inspired by the dressing game that I liked to play when I was a child, I attached the image below. In my version, players can click on a character’s shirt, pants, and shoes to change their colors and create different outfits. The game is simple and interactive, allowing players to explore many combinations and experiment with different styles. It has a start screen to begin the game, a dressing area where the character is displayed with a calm background, and an end screen with a restart option so the game can be played again. I wanted to recreate the fun and creativity I experienced as a child, while keeping the game easy to use and visually pleasing. I wanted to capture joy of trying new looks and making choices in a playful and colorful way.
Inspiration:
Design and User Interactive:
The game has a simple and playful design, using soft and pleasant colors to create a friendly atmosphere. Most of the visuals are based on images that I created myself and uploaded into the project. Currently, the character is represented with basic shapes that change color when the user clicks on them, giving a simple interactive experience. In the future, I plan to replace the shapes with a full mannequin, where each part of her clothing will change whenever clicked. I will also create and upload a full set of clothing images into the p5 sketch, allowing for a more detailed and visually appealing dress-up experience.
The game itself is highly interactive, allowing players to click directly on the character’s shirt, pants, and shoes to change colors. Buttons like PLAY, FINISH, and RESTART respond to clicks to move between game states. This interactivity makes the game engaging, as players can experiment with different outfit combinations and immediately see the results on the character.
function mouseClicked() {
if (gameState === "start" && playButton.clicked(mouseX, mouseY)) {
playButton.action();
}
else if (gameState === "playing") {
// Change clothes when clicking on body parts
if (mouseX > width / 2 - 50 && mouseX < width / 2 + 50 && mouseY > 300 && mouseY < 400) {
currentPants = (currentPants + 1) % pantsColors.length; // Change pants
}
else if (mouseX > width / 2 - 50 && mouseX < width / 2 + 50 && mouseY > 150 && mouseY < 300) {
currentShirt = (currentShirt + 1) % shirtColors.length; // Change shirt
}
else if (mouseX > width / 2 - 50 && mouseX < width / 2 + 50 && mouseY > 400 && mouseY < 500) {
currentShoes = (currentShoes + 1) % shoesColors.length; // Change shoes
}
Sketch:
The most frightening part and what I did to reduce this risk
One of the most challenging parts was managing the game states start screen, playing screen, and end screen, because each screen had different buttons and interactions. It was difficult to make sure the right buttons showed at the right time and that clicking them went to the correct screen.
I solved this by creating a Button class to handle all clickable buttons in the same way and by using separate functions to draw each screen. This kept the code organized and made it easy to add or change buttons later. I also made sure the mouseClicked() function only responded to buttons for the current screen. As a result, the screens change smoothly, the game feels easy to use, and the interactions are clear for the player.
Reflection and Future Improvements:
So far, I really like the concept of my project and I’m excited to experiment and see the final result. For future improvements, I plan to replace the simple shapes with detailed images of the clothes, making the character and outfits more visually appealing. I also want to add sound effects that play when the user clicks on each clothing item to make the game more interactive. Additionally, I would like the character to have a speech bubble with text whenever the user clicks on her. These features will make the game more dynamic, engaging, and fun for players.