Mixing 3d prerenders with traditional tilemaps(or how to make 3d tiles work)

Started by
5 comments, last by kburkhart84 9 years, 5 months ago

Hey guys. Thanks in advance for any help and advice. I'm in a different situation than many people. I like 2d graphics, and 3d graphics, depending on the game and situation. But me personally, I'm not much of an artist, 2d or 3d. Somehow though, my simplistic 3d models(as rendered low-res for 2d games) end up more acceptable than my wannabe pixel art or other 2d art forms(vectors, simply drawing, whatever). Now, as far as making tiles for games, I'm not as bad, but when it comes to animating and drawing characters, that is another story. So, I'd like to find a way to make it work and have a nice cohesive style.

If I prerender graphics using a toon shader and either outline or not, I get one(or one of a group of) style/styles. But if I draw tiles using 2d(via pixel art methods or vectors or simply drawing in digital form), I get a different style. Are there any tricks to make these work together somehow?

Or...how possible is it to try creating 3d models for tile creation instead? I know for isometric projection it would work fine generally, but even then, what methods are possible for example to make two separate models(for different tiles) mesh properly together. If I were to do it pixel art form, I could create a base tile for grass, create some variations from it, and then combine it with say a sand tile with different corners as needed. The easy way to do this for me is using Cosmigo Pro Motion since it can easily let you draw seamless tiles by repeating them while drawing, and then allows you to draw via a sort of "tiling engine" in order to blend different tiles/corners/etc... But if I make tiles this way, it gets the problem I mention in the first paragraph.

If I render "3d tiles" I can't figure out how to make them blend together. If I use a seamless texture I can get a quad(or even bumpy terrain kind of thing) to be seamless when rendering if I'm careful, but how could I get for example grass to mix with sand? The only way I can think is to create a separate model of sorts and doctor it up, but that is much less intuitive than doing it with 2d.

The other thing for example, is if I want to create tiles for a side-scroller/platformer. If I want a grass platform(3d rendered for 2d), I need at minimum a middle and one endpiece(or two so I don't have to mirror). It is easy enough to create a single model 3x1 tile units in size for a render. But if I wanted to use it as a tileset, how would I then get the middle part to be seamless with itself? Maybe I'm wrong, but I would think there is some sort of trick to it. This also applies for example if I wanted to make a top-down game, shooter, space, whatever. How would I get for example an alien wall with endpoints and corners to be seamless between middle parts?

EDIT**

If someone wants examples of what I'm talking about, I can whip up some quick 3d renders with marking showing what I mean.



Advertisement
You can always add reference images with your original posts. This kind of material is always useful to understand where you're coming from and what kind of result that you're after.

Here are some examples of 3D tiles from artist Henk Nieborg:

env02.jpg

env04.jpg


Note that not all tiles connect with each other. Also note that some tiles are vertically larger than others -- it just requires some extra planning from you on how everything connects.

A hint on how to make 3D tiles is to think in terms of blocks. Decide on a fundamental block size, like 10 x 10 x 10 3D units for example, and start modeling a "middle" tile.
When finished, you can 'extrude' the edges on either side of this middle tile and, taking care to fully occupy other single units of block, model the "left" and "right" edge tiles. Since the blocks were extruded from the middle tile they naturally connect, with shared edges
You can then detach each block as a separate object at their shared edges so that you have 3 different blocks that connect perfectly and can be cloned as much as you want to form a longer object, as in [left, middle, middle, middle, middle, right].
Then you can use an orthogonal camera to render the entire model as a wide image, or to render each tile separately and use them with a 2D tile map editor etc.

If you plan on painting over the resulting images it will require a lot of skill from you, because you'll have to reproduce the same level of quality as the complex lighting algorithms that you used to render those models.
If you find difficulty with this as you experiment with it, you may want to consider painting directly in the modelling package as illustrated in this thread:
http://www.gamedev.net/topic/657285-hand-painted-textures-on-game-models-blender/

If someone wants examples of what I'm talking about, I can whip up some quick 3d renders with marking showing what I mean.

That would be very helpful, yes please. Also, please detail the game you're making and if you're sure you need tiles.

Height maps and a few static objects to spread around the scene can actually be a lot easier to make, particularly for less experienced artists. Tiles have advantages, but they also take some very specific artistic knowhow for layout, and can be difficult to make without being able to visualize how they fit together properly.

If I prerender graphics using a toon shader and either outline or not, I get one(or one of a group of) style/styles. But if I draw tiles using 2d(via pixel art methods or vectors or simply drawing in digital form), I get a different style. Are there any tricks to make these work together somehow?

Vector background and toon shader can work together, or even a painted background (as in most anime). But I recommend against a toon shader, they usually don't look good. It's one of those things that's hard to pull off.

If I render "3d tiles" I can't figure out how to make them blend together. If I use a seamless texture I can get a quad(or even bumpy terrain kind of thing) to be seamless when rendering if I'm careful, but how could I get for example grass to mix with sand? The only way I can think is to create a separate model of sorts and doctor it up, but that is much less intuitive than doing it with 2d.

Multitexturing with vertex painting is traditionally used to blend textures like that.

If you use height maps, you can also use triplanar texturing, which can give you some nice effects. Are you using a 3d engine, or are you expecting to pre-render everything?

Because if you're pre-rendering, you could just render the entire scene with some masks. Modern computers and compression are such that today, it doesn't matter that much unless you're making a truly enormous game world. Most indie games aren't that big, so you'll save yourself a headache.

The other thing for example, is if I want to create tiles for a side-scroller/platformer. If I want a grass platform(3d rendered for 2d), I need at minimum a middle and one endpiece(or two so I don't have to mirror). It is easy enough to create a single model 3x1 tile units in size for a render. But if I wanted to use it as a tileset, how would I then get the middle part to be seamless with itself? Maybe I'm wrong, but I would think there is some sort of trick to it. This also applies for example if I wanted to make a top-down game, shooter, space, whatever. How would I get for example an alien wall with endpoints and corners to be seamless between middle parts?

There's no trick, just be careful and make sure you make the asset on a grid, and have all of your vertexes cross the line (say, one meter) at the exact same point for the right and left sides of the tile. Then be sure to render orthographically.

Or, you can just render everything as a big image, and mask out collision. :)

You know guys, I think I have things figured out.

I'm using GMStudio, and frankly the 3d support in it is crap. I've dabbled with Unity as well but for some reason I really like 2d games and gameplay, even with 3dish graphics.

The best thing I've figured out(and somehow had forgotten since I learned it in the past) is that you can have UVs outside of the map. So, for example, I can make a block, have the UVs fill the map(0,0 to 1,1) and then extrude the block out on each edge. Then the extruded faces on the left of the block would have the UVs on the edge and to the left, making it match up perfect as long as the texture is seamless. Using the same UVs, I can also apply displacement and/or normal maps to it to get some more texture if I want. Though it will take a bit more work, it will still be much less than me trying to learn to pixel things out. And though I'm not an expert, I can get much more acceptable work via 3d than pixel art(or 2d drawing). Also, I can then draw(via vertex colors or a secondary uv map) something on top of certain parts of the model as well as long as I don't hit where the edges are.

The thing I didn't know and had to learn is that Blender's internal renderer's procedural textures do not create seamless textures via UV map. They are generally seamless, but you can't use them as such when mapping via UVs for whatever reason. So, if I want something seamless and procedural, I would have to create it in some external program or find it, which isn't too difficult.

I should mention I wasn't intending on painting after render, rather directly on the model or using textures as part of the render. If I could paint the kind of quality I need to make that work, I likely wouldn't need the 3d pre-render in the first place.

It had also occurred to me to just render the things out as building blocks, but I think it might be easier to do it using pseudo-tiles instead. The reason I don't like the building blocks version is that I would have to render out all the different platform sizes I need. I'm not thinking of making games for HTML5 or mobile where the actual size of assets matters more, but I'd like to keep my options open too, even if I don't utilize them at the moment.

On the other hand, in some cases, I see how it could actually be a pretty good idea if I'm not doing anything but PC to just render out whole levels, and just cut them up for rendering with masks(or overlaid collision objects or physics fixtures, whatever).

Just FYI, I haven't actually started to design a certain game, rather I'm considering a way to get a nice graphics pipeling going that could fit more than just a single game(though not really all of them), and that is something I can actually do on my own.

In any case, thanks for the insight. Using the "UV method" I talk about above, I was able to get this simple thing.

test.png

The middle section is perfectly seamless with itself and the base geometry is actually flat. You can see the bumps with are from displacing using the same "cliff" texture from CGtextures. So I could create platforms of any length with this method. Of course, I wouldn't use this one as is, rather assuming I used the texture as it is, I would do something better for the edges as far as modelling. This was just something I did in order to make the edges different from that flat middle.



Not bad, congratulations!

I suggest you aim for a little more shadow on the bottom, and highlight on the top.

Add a little blue to your ambient, and a little yellow to your directional light, and have it shining down (from the top) a little bit more. Also, curve in (lower depth) the dirt along the bottom and edges a bit more. You'll get a much better 3d effect with that.

Also, you might look into voronoi and other procedural functions to give things a craggy, rocky appearance.

You'll pretty quickly be able to compete with a professional 2d artist for quality with a few tricks. :)

Not bad, congratulations!

I suggest you aim for a little more shadow on the bottom, and highlight on the top.

Add a little blue to your ambient, and a little yellow to your directional light, and have it shining down (from the top) a little bit more. Also, curve in (lower depth) the dirt along the bottom and edges a bit more. You'll get a much better 3d effect with that.

Also, you might look into voronoi and other procedural functions to give things a craggy, rocky appearance.

You'll pretty quickly be able to compete with a professional 2d artist for quality with a few tricks. smile.png

That's why I'm trying to do it via 3d renders. My 3d is better than my 2d. Thanks for the tips!

In that render, I actually don't have any ambient at all, rather only a single directional light at a slight angle. For something in a final product, I would indeed do something much better, in both lighting and texture. The part that makes my method slightly more difficult is that I can no longer directly use Blender's procedural textures, because though they repeat seamlessly, they aren't seamless using a UV map, so I will have to create the procedural textures outside of Blender(or bake Blender's textures and make them seamless externally).



Well, I've tried some work. I'm honestly thinking I might be better off taking advantage of modern PCs space and speed. I've worked out that I can still use some modular "building blocks" like I described above. But instead of that, I can simply make the levels geometry directly without worrying so much about making sure things are seamless, etc.. I currently am using a 1024x1024 render with an ortho camera at size 16, which gives me 16x16 tiles at 64 pixels square. This meets up with 1 Blender unit. I have also created a bunch of empties to easily mark 1/4, 1/8, etc.. of the screen for easy orientation, though levels wouldn't exactly have to match this.

Advantages to this method for me have been so far that I don't have to worry for the most part about the textures being seamless(except if I really want to make things modular directly), which means I can easily use Blender's procedural textures for things and use generated UVs as well. Procedural textures combined with generated(instead of an actual UV map) make for automatically seamless texture usage. Then I can also do tricks like having multiple UV maps if need, for example to combine textures differently for certain results.

Another advantage is that I can tailor the level directly for what I want. i would no longer have to create assets for multiple uses. This can be a disadvantage too due to not being able directly reuse(maybe with some recoloring) tiles all over the place. But I think the advantages are better. I can use lighting to create ambience easily. I can also easily split objects into foreground and background(even the same object). So if I wanted to create an arch for example, I could do so, just splitting it at the top to divide between fore/background. Then in GMStudio, I can separately render the images, and the game objects, character, enemies, could easily walk "inside" the arch and have it look right. The same applies to simpler things, like trees, rocks, whatever.

Another advantage is the fact that things can easily be changed, relatively speaking. If I reuse a material in places, I can make a change and it can apply everywhere. If I need to tweak an animation for a character, or change something, most things can be done and simply re-rendered instead of drawing things out. I can tweak amounts of grass(and materials, see below paragraph). I can scale things and move them around mostly with no issues as long as the textures are of high enough resolution.

Last advantage I'll mention here is that by pre-rendering, instead of exporting to a 3d engine, I can utilize all of Blender's features. I already mentioned the procedural textures and lighting above. But I can also use displacement maps for example. There are other things too, hair(read: grass) particle systems, and animation system. I have to render all frames I want for things like characters and moving non-interactive things, but when doing the animations, I can do anything Blender can do, like vertex animation(shape keys), IK chains(not supported in many 3d engines). I can do materials based on vertex color if I see fit, which is harder to find externally as well. There can be shadows as well.

I'm figuring I can simply make a whole level in a scene, and render out a series of cameras based on this. Then I can use these whole images for level scenery. If I pre-render characters (using materials that match the style), I can get a pretty good and constant style. And since I'm not so worried about space(this isn't for mobile or web builds), I can render as many frames as I need to make the character animation smooth. I can also render transition frames as needed for less jump between animations if needed.

There is a simple test render attached to this post. It has a simple blue background. You can see how the lighting works, shining on the simple grass and ground. I would do the ground and grass better for a final product, but this thing only took me 20 minutes. I could probably make a good final version in another 20, and then I could take those materials and reuse them in other objects, for example if I need another platform, a sloped platform, an actual game object like a moving platform, etc...

Well, I'd like opinions on this. Once I refine this art pipeline, I'd actually like to make an article or tutorial out of it. Thanks in advance.



This topic is closed to new replies.

Advertisement