Jump to content

  • Log In with Google      Sign In   
  • Create Account






Caves

Posted by O-san, 11 December 2013 · 1,918 views

I've been working on a cave map for the past few days and I thought it was time to post a journal update. The cave will be composed of many connecting passages and smaller rooms. I thought it would be interesting to see one of the cave's building blocks come to existence.

Posted Image
1. This first image is quite important as it must conform to my 3d tile size. This particular rock has a dimension of 4x2x4. In other words it is half as long as it is wide/high. This mounts to an image size of 192x224 pixels (a tile with a width/height/depth of 1x1x1 is 64x64 pixels). Other than that this image is just a clump of grey.

Posted Image
2. Here the first smaller stones are outlined. I try to imagine how big I want the rocks to be in the final image and I draw from that.

Posted Image
3. In this image I try to flesh out the shape of the rocks. I only use 2-3 colors as it is easiest to work with at this early stage. Intricate shapes are somewhat simplified.

Posted Image
4. More detailing work, still only using few colors. One rather dull grey and another a little bit darker.

Posted Image
5. Here I fill in the areas that I want highlighted with a brighter color. Trying to accentuate ridges and creases in the rock.

Posted Image
6. Up until now I have only used a rather big brush. Now I begin detailing with a smaller brush. This allow for finer details. Ridges and creases get a more rough look. I also deform parts of the original shape to make it stand out more.

Posted Image
7. I give the rock more contrast by filling in the shadows with a dark color.

Posted Image
8. I thought the rock was a little too bright so I brought down the overall intensity.

Posted Image
9. Here I have filled in the creases between each rock with a 1px size brush and a dark colour.

Posted Image
10. Adding moss and earth between and on top of some rocks.

Posted Image
11. Final adjustment to the rock and moss. I highlighted the rock edge against the moss, making the moss stand out more.

Posted Image
An animated GIF created from the different steps above. It took me around 45 minutes to paint the rock from scratch.

Here is how the rock looks like inside the cave.
Posted Image

Thanks for reading!




Looks awesome!

Might I suggest some sort of shadow-effect under the rocks etc to help 'tie' the objects to the ground better?  I was a massive offender of this for a number of years ;D

here is a quick mockup:

shadowed.png

Wow, looks really amazing! Nice work.

Agreed, looks very nice!

Thanks for the comments!

 

I've tried to implement these shadows beneath objects with ambient occlusion but sadly I could not get it to work quite right. I might give it another try in the future.

@O-san

 

Being 2D assets you could potentially 'bake' a hand-drawn fringe into the image (this is what I do with Revel Immortal);

Another option is to 'eat' away a bit of the image edge in the alpha channel with a soft natural brush, exposing a bit of the ground through the image; giving the indication that dirt and cruft is being painted over the front of the graphic.

I took the liberty of making another example image, a copy with and without fringe; and exposure of the fringe detail on white.

fringe.png

no problem smile.png That was my first idea, using blending. However I rely on the hardware to do the sorting of my game objects and the z-buffer does not play nice with blended textures. The engine do support blended objects but using it for an entire level would break the overall consistency with the rest of the world. I also imagine it would eventually leading to objects being sorted in the wrong way (painters algorithm problem).

@O-san   Ahh! indeed I am very familiar with the painters algorithim problem.

As I'm sure you remember I did a fairly large Isometric game, and Isometric can be a pain in the ass because of this smile.png

Normally it is broken by using split-up graphics in the case of 'L-shaped' or otherwise weird sizes;  in your case you're using the zbuffer with some information of 'real geometry' to produce localized splitting automatically.

Thats a neat approach, but indeed it fails for partially blended objects, and now it all comes full circle; you really have no good ability up front for doing edge-blended graphics (across the whole level) which normally gets rid of the hard edge effects.

 

--it would probably also kill batch performance that I'm sure you're taking advantage of.

At the resolution you're using, a fringe could probably be baked in using full opaque and full transparent pixels, but it likely wouldn't look /that/ great.

Assuming you render your ground and surface objects seperately, it is possible a solution could be to render a fringe or shadow at that point, without worying about overdraw and using full capacity of blending.

 

These days I'm back at using a traditional 2D API via HTML5 Canvas, which is nice; if you can stand the loss in oomph that we all have grown accustomed to with accellerated implementations on 3D hardware.

That being said; you've been at this kind of thing as long as I have hehe biggrin.png

Wow this is awesome! Keep up the great work.

Thank you for posting this - it's great to see how you can make a very effective in-game asset in a few simple steps!

 

I mostly work with concept level art, rather than polished pieces, but I've been learning lately about producing in-game art and this has solidified a lot of the thoughts I'd had on it... so thanks again!

Looks good and as ever very interesting to see the step-by-step.

Thanks for the comments, you are very kind =)

medievaltimes2013-12-29.png

 

@EDI: Tried blended walls inside the cave instead of alpha tested.. looks pretty good so I think I'll keep it =)

@O-san: that looks a ton better, nice work!

Recent Comments

Latest Visitors

PARTNERS