Pyrian's Watercolors

Pyrian

I'm working on some watercolor art for a personal game project (which per forum policy will go unnamed for now), slowly replacing the digital "programmer art" it had before. There's a sort of random overmap in which each site you can visit has a terrain type, represented with a little picture. Here's what it looked like originally:



Here's my physical paintings:



And here they are, in-game:



This is a bit zoomed in so you can see closer to what part of it might look like full screen:



So... Does this work? Better, worse, something else? Any tips or criticisms, things I could maybe fix? Feedback is always appreciated!

NightDragon

I think the idea is cool, but you may want to paint larger. You're painting very very tiny and I think losing some of the clarity as a result.

Try to consider the brightness of the colors you're using...when you're creating small icons like this, clear silhouettes and forms are VERY important. When you change these over to greyscale, they're a bit hard to understand.

I actually think the "programmer art" is easier to read, for a few reasons. The icons there are very distinct from one another, and have clear silhouettes. In your version, you've removed the silhouettes entirely by placing all the scenes in square frames. Many of your paintings also show extremely similar scenes (i.e. a brown road in the center of the image, with the sky covering the top 1/4).

I'm a bit confused by the yellow "S" shape and the other additions from the in-game screenshot...it looks a little messy? You can create watercolor art for a game and have it look fantastic, but it does require some finesse. Watercolor like this looks rather loose, which is fine, but if everything looks loose, it can look messy.

Maybe try planning out and drawing some distinct, simple silhouettes for each terrain, and consider using some different colors per slot, too. Different greens, different shapes, etc. Anything that would help each area seem unique and immediately recognizable from its icon on this page.

Pyrian

Thanks for the advice! I really appreciate the feedback. For the record, here's what the "yellow S" (which identifies sites you can immediately travel to) moves like in GIF form:

Pyrian

Moved on to some environment work. Here's the dirt and grass of a trail. It's hex based; the grass is "over" the dirt, while terrain of the same type is drawn lower over higher. Each type has four paintings; this lets them be both randomized and follow a no-adjacency rule.

lyrium

The terrain paintings seem to be working well, and it's nice to have different paintings to vary up each texture a bit.
Did you revisit the overmap icons after reading ND's input? I agree with everything she said, as far them being kind of unclear. The original icons are much more different from each other, even just simply because one depicts a plant while another depicts a rock and another a liquid, etc. Since the space you have to work with for each one is so small, you might have more success simplifying what's in each icon quite a bit (especially by cutting down the backgrounds). Two pine trees, two crop plants, a rock pile, etc. More contrast and making use of silhouettes, trying these things would be a good idea.
Looking forward to seeing more! Watercolor in a game is so nice.

Pyrian

Thanks, lyrium! I've gotten a lot of great feedback on the site icons and I plan on revisiting them - but not until I've got a draft of the terrain and units, as well. I've got several water/mud and bush/underbrush hexes in the pipeline and I'll post those as soon as I can.

Pyrian

Adding terrain types, one by one. It's slow going between the painting, the scanning and processing (and then the re-painting and re-scanning and...). Here we've got water, mud, deep mud, and low brush. (The water is animated, though I plan on doing more with the animation.)

Pyrian

New rock (gravel, boulders, impassable rock walls) and bushes, in their painted and in-game forms. I'm still not happy with the bushes, but I really like how the rocks turned out. Still needs their shadow layer, though. Maybe I'll take all my failed attempts at low brush and merge them together into a single extra-bushy hex tile sprite.

Pyrian

I've got some shadows! They're only cast on the ground layer, but it helps certain terrain types a lot. The shadows are painted, too, lol, but you can't really tell.

I took three different tries at making low brush sets, and combined them in a single tile. Now it works much better! Also, I've painted big/high bushes. Low brush slows movement and can be hidden in with the stealth skill. High bushes also block line of sight.



I tried coloring the different types of rocks. I have mixed feelings about the result. They certainly "pop" better, but they were IMO pretty distinguishable before. I don't really like the look as much. Might try a different set of colors. In gameplay, the low gravel slows movement, the medium boulders also can be hidden in with stealth skill, while the big ol' rocks are impassable and block line of sight.

lyrium

It seems like it wouldn't bee too tough to find a happy medium with the rock colors. It's much easier to tell them apart when they aren't the exact same color (which seems important given that they have different functionality in-game), but maybe the colors could be on more of a monochromatic gradient, since that's the look you prefer? Either change their hue from each other (but more subtly) or keep the same color and just change values more dramatically?

Pyrian

Yeah, I think you're right. Thanks for the tip! I tried making the medium boulders halfway between the two earlier drafts and reverting the big rocks to their original grey, and it's a fair bit better. Also, I've got pine trees in! That completes a draft of the 12 basic terrain types. Hooray!

Pyrian

Fires in Glade Raid are quite complex. There's small fires, big fires, burnt greenery, ashes, smoke, and sparks. Sparks blow on the wind like smoke, and can start new fires. It took awhile to get all those in, and I ended up having to do a fair amount of tinkering with the programming to make it all work right.

Here's the raw paintings:


And here they are in-game:

Pyrian

Here's a GIF of the fires in motion. The low frame rate and color dithering are artifacts of the GIF-making process.

Pyrian

Alright, time for some transition prototypes. These are strictly quick prototypes, any "real" versions would be hand-painted, smoothed out, and varied instead of copy-pasted. Also, no shorelines yet.

Here's a section in the game as-is:


In this approach, border hexes get some bits of rock or grass from adjacent hexes all throughout the hex. The direction of adjacency is ignored:


Here, the approach is similar but the direction of adjacency is taken into account:


Finally, in this prototype, we're smoothing out the corners when two hexes are the same but the third is different, reducing the jaggedness of "straight" lines:


I would really appreciate any opinions on which approaches you think work best! Thanks.

bowen

I like the one that takes the adjacency into account.

Maybe do a bool and randomize it to have it switch back and forth (favor adjacency though), which will help keep the variation high and break up the blockiness a bit more.

Pyrian

Thanks for the feedback, bowen. I could make it so going full hex depends (in whole or in part) on the number of adjacencies. Like, 1 or 2 adjacencies it's always a border, 3 or 4 it's random, and 5 or 6 it's always full hex.

Pyrian

The grass transitions are in! It's got the border transitions and the corner cutters. What do you think?

Before:


After:

Pyrian

Stone transitions are in! Basically done the same.

Before:


These are the actual paintings; top row is the edging, the triangles are used in the corners:


After:

Pyrian

I'm trying to pick up the pace with spell-created terrain add-ons. Here's the first six: Flowers, healing berries, thorns, icicles, ice, and spikes.