How can I get this effect?

  • <img src="https://dl.dropbox.com/u/105711543/Images/Mask.png" border="0">

    Does anyone know of a shader or maybe some canvas feature that can achieve this effect? It's important that the detail on the underlying texture be replaced with solid color (notice how you can't see the checker pattern when submerged)

    EDIT: The image seems to be throwing people off so here's a video showing what I'm going for (using animated water tiles instead, read second post for more info)

  • Split the water up so you get two different sprites, one transparent and one isn't.

    Also, you can add an event so the water duplicates itself untill it's not transparent anymore upon collision with another object (?)

  • Thing is, the water is heavily animated. The image was just whipped up to show what I'm going for and is one of many possibilities. Currently we're using 2-tone water tiles + animated water tiles with about 8 wave variations depending on what is overlapping the surface. It works, but it's a pain to manage (half tiles, slopes, edges, etc.) plus we're using Tiled so they're not the easiest things to implement. Achieving this effect with a single water object instead would make my day.

  • - if your water on the left is made to look that way through opacity is it possible to just create an event where the tiles that overlap other objects opacity is set to full, thus creating that effect?

  • Nope, because of half-tiles, slopes, edges, etc. as mentioned earlier. Only certain parts of the water tiles need to affect the tiles underneath, which can only be done through shaders or individually animated tiles as we did for the video I just posted in the OP - but that's very tedious and inefficient.

  • https://www.dropbox.com/s/9e25n03r576s24k/bringmewaterharry.capx

    unless i'm misunderstanding/missing something...

    (if you look at the example you linked, it looks like the dock sprite only goes to the water - there are missing pixels in the water animation covering the bits, so i kind of imagine they tiled light water and dark water, so it appears to be overlapping but is really just a tiled illusion)

  • "so it appears to be overlapping but is really just a tiled illusion"

    Correct - that video is of the animated water tile workaround I mentioned earlier..it doesn't actually use transparent water sprites or anything.

    What you're not noticing though is how the checker pattern on the tiles is wiped out and replaced with solid blue. It's not just a transparent overlay.

    <img src="https://dl.dropbox.com/u/105711543/Images/Mask2.png" border="0" />

    Your example would result in something like the one on the left. I'm going for the one on the right and the goal is to use only 2 objects to reproduce the effect in this image.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • And my day has been made. Many thanks R0J0hound :)

  • R0j0hound was faster than me, although I think my solutions can have it's uses since they offer more control.

    One you can set the opacity of intersection, and the other you can set a color for the intersection.

    Solid Overlap Effects

    Example capx

  • Oh cool. I'm sure they will come in handy somewhere!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)