How to shade a display object fill with an image

Audio and Graphics
#1

I have a rect filled by a regular image but looking at the graphics guides I can’t seem to figure out how to shade the filled image by, say, 50%.

Anyone got any ideas? Here’s the code I’ve got now…

local rect = display.newRect( 100, 100, 200, 200 ) local compositePaint = { type="composite", paint1={ type="image", filename="picture.png" }, paint2={ type="image", filename="black.png" } } rect.fill = {type="image",filename="picture.png"}

I was hoping to be able to fill with an image and then apply an effect, but the composite doesn’t appear to give the right result.

The result I’m looking for is the same effect as loading an image and then placing another rect over the top with this fill: { 0, 0, 0, .5 }

#2

Sorted. This lets you affect the darkness of the image with sliders.

I’ve found that setting white=1, black=0 and adjusting gamma lightens and darkens the image.

local function testFx() local earth = display.newImage( "earth.png" ) earth.x, earth.y = display.actualCenterX, display.actualCenterY earth.xScale, earth.yScale = .65, .65 earth.fill.effect = "filter.levels" earth.fill.effect.white = 0.5 earth.fill.effect.black = 0.1 earth.fill.effect.gamma = 1 local widget = require("widget") local white, black, gamma local function sliderListener( event ) earth.fill.effect.white = white.value/100 earth.fill.effect.black = black.value/100 earth.fill.effect.gamma = gamma.value/100 end display.newText{ x=display.actualCenterX, y=70, text="white" } white = widget.newSlider { top = 100, left = 50, width = 650, value = 50, -- Start slider at 10% (optional) listener = sliderListener } display.newText{ x=display.actualCenterX, y=170, text="black" } black = widget.newSlider { top = 200, left = 50, width = 650, value = 10, -- Start slider at 10% (optional) listener = sliderListener } display.newText{ x=display.actualCenterX, y=270, text="gamma" } gamma = widget.newSlider { top = 300, left = 50, width = 650, value = 100, -- Start slider at 10% (optional) listener = sliderListener } sliderListener() end
#3

Sorted. This lets you affect the darkness of the image with sliders.

I’ve found that setting white=1, black=0 and adjusting gamma lightens and darkens the image.

local function testFx() local earth = display.newImage( "earth.png" ) earth.x, earth.y = display.actualCenterX, display.actualCenterY earth.xScale, earth.yScale = .65, .65 earth.fill.effect = "filter.levels" earth.fill.effect.white = 0.5 earth.fill.effect.black = 0.1 earth.fill.effect.gamma = 1 local widget = require("widget") local white, black, gamma local function sliderListener( event ) earth.fill.effect.white = white.value/100 earth.fill.effect.black = black.value/100 earth.fill.effect.gamma = gamma.value/100 end display.newText{ x=display.actualCenterX, y=70, text="white" } white = widget.newSlider { top = 100, left = 50, width = 650, value = 50, -- Start slider at 10% (optional) listener = sliderListener } display.newText{ x=display.actualCenterX, y=170, text="black" } black = widget.newSlider { top = 200, left = 50, width = 650, value = 10, -- Start slider at 10% (optional) listener = sliderListener } display.newText{ x=display.actualCenterX, y=270, text="gamma" } gamma = widget.newSlider { top = 300, left = 50, width = 650, value = 100, -- Start slider at 10% (optional) listener = sliderListener } sliderListener() end