a new direction for heart by hoof's visuals?

it seems i have the itch to write on itch.io lately.

despite everything that has been happening, i have been working on heart by hoof. way more than i have in a while (insofar as i have actually been messing with it as opposed to never messing with it).

this is driven in part by seeing that it apparently already mostly works on android, plus some other random motivation to noodle on it.

in any case, this evening i got very into one particular thing: seeing if it would be possible to spruce up the graphics a bit.

now, i'm not really sure precisely my skill level with digital illustration. if i go by my jam ratings, my two strawberry jam games each got 3.5 stars in art, while willow and rain got... 2.2 stars...? i don't really trust the scores from nsfw minijam.

now i definitely think my games tend to look rather mediocre. so overall i am not necessarily sure how to improve things. but i thought i would try to do a couple things involving shading.

there is one core problem with that, though: heart by hoof is able to dynamically swap the colors of basically everything to match you and your partner. this is, in my opinion, one of its best features. how am i supposed to keep the palette swap ability while adding shading?

the obvious answer, at least to me, is to split each image into two layers: the base colors, which can be easily palette-swapped, plus one single layer for shading. i don't want to do more than one layer for shading because it will simply be too much pain to manage that many images per card. two is already plenty. (if i were going to use more than two images per card, i would probably eventually write a script for krita that would automatically find each relevant layer and export it. i might end up doing something like that anyway, even with just two images).

in any case, the point is this: i want to use one color layer, one "shading" layer, and some nice operation to blend the shading layer onto the color layer that will cause it to look good in the end.

and this is definitely not necessarily something that will "just work." in my experience there is not really a good way to split the shading for your image onto one single layer. i thought i would try it, eventually find it too bad, and either give up or switch to a more-than-two layers approach.

still, it's always worth a try to do the simplest things. and the very simplest thing, as far as i knew, was the "overlay" blend mode.

overlay basically does the following: if your color is exactly middle gray, it does nothing. if it's darker than that gray, it darkens the image, and if it's lighter than that gray, it brightens the image.

my first thought is i should use something like a dark red to shade, as a red shift in shading often looks quite nice. however, i quickly decided against this as it doesn't actually work for colors like blue. in the back of my mind i think it's possible i will make heart by hoof eventually have more pastel & colorful horses, so i want to make sure whatever i do is at least decently flexible in that regard.

so, now my constraints were: two layers, one blend mode, and i have to use grayscale for the shading layer. this is, again, not a setup i was optimistic about at all. shading with grayscale on one layer just is not that good.

my first attempts looked something like this:

now, i don't completely hate this. i like the hair texture on the tail in particular, and it looked decent with the colors that showed up in game. i'm still not sure exactly if or how i want to do fur texture on the horse bodies themselves. but, i think i will try for now.

my shading definitely leaves a bit to be desired.

one other problem with this, and a lot of the existing card art for heart by hoof, is the line art. it just isn't that good. i would like to get better at efficiently making good line art, but in general i feel like lines often betray me.

what i decided to do next was two things: one, try to do a digital painting style drawing, without worrying about the technical limitations, and then two, try to do the same drawing, but with the technical limitations in mind, and really look for a good blend mode.

this went very well!

what was the blend mode i stumbled upon? krita's "interpolate 2x" blend mode.

i have never heard of this blend mode before, or used it for anything, but it ended up working very nicely in my opinion. it really seems to work quite decently with grayscale, and i feel like i can especially make good use of krita's blending tools while using it. somehow it feels particularly similar to the blending stumps i've used in real life, and i think my experience with them carried over a bit.

i also started focusing on putting more detail into the images. i wanted to keep things like crease lines nice and thin, so that i could at least attempt to shade them properly.

i ultimately converted this image into one that works for the game (by swapping the palette around):

i set this image as the card art for "pull out." and tried seeing how it looked in game. i thought it was reasonably good!

so, of course, the only thing to do was to see if i could draw any more card arts. i ended up drawing two more, with the same interpolate 2x blend mode setup:

if you've played heart by hoof enough you should be able to recognize these two :)

one thing that was surprisingly difficult was figuring out how the "interpolation" blend mode is actually implemented. krita's website describes it like this:

Interpolation: Subtract 0.5f by 1/4 of cosine of base layer subtracted by 1/4 of cosine of blend layer assuming 0-1 range. The result is similar to Allanon mode, but with more contrast and functional difference to 50% opacity.

Interpolation 2x: Applies Interpolation blend mode to base and blend layers, then duplicates to repeat interpolation blending.

i tried implementing it based on this description, but could not come anywhere close.

turns out there are two critical details: first, by "cosine of <x>", what they really mean is "cosine of pi times <x>." second, to apply it twice, you don't do interpolation(interpolation(base, blend), blend), you do interp(interp(base, blend), interp(base, blend)). here is essentially the shader i'm using in godot:

uniform sampler2D shading;
vec3 krita_interpolation(vec3 base, vec3 blend) {
    return (0.5f - cos(PI * base) * 0.25 - cos(PI * blend) * 0.25);
}
vec3 krita_interpolation_2x(vec3 base, vec3 blend) {
    vec3 b = krita_interpolation(base, blend);
    return krita_interpolation(b, b);
}
void fragment() {
    COLOR = texture(TEXTURE, UV);
    vec4 s = texture(shading, UV);
    COLOR.rgb = mix(COLOR.rgb, krita_interpolation_2x(COLOR.rgb, s.rgb), s.a);
}

for further reference, also take a look at cfInterpolation and cfInterpolationB in the krita source code.

i was having so much fun making these silly drawings that i ended up also trying to make a handful of new assets for the base heart by hoof look, including the "in" and "out" symbols and the card itself. these may go through further adjustment.

all in all, i really am enjoying myself with this "just draw stuff without outlines and with some level of detail" mode. not having to worry about what the lineart looks like, only the silhouette of the objects, seems much nicer. there probably are still some issues with these drawings, and i may revise them further in the future. but drawing these actually seems like a pretty decent way to exercise my shading abilities and so forth.

i'm not sure if i will ever actually finish enough assets styled this way to port the whole game to this style, and i'm not sure how i would make the 3d models match in fidelity (or the sound effects...) but it does sound like it would be really cool. and of course, i do think there is a charm to the current art style of the game, although i've gotta say... some of those card arts are pretty dang rough. i'm honestly not sure how i was so bad at line art at the time. i was definitely rushing quite a bit. ...and maybe i'm still that bad at line art. lol

to close this off, here is a picture of what these sorta look like in game. as you can see, i didn't have time to do the "buff" card art. i also then spent another hour writing this post, so i am up kinda late. but hey, fun is fun! and i hope to keep having fun working on this game, so that at some point it gets an update or something.

if you have any thoughts, definitely feel free to share! good night everypony.