Tile Map Transitions
BlitzMax Forums/BlitzMax Programming/Tile Map Transitions
| ||
| I've come up with a cool tile system where I take a large seamless texture and split it up into 64x64 chunks to make the tiles. When painting the texture, it works out which frame to use on each tile so that you can intermix tiles of different kinds and each region of the same tile will always be seamless. It's a bit difficult to explain so here are some screenshots to show what I mean. http://www.shattered-design.com/forum/viewtopic.php?f=53&t=116 The trouble I'm having, is how to make the transitions between tiles of different kinds. I undertand the standard way to do it is to make transition tiles for each direction, but as each kind of tile has several possibilities it would mean making a transition set for each unique tile and that is prohibitively excessive. A transparent blend between the two could work, but I'm not sure how to do this dynamically. I'd like the effect not to be straight and regular if possible. Any suggestions welcome. |
| ||
| By googling around, I found this interesting method on tigsource forums: http://forums.tigsource.com/index.php?topic=9859.0 Last edited 2011 |
| ||
| Hi thanks. The problem isn't deciding which corners to use, but because I have 64 possible middle tiles (as opposed to the normal 1 you get in tile games), it isn't practical to make that many sets of corner pieces which also tile seamlessly with that middle piece. |
| ||
| One possibility might be to use an alpha transparency tile as a fade out from certain tile types that could be overlayed on their neighbor. e.g. grass next to sand, the first sand tile gets a tile drawn on top of it that's grass fading to transparent (the fade doesn't have to fill the whole tile, it could just be close to the edge). You would need to create 3 fade tiles for each base tile type (e.g. for grass you need side->transparent, inside corner->transparent and outside corner->transparent). You then have to determine what types draw on top of what other types (e.g. grass goes over everything, sand goes over metal but not grass, metal has no fades since everything else is higher up the list). When drawing, each tile calculates what should fade onto it if anything (e.g. sand in a corner determines that it should get corner crass drawn on it, sand with grass on the left gets side grass rotated left drawn on it, etc.) That would be my approach anyway |
| ||
| That's an interesting idea. Thanks. On GameDev, this was suggested: You could use alpha-blending to smoothly transition between two different images. An alpha-mask image can make the transition prettier. For example for a transition between a grass tile and a rock tile, you can use a gray-scale mask where white areas are rock, black areas are grass, and 50% gray is halfways blended between rock and grass. That way you can blend several different grass tiles with different rock tiles using the same transition mask. http://www.gamedev.net/topic/595961-tile-transitions/Can I do such a thing in Blitz? |
| ||
| Yes, you need to grasp the basics for texture-splatting with OpenGL (a technique for "applying" alpha values to a texture by using a different texture, a "mask" one): http://www.gamedev.net/topic/372568-multipass-texture-splatting/page__p__3456662#entry3456662 I think that in that code he assumed there was already a rendered quad with a ground texture. In that code the 'baseTexture' would be modulated by the alpha values in 'alphaTexture', instead of its own. This means that the same tile chunk painted along the map can have different alpha channels (by binding each tile to the alpha texture you want). To select which alpha texture to use you could resort to that bitwise tile sorting method. |
| ||
| it would be easier to integrate this into my unofficial glmax2d http://www.blitzbasic.com/codearcs/codearcs.php?code=2612 than to try to integrate it into the official one Last edited 2011 maybe you could access the texture matrix and turn it so you would only need 1 or 2 mask gradient textures Last edited 2011 |
| ||
| Hmmm an alpha mask would save having to create those transition tiles. Using base bmx and not wanting to much about with too much directly I. OpenGL etc. (might want to stick with directxfor windows, etc.) I would probably still make the tiles. You just need the 3 alpha masks and then create those 3 transitions for each base type (from the screen shots and the description it sounds like 3 base types, sand, grass, and metal, but with many possible specific tiles in those base types) so. With photoshop or gimp it should be pretty easy to spit out those 9 transition overlays and the code to implement em should be fairly simple. Not the best, or most far reaching approach (better would be dynamically creating those transitions based and preferably do some texture trickery to save drawing time etc as well.) but it should get the job done for the least investment. The only problem that could be significant might be if you have a convergence of 3+ textures. Depending on how you layout the fades (they could be larger than the tiles for example...) you could do it with just side fades that overlay their corners, but you have to tweak the fades a lot otherwise you get some parts too thick and some too thin etc. This tends to work well with very small fades since those wonky bits are harder to see, but if you want nice pretty fades it gets noticeable. |
| ||
| Oh dear, this looks complicated! I will look at it closer when I've had some sleep. Is there no DX/Opengl independant way of doing it? |
| ||
| my suggestion is just bmax: draw tile determine what if any fade is needed based on neighbors draw fade over tile And thinking about it more you could auto generate the fades using an alpha mask image (or just in code if you want a simple cross fade) using pixmap manipulation... Copy a tile of the fade type alter it's alpha levels to either match your alpha mask image or however else you want (easy to generate an alpha fade in code) loadimage from the pixmap, now you have a programmatically created fade tile you can overlay on other base tile types. Just need to make a set of fade alpha masks, or again, just have code create a smooth fade if you don't need precise control. This method could easily create the corner fades etc. as well. This is going to take more memory than a raw opengl/directx implementation since you have to store those tiles. it also will take a little more processor time (since you have to draw the base tile, then the fade tile over it) but overall it should be trivial on your resources and far simpler to implement. |
| ||
| Remember that I have 64 tiles per tile texture loaded (1MB), and there will be multiple tile textures, and each of those 64 tiles could be at the edge and could require a full set of fade tile each in the worst case. Would this use too much video memory? |
| ||
| Would this use too much video memory? How many "fade-into" materials are there? ie Sand, grass, water? Each one requires just 8 pre-calculated tiles using ima747's method. |
| ||
| Assuming that each "grass" tile can be out next to any other grass tile (not sure if this assumption is correct) then all the edges are the same (at least left/right and up/down). That means you only need one fade for each side, doesn't matter which tile it's fading from, and the fade is to transparent so whatever it fades too is irrelevant. You can also cut down on extra faders by flipping them (e.g. If left/right are the same then a right fade can be scaled horizontally by -1 to flip it horizontally). If all sides match you only need one. If you have 64 different tiles, all with unique edges (first how are you meshing them if all the edges are different) you could still create dynamic edge fades, would double the memory (1 fade per tile). Depends on how much your memory usage is, and how much you feel you can afford if that's acceptable. If you're estimating 1mb per tile type,and you have say 5 types doubled that's still only 10mb, which is pretty trivial for base resources (obviously there are other graphics and sound, etc. but still starting from 10mb instead of 5 isn't too bad) |
| ||
| I've had a look at the module but I'm completely new to opengl stuff, will it be difficult to integrate? |
| ||
| I hate to zombify an old thread but did you find a resolution to this? I'm in a similar situation and interested if anyone has dealt with it. |
| ||
| No :( I put it off to work on something else. The maps look blocky! |
| ||
| I came up with a working solution. basically you alphablend the borders of your tiles to 0 at the edges. Then you overdraw them. Here is a pic Here is the example program. The arrow keys can scroll the map . Last edited 2011 |
| ||
| Cool that's very much what I'm after, thank you! Can it be modified so that the edges are less obviously square? Does it use opengl only? Thank you very much! Could you provide any source code? Last edited 2011 |
| ||
| The edges should be square because rounded edges will look funny when the same type of tile lies next to each other on a border. Imagine a north side border: 'EE' makes a better edge than 'OO'. One way It could be improved is for the alphablend of the border to be jagged or wavy instead of smooth. I'll clean up the source and post it. |
| ||
| My idea is that on the border both tile types could be present but with a wavy alpha mask of some kind so they blend into each other in an irregular pattern. I look forward to the source code! |
| ||
| Here is the source and updated executable that creates a 76800 pixel map from a base mapfile. |
   |