TF3 flame distortion effet with UNITY ?

A place for people with an interest in developing new shmups.
Post Reply
User avatar
9uile
Posts: 50
Joined: Mon Jan 13, 2020 4:57 pm

TF3 flame distortion effet with UNITY ?

Post by 9uile »

Hi all,

Did someone know how to achieve TF3 flame distortion effet with UNITY ?
https://www.youtube.com/watch?v=fL81XjT_xxQ (at 03:30)

In fact, how to apply a sin distortion on a sprite...

I think that the MD had a native spec to achive this. Is it doable easily in unity ?

thanks
pieslice
Posts: 200
Joined: Sat Mar 01, 2008 12:15 pm
Location: Finland

Re: TF3 flame distortion effet with UNITY ?

Post by pieslice »

Custom pixel shader
User avatar
9uile
Posts: 50
Joined: Mon Jan 13, 2020 4:57 pm

Re: TF3 flame distortion effet with UNITY ?

Post by 9uile »

Thank you pieslice.

Do you think it's possible to do also this effect (just after the sega logo) with custom pixel shading ?
https://www.youtube.com/watch?v=1_vKyaz5seg&t=3s
pieslice
Posts: 200
Joined: Sat Mar 01, 2008 12:15 pm
Location: Finland

Re: TF3 flame distortion effet with UNITY ?

Post by pieslice »

Yes, of course.
Ixmucane2
Posts: 760
Joined: Mon Jan 19, 2009 3:26 pm
Location: stuck at the continue prompt

Re: TF3 flame distortion effet with UNITY ?

Post by Ixmucane2 »

It might be best to split the effect into layers and milestones:
  • render a plain rectangular sprite (with basic vertex and fragment shaders in place)
  • add deformation
  • animate position and deformation
  • add the carefully aligned second sprite and its mirrored geometry
  • add the alternate scanlines effect in the fragment shader (but either transparency or "artistic" dithering with visible texture should look better than the original)
User avatar
Sumez
Posts: 8019
Joined: Fri Feb 18, 2011 10:11 am
Location: Denmarku
Contact:

Re: TF3 flame distortion effet with UNITY ?

Post by Sumez »

In a classic 2D console, background layers all have a pixel perfect global X and Y scroll value, which of course makes sense when you are scrolling through a stage. Typically updated every frame.
But these sorts of effects raster effects, like the two linked here, are created by offsetting the X scroll value per scanline instead of between each frame, essentially shifting the entire horizontal line to the left or right (the same cannot easily be done vertically due to the way screen rendering worked, but changing the Y scroll has interesting effects as well). You can create lots of cool effects this way, like the flame effect, parallax, semi-3D perspectives, etc.

I think if you're trying to replicate multiple raster effects instead of just the flame/sine wave effect, and want it to look authentic, your best approach might be making a simple shader which simply holds an array of X-"scroll" offsets for each line as a parameter (which would be 240 numbers for a "240p" game) and just offset each pixel by this amount depending on the Y coordinate. Then populate this array at run-time using simple math depending on the effect you want to achieve.
User avatar
9uile
Posts: 50
Joined: Mon Jan 13, 2020 4:57 pm

Re: TF3 flame distortion effet with UNITY ?

Post by 9uile »

Thanks you Ixmucane2 and Sumez.
I would try to achieve this effect on a small sprite first using a kind of slices (several sins on sprites to rebuilt the picture).
If it works as i want, i'll try on backgrounds.

The YT channel 'coding secrets' is very nice. I wish having this genesis distortion effects available in unity :)
User avatar
Alec44
Posts: 84
Joined: Fri Jul 02, 2010 2:00 am

Re: TF3 flame distortion effet with UNITY ?

Post by Alec44 »

Something like that works :

Image
User avatar
9uile
Posts: 50
Joined: Mon Jan 13, 2020 4:57 pm

Re: TF3 flame distortion effet with UNITY ?

Post by 9uile »

It could be a solution for small sprites. Maybe not the best if i want a full background.
(are you Alec from shmup.com ? The sprite remains me Nanoforce.)
User avatar
Alec44
Posts: 84
Joined: Fri Jul 02, 2010 2:00 am

Re: TF3 flame distortion effet with UNITY ?

Post by Alec44 »

Hum yes it's me !
Post Reply