Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

Highlighter/Multiply Mode

A topic by Matthew R.F. Baloušek created Oct 14, 2023 Views: 149 Replies: 3
Viewing posts 1 to 3

Hi! I have a thing in mind and I'm wondering what the best way to do it is.

The idea is you have a xeroxed page of something and then add color using highlighters. In an image editing tool this would be a B&W layer with a color layer on top set to multiply.

In my testing I keep running into patterns working as a whole and not at a pixel level—is there a good way to do something like this?

Developer (2 edits) (+1)

Hmm.

Decker's canvas widget essentially has four "blend modes": Solid (opaque), Transparent (let pattern 0 show through), None (invisible) and Invert (xor the pixels of the canvas image against whatever's underneath). For black and white, the Invert option could sort of do what you're talking about without any code:

Color (or patterns) make this trickier, since we don't have any kind of multiplicative blend mode as a primitive.

We can, however, use a trick similar to the Interior Contraption: grab a chunk of the card background as an Image Interface, repalette it (turning some colors into "highlighted" versions of themselves), and use a mask image to blend the repaletted image onto the current contents of the canvas:

The mask image is just a black-on-background-color blob in some appropriate size; you can draw something, copy it to the clipboard, and then paste a string like the above into a script.


It would be equally possible to splat the highlighting directly onto the card background, but we need a canvas to get drag events anyway, so there's no harm in using it. This example intentionally uses a pretty big "brush"; for smooth coverage with fast or small lines we'd need a fiddlier, more complicated approach to stamp the mask down multiple times and interpolate over each stroke. Finally, this approach only works for drawing over a card background (or, with adjustments, another canvas); it won't be able to "see" any widgets between the canvas and the card background.

For convenience, here's a canvas set up like the above in a form you can copy and paste directly into a deck, with its associated script:

%%WGT0{"w":[{"name":"c","type":"canvas","size":[362,198],"pos":[42,95],"script":"mask:image[\"%%IMG2AB4AHQAKAQoAEQEQAA0BEgALARQACQEWAAcBGAAFARoABAEaAAMBHAACARwAAQH/AQ8AAQEcAAIBHAADARoABAEaAAUBGAAHARYACQEUAAsBEgANARAAEQEKAAo=\"]\n\non click pos do end\non release pos do end\n\non drag pos do\n sz:mask.size\n bg:card.image.copy[me.pos+pos-sz/2 sz]\n bg.map[0 dict colors.orange]\n fg:me.copy[pos-sz/2 sz]\n me.paste[mask.merge[fg bg] pos-sz/2 1]\nend\n","show":"transparent"}],"d":{}}

Does that help at all?

(+1)

Thanks for the detailed response! I think this is helpful, where it seems to run into trouble is the dithering patterns retaining their white portion. Is there any way to kind of... "collapse" patterns into a single layer so it treats them like it does images? If not, I think this may still be useful to get what I'm thinking, just with a more image-based process instead of relying on the drawing tools. (This may end up looking better, anyway.)

Developer

Oh, I see!

If you want to "flatten" an image that contains the 1-bit patterns into just pattern 0 and pattern 1, make a selection with the drawing tools and then use "Edit -> Invert" from the menu twice. You can do the equivalent programmatically on a canvas with the "canvas.invert[]" function.