How to make blob/gooey effect between instances?

Post reply
1 favourites
  • 9 posts
From the Asset Store
[CHARACTER PACK] SLIMES, BLOBS & TENTACLES (Pixel Art Animation Pack)
$20 USD
HUGE pack of animated pixel art Slimes Characters. Contains smooth and stylized pixelart Enemies/Mobs/Bosses animations
Overboy's avatar
Overboy

  • Hi

    How to make blob/gooey effect between instances of the same object type? Like 2D drops.

    I know that there is an Alpha Clamp effect, but it does not do what I want.

    Thanks

    Tagged:

  • Got a visual example of what you are looking for? Alpha clamp should be able to do what you want as far as metaballs/marching squares style effects.

    ex: dropbox.com/s/uz5vxy35vjacptj/MetaballsExample.c3p

  • Got a visual example of what you are looking for? Alpha clamp should be able to do what you want as far as metaballs/marching squares style effects.

    ex: dropbox.com/s/uz5vxy35vjacptj/MetaballsExample.c3p

    Not really.

    Alpha Clamp visually changes the radius and makes sharp edges and adds gradient.

    I'm searching for a way to make it more beautiful and flat.

    Here is an example: Gooey

  • I know that I can add "Set color" or "Tint mask" effect over the "Alpha clamp" which will make a solid color. But, there is still an issue with edges.

  • For the color, you're probably better off using a blend mode on the sprite to show the (opaque) layer's background color rather than add another stacked effect.

    The edges I think is more a matter of resolution, and it will look more smooth/lumpy with a variety of ball sizes. I'll see what I can do about updating the example when I get a chance.

    Also followed the source of the example you posted, it absolutely uses alpha clamping as the base technique - tympanus.net/codrops/2015/03/10/creative-gooey-effects

  • I see what you mean by the blob not being a solid color after using the alpha clamp effect. At least with any color but black. I think it has to do with how the effect handles premultiplied alpha perhaps if someone wishes to make a modified effect.

    As for the quality of the edge you can use different gradients to change that a bit. I’ve found the soft brush in the C2 image editor makes a nicer gradient than the soft brush in C3’s image editor, but other image editors could create better ones.

  • For the color, you're probably better off using a blend mode on the sprite to show the (opaque) layer's background color rather than add another stacked effect.

    The edges I think is more a matter of resolution, and it will look more smooth/lumpy with a variety of ball sizes. I'll see what I can do about updating the example when I get a chance.

    Also followed the source of the example you posted, it absolutely uses alpha clamping as the base technique - tympanus.net/codrops/2015/03/10/creative-gooey-effects

    Thanks in advance for the updated example with smoother edges :)

  • Updated the example. Looks like the hard edges are due to lack of anti aliasing on the clamp result. I don't know how to fix this directly, but visually speaking it is significantly less noticeable with larger resolutions/shapes, as well as faster motions. On a high dpi display such as most modern mobile devices, it should be negligible.

    I wish there were more parameters in the webgl blur effects. Adding a low radius horizontal and vertical blur to the entire layer could be a possible solution, but the current blur effects don't really allow for fine control.

    The result also does seems to be better with a proper gaussian blur from an image editing program rather than just using the brush from Construct's image editor, but it's pretty hard to see.

    Also generally speaking as far as design goes, these are the types of things users are not likely to notice or care about as long as your gameplay is engaging enough.

    Edit: Also tried adding the coloring via blend modes, but for some reason it doesn't preview in the editor correctly. It works fine in the project preview though. You can try it by changing the blend mode of Layer 1 to 'Destination In' or 'Destination Atop'

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Well done — Very nice metaball they blend nicely moreover it works interactively in layout.

Post reply
  • 9 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)