Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

2D All the way! / 2D graphical effect question: Tile Blending

Author
Message
Agent
19
Years of Service
User Offline
Joined: 7th Sep 2004
Location: Sydney, Australia
Posted: 24th Jul 2008 08:22
Link
Hey guys,

I have a question regarding a 2D graphical effect with respect to blending tilesets.

I've created a map, based on a gridwork of tiles (as we've all seen before). Different tiles are present, adjacent to one another, without transition.

Now, I want to dynamically create a transition effect in real time, by blending the two tiles together, using an alphamap or similar, so that each tile fades into the next.

Given that a tile must potentially blend in all eight directions, the logic is difficult. Has anyone tackled this before or have some idea on the logic behind the alpha calculations? Maybe someone has a technique I haven't considered. Help me out here people!
Back to top
Profile PM Email
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 24th Jul 2008 09:12 Edited at: 24th Jul 2008 09:13
Link
You could check each tile and look to see what's adjacent to it. Give each surrounding tile a number. Let's say the red X is a grass tile and every tile around it could be either grass or dirt. If the tile is dirt, take the number shown in the pic and add it to the result number. That number could tell you which alphamap to use.



For instance, the red is grass, and all the tiles around it are grass except for the top 3 tiles, labeled 1,2,4. Add those together and you get 7. Alpha map 7 can be premade to blend a tile with the top 3. Note that no other combination of tiles could add to 7. Same goes for any combination. This is a good way to use a single byte to determine any possible combination of tiles. Of course, you'd need about 255 premade alpha maps. Hoped this helped some.


Attachments

Login to view attachments
Back to top
Profile PM Email Website
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 24th Jul 2008 10:59
Link
Nice technique Phaelax, just a shame it's so heavy on the number of tiles you need.

I think there needs to be a decision made about if the engine is pure 2D, or faked 2D in a 3D environment. Personally I'd always go for faked 2D because you have much more benefits.

Thing is, what you are trying to do is fairly straightforward in 3D, but very difficult in 2D. If things are pure 2D, then alpha blending is not a good idea, you'd be much better off making your tile transitions in an art package. Sometimes you need a sharp transition, say pavement to grass, and the only way to do that properly is in an art package.


Health, Ammo, and bacon and eggs!
Back to top
Profile PM Email
Agent
19
Years of Service
User Offline
Joined: 7th Sep 2004
Location: Sydney, Australia
Posted: 24th Jul 2008 12:30
Link
Yeah an interesting idea, but it's just too many tiles to work with. The whole point of using blended transitions is to reduce the number of tiles I need to load.

I've seen the effect done in any number of games, and there was a showcase game on thegamecreators that did it too - I forget what it was called now, it was kind of a cross between Syndicate and Cannon Fodder, maybe that'll ring bells for someone.

Anyway, it can be done effectively, I just need to know how it was done. Someone out there must have an idea
Back to top
Profile PM Email
wildbill
18
Years of Service
User Offline
Joined: 14th Apr 2006
Location:
Posted: 25th Jul 2008 00:54 Edited at: 25th Jul 2008 00:56
Link
You could use the same technique Phaelax mentioned, but in two separate layers.
1st check the sides.
2nd check the corners.
You would only need 32 tiles this way.
Back to top
Profile PM Email
BiggAdd
Retired Moderator
19
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 25th Jul 2008 07:48 Edited at: 25th Jul 2008 07:49
Link
You could just use .png files with the edges faded away:


Then position them so they overlap.

I've included the demo.

It might run a little slow, but It could be fast with the advanced sprites plugins floating around the place.

I don't know if its what you are after, but I hope it gives you some ideas.

Attachments

Login to view attachments
Back to top
Profile PM
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 25th Jul 2008 18:58 Edited at: 25th Jul 2008 19:06
Link
Operation Invasion Evasion? - I wrote that .

That used this tileset, which your welcome to use. The tiles were blended with VanTrans (which I wrote as well, my first DB application).

You could make some textures and use VanTrans to blend them, then reduce the size of the texture set to suit yourself. It let's you make a greyscale mask file to control the transition between 2 textures, so with some planning you could get the results you need.

Neat idea Bigadd, I guess that if the map could be pre-drawn it would cut out the performance hit with alpha transparent images.


Health, Ammo, and bacon and eggs!

Attachments

Login to view attachments
Back to top
Profile PM Email
Mr Kohlenstoff
17
Years of Service
User Offline
Joined: 7th Jun 2006
Location: Germany
Posted: 25th Jul 2008 23:14
Link
Agent might also have meant Dangerground (I wrote that ). I explained the tile-blending-technique on page 2:

http://forum.thegamecreators.com/?m=forum_view&t=118390&b=8&p=1

All in all it's more complicated than BigAdds version, but looks slightly better and apart from that uses priorities which give you better control over the render-process.

Back to top
Profile PM Email
Agent
19
Years of Service
User Offline
Joined: 7th Sep 2004
Location: Sydney, Australia
Posted: 26th Jul 2008 07:01
Link
Danger Ground! Yes, that was the game to which I was referring. I liked the look of your blending technique, so I'll take a look at your technique now and see what's what.
Back to top
Profile PM Email
Agent
19
Years of Service
User Offline
Joined: 7th Sep 2004
Location: Sydney, Australia
Posted: 26th Jul 2008 08:18
Link
Mr Kohlenstoff:

Ok, I had a thorough look through your whole thread on Dangerground. I saw only one post with any information on your blending technique, and it did give me an idea or two.

One thing you can help me with though is how you did your real time alpha calculations on each tile. How did you gradually fade away the edges? Is there any chance of talking you into sharing some code? Perhaps there's a routine or two in your own project that you need assistance with, for which I could help you in return. Information sharing always yields better results!
Back to top
Profile PM Email
Mr Kohlenstoff
17
Years of Service
User Offline
Joined: 7th Jun 2006
Location: Germany
Posted: 26th Jul 2008 12:57
Link
Well, the blending itself does not work in realtime. Like written in the thread I create the alpha masks when loading the tiles and then always paste the needed frame of this mask over other tiles. So the only thing being realtime is the calculation of which tile-frame to use (So actually it is kind of dynamic.. If you change a tile the alpha-blending also changes immediately). If this technique is, what you are looking for, I could give you the code, you just have to tell me which part you want.

Back to top
Profile PM Email
Agent
19
Years of Service
User Offline
Joined: 7th Sep 2004
Location: Sydney, Australia
Posted: 26th Jul 2008 14:18
Link
Yeah, that's how I thought it worked. What I want to know is how you did the alpha masks themselves. Fading an entire image out is easy, but how do you fade just the edges, more and more as you reach the edge of the tile?
Back to top
Profile PM Email
Mr Kohlenstoff
17
Years of Service
User Offline
Joined: 7th Jun 2006
Location: Germany
Posted: 26th Jul 2008 16:01
Link
I use memblocks to operate the images. If you know how memblocks work, the task should be easy. You get the alpha-value of each pixel of any image-frame by calculating the distance to a border or an edge, depending on what kind of blending you need.

Back to top
Profile PM Email
Agent
19
Years of Service
User Offline
Joined: 7th Sep 2004
Location: Sydney, Australia
Posted: 26th Jul 2008 18:22
Link
So, you just redraw the image pixel by pixel and then GET IMAGE the final result?
Back to top
Profile PM Email
Mr Kohlenstoff
17
Years of Service
User Offline
Joined: 7th Jun 2006
Location: Germany
Posted: 27th Jul 2008 01:35
Link
No, I manipulate all pixels via memblocks and use MAKE IMAGE FROM MEMBLOCK afterwards. You probably need to learn how to work with memblocks (if you don't already do) to realize this technique. (But it's quite easy, so it shouldn't be a problem)

Back to top
Profile PM Email
Agent
19
Years of Service
User Offline
Joined: 7th Sep 2004
Location: Sydney, Australia
Posted: 27th Jul 2008 04:37 Edited at: 27th Jul 2008 04:37
Link
Ok, I haven't used Memblocks before.

MAKE MEMBLOCK FROM IMAGE is easy enough, and MAKE IMAGE FROM MEMBLOCK afterwards, just as easy. But what exactly do you do to the memblock while it's created to affect the alpha value of each pixel?

If you could post some code that would be helpful, but I'd also like to understand what's happening. Can you explain what needs to be done to the memblock before I turn it back into an image?
Back to top
Profile PM Email
Back to top

Login to post a reply

Server time is: 2024-05-04 20:17:08
Your offset time is: 2024-05-04 20:17:08