Image Layering

[catlo1022]

I'm working on a something similar to a fish breeding game. Basically I want to create a lot of fish on screen with the same shape but different colours and patterns, and I was wondering what's the best way to do so.

Right now what I've come up with is to individually made the images (a base colour, then the marking image) then use love.graphics.draw to draw them on the same coordinates. The problem is this requires a lot of manual labour and images if I ever want to expand the colour/pattern range. For example, if I want stripes or spots in 5 colours I would need to make 2*5 = 10 images, but is there a way simplify it so I can just do a pattern image that gets colour from a colour image, so need 2+5 = 7?

Also please explain in small words I am very dumb.

[pgimeno]

You first need to come up with a procedure that fits your needs. Experiment with gimp until you know what process should be applied to every image.

Once you have the procedure, you can mimic it with LÖVE in one of several ways. Processing ImageData with ImageData:mapPixel is one. Using canvases and shaders is another. The GIMP formulas for layer composition can be implemented easily in shaders or in Lua.

[pedrosgali]

Do all of your images in greyscale then when you draw them you can set the colour to whatever you like.

[catlo1022]

@pgimeno Thank you for your suggestions! I haven't encountered ImageData:mapPixel before, I'll give it a look. I've tried to use the blendmodes to emulate what Photoshop does but it doesn't seemed to be doing the same thing? When I tried 'multiply' in Lua it just drew a black image...

@pedrosgali I've actually tried that, with setColor right? But the image drew wasn't what I was expecting, for example setColor (0, 255, 255) or (255, 0, 255) just gave me the image but in different shades of grey.

[pgimeno]

If 'multiply' with a single colour is all you need, then yes, setColor should work (the problem is that it doesn't leave any whitish highlights like other blending modes do; such plain tinting is inadequate for some applications).

LÖVE's blending modes are just a small subset of what GIMP or Photoshop or CSS can do, so chances are that you need to implement your own if you need something minimally sophisticated.

Regarding your problem with setColor, that's puzzling. I've even tried with a greyscale PNG and it worked just fine Are you using a shader maybe? If so, I think the shader should be adapted to support multiplicative colouring.

[dusoft]

You could also use SVG images, something like https://github.com/globalcitizen/svglover
Color of SVG images is easy to change.