## Image Layering

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
catlo1022
Prole
Posts: 2
Joined: Mon Apr 15, 2019 10:48 am

### Image Layering

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
Party member
Posts: 2278
Joined: Sun Oct 18, 2015 2:58 pm

### Re: Image Layering

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
Party member
Posts: 107
Joined: Wed Oct 15, 2014 5:00 pm
Location: Yorkshire, England

### Re: Image Layering

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

Code: Select all

if not wearTheseGlasses() then
chewing_on_trashcan = true
end

catlo1022
Prole
Posts: 2
Joined: Mon Apr 15, 2019 10:48 am

### Re: Image Layering

@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
Party member
Posts: 2278
Joined: Sun Oct 18, 2015 2:58 pm

### Re: Image Layering

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
Party member
Posts: 106
Joined: Fri Nov 08, 2013 12:07 am

### Re: Image Layering

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

### Who is online

Users browsing this forum: No registered users and 63 guests