Heat Wave effect??
by Kevin Epps · in Torque Game Builder · 04/03/2007 (4:37 pm) · 19 replies
Does anyone know how to achieve a heat wave effect, like in Tales of Destiny 2 in the town of Chambard?
I'm trying to find a screenshot. When I find one, I'll put it up.
I'm trying to find a screenshot. When I find one, I'll put it up.
About the author
#2
I fairly certain that TGB does not ship with such functionality, but there is probably a way to do such a thing by tweaking the source code.
04/04/2007 (6:56 am)
I think he means the rippling effect that you would see off the black top on a hot day. . .I fairly certain that TGB does not ship with such functionality, but there is probably a way to do such a thing by tweaking the source code.
#3
if thats what he's talking about ...
04/04/2007 (7:46 am)
With a cleverly made translucent animation ... you could do an overlay, and just play the animation ... play with some blending options, etc ... and you could simulate it ... 'so so' ...if thats what he's talking about ...
#4
04/04/2007 (7:48 am)
Yeah, I've thought about doing such a thing before, but I just don't think a semi-transparent animation will do the trick. Of course, I've been too busy to try it . . .
#5
Like when you see heat wave scenes on TV. There's like a ripple distortion over the scene. I really don't know how else to describe it.
I didn't want to use ripple effect at first, because I didn't want people to think I was talking about that circular ripple effect that happens when something is dropped into water. More like a linear ripple effect.
Do you know how to achieve an "overlay" blend? If I can do that I might have a shot.
04/04/2007 (8:55 am)
Yeah, that's what I'm talking about. Like when you see heat wave scenes on TV. There's like a ripple distortion over the scene. I really don't know how else to describe it.
I didn't want to use ripple effect at first, because I didn't want people to think I was talking about that circular ripple effect that happens when something is dropped into water. More like a linear ripple effect.
Do you know how to achieve an "overlay" blend? If I can do that I might have a shot.
#6
04/04/2007 (9:10 am)
An overlay blend . . . what do you mean by that?
#7
When David said this, I was thinking that he was talking about doing a Photoshop type overlay blend. Like when you set a layer's blending mode in Photoshop to "overlay".
04/04/2007 (9:16 am)
Quote:With a cleverly made translucent animation ... you could do an overlay, and just play the animation ... play with some blending options, etc ... and you could simulate it ... 'so so' ...
if thats what he's talking about ...
When David said this, I was thinking that he was talking about doing a Photoshop type overlay blend. Like when you set a layer's blending mode in Photoshop to "overlay".
#8
If you create a 'rippled' looking transparent PNG, you should be able to place it over top of itself ... once or twice should be good (to simulate the thicker parts and blurry sections) ... then place this stack of transparent images on top of whatever you are trying to give this effect too ...
may not necessarily work out the way you really want it, but you should be able to achieve a really cool effect this way ...
an alternative option is a particle effect ... which you should also be able to pull off ... and would get a 'truer' look out of ... but I don't do particle effects ... ;)
I can, at a later point, try to work up a sample of what I'm trying to describe here ... but I don't have the time now, otherwise I would have done it already :)
04/04/2007 (6:44 pm)
Check out the stock TGB project that comes with TGB, open the 'Blending' level -- it doesn't show what your looking for, but gives a really good example of how to "tweak" your images with blending values ... such as change the Source and Destination values ... as well as changing the transparency, etc, etc ... If you create a 'rippled' looking transparent PNG, you should be able to place it over top of itself ... once or twice should be good (to simulate the thicker parts and blurry sections) ... then place this stack of transparent images on top of whatever you are trying to give this effect too ...
may not necessarily work out the way you really want it, but you should be able to achieve a really cool effect this way ...
an alternative option is a particle effect ... which you should also be able to pull off ... and would get a 'truer' look out of ... but I don't do particle effects ... ;)
I can, at a later point, try to work up a sample of what I'm trying to describe here ... but I don't have the time now, otherwise I would have done it already :)
#9
04/04/2007 (7:04 pm)
@David: Cool! Thanks David, yeah I'm trying to get the hang of Particle Effects myself. I haven't gotten CLOSE to figuring that out yet. Yeah, that would be nice if you could work up an example for me. Whenever you have the time is fine. The deadline for this project is in like late Aug, so I have time. Thanks again!
#10
04/04/2007 (7:15 pm)
Kevin, my emails in my profile -- send me a quick message ...
#11
Heat Wave Demo Video - Camtasia Recording
And here's the overlay image I used ... and I'll explain how I set it up as well ...
Ok ... the background is just a photo of me I had sitting in the My Documents folder ... I used the TGB 1.5 Beta ... love the drag/drop for images, kicks ass ... anyway ... on to the real 'guts' of the demo video ...
I placed the photo of myself in the scene, resized it so it was large ...
I then took the above 'wave' png, placed two copies of it in the scene ... on top of each other ... when I placed this photo though, I didn't place the Static Sprite instance, I placed the auto-generated Scroller instance ... I then set the X/Y speeds of the bottom wave image to 5,2 and the top was 5,-2 ... so the wave was 'rising' at a speed of '5' ... and was moving left or right at a speed of 2 (-2 to reverse) ... and thats it ...
I created the wave in photoshop by creating a new transparent 512x512 image, then used the brush tool and selected the brush that looks like a piece of hair ... I used whatever my last settings were for the brush tool ... but I doubt those really matter ... I then just painted over the transparent image a until I felt i had a nice set of 'hairs' in the image ... as you can see, some are darker then others, etc, etc ...
I also played with the opacity level a bit to lighten it ... then saved it as a PNG with SuperPNG ...
When I put the scroller in the scene, I set the Alpha value to 60 in the Blending roll out ... to lighten it up a bit more ...
Now, with some more time in photoshop to create a slightly better looking 'wave' overlay ... and a bit more time in the Blending Roll out to get 'just the right' values ... and a little 'onTimer' callback that is started with an 'onLevelLoaded' callback for the 'wave' object ... you could change the Alpha value from say ... 60 to 70 ... and back to 60 ... say ... every 100-200ms ... to give it an even 'deeper' effect ... you could even play with the color values ... maybe add some yellow or red to one of the scrollers ... depending on the overall absolute effect you are going for ...
And, I think this is what you were after ... correct me if I'm wrong ...
04/04/2007 (10:06 pm)
Ok -- I actually found a few moments to toy with the general idea ... and I think the results are actually quite impressive ... though, I'm obviously biased ... Heat Wave Demo Video - Camtasia Recording
And here's the overlay image I used ... and I'll explain how I set it up as well ...
Ok ... the background is just a photo of me I had sitting in the My Documents folder ... I used the TGB 1.5 Beta ... love the drag/drop for images, kicks ass ... anyway ... on to the real 'guts' of the demo video ...
I placed the photo of myself in the scene, resized it so it was large ...
I then took the above 'wave' png, placed two copies of it in the scene ... on top of each other ... when I placed this photo though, I didn't place the Static Sprite instance, I placed the auto-generated Scroller instance ... I then set the X/Y speeds of the bottom wave image to 5,2 and the top was 5,-2 ... so the wave was 'rising' at a speed of '5' ... and was moving left or right at a speed of 2 (-2 to reverse) ... and thats it ...
I created the wave in photoshop by creating a new transparent 512x512 image, then used the brush tool and selected the brush that looks like a piece of hair ... I used whatever my last settings were for the brush tool ... but I doubt those really matter ... I then just painted over the transparent image a until I felt i had a nice set of 'hairs' in the image ... as you can see, some are darker then others, etc, etc ...
I also played with the opacity level a bit to lighten it ... then saved it as a PNG with SuperPNG ...
When I put the scroller in the scene, I set the Alpha value to 60 in the Blending roll out ... to lighten it up a bit more ...
Now, with some more time in photoshop to create a slightly better looking 'wave' overlay ... and a bit more time in the Blending Roll out to get 'just the right' values ... and a little 'onTimer' callback that is started with an 'onLevelLoaded' callback for the 'wave' object ... you could change the Alpha value from say ... 60 to 70 ... and back to 60 ... say ... every 100-200ms ... to give it an even 'deeper' effect ... you could even play with the color values ... maybe add some yellow or red to one of the scrollers ... depending on the overall absolute effect you are going for ...
And, I think this is what you were after ... correct me if I'm wrong ...
#12
04/04/2007 (10:10 pm)
Oh and ... small update, for those who try this ... the 'image' tag with the [] ... does not work with 'spaces' ... so you've got to use the %20 characters to represent spaces in URL's ... :)
#13
That's a relatively easy solution, and it reminded me more of a topdown game than a side-view for some reason.
Do you think there's some way to mod the engine so that it renders pixels slightly off from where they're susposed to be? That would give you a true distortion type effect, but I have no idea how to do it.
Maybe start off by creating a t2dDistortionField object, then give that new object some propeties that define the amount of distortion, type of distortion (ripple, linear, etc.). A very good idea . . . I wish I knew how to implement it.
04/07/2007 (9:03 am)
Hey, that's pretty cool David.That's a relatively easy solution, and it reminded me more of a topdown game than a side-view for some reason.
Do you think there's some way to mod the engine so that it renders pixels slightly off from where they're susposed to be? That would give you a true distortion type effect, but I have no idea how to do it.
Maybe start off by creating a t2dDistortionField object, then give that new object some propeties that define the amount of distortion, type of distortion (ripple, linear, etc.). A very good idea . . . I wish I knew how to implement it.
#14
Without shaders, it would work as well but you would have to write own code that makes sure anything else that is behind the haze code is rendered before your haze effect is rendered as you need to modify the backbuffer for it through pixel access. (which will cost a fair amount of time if you need it for more than a few dozen pixels. Fullscreen for example would definitely be a no go at todays resolutions)
04/07/2007 (3:07 pm)
Through shaders, yes.Without shaders, it would work as well but you would have to write own code that makes sure anything else that is behind the haze code is rendered before your haze effect is rendered as you need to modify the backbuffer for it through pixel access. (which will cost a fair amount of time if you need it for more than a few dozen pixels. Fullscreen for example would definitely be a no go at todays resolutions)
#15
04/07/2007 (4:11 pm)
David Higgins' solution looks pretty good. I wonder how it'd look if you added a duplicate image(or scenegraph) that could be faded in and out randomly and offset a few pixels to either side randomly. It looks cool in my head; may not be in real life though :P
#16
you can also do more then 2 overlays, and have various scrolling offsets to achieve a higher quality of 'distortion' ... the image used as the overlay also plays a large roll in the type of distortion ... you could, in concept, achieve a nice 'water ripple' for an adventure game or water based tile game ... for example ... and a ton of other various effects ... it's just a matter of creating the right overlay image ... the images used in the above video demo ... is just the same image overlaid twice, and told to scroll in opposite directions ... you could create two images, and scroll them in the same direction with slightly different speeds, etc, etc ... lots of options ...
Not a 'perfect' heat wave effect, but for a 2D game ... should be suitable ... with some more care taken in the artwork ...
04/07/2007 (5:44 pm)
I did some simple tests, and if you do some color blending with the overlay setup I demo'd above ... you can achieve some interesting effects ...you can also do more then 2 overlays, and have various scrolling offsets to achieve a higher quality of 'distortion' ... the image used as the overlay also plays a large roll in the type of distortion ... you could, in concept, achieve a nice 'water ripple' for an adventure game or water based tile game ... for example ... and a ton of other various effects ... it's just a matter of creating the right overlay image ... the images used in the above video demo ... is just the same image overlaid twice, and told to scroll in opposite directions ... you could create two images, and scroll them in the same direction with slightly different speeds, etc, etc ... lots of options ...
Not a 'perfect' heat wave effect, but for a 2D game ... should be suitable ... with some more care taken in the artwork ...
#18
As TGE has no shaders as well, only TGEA has shaders.
TGBX has shaders but this automatically enforces shader 2 compliant or no go.
04/07/2007 (6:45 pm)
CorrectAs TGE has no shaders as well, only TGEA has shaders.
TGBX has shaders but this automatically enforces shader 2 compliant or no go.
Associate David Higgins
DPHCoders.com