Apply a gradient to an image

Solar2D Daily Builds and Public Releases
#1

Hello,
I’d like to apply a gradient also to images. Now if you try to apply a gradient to an image you receive the following message from the simulator:
[bash]
2013-02-10 23:11:45.347 Corona Simulator[11594:f03] WARNING: o:setFillColor() Gradients cannot be applied to image objects.
[/bash]

I wrote the following test code (main.lua) to test this functionality for the future:
(you can find the b/w test image here)

[lua]
local screenWidth = display.contentWidth;
local screenHeight = display.contentHeight;

– Gradients
local backgroundGradient = graphics.newGradient({255,255,100},{150,255,100}, “down”);
local imageGradient = graphics.newGradient({255,50,0},{255,125,0}, “down”);

local background = display.newRect(0,0,screenWidth,screenHeight);
background:setFillColor(backgroundGradient);
background:setReferencePoint(display.CenterReferencePoint);
background.x = screenWidth*0.5;
background.y = screenHeight*0.5;

local myImage = display.newImageRect(“image.png”, 285, 299);
myImage:setFillColor(imageGradient);
myImage:setReferencePoint(display.CenterReferencePoint);
myImage.x = screenWidth*0.5;
myImage.y = screenHeight*0.5;

local myImageScale = math.min(1,screenWidth/myImage.width);
myImage.xScale = myImageScale;
myImage.yScale = myImageScale;
[/lua] [import]uid: 42955 topic_id: 35773 reply_id: 335773[/import]

#2

If I’m not mistaken you can only apply gradients to objects created with display.newRect( ) and display.newText().

I’m not sure if this would be suitable for your implementation, but maybe you could put your image in a display-group and add a rect on top with your gradient (with alpha-channel data). You’d probably need a mask as well. [import]uid: 70847 topic_id: 35773 reply_id: 142360[/import]

#3

The code pasted below (use THIS image) is the closer result to what I would obtain but has strong limitations:

  • Masks can only have size multiple of 2

  • You need another mask to cut the object edges

  • You need to create 1 display group, 2 rect and 2 masks to create 1 object

[lua]
local screenWidth = display.contentWidth;
local screenHeight = display.contentHeight;

– Gradients
local backgroundGradient = graphics.newGradient({255,255,100},{150,255,100}, “down”);
local imageGradient = graphics.newGradient({255,255,0},{0,255,255}, “left”);

local background = display.newRect(0,0,screenWidth,screenHeight);
background:setFillColor(backgroundGradient);
background:setReferencePoint(display.CenterReferencePoint);
background.x = screenWidth*0.5;
background.y = screenHeight*0.5;

local myImageMask = graphics.newMask( “image.png” );

local myImageBackground = display.newRect(0, 0, 256, 256);
– myImageBackground:setMask(myImageMask);
myImageBackground:setFillColor(0,0,0);
myImageBackground:setReferencePoint(display.CenterReferencePoint);
myImageBackground.x = screenWidth*0.5;
myImageBackground.y = screenHeight*0.5;

local myImage = display.newRect(0, 0, 256, 256);
myImage:setMask(myImageMask);
myImage:setFillColor(imageGradient);
myImage:setReferencePoint(display.CenterReferencePoint);
myImage.x = screenWidth*0.5;
myImage.y = screenHeight*0.5;
[/lua] [import]uid: 42955 topic_id: 35773 reply_id: 142365[/import]

#4

If I’m not mistaken you can only apply gradients to objects created with display.newRect( ) and display.newText().

I’m not sure if this would be suitable for your implementation, but maybe you could put your image in a display-group and add a rect on top with your gradient (with alpha-channel data). You’d probably need a mask as well. [import]uid: 70847 topic_id: 35773 reply_id: 142360[/import]

#5

The code pasted below (use THIS image) is the closer result to what I would obtain but has strong limitations:

  • Masks can only have size multiple of 2

  • You need another mask to cut the object edges

  • You need to create 1 display group, 2 rect and 2 masks to create 1 object

[lua]
local screenWidth = display.contentWidth;
local screenHeight = display.contentHeight;

– Gradients
local backgroundGradient = graphics.newGradient({255,255,100},{150,255,100}, “down”);
local imageGradient = graphics.newGradient({255,255,0},{0,255,255}, “left”);

local background = display.newRect(0,0,screenWidth,screenHeight);
background:setFillColor(backgroundGradient);
background:setReferencePoint(display.CenterReferencePoint);
background.x = screenWidth*0.5;
background.y = screenHeight*0.5;

local myImageMask = graphics.newMask( “image.png” );

local myImageBackground = display.newRect(0, 0, 256, 256);
– myImageBackground:setMask(myImageMask);
myImageBackground:setFillColor(0,0,0);
myImageBackground:setReferencePoint(display.CenterReferencePoint);
myImageBackground.x = screenWidth*0.5;
myImageBackground.y = screenHeight*0.5;

local myImage = display.newRect(0, 0, 256, 256);
myImage:setMask(myImageMask);
myImage:setFillColor(imageGradient);
myImage:setReferencePoint(display.CenterReferencePoint);
myImage.x = screenWidth*0.5;
myImage.y = screenHeight*0.5;
[/lua] [import]uid: 42955 topic_id: 35773 reply_id: 142365[/import]