Hello, I was wondering if there is a way to import vector art into a Corona project? What I have is a vector drawing in photoshop, and I would like to have it in my app and also change colors via animation (for instance from green to blue to red). Is this possible? Or is there some way to do it with png files?
You would need to save your vector images as PNG Files or JPEGs (if you don’t need transparency). Corona SDK doesn’t work with raster types (though I guess you could use a webView and draw an SVG file on to an HTML5 canvas but…)
Yes, the problem is I cannot animate or change the color of the png. I’m thinking I will need to overlay 3 pngs of different colors an fade them out repetitively.
You can do a :setFillColor(r, g, b) on images to tone them. You could make a gray object and then color it.
Ahh, I see. Is there a way I can use transition.to with setFillColor? I’d like the colors to fade from one to another.
Not that I’m aware of.
Here’s a method I use:
[lua]
local obj=display.newImageRect(“MyVectorImage.png”, 60, 60)
obj.r, obj.g, obj.b, obj.a=255, 255, 255, 255 – Color values
function obj.updateColor()
obj:setFillColor(obj.r, obj.g, obj. B)
end
Runtime:addEventListener(“enterFrame”, obj.updateColor)
transition.to(obj, {r=0, g=0, time=500})
[/lua]
Without the enterFrame listener, just call the obj.updateColor() function to reset the object’s color whenever you change it - for a transition, you’d need to do it the whole time.
C
you can just create a timer and call the setFillColor routine in a regular period.
Hi JonPM,
I asked a question similar to this about a year or so back and Peach came up with the following code…
local r, g, b = 0, 0, 0 local goRed, goBlue, goYellow local circle = display.newCircle( 160, 240, 60 ) goRed = function() r = r + 5 if g \> 0 then g = g-5 end if b \> 0 then b = b-5 end if r == 255 then timer.performWithDelay(10, goBlue, 51) end circle:setFillColor(r, g, b) end timer.performWithDelay(10, goRed, 51) goBlue = function() b = b + 5 if r \> 0 then r = r - 5 end if g \> 0 then g = g - 5 end if b == 255 then timer.performWithDelay(10, goYellow, 51) end circle:setFillColor(r, g, b) end goYellow = function() r = r + 5 g = g + 5 if b \> 0 then b = b - 5 end if r == 255 and g == 255 then timer.performWithDelay(10, goRed, 51) end circle:setFillColor(r, g, b) end
It’s not perfect, but may be the kind of effect you’re after. Obviously just change the circle for your own graphic.
You would need to save your vector images as PNG Files or JPEGs (if you don’t need transparency). Corona SDK doesn’t work with raster types (though I guess you could use a webView and draw an SVG file on to an HTML5 canvas but…)
Yes, the problem is I cannot animate or change the color of the png. I’m thinking I will need to overlay 3 pngs of different colors an fade them out repetitively.
You can do a :setFillColor(r, g, b) on images to tone them. You could make a gray object and then color it.
Ahh, I see. Is there a way I can use transition.to with setFillColor? I’d like the colors to fade from one to another.
Not that I’m aware of.
Here’s a method I use:
[lua]
local obj=display.newImageRect(“MyVectorImage.png”, 60, 60)
obj.r, obj.g, obj.b, obj.a=255, 255, 255, 255 – Color values
function obj.updateColor()
obj:setFillColor(obj.r, obj.g, obj. B)
end
Runtime:addEventListener(“enterFrame”, obj.updateColor)
transition.to(obj, {r=0, g=0, time=500})
[/lua]
Without the enterFrame listener, just call the obj.updateColor() function to reset the object’s color whenever you change it - for a transition, you’d need to do it the whole time.
C
you can just create a timer and call the setFillColor routine in a regular period.
Hi JonPM,
I asked a question similar to this about a year or so back and Peach came up with the following code…
local r, g, b = 0, 0, 0 local goRed, goBlue, goYellow local circle = display.newCircle( 160, 240, 60 ) goRed = function() r = r + 5 if g \> 0 then g = g-5 end if b \> 0 then b = b-5 end if r == 255 then timer.performWithDelay(10, goBlue, 51) end circle:setFillColor(r, g, b) end timer.performWithDelay(10, goRed, 51) goBlue = function() b = b + 5 if r \> 0 then r = r - 5 end if g \> 0 then g = g - 5 end if b == 255 then timer.performWithDelay(10, goYellow, 51) end circle:setFillColor(r, g, b) end goYellow = function() r = r + 5 g = g + 5 if b \> 0 then b = b - 5 end if r == 255 and g == 255 then timer.performWithDelay(10, goRed, 51) end circle:setFillColor(r, g, b) end
It’s not perfect, but may be the kind of effect you’re after. Obviously just change the circle for your own graphic.