How do I use effects and masks to do this?

0 favourites
  • 14 posts
From the Asset Store
Basic template for drawing game with masks and easy customization
  • Hello everyone, I'm trying to create (at random) monochrome backgrounds using simple overlapping shapes like this:

    As you can see in this example I made, I'd like to:

    • pick 1 random color (that I do by creating a 1x1 red pixel with the "Adjust Hue effect" that randomly generates hue, saturation and luminosity)
    • decide if this color is foreground or background (with the "choose()" expression)
    • Apply the color to the background or foreground (I think it's done by choosing the right blending effect on the right layer?)
    • And (the most important part) make it so that when two sprites overlap (for the binary suns in the picture above), the color of the intersection is the background color.

    Please, please help me, I'd love to create those backgrounds at random and add animation to it. I feel I'm close but I can't seem to grasp how masks and effects work together with layouts, backgrounds and overlapping sprites. And believe me, I read the "effects" section of the manual.

  • I would also like to know!

  • I think you will need the canvas plugin for this. even if not, I am pretty sure it will come handy, so advice checking it.

  • Do I really have to use a plugin ? I'd like to avoid plugins otherwise I won't learn a thing...

  • The canvas plugin isn't a shortcut with no learning, it's roughly the same as using canvas in html5 .

    Allows some really nice possibilites.

  • And where can I find this plugin ? It's not listed in the Plugin Reference (in the Construct2 Manual)

  • Here it is:

  • OK, thanks for the link, I thought plugins were stored in the scirra store and found nothing

    I read the plugin description: this doesn't really answer to my questions...

    Last night I managed to create more or less what I wanted: random generation of mountains, suns, with a background color that changes (as I described in my first post), can swap between foreground and background.

    The only thing that is missing is this: when two black sprites are overlapping, I want the overlap to be white (black is the color I then replace with any color I want).

    I thought I could do that by putting sprite 1 on a layer and Sprite 2 on another layer, and use the "exclusion" or "difference" effect, but it won't work (or I'm doing it wrong).

    That's really the last thing that's missing, and I feel installing the Canvas plugin won't necessarily solve this problem (and will make a lot of what I made until now obsolete).

    I'll post the .capx when I get back home tonight to show you what I mean.

  • May I play Devil's Advocate for a moment.......

    I know you said you read the manual, but Ashley specifically states in the effects section not to use effects on static images or sprites as it has a performance degrading effect. Are you sure this is the best way to achieve what you want? What readings are you getting from debug? What platform(s) are you targeting?

  • I'm not targeting any platform, this isn't even a game yet. But the overall aspect of it will be very light. No GUI, just backgrounds and text (and a few sprites as comic book cells, if you see what I mean).

    Construct 2, with HTML5, is to me far more than just a game making tool. I'm thinking about my project more like an interactive comic book than a game. You know, something a little bit like The Yawhg. This means that the core of the mechanics are just branches, options in the narrative, nothing really complex to compute.

    Let's just say I wan't to make something more pretty than interactive.

    Do you think I'll still experience performance issues ? I'll post what I've been able to make yesterday in a few hours, I haven't opened the debug window yet (it's wrong, I know).

  • Here's my demo: there are trees and mountains, stars moving, clouds and water, all in a very "minimum" style.

    I even added a little song I made for it.

    (my reputation is not high enough for me to post a direct URL):

    HTML file:

    mega.co.nz/#!fIYXQDyY!yasZqCxEz2Cw1TAH2y8znTK8YwFoUQhIpDtM3WtmS1k

    CAPX:

    mega.co.nz/#!CBRl3QSa!p0nZIeUt3Sl52_444ZQkGTZ63jkaEYx0axDdzZgAFj4

    add https:// before the link.

    2 screenshots to show the inversion BG color/ Front Color

  • You should still be able to attach your .capx to your post, unless it's too large.

  • [quote:2o29smuc]- And (the most important part) make it so that when two sprites overlap (for the binary suns in the picture above), the color of the intersection is the background color.

    For that bit you can use the xor blend. Only note the xor blend doesn't work with webgl so you'll need to set webgl to off.

    https://dl.dropboxusercontent.com/u/542 ... blend.capx

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • I've completely redone the capx using XOR blend, (and thus deactivating WenGL effect). But I can't change the background color, now (I previously used the webGL "HSL Adjust" effect).

    Do you know if I can still change the color of a photo without using webGL at all ?

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