Making a Dress-up Doll on Scratch

If only coding felt like playing with Legos...

I’ll admit it: I don’t have the most patience for learning new games and tools- just thinking about a whole new program is an ordeal. However, Scratch made this process actually feel fun. The code blocks snap together like Lego toys! I set something to recognize a Click input, and move to a specific Location as simply as dragging and dropping.

MIT’s Scratch coding tool helped remove all of my headache about coding. The builder is very quick to refresh and easy to understand after watching the basics video. I used one of the templates to start with my own game too. After a bit of practicing, I was able to set functions and positions really easily: the sprite management is very intuitive.

I made my art with the Procreate app on my iPad since it was easy to export as a .PSD file. Photoshop files preserve layers, so I could use a tool like photopea.com to separate the layers into transparent .png images for Scratch.

A look at the code blocks:

My sprites have 3 main inputs- when the Green Flag (game start) is clicked, everything returns to its unique position. When a sprite is clicked and dragged, it can be moved forward 1 layer as well. When a sprite is clicked without dragging, it will go to the center position on top of the doll.

My original art is not cropped– I saved the doll and every article of clothing at a 1000px square. Scratch automatically resizes this to their canvas size.

The main blocks:

Red: When flag is clicked, go back to unique starting position.
Green: When clicked and dragged, move forward 1 layer.
Blue: When this sprite is clicked, it snaps onto the doll.

The Block layout. Click this image to see inside the Editor!

Want more functional art tutorials, like how to draw a vtuber puppet? Check out my article on GrifNMore:

Scroll to Top