The Quail's Nest

August 31, 2023

Project #4: Let's Play Dress Up

The concept for this one was simple: You have clothes and a prompt, and you get dressed.

The artwork is my own, from back when I was playing around with pixel clothing. It’s not great (I clearly need to work on lighting), but it’s perfectly functional for this little experiment.

Big Decisions

There was one decision, early on, that set the course for all work done for the rest of the month:

Option 1: Recolor every art asset into each of the 31 colors the project uses.

Benefit:

Simplifies the code. The image you have is what you use, and you don’t need to do anything to it.

SUPER Benefit:

I can use HTML for the UI. It’s hard to overstate how important this is – a major reason I build my prototypes on the web is because it handles UI and layout for me. Without access to HTML and CSS, I would have to do this from scratch.

Drawback:

Manually recoloring each of the assets is a ton of work. There is no way I could do each one individualy. Even putting all the assets into a single tilesheet and recoloring just that would need 31 different colorways, and any edits I need to make to the assets would need to be made to each variation as well.

Drawback:

Loading 800 assets into this tiny little web experiment seems…excessive (26 items, each in 31 colors). The real way to do this is to combine assets into spritesheets, but that needs time to put together the spritesheets, and code to deal with the spritesheets.

Option 2: Only use a single image for each asset, and tint them in the code.

Benefit:

Massively simplify the art problem. Any asset can be edited easily, without needing to edit any other colorways.

Benefit:

Reduce the size of the application by an order of magnitude, compared to Option 1. I would only need to load in 27 assets, instead of 800.

Drawback:

HTML and CSS do not support color tinting. Pixi does, so I could use it for the application, but that means I would need to do the UI and layout manually.

And the Winner Is…

Option 2: Fewer assets, tint them in the code.

The tradeoff was really where would I spend my time, on art recoloring and spritesheet integration, or on layout and UI. I am not an artist; I don’t have the tools and workflows set up to deal with art-related issues. I could have spent the time to set those things up, but I chose not to because I really wanted to keep this project simple. I wanted to have time to focus to on creating an experience.

With that in mind, I used HTML for everything I could. The real time sink was the closet: how the clothes are presented, taken out, and put back. The result isn’t the best, but it works.

Reflections

My biggest regret is that I don’t have separate layouts for larger screens vs smaller screens. Dress up felt better when you could see all the clothes at once: decisions felt more natural when all options were in front of you. Small screens just don’t have the space to fit all the items, so instead we have separate tabs for each category.

Ulitmately, I’m pleased with the result. I wanted to capture the playfullness of getting dressed, something that often gets lost in the realities of life. Even with all the rough edges, this project accomplishes that.