Sign in to follow this  
AdamShultz

(Python/Pygame) 2D Random Tree Generator

Recommended Posts

Hello.

I have managed to come up with a pretty nice tree sprite generation system. I need some assistance though with some fine-tuning...

[media]http://i54.tinypic.com/11tpkm1.png[/media]

The way leaves look on trees is very dull and boring. The leaf images themselves are nice, but I feel as though the surface in which I am blitting the leaves to could use some TLC. I basically want to give the leaf surface a smoothed bevel/emboss effect a-la photoshop, to make the tree seem as though its popping out at you. Give it a more 3d-ish effect in a 2d world. Pygame does not have anything like this.

I was wondering if anybody has any ideas as to how one would go about solving this problem in an efficient manner. I looked at the jscript samples for photoshop's emboss effect to see if it would help me figure out what to do, but it doesn't lead me to any documentation of what the parameters for the function are, or where to find out what they are. Has anybody tried anything like this in Python?

Thanks,
-Adam

Edit:
The tree generator is actually a smaller part of an isometric tile based map/scenario editor (similar to the one found with Age of Empires) that I've been making for the last 2 weeks or so. All images seen here are screenshots of the editor running, and all images used in my editor are original works of art by myself. That water is animated.

Share this post


Link to post
Share on other sites
Whatever you do, don't bevel those leaves.

Instead, you need to thin them out a little bit, and use more of them layered together.

You'll want to darken those in the back slightly, and probably shift the hue in the direction of blue just a little bit.

If you spam the tree with a whole mess of them with variable shades, moving to lighter as you come forwards, you should get a richer more fluffy look.

I hope that helps a bit.

Cheers!

Share this post


Link to post
Share on other sites
[quote name='driftingSpaceMan' timestamp='1318022870' post='4870266']
If you spam the tree with a whole mess of them with variable shades, moving to lighter as you come forwards, you should get a richer more fluffy look.[/quote]

I wasn't actually talking about manually beveling the leaf images in photoshop... i meant writing a function that puts a similar effect on the leaf surface (surface where ALL the leaves are added) after all the leaves are there.

but....

...WORD. Just got an awesome idea. Thanks for sparking it for meh :P

Share this post


Link to post
Share on other sites
That's really cool!

But, one thing, broad-leaf trees generally look better when they are wider than they are tall, in my opinion.

Like this:

[code]
-------
| |
| |
| |
-------
| |


----
| |
| |
| |
----
||
||
||
[/code]

Share this post


Link to post
Share on other sites
Yeah, I am actually in the process of writing a set of functions for my tree generator class that will use different bounding polygons for leaves, depending on tree type, and with some randomness. I will be blitting them to a surface in a nice order and fashion, lightening on the way up from darker than they are now, similar to what driftingSpaceMan said. Oak trees (the ones in the screen shot) will be widened, cuz it's annoying me that they look like Lombardy trees -_- though, those might be an addition to my tree classes after i finish this generator and get horizontal flipping of buildings done as well (easy problem to solve for the image, not as easy for the tiles). Everything has collision right now as well =D

I also kind of like the fact that you can see the limbs and branches through the spaces in the leaf clusters. Gives them a more natural, random look which I was looking for :D

I also need to make wayyyy more trunk tiles :o those monotonous ones are..... yeah. >.>

Edit: Also added tree shadows earlier right after i posted above.

Share this post


Link to post
Share on other sites
[quote name='Nice Try' timestamp='1318023494' post='4870269']
I wasn't actually talking about manually beveling the leaf images in photoshop...[/quote]

I didn't think you were :huh:

If you bevel the whole sheet of leaves (as one solid piece), it will look like some kind of bizarre old green sponge. Only applying the shadow, and making it very diffuse might work, but dealing directly with the leaf colours should work better.

[quote name='Nice Try' timestamp='1318053381' post='4870393']
I will be blitting them to a surface in a nice order and fashion, lightening on the way up from darker than they are now, similar to what driftingSpaceMan said.[/quote]

That should look pretty nice.

I think you'll do well to use more disperse leaves, and just blit more of them to flesh out the shape.

Something like these:

[img]http://img855.imageshack.us/img855/2159/disperseleaves.png[/img]




I made a little mockup:

[img]http://img829.imageshack.us/img829/5769/tree2dprocedural.jpg[/img]
Or not Neon green (my monitor is a little off):
[IMG]http://img840.imageshack.us/img840/5769/tree2dprocedural.jpg[/IMG]



You should be able to do that without too much trouble.

(by the way, I also layered on three levels of bark there to build some mass on the trunk and give it a more sculptural shape)


[quote name='Nice Try' timestamp='1318053381' post='4870393']
I also kind of like the fact that you can see the limbs and branches through the spaces in the leaf clusters. Gives them a more natural, random look which I was looking for :D[/quote]

For any trees with substantial amounts of leaves, you'll want to abandon that if you want them to look good/realistic.

The view angle you are using is not conducive to seeing those branches [i]unless[/i] the tree is barren. If you try to show the branches, it will look forced.
I can definitely understand that you spent a lot of work on the branches, so you want to show them off for the detailed structures they are, but if you try to do that, the overall look will be diminished by wonky perspective issues. Try to resist the temptation.


Focus more on the roots (which can be seen), and layering in more volume on the trunks.

Just worry about branches for the spooky dead trees (or winter trees)- trust me, the subtleties of your work will not be lost, but will be all the stronger for it.

I hope that helps.

Cheers!

Share this post


Link to post
Share on other sites
Thanks for that response. I've actually been tweaking the function set quite a bit in my generator for the last 3 hours or so. It's got some new features which are very nice, especially when I add more limb and branch images, there will be a much higher variation of tree dimensions. The tree you showed is very nice, but it's too... predictable. I'm not making a generator to generate a bunch of trees that look almost exactly the same I guess is what I'm trying to say. I appreciate the tips though, especially the bark layers and the idea from before about darkening the leaves toward the bottom. I was actually planning on re-shopping the roots because in the image, they look like side-scroller trees in Donkey Kong, and it's another thing that is annoying me about my tree generator at the moment.

I think I need to change the editor perspective from 4:3 to 4:2 as well. The tiles are 64x48, usually they would be 64x32. It's like looking down at a 67.5 degree angle instead of a 45 degree angle. Hardly be able to see the roots or trunks anyway if my tree images were truly congruent with the view. Nothing a line of code can't fix though.

Anyway, trees look much better now, but I still have to finish a leaf darkening function and make a bunch more images for limbs, branches, and trunks. The trees below will be a rare instantiation of Oak trees, as I plan on widening most of the branch and limb sets, which will result in a wider leaf area that is less dense toward the bottom (that effect is already built into part of the leaf generator function). I'll do that this weekend; it's 5 AM and i haven't slept yet -_-

Goodnight!!! :)

Edit: I must say, it is awesome being able to see the animated water through the cracks in the tree leaves.

[img]http://i51.tinypic.com/14sm9zt.png[/img]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this