Farmhand #145 – Visually Distinct Cows

January Farmhand backlog

This was the second ticket I finished off for jeremyckahn‘s Farmhand and the first one related to the art. Hopefully, it won’t be the last art ticket, because it was a lot of fun!๐Ÿ˜

I’m holding off on the write-up for Add a setting to hide the Home screen #234 until I’ve got a better handle on things so I can explain it a bit better. For now… you get cows!

End Goal

Currently cows are only visually differentiated by color. This can make it difficult for colorblind players to breed a Rainbow Cow. We should add some other non-color-based marker or indicator to differentiate the cows.

Why pick this ticket?

After the ‘hide homescreen’ ticket, I needed a bit of a brain break! Plus the pixel art reminds me of the games I made back in High School using Turbo Pascal and the pixel art tool my friend created in binary. (8088s, away!๐Ÿ˜‚ )

Anywho, it sounded like a fun, easy challenge, and since the cow art already existed and just needed tweaking it would mostly be learning how the pixel art program worked.

So… what did I do and what did I learn?

The Current Cows

Farmhand starting cow colors

One of the goals in Farmhand is to breed Rainbow Cows, which is done by making sure a cow has one of every color in its gene pool. Thus it’s important to be able to tell the cow colors apart so you pick the right ones for breeding!

Colorblindness

In order to see what the colors look like right now, I used https://www.color-blindness.com/coblis-color-blindness-simulator/ to run through all of the options.

As you can see, they aren’t impossible to tell apart right now, but they aren’t easy either.

Since I don’t want to change the colors themselves, the only way to differentiate the cows are going to be by pattern and pose. (I tried ‘by silly hats’ as well… but my silly hat drawing skills were not up to par. Alas.)

Patterns

Farmhand - grayscale new cows

Cows come in a wide variety of patterns, so the simplest thing to do was just play around with that!

Holsteins are the easiest so they make up a bulk of the patterns (the purple is more of a Guernsey), with the color either replacing white or replacing black. There actually aren’t many three-color cows, but I couldn’t help adding a white blaze to the yellow one.

I pulled in Ayrshire-ish pattern for the orange cow and a modified Belgian Blue (very little body roaning) for the blue.

The green cow is a modified Milch cow (no black head), but I needed smaller black spots to help tie the Rainbow cow back into the rest of the herd.

I really wanted to sneak in a belted cow, but it just looked odd. ๐Ÿ˜ญ

Poses

Since we’ve got a lot of similar patterns, it was time to tweak the poses!

I tried moving the legs around, but couldn’t settle on something that looked good both standing still and hopping. So I went for the tail and the facial expressions.

The tail got a new swish and startled post and the face got a grumpy, amused, looking down, and startled expression.

The only cow that kept the default face and tail was orange, with all other non-rainbow cows getting a change to either the tail or the face.

Part of me wants to go and make all of them as options, so you could have eight colors * three tail poses * five faces… but that way leads madness! ๐Ÿ˜‚

Farmhand - grayscale new cows

I did one last check using the same value of gray for all cows to make sure I could tell them apart.

I was looking for things like brown and purple, where the two are close in terms of pattern– to make sure they have visually distinct faces and tails.

I made sure the three cows that kept the ‘default’ face (brown, white, and orange) had the widest changes in pattern.

All in all, I think they turned out pretty well!

Piskel

Farmhand - Piskel Editor - blue belted cow

The editor that the folks over on Farmhand have been using was Piskel, which I hadn’t run into before. It’s got an online editor as well as a desktop version.

It’s incredibly easy to use and although it’s pretty basic, it’s definitely getting me in the mood to draw again! (Somewhere I have all the old .bmps for my ancient Turbo Pascal games…)

Currently, the cows are just static images (even though they have two layers in Piskel) and the game uses .pngs stored in src/img/animals/cows.

So basically, I just had to doodle in new patterns and then save them both as a .piskel file and a .png file.

PR Review

https://github.com/jeremyckahn/farmhand/pull/242

The PR review for this ticket was much smoother than for 145! ๐Ÿ˜…

There were a few tweaks to the pixel art that needed to be done and they gave me a link to a great read so I could learn a bit more about what makes a good sprite (https://michafrar.gumroad.com/l/pixel-logic).

So yay for easy wins! ๐Ÿ˜

Update!

Ticket #246 came in a little bit after this one and transformed things quite a bit! The patterns were all converted to grayscale and then the gray is programmatically swapped out for the cow’s color.

The cow’s color and genetics are indicated on the information card, so it won’t matter if folks can see the differences.

Which means there are now all-white cows… we have Charolais now! ๐Ÿ˜‚

TL;DR

This was an easy ticket because all that changed was the .piskel and .png files, no coding required! …Just a bunch of research into the various types of color blindness and what cows look like.

I learned I’ve got a lot to learn about pixel art, that cows look a lot more alike than I had suspected (I’m used to horses), and that it’s nice to have a pallet cleanser between coding tickets.

Now it’s time to dive back into code! ๐Ÿ˜

Next ticket up is A view for all current prices for unlocked items #235…


Leave a Reply