Offset sprite sheet frame coords to enable clothing color options?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By DrFizzles

I am just starting to learn Godot and I’m currently playing with creating a player scene with different accessories. Each accessory/clothing item is a separate Sprite2D node with a sprite image that I downloaded from itch.io.

The way the sprites sheets are setup, each clothing item sheet has some variated color options included in the same sprite image. Here is an example of the sprite sheets I am using.

Imgur

And here is how I have the nodes and animations setup using Sprite2D and AnimationPlayer nodes.

Imgur

As you can see in the sprite sheet, there are three different color options for the “Shirt” sprite and they all have matching frames.

I’m wondering if there is a way to have the animation frames setup the way I have, but just increase the x coordinate for the sprite sheet to change the color of the clothing item.

I hope I explained that well! I also know I can just split the color options into different sprite sheets and change the texture image depending on the chosen variation, but since this is how the sprite sheets came I wondered if there was a way to accomplish it as is.

EDIT for some clarity:
The end goal would be for the user to be able to cycle through the different clothing options and pick one. So if they picked “Suit Top 1”, “Suit Top 2”, or “Suit Top 3” then could I use that option to specify an “offset” of some sort in the sprite sheet/animation so it would use the correct frames for the color they chose?

I’m not entirely sure of what you want but you can animate any property in the animation player, the same way you change the sprite index and add a key frame, you can change the x value or any other value in the editor tab.

CollCaz | 2023-05-16 19:21

That’s fair, I should have been a little more clear on the end goal.

The end goal would be for the user to be able to cycle through the different clothing options and pick one. So if they picked “Suit Top 1”, “Suit Top 2”, or “Suit Top 3” then could I use that option to specify an “offset” of some sort in the sprite sheet/animation so it would use the correct frames for the color they chose?

I’m starting to think they best option would be to just split each color option into their own spritesheet files, but it would be nice to just have a single “Suit Top” sprite and somehow programmatically specify which frames to use.

DrFizzles | 2023-05-16 19:37

Did you ever figure this out? I’m currently dealing with the exact same problem for the same group of spritesheets. Great asset!