Map Texture2D around image?

So I’m creating a tilemap. Not hard, done it before.
But each tile is dynamic in that it’s shape is represented by an array of Vector2s.

So say I have an ordinary 32x32 grass tile texture.
How could I “map” this texture around each tile so that no matter if a tile is a slope, flat, etc. the texture will fit on the shape?
Also, I assume spritebatch is out of the question (unless there’s a shader solution. But I’ve not done enough with them to know what I’m doing there.)

Let’s say this is my texture:

Which I should be able to pretty easily fit around a square shape:

But I’m totally lost as to how I’d get it to work with a shape such as:

Let’s pretend like those red squares within my images are vertices :).

EDIT: Will texture distortion be existent?
EDIT 2: Sorry, the first edit was a dumb question.
EDIT 3: I thought of a possible solution. What if each ‘TileTexture’ was made up of multiple 'TexturePart’s all glued together via an xml file to make it work with varying shapes?

I have been fiddling with stuff like this for my 2 biggest projects…

One was making bricks of any shape and applying textures to that shape… (pics: search forums for vector ball)
And the other was a side-scroller, with hand drawn terrain of every angle… (pics; search for grinder)

So I have a lot of experiences with various prototypes and approaches, but I will try to limit my reply to only narrowly answer your questions, or this would become a blog…

I’m convinced scaling the texture in regions will be pretty ugly.

you could do a collection of different angled components to construct tiles from… draw some different texture pieces…

You could do the WHOLE polygon as one color, and then add the surface as another texture that is angled to align with the terrain surface…

Or you could do the whole polygon in as dirt, and have the surface riddled with sprites (hanging vines, leaves, grass…)
-or simply green triangles as per your drawings…

You could also generate the textures on load, its not so hard, just a few for loops… Think in terms of color-bands/surface layers…

What I ended up doing in my game was to scrap the tile idea, and just do hand-drawn terrain instead(or rather a 1080p grid-system)…
Just enable a grid and grid-snapping in your draw-program, and then just draw the scene instead of coding it from smaller components… add a color-coded mask-layer, and you wont even need a level editor… You can just use gimp or whatever to DRAW your levels…

It’s actually not too hard to deform a texture! You can seperate a tile up into triangles, as small as you need and move around vertices position, but using their original uv coordinate (as if it were a square) to deform the texture.

I don’t think you’ll be able to automate this very easily though, since one way of mapping will probably not work for all textures. You’ll also have to take care not to mess up scale. If you don’t have too many different shapes of tiles, splitting up the texture is probably a lot easier, but if you want arbitrary tile shapes it might be worth figuring out a neat algorithm to handle the vertex mapping.

If I understood correctly you want to detect the border of the tiles ? If they don’t overlap, I mean all is drawn with a known color, it’s even easier. You could do this with a pixelshader, and a Sobel filter to find edges, then draw these edges with a specific length, and use it as a mask to draw something in them.

Monopalle,
Those are some nice ideas to ponder. Though if I take the hand-drawn approach to each level, wouldn’t I end up redrawing a lot of stuff (i.e., brick “texture”)?

Jjagg,
Automation certainly would be required. Sounds like it’d be hard to come up with an algorithm that would work for this.

Alkher,
That’s a good idea, but I wouldn’t know where to begin.

Thanks for the responses guys! Surely I can get something working from these answers.

I would draw the tiles offscreen in a rendertarget2d. Then pass it to the pixelshader that applies the sobel filter. This would give the mask to do anything with. I would say you need something like when we apply a luminance filter in a depth of field effect, and then apply bokeh sprites thanks to it.
It seems a lot of things to master in one cycle.
Try playing with rendertargets and shaders, then look at how bokeh are done.
You could also look at snow effects in 2d to see how they detect collision to accumulate snowflakes.

Are you just trying to mask like Alkher is suggesting or do you actually want to do some mapping of the texture to the tile shape? I though you meant mapping since that makes the most sense with the grass texture example.

Essentially the solution I proposed is the same as splitting the texture up and assembling the parts except you have some more flexibility (but can mess up scaling). If you want to automate it you’ll have to come up with an algorithm to do the mapping regardless of which option you’ll choose. I think deformation makes more sense, because you won’t have to seperate the texture and I actually don’t know how you could do it with the texture separation in a manageable way. I said coming up with an algorithm would be difficult, because it’s not very obvious how to do the mapping even if you did it by hand. For example, I’m not sure how you would like to see the grass texture mapped to the second shape in your first post. If you can think of a way to do this the way you want so it works for all your textures, you can automate it, but if you can’t make out for yourself what kind of mapping would work you can’t really automate it. Are you creating the shapes of tiles in your level editor or in code? If you do it in a level editor of some sorts, you could try to integrate the mapping in the editor.

I think the important thing when you decide on either of the proposed solutions to your problem is the scale of your project and variance of the tiles.

Yeah, you would end up drawing the same stuff over and over… Except not really…

You can use your fill-tool to fill in areas with tiled texture, so you don’t have to stamp every 32x32 space.

you >can< work on a large field at once, say 12,000*1080, and just export to .png in in chunks…

But the really cool thing, is that you get to add unique shadow and lighting effects, doodads and details, color variations (including gradients), etc etc. Not to mention all kinds of other 2d content you have, you can just scale and paste, without cutting into tiles and arranging piece by piece…

I found I spent so much time going between editor and game-testing, that it was faster and easier to draw as much of the game as possible, and then program the last bits on top of that… (enemies, interactive sprites, etc)…

Not to mention, in your graphics editor, you can have all your game layers open in different layers… So you can match everything up visually, including your “scripting mask” (for collision detection, event triggers, etc)

Thanks guys for the answers!

Jjagg, you would be correct. I want to map the texture around the polygon.
I probably won’t take this approach though because it would require me to automate the task, and I’m not sure how feasible that is (taking into consideration my own knowledge of this stuff).

Alkher, something I’ll do anyway because I’d like to try that :).

Monopalle, I’ll take this route. I think the way I’ll do it is have an ingame editor from which you can “Import Terrain”, then you can tweak stuff from within the game as you please.

Thanks for the help peoples!

1 Like

Edit above, line 3: I meant to say CAN not CANT…