Make a Dress-up Game Using React and Sass
I would define a character generator as a user interface (UI) which allows you to choose between hairstyles, skin color, eyes, nose, mouth, and other character defining features in order to create a unique character. An example of this is South Park’s avatar generator. I would define a dress-up game as a UI which allows you to choose between articles of clothing for a static character. Dress-up games and character generators can have some overlap, since character generators can give you clothing options and dress-up games can give you some control on the character’s appearance such as hair color and hairstyle. Within this blog I will use the terms “dress-up” and “character generator” interchangeably.
The final product (so you know what you’re getting into when reading this tutorial) can be viewed here and here:
The code discussed in this article is available in my GitHub account in a repository called
This project was bootstrapped with Create React App. In the project directory, you can run: Runs the app in the…
Get Your Images
I drew my images using Inkscape, a free and open-source vector graphics editor used to create vector images. I wanted my images to be vector graphics so that eventually I can program a way to switch colors for the images without having to save multiple versions of the same image in different colors (I haven’t figured out how to do this yet, but I know it’s possible). I exported the images as PNG files for this project, but you can try using different file formats.
The dress-up game we’re making in this tutorial will have the following changeable items: eyes, nose, ears, mouth, and clothes.
I saved each item into different layers. There’s an image for the body, and images for the different eyes, noses, ears, mouths, and clothes.
The items do not overlap with each other, so we won’t have to handle overlap order (z-index) in the CSS.
File naming convention will be important for the program to work. This will have to be hard-coded.
Install NPM, or another package manager such as Yarn, if you don’t have one installed already. I installed the latest version of Node and NPM.
Create React Project
npm start will run the project locally and open it in your browser. We will be overwriting the code that is currently in App.js, which is where the main logic is located.
Sass stands for Syntactically Awesome Style Sheets. It is a CSS preprocessor, which means it’s a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. It adds special features such as variables, nested rules and mixins into regular CSS, making the coding process simpler and more efficient. Sass reduces repetition of CSS and therefore is time saving.
I decided to use Sass instead of CSS so to keep the code concise, because there is a lot of repeated styles for the different dress up items.
After running the command, you should see
node-sass in your package.json file.
NOTE: When installing
node-sass without specifying a version (having installed the latest Node and NPM versions) and running the project, I got the following error:
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
I read in this Stack Overflow post that in order to fix this issue you need to install the latest version of
node-sass before 5.0 (which is
email@example.com) I did this and the project ran without errors.
Display Images on the Screen
Create an assets folder under the
/src folder. In the assets folder, create 2 folders, one for the images (which I called “img”) and another for the Sass files (which I called “scss”).
/scssfolder you will save a file titled
style.scss (it can be any other name, but it needs the scss extension). In the
/img folder, save the images for the game (the base/static body and the exchangeable items). Have a folder per item (e.g.
We are displaying the images by using the CSS property
background-image. We define div tags in the code with a class name corresponding to the general item (e.g. eyes), and an id corresponding to an specific item (e.g. eyes1) which will be switched based on the user’s input. This is how we will change the specific items shown.
If we replace the code present in App.js with the following code:
And we add the following to
We see the following on the screen (corresponds to my image files, which you can check in the repo):
We need to add the rest of the images to the style sheet, and I have different amounts of images per item. You can imagine how long the
style.scss file will get if I just keep copy-pasting the styles and changing the numbers so they correspond to the right images.
It would become difficult, tedious, and error prone to add new items and new images per item. It’d be unmaintainable and frustrating. This is where Sass comes in!
Let’s first tackle the images per item. Each item basically has the same file name, except for the number at the end. We can generate the styles per image under an item using a for loop.
We’ve reduced the code, but we can do better. If we create a map (a map in SASS has key/value pairs) where the keys are the item folder names and the values are the number of total images for each item, we can reduce the above code down to what resembles a nested for loop, using the @each rule.
Now that we have added all the images to the style sheet in a concise manner, let’s work on implementing the logic for switching between item images on the character (the dress-up functionality).
Add Dress-up Functionality
In the previous section we defined div tags in React with a class name corresponding to the general item (e.g. eyes) and an id corresponding to an specific item (e.g. eyes1) with the intent of switching these items based on the user’s input. The id being changed will change the image shown for an specific item. You can test this by changing the ids of the divs in the React code and reloading the site, or by changing the ids using Chrome DevTools in the Chrome browser.
We will start by adding “next” buttons per item, so the user can switch each item.
Add styling to the “next” buttons, so they are placed to the right of the dress-up character:
When a button for an item is clicked, we want the class name for the corresponding item div to be updated to the next item. For example, when the button titled “next eyes” is clicked, we want the class name for the div with id equal to “eyes” to change from “eyes1” to “eyes2”, or from “eyes2” to “eyes3”, and so on. To achieve this we need to keep track of the current number of each item being displayed and the total number of images available per item.
App() function, define a state variable called
dressupState, where we will keep track of the current image per item and the total images per item:
Define a function titled
next for updating the image for an item:
next() function to “next” buttons:
Next buttons can be written in shorter code by iterating over the keys of the
Update the divs which were added earlier so that their class values are defined based on the current image per item:
The divs can also be written in shorter code by iterating over the keys of the
Now a user can choose different items using the “next” buttons.
[Bonus] Add Randomize Button
In order for randomly selected items to be displayed, we need to get a random integer from 0 to the total number of images for an item and assign it to the class name of a corresponding item’s div.
I decided to make a function called
updateDressUp() which updates the
dressUpState state variable, given
new_current values. I did this in order to avoid repeating the lengthy call to
I created a function called
randomize which, per item, gets a random integer from 0 to the total number of images for the item and sets the new (or same) number as the new current for that item.
Then I added a button which calls the
randomize function when clicked.
Finally, I added styling to the button. I placed it under the “next” buttons and made the button’s text bold.
style.scss style sheet:
Deployed dress-up game: https://meramos.github.io/React_Dressup_Game/
Now you have a basic dress-up game or character generator which you can add more features to and customize. You could:
- add “previous” buttons to go alongside the “next” buttons,
- add a panel with buttons per image per item so instead of a user having to click through the next buttons they can view and click the exact item they want to use,
- add functionality to download an image with the user’s selected items,
- make the site pretty,
If you enjoyed this article please recommend and share.
- React: Create a New React App
- What is Sass? Your guide to this top CSS preprocessor
- Sass Introduction
- Adding Sass to Create React App Applications
- Stack Overflow: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0
- Sass Documentation: for rule
- Sass Documentation: maps
- Sass Documentation: each rule
- Chrome DevTools
- React: Introducing Hooks
- React: State and Lifecycle
- React: Using the State Hook