4
\$\begingroup\$

What is the best way to render a texture overlapping effect?

Like in this example:

Example from my editor

I want either the grass to fade in to the snow texture, or the other way around. No rough edges. Somehow make them blend over. So the grass has a bit of snow or the snow has a bit of grass How is this possible during runtime? If that's possible.

I don't render this by using the SpriteBatch, since the ground isn't rectangles (they can be moved).

This is the way I render each shape (each one of those squares):

// LoadTexture
// Apply EffectPass

device.DrawUserIndexedPrimitives<VertexPositionNormalTexture>
(
    PrimitiveType.TriangleList,
    render.Item.Points, // Array of VertexPositionNormalTexture
    0,
    render.Item.Points.Length,
    render.Item.Indexes, // Array of int indexes (triangulation)
    0,
    render.Item.Indexes.Length / 3,
    VertexPositionNormalTexture.VertexDeclaration
);
Improve this question
\$\endgroup\$
2
  • 1
    \$\begingroup\$ Perhaps it would help if you could throw together a mock-up of what you're trying to achieve in Photoshop or GIMP? (Or find an example in another game?) There are many different "looks" you can give this - and, in turn, there are many ways to implement each look. Personally I think some kind of "mask" texture looks best. But you say you don't want rough edges - so perhaps you just want a smooth gradient between the two? (kind of unnatural). \$\endgroup\$
    – Andrew Russell
    Dec 3, 2012 at 15:26
  • 1
    \$\begingroup\$ Only example that comes to mind is the Hammer editor that has this functionality, but I have no clue as to how it works, example: s12.postimage.org/jg4tkzu8t/example.png \$\endgroup\$
    – Deukalion
    Dec 3, 2012 at 15:59

2 Answers 2

Reset to default
4
\$\begingroup\$

Edit: I missed that these aren't sprites, but actually polys. You want multitexturing. Keeping the content here, hopefully off use to someone looking for something similar.

You want to create a series of "Fringe" tiles and layer those where you need them. You will need to create corner and edge pieces for each of the tiles you intend to use, and it would be recomended to set an order in which tiles must always be in (Water, below earth, below rock, below grass, below trees, etc).

As an example of a sprite sheet I used to do this, see below. The top left tile is the "Full tile" for grass. The other 17 are either corners, edges or some combination. Using these, I can draw any combination of grass:

Grass fringe sheet

Then, you draw from the bottom up. First draw what you have, then do a pass for each fringe. Check the tiles around the current one, and draw an appropriate fringe.You want to draw everything from a single sheet at a time if possible, to avoid retexturing calls.

There are several ways to do it. Here are some links

Adventures in bitmasking

Tileset design tip

My horrible implementation can be found here between lines 253-369 (A gigantic if statement) however it runs fine.

Improve this answer
\$\endgroup\$
9
  • \$\begingroup\$ I've looked into it, but this sounds like I need a tileset instead of multiple textures. So I can't have unlimited number of textures, because each texture transition need to be in a tileset which mean I have to render a tileset for every combination of textures which then makes it not very flexible, is this right or is there no other way to do it? \$\endgroup\$
    – Deukalion
    Dec 4, 2012 at 13:57
  • \$\begingroup\$ I think I misunderstood this, do you create a Tileset from a texture which you then use for these transitions? \$\endgroup\$
    – Deukalion
    Dec 4, 2012 at 14:04
  • \$\begingroup\$ You make a tilesheet of full tiles. Then, you draw a gradient that represents how much of the tile to draw. A full tile would be all white. A tile half grass and half dirt would be drawn as one full tile of dirt, and then you would use a gradient to tell it how to draw half of the grass texture. \$\endgroup\$
    – Phil
    Dec 6, 2012 at 3:43
  • \$\begingroup\$ Yes, I figured out as much. But I want to try to create a tileset from a texture instead of making the calculations before each draw. I have no clue as to what to search for to make that even though the links you provided provide the layout. I could easily cut a texture in half, but how do you make the other half of the texture slowly fade out? \$\endgroup\$
    – Deukalion
    Dec 6, 2012 at 7:08
  • \$\begingroup\$ Also, would this even work if the "shapes" was non rectangular? I mean if I want to create a road that's not straight I use a road texture, but the road will not be a series of 32x32 squares; it should be possible to make the road vary in size, and not be tiled based. \$\endgroup\$
    – Deukalion
    Dec 6, 2012 at 11:52
1
\$\begingroup\$

I wrote an article about auto tiling that is a technique used to achieve that.

http://autoloot-games.com/?p=232

Here is a video showing it running:

http://www.youtube.com/watch?feature=player_embedded&v=x_iKY_laARs

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Well, I'm stuck at creating tileset from images without having to paint them, like simply creating a transition between two textures and create a tileset. I do not want to use finished tilesets. Also, can't you blend textures together without using a tileset? \$\endgroup\$
    – Deukalion
    Dec 26, 2012 at 20:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .