How do I use the same tileset w/ multiple colors/pallettes?

I'm making a small test game with an ANSI art aesthetic, so I'm using the ANSI character set as a tileset, one character per tile, and ideally I want to use all different colors without having to have a different tileset for each color. Is there a way to take a tile and change the coloration on it like that?

Thanks for any explanation/advice you can offer!

One approach that might work is to have two tileset objects, one for ANSI characters and one for color masks.

You could then multiply-blend the color mask tileset over the character tileset.

That would allow you to change the character or the color independently, without needing a unique tile for each combination of character and color.

That sounds perfect, actually!

Sorry for the ignorant follow-up question, but... how do I multiply-blend?

No worries, perfectly legitimate question.

Multiply blend is one of several "Effects" you can add to objects or layers.

There are two ways to add an effect to an object:

• Project panel: In the project panel, in the object folder, right-click the Tilemap object, and choose "Effects..."
• Property panel: In the layout, select the Tilemap object, and in the property panel, in the "Effects" section, click the blue "Effects" link.

Once you have the Effect window open, click the plus

+

button to add an new effect.

The effect list should open. In the "Blend" category choose "Multiply".

And that should do it.

If you use multiply to overlay color blocks on the ANSI character grid, you'll probably want the ANSI tiles to be white characters on a black background. This way after multiplying them they will be colored characters on a black background.

The Multiply blend is going to "multiply" color tile RGB values into the ANSI tile RGB values.

For blending purposes, the RGB values of pixels are treated as ranging from 0.0 (black) to 1.0 (Max).

e.g.

White is RGB( 1 , 1 , 1 ).

Black is RGB( 0 , 0 , 0 ).

Red is RGB( 1 , 0 , 0 ).

Gray is RGB( 0.5 , 0.5 , 0.5 ).

So if you multiply white (1,1,1) by any other color, the result is that other color.

e.g. (Note: Here I'm using the font-color to differentiate the first color from the second color, rather than to show RGB channel color.)

white (1,1,1) * red (1,0,0)

= (1*1 , 0*1 , 0*1)

which = (1 , 0 , 0)

which is red.

Likewise, if you multiply black (0,0,0) with any color, the result is always black, because each channel gets multiplied by 0.

So if you think about it, whenever you multiply two colors together, the resulting RGB values for a given pixel will never be brighter than the input values, as you'll always be multiplying values in the 0 to 1 range.

Practically speaking, the effect of multiply blend is like projecting a colored light onto a colored texture.

Projecting white light onto a colored texture just shows the texture.

Projecting "black" light (no light) results in solid blackness, for obvious reasons.

Projecting red light results in green and blue features not being visible, as they'll have an intensity of zero. Essentially, what you'd expect from viewing the texture under red light.

Side note, for some reason Construct 2's text objects look kind of weird if you add any blend-with-background type effects to your game, but only in the editor. They'll still look fine at runtime.

This worked perfectly for me! Using two layers it's producing just the right visual effect.

One question, though -- for many tiles I'd like to use a color other than black as the background. Would a background object on an even lower layer be the way to do that?

You can do this with two layers, which I'll refer to as "Foreground" and "Background".

The Foreground layer is arranged above the Background layer, as you'd probably guess.

On the Foreground layer, place the CharTiles and ColorTiles.

If we just stop here, the problem is that the Background layer will be tinted by the ColorTiles too, even though the ColorTiles are on a different layer. fortunately there's a solution.

In the layer panel, select the Foreground layer, and in the property panel, enable "Force own texture".

This will prevent the multiply blend of the ColorTiles from affecting any other layer, and so the ColorTiles will only colorize the CharTiles.

For this to work, the char tiles will need to be white text on a transparent background. The ColorTiles will have no effect where they overlap transparency.

Now you can put whatever you want in on the Background layer and it will show up behind your colorized ANSI characters.

Since your CharTiles will be under your ColorTiles, you may need to temporarily switch their Z-orders to edit one or the other.

More on "Force own texture"

This setting will force the layer to render it's contents starting from a transparent background, instead of starting from the rendered result of all the layers below it. When a "Force own texture" layer has rendered all it's contents, it will then be pasted on top of the rendered result of all the layers below it. This is why blend effects for objects on a "Force own texture" layer will be isolated from other layers.

Using Black on transparent text

If you'd rather work with black text on a transparent background, you can replace the ColorTiles' "Multiply" blend effect to a "Screen" blend effect.

"Screen" blend is identical to "Multiply" blend except flipped upside down in the 0 to 1 color value space. Screen inverts the inputs, multiplies them, and inverts the result.

i.e. screen( a , b ) = 1 - mult( 1 - a , 1 - b )

If you screen any image with white(1,1,1,) you'll always get white. Screen an image with black(0,0,0) and you'll always get the original image unchanged. Screen with middle-gray(0.5, 0.5, 0.5), and you'll get all the image's brightness values moved 50% closer to white. Light-gray(0.9, 0.9, 0.9) will move the image's brightness values 90% closer to white.