Having trouble with textures and shadows (game art, tile-based, RPG)

[eliddell]

This is another "developer trying to do artwork" thread, I'm afraid.

So.  One of the first areas in the RPG that I'm trying to build is a spring forest "dungeon", and I decided to take a break from coding the engine for a bit to create some of the graphics:



I don't think the result is completely horrible (eheheh . . .), but there are some specific points I'm having a problem with.

First, tree bark.  I've spent quite a lot of time now staring at photos of trees and tree bark, but I'm not happy with my attempts to translate it into pixel art.  What you see in the image represents the best of multiple attempts, but the texture on the sakura trunk is making it difficult to shade it, and the bark on the green trees is just awful.

Second, cast shadows, specifically tree shadows.  I know approximately where they should go based on the implied light source, but I'm having trouble with what they should look like.  Currently, I have blobby translucent shadows drawn on a separate layer, and I don't like the effect at all.  I also tried the old standby of skewing the tree's outline, but that didn't look right either, and it made things complicated when there was more than one tree close together and the shadows started to overlap--I want to find some way of handling that without a combinatorial explosion of tiles.  Which is also why these are layered translucent shadows instead of drawing half a hundred shadowed grass tile variations (which I would have to do all over again if I wanted to use one of the trees inside a town where the shadow would fall across a flagstone path, frex).

I've probably made at least one other stupid mistake somewhere.  Please point it out if you spot it.

Brief notes:  Tiles are 32px square, but some trees are not properly positioned here.  I don't have any sprites for this yet, but the intended size of an average human in a neutral standing position is 1 tile wide and 2.5-ish tiles tall, so head about even with the crotch of one of the trees.  I know this is large-ish for pixel art and will take a long time to draw.  The palette currently stands at 37 (I think) colours if you ignore the effect of the transparency (40-odd if you don't), but the final colour count is not a major issue.  The style is 50% Suikoden 2 (which I'm not sure was technically done with pixel art) and 50% I-know-not-what.  And this exact map is not likely to be used in the game.

[yrizoud]

bark : I advise you rather block out the surface according to lighting/ volume, taking into account that the light source should come from the top (sun is above) more than the side. Tree trunks are not shiny, so 2-3 main colors should be enough, with optionally some intermediates which you use only for smoothing.

Roots are too pointy I think. Consider that the viewer is seeing things from above, so even roots on the opposite side of the trunk should be visible, graphically higher. Anyway, many trees (espcially thin trees) grow with very deep roots, which won't be visible. In this case, it mostly matters that you show the grass in front of the trunk.

The white flowers are a bit too bright I think. Their contrast with the brighter plants is fine, but the majority of the grass / ground is much darker, so they look a bit as if they were on a different plane.

At this point I think you still have the habit of shading the border of shapes (top-left border = light, bottom-right = dark), and it's holding you back. You have to consider the 3D volume of what you're representing. Try give more light to what is facing the sun, or facing the viewer or is closer to the viewer Ex: on your big-leaf grass, the bottom-left blade.

[eliddell]

(Apologies for taking a little while to get back to this; I have limited time during the week.  Day jobs are a nuisance sometimes.)

Placing the light source so thoroughly to the left probably wasn't one of my better ideas, since it isn't specifically a late afternoon or dusk scenario.  Attempting to reshade part of one of the trunks as something close to a plain cylinder with the light more forward and less left, then trying to add some texture overtop, gets me (old -> untextured -> new):



I'm not sure how much of an improvement that is. 

As for that white flower . . .  I was trying for something like a daisy, but rather than tone it down so it pops out less, it might be easier to switch to something like a sunflower, since the colour doesn't really matter:



I think the middle one is visible enough without being quite so much in-your-face.  The rightmost is probably too dark.

As for the weird-nameless-leafy-plants which I assume are what you meant by "long grass", yes, now that you mention it, some of the leaves do look flat.  I should have looked for some reference instead of winging it.  Is this any better (old -> new)?

[Teriyaki]

I also think that the area of the roots of the trees and the shadows of the branches are the point.

[yrizoud]

I originally replied while on a pretty bad monitor, the white flower blends OK when I see it on better one (But some players of your game will be using bad monitors)
The tree trunk is IMO a better way, at least when you have like 12 pixels wide to convey the shape.

About the plants, here's what I'd try to do, though I may have overdone the "3D shiny" effect. Such contrast would probably be fine if it was an obstacle, but not if you're supposed to step on it.

[eliddell]

Another shot at the sakura tree (with new roots and more shadow under the leaf canopy):



I'm still not sure about the angle on the roots--they may still be too close to a side-on view.

@yrizoud:  I get it now, you're suggesting more emphasis on the over-and-down drape of the plants' leaves.  I'll give that a shot next.  They're probably not going to be obstacles, but it's possible that I could change my mind about that (currently, the actual in-game maps are scribbles awaiting the completion of the game's map engine . . .)

[MysteryMeat]

Sakura trees tend to flower out way more horizontally than most other trees. Try to work off some references from google, they're almost more bushlike than treelike sometimes!
Right now it just kinda looks like a pink oak tree.

[eliddell]

I will guiltily admit that the sakura started as a reshaded, mirrored version of one of the other trees.  Trying to get something for nothing.  I should have known better.   

[MysteryMeat]

Lmao. Don't worry, everyone does that sometimes.
Keep us posted!

[eliddell]

Revised sakura, now with 67% more pink floof:



For some reason, this image gave a couple of image hosts indigestion and made them throw errors when I tried to upload it.  Maybe their Javascript was offended by the notion of pink trees . . . ?   

Anyway, the sakura images Google was kind enough to regurgitate for me showed two different kinds of trunks.  I kept the old treelike one, which seems reasonably consistent with the narrower (for values of "narrower" approaching "only as wide as it's tall") examples.  The really wide ones had divided, bushlike trunks.

Next, I'll revisit the ground cover, as I was going to do before I got hung up on the tree.