Sorry for the large image. I tried to use [spoiler] tags and failed. D:
So, Persona 5 is going in on these color-changing wipes and effects they have on all of their menus. It's a very stylized (and borderline distracting) effect that I was trying to emulate using LÖVE. I apologize in advance; I'm both new, and lacking a .love file. Kinda just spit-balling ideas on this one. After spending some time with the wiki, I thought of a few ways to do this:
1) Use a custom Shader to replace the color with the background or a different color.
2) Make the first draw operation per image a Stencil.
3) BlendMode trickery? (I don't know too much about this.)
I'd like to hear your opinions on this. Is there a faster way? Will doubling my draw ops be inefficient? Mind you, this isn't pre-optimization; I just know if I do this, I'll be using this effect a lot. Thanks and cheers.
If you want this one specifically, I can see it implemented fairly easily. All layers only use 2 colors and transparency, so first you compose each layer graphics and then you render it onto scene with a color replace shader. Basic stencil effect is achieved via rendering solid color with additive mode over blank canvas. In this particular case, i.e. if there's only two levels of overlap, you can render 50% white solid graphics for each object on the layer. Then shader replace picks the difference between pixel color and pre-defined threshold (50%) and mixes color A and color B by it.
I actually see 3 colours given as a whole (white, blue, black) with various "layers" have either white or blue as a background color, and blue or black as the "overlap" tint.
Speaking of overlap, i'd use 100% and 0% opacity only, and a shader to combine one color with another... or, if this was the 00's, i'd say xor or xor-like blendmode... that isn't accessible from löve sadly... unless using a shader.
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
XOR is codespeak for "exclusive or". It's a boolean operation, combines regions of both overlapping shapes (OR operation), except the region that directly overlaps. But that's not the case here, since a) boolean operations only work with 2 states but not with 3 much less arbitrarily many, and b) you can see that multiple shapes overlapping result in same color as with only 2 shapes so that's not relevant. It's an additive mode where each pass adds 1 stage of color, clamped to 2 stages, with color replace based on current stage.
To think of it, you could actually do it using XOR operation. You produce a stencil buffer using XOR stencil accumulation mode, starting with blank buffer of course, and then you render everything again, first with background color, then with foreground color with stencil-testing against the buffer. But that no doubt will result in sharp pixellated edges. Also pretty sure only geometry goes to stencil buffer, you can't put a texture to it.
I'm pretty sure that stencils are pixel-maps though... they have got nothing to do with vertices, which i assume you mean under "geometry".
And i only brought up the xor thing as an old example, naturally, one should either use stencils (with tinting, perhaps), or shaders.
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
No I mean that you can't render a texture to it, and the whole rendered geometry will go in there. But apparently you can do that? And also there's no such thing as XOR stencil mode either. So yeah that not gonna work.
Note that i never said there was a xor stencil mode, again, that was an example how some REALLY ANCIENT games could do "stencils". That said, one, a bit more recent, example would be touhou using multiple overlapping and expanding circles when the player character dies on their last life, (if i remember correctly, anyway); the parity of the overlaps determine whether the colors are inverted or not. Edit: As pgimeno said below, i also never said anything about xor being 1-bit only; one can neatly (bitwise) xor a whole byte as well (as in C for example), and his codeblock demonstrates the result.
Anyway, back to Löve, [wiki]love.graphics.stencil[/wiki] says that it has a "stencilfunction" that draws "geometry". The second example shows how it's possible to use an image (mask) as stencil. it uses love.graphics.draw, which accepts both images and canvases too... so, textures.
But i digress, back to the original question and image, more importantly:
My own naive way would be to have a canvas for all the overlay stuff, define the order of the layers i'd want to draw, then send number triplets to a shader, denoting what color i'd want to change, and to what, based on transparency. E.g. white->blue, white->black, blue->black. Looking at the image, i don't ever see more than two things overlapping though, so at least one doesn't have to set up multiple stages of these.
Last edited by zorg on Sun Oct 02, 2016 5:58 pm, edited 2 times in total.
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
I don't think you need shaders - you can use LOVE's built-in stencils and it will work pretty well. The only downside to this is that you have to draw your images twice and have a specialised stencil drawing function, but you can definitely make it work.
