Image Layering

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
catlo1022
Prole
Posts: 2
Joined: Mon Apr 15, 2019 10:48 am

Image Layering

Post by catlo1022 » Mon Apr 15, 2019 11:07 am

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.

User avatar
pgimeno
Party member
Posts: 1769
Joined: Sun Oct 18, 2015 2:58 pm

Re: Image Layering

Post by pgimeno » Tue Apr 16, 2019 1:54 pm

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

Post by pedrosgali » Wed Apr 17, 2019 5:15 am

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

Post by catlo1022 » Wed Apr 17, 2019 9:36 am

@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.

User avatar
pgimeno
Party member
Posts: 1769
Joined: Sun Oct 18, 2015 2:58 pm

Re: Image Layering

Post by pgimeno » Wed Apr 17, 2019 10:24 am

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
Citizen
Posts: 95
Joined: Fri Nov 08, 2013 12:07 am

Re: Image Layering

Post by dusoft » Wed Apr 17, 2019 9:42 pm

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

Post Reply

Who is online

Users browsing this forum: No registered users and 8 guests