What?

I wanted a website that you could use to find individual Stardew Valley sprites. Easier to show than tell here though, but I think I succeeded:

Search UI

Results

As you can see, you type in whatever you want to see, and it pulls up every individual sprite it can find that matches the query. Pretty simple! You can also click on a sprite to download it or use the pattern generator to make a cross stitch pattern out of it (this was one of the reasons I wanted this, because people sell stardew valley cross stitch patterns for money and I thought that was weird i guess?)

Sprite UI

But yeah that’s pretty much it!

Oh and, it also has a button to make up a random query that’s really fun to mess with. It tries to find one or more search terms that result in I think 10-50 results? So it might come up with “Ostrich” or “Pineapple” or “Bookseller” or whatever. There’s lots of weird stuff in there!

How?

I couldn’t find the sprites fully unpacked anywhere online, so I decided to just do it all myself (actually with TONS of help from Nanner, who loves rote tasks in a way that I have trouble understanding). My starting point was about 100 or so spritesheets, like these:

Furniture sprite sheet Void Chicken sprite sheet Characters (?) sprite sheet

So I wrote a bunch of surprisingly involved python utilities to make it as frictionless as possible. To start, I wrote a command line application in python to unpack the spritesheets from stardew valley’s files into individual sprites, one to tag those sprites with what they are, and one to convert that data into a more convenient form to be used in the website.

It was actually really involved, and really cool! It had a whole real-time command-line interface that renders an image to display that updates whenever anything changes, and it prints all its messages with different colors, and had help commands to list out all the different functions!

Before "divide" After "divide" Help menu

From there, all that was left was to make a simple website to present everything. I went with a static website using Vue. The data is structured as follows:

  1. serves a json file for each tag listing out all the sprites that were assigned with that tag, and then each sprite also has its own json file to list all the tags it was assigned. The frontend just requests these files, and then whichever sprites it needs to show using Vue-loaded img tags.