How do I Fade one side of an object?

0 favourites
  • 15 posts
From the Asset Store
This is a single chapter from the "Construct Starter Kit Collection". It is the Student Workbook for its Workshop.
  • Is there an effect that will cause an object to fade only on one side? When the player walks behind a pillar or something, I'd like it to go semitransparent. I could do this with a tween on opacity, but I think it would look better if the bottom of the pillar or tree or whatever stayed fully solid, while the top became translucent to show the player.

    I'd want the Opacity at the sprite's y=0 to be 0, and the opacity at the sprite's Y= height to be 100.

    If such a thing doesn't exist, could you point me toward documentation/tutorials on making effects?

  • You can't do anything like that.

    You best bet is to split the object up into parts.

  • you could create two versions of the sprite.. one at full opacity and then another one partly opaque. load both jpgs into a sprite object, set the animation speed to 0.

    start with frame 0, then when you need to go to the opaque one, set frame to 1.

    pseudo code:

    Player Overlapping Pillar
    Trigger Once While True
                  Set Pillar frame 1
    Player NOT Overlapping Pillar
    Trigger Once While True
                   Set Pillar frame 0[/code:3fg3jva2]
    but to do it dynamically (i.e. a different part of the sprite depending on where the player is) is not possible in C2 as far as a I know.
  • My workaround was going to be animations. Splitting into parts doesn't let me have a smooth opacity transition between the top and bottom. The problem with using animations is that it can't work with something that is already animated, like a swaying tree.

    Are you sure this is completely impossible? We have stuff like this?

    If the user's platform doesn't support webgl, I'll just deopacify the whole object.

  • The problem with using animations is that it can't work with something that is already animated, like a swaying tree.

    it could if you made two different animations.. one opaque and one not... I know it seems heavy handed, but depending on how many of these objects there are, it might not be too bad.

    in order to only do part of the sprite, you'd have to somehow create a new image in memory anyhow.. I don't think you can manipulate part of the sprite in memory, unless someone made a plugin or something. I'm sure it's possible..

  • You can use a gradient sprite with Blend mode Destination-in.

  • I read the original post a bit wrong, but like blackhornet's example you can do it with blend modes.

    Here's another example to make only part of a sprite transparent: ... blend.capx

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • might be able to request a shader from Somebody

    check out


  • I like blackhornet 's solution.. just flip the gradient upside down and instead of toggling 'visible', add a quick Fade (behavior) in/out.. would look nice I think!

  • Won't the fade gradient touch everything else on that layer? I ask because sometimes the player walks in front of stuff, so i have the player on the same layer as the architecture. I guess I could put the architecture a layer above when I need to fade and on the same layer when I need the player in front.

  • erm i just got answered my question about something similar

    if you created your map in a way where you have your bases that cannot be walked past in 1 layer and an extra layer for the pillars and such, you can have a constant sprite overlap your character and do a source out on the pillar layer so the circle overlapping your character would "erase" the pillars temporarily

    i personally think its a good idea to separate your maps also since you can create map interactivity

  • Thats a good idea. Gotta love Containers! I think I'll end up with two separate sprites anyway. I'll have the Base for solid collisions, and the decoration, which detects collisions for z ordering and fade.

    I was a disappointed that nobody pointed me towards any documentation or tutorials on how Effects work in C2. I found plenty of tutorials online about glsl and other shader languages, but I really had to work for it and guess to figure out that GLSL was the language in question, or that the .fx files are fragment shaders, or that when I get the front color it is considered to be in a premultiplied state. I was able to find literally no documentation at all on how C2 handles shaders.

    Anyway, here is what I got:

    Anyway, I built the shader I wanted, and threw in X axis support for lulz.

  • bladedpenguin

    Here's a list of variables that C2 provides for use in the shaders. To use them you still need to declare them at the top of your fx file.

    Most third party shaders are made by copying what existing shaders do. There was a question about variable qualifiers which may also be useful:

    Thirdly as a testing ground I've seen this online tool used to make shaders quicker:

  • Awesome! I found your list of C2 variables when I went to go post my WIP to the effects board. I guess I should spend more time poking about the site and less time googling. oh well.

    The tester I found was , but ShaderToy seems more useful, and i think I'll use it if I ever next time I want a shader no one else wants to make.

    To figure it out, I pretty much did as you said and took apart the default shaders and reworked the math.

  • bladedpenguin

    On the note of searching, you can use google to search only the scirra website by adding the following to your google search.

    It has certain advantages over the forum's search.
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)