Caves

Published December 11, 2013
Advertisement
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.

rock-progress00.png
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.

rock-progress01.png
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.

rock-progress02.png
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.

rock-progress03.png
4. More detailing work, still only using few colors. One rather dull grey and another a little bit darker.

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

rock-progress05.png
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.

rock-progress06.png
7. I give the rock more contrast by filling in the shadows with a dark color.

rock-progress07.png
8. I thought the rock was a little too bright so I brought down the overall intensity.

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

rock-progress09.png
10. Adding moss and earth between and on top of some rocks.

rock-progress10.png
11. Final adjustment to the rock and moss. I highlighted the rock edge against the moss, making the moss stand out more.

rock-progress.gif
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.
cave.png

Thanks for reading!
18 likes 13 comments

Comments

EDI

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

December 11, 2013 03:41 PM
lask1

Wow, looks really amazing! Nice work.

December 11, 2013 11:28 PM
AlanSmithee

Agreed, looks very nice!

December 12, 2013 09:33 PM
O-san

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.

December 13, 2013 09:47 AM
EDI

@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

December 13, 2013 04:36 PM
O-san

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).

December 13, 2013 05:32 PM
EDI

@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

December 13, 2013 07:07 PM
Navyman

Wow this is awesome! Keep up the great work.

December 22, 2013 08:08 AM
Boruki

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!

December 22, 2013 09:04 AM
Aardvajk

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

December 28, 2013 06:05 PM
O-san

Thanks for the comments, you are very kind =)

December 29, 2013 03:44 PM
O-san

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 =)

December 29, 2013 04:12 PM
EDI
@O-san: that looks a ton better, nice work!
December 30, 2013 07:34 PM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Profile
Author
Advertisement
Advertisement