Tutorial: Replacing an Image

So you want to make something in Vanilla look like something else. How do you do that? Definitely NOT with xnb mods! :D No, you just use Content Patcher and everything is easy-peasy.

Getting Started

This tutorial will assume you have already used Content Patcher before or are at least familiar with the concept of a Manifest. If those words mean nothing to you, start with a beginner tutorial like Adding New Dialogue.

Make sure you have unpacked the game files!!

Your basic code

Inside your content.json (if you don't know what that is, again, go read Adding New Dialogue) put the following code:

{

"Format": "1.22.0",

"Changes": [

	   {
          "Action": "EditImage",
          "Target": "WHERETHEFILEIS",
          "FromFile": "assets/YOURFILENAME.png",
		  "FromArea": { "X": ???, "Y": ???, "Width": ???, "Height": ??? },
		  "ToArea": { "X": ???, "Y": ???, "Width": ???, "Height": ??? },
		  "PatchMode": "Replace",
       },
	]
}

For each image you want to edit (or each part of an image you want to edit), you'll use code that looks basically like this. You can also add "when" conditions if you want.

This code will NOT work until we have the right targets and coordinates in place, so let's figure those out! Note: we have a SpringObjects_Coordinates page to help!

Finding your target

What do you want to replace? You'll need to find it in the unpacked content. Some things are easier to find then others. Maps are all in the Maps folder, but crops are for some reason all in Maps/springobjects. Why? ¯\_(ツ)_/¯ Ask ConcernedApe. There's also a running joke that if you can't find a sprite its in cursors.

Depending on what you want to replace, you may need to replace more than one location. For example, each building in the town has a seasonal version in Maps/spring_town, Maps/summer_town, etc.

When you have found your target, replace "WHERETHEFILEIS" with the file path and name, leaving off the .png

Examples

If the file you want to target is Stardew Valley\Content (unpacked)\TileSheets\fruitTrees.png, then your target is TileSheets\fruitTrees

If your file is Stardew Valley\Content (unpacked)\Portraits\Abigail_Beach.png, then your target is Portraits\Abigail_Beach

If your file is Stardew Valley\Content (unpacked)\Characters\Farmer\accessories.png, your target is Characters\Farmer\accessories

Now you want to get the coordinates for where you'll be targeting. Open up the target file in an image editing program. Even Paint will work.

Zoom in enough that you can be sure you're targeting a single pixel. Now, look in the corner or wherever your program shows you coordinates. You should see what pixels your mouse in on.

You want to mouse over the upper-left corner of the area you want to edit and get that specific pixel's x and y coordinates. X will be the first number, y will be the second number.

These numbers are the "X" and "Y" in your "To Area" field. Put them in your code now.

How big is the area you want to target? You can move your mouse to the lower-right corner and get that number, then subtract the first numbers to get your width and height, or you can remember that everything in Stardew Valley exists on a grid on 16 x 16 pixels and do a quick calculation.

An object will always have a height of 16 and a width of 16

A craftable will have a height of 32 and a width of 16 (except for certain big craftables)

A crop has a height of 32 and a width of 128

Buildings and other town features have variable widths and heights; you will need to find out the appropriate ones for your mod yourself.

Once you have your width and height, you can add them to your code in the To Area.

Making your replacement

The easiest way to make a replacement sprite is to copy the thing you're replacing into an image editing program and then edit it. :)

When you're done, save it as a png in a folder named "assets" inside your mod folder.

You can now edit the "FromFile" part of the code to have your png's name. Unlike the Target, this time you do want to include the ".png" part.

Assuming your png file just has the part you want to replace and you're not doing anything fancy (you'll know if you are), your FromArea X and Y are both 0. Add that to your code.

Assuming you made your png the same size as the area you want to replace, your FromArea width and height are the same as the width and height you used in your ToArea.

That's it! Do the same process for all the things you want to replace.