Animating Color

Solar2D Lua Language
#1

Hey all,

First off, what a great SDK. I’ve used other SDK’s before for other mobile apps I’ve made, but this seems the easiest and quickest by far!

To my question: I want to tween the color of an object from its original color to another one. But it seems fillColor is not an object property?

This is the code I have:

box = display.newRect(0,0,20,40)
r = math.random( 0, 255 )
g = math.random( 0, 255 )
b = math.random( 0, 255 )
box:setFillColor(r,g,b)
counter = 0

transition.to( counter, { time=100, fillColor=34,87,189} )
Is there an actual way of doing this? I’m thinkin that I’m just going to have to continuously layer new rectangles behind that are a different color and then animate the alpha of the top one, if there is no other way.

Thanks! [import]uid: 14385 topic_id: 5405 reply_id: 305405[/import]

#2

You can’t do this using transition. Can can create an enterframe event handler, and manually calculate your colour changes, then call setFillColor again on the object you want to change. For example, you could store your R, G, and B values in variables, then every time your enterframe handler function is called, update those values and then use them in setFillColor.

Here’s one approach:

[lua]local box = display.newRect( 50, 50, 50, 50 )
local startColor = {r = 50, g = 50, b = 50}
local currentColor = {r = 50, g = 50, b = 50}
local finishColor = {r = 146, g = 23, b = 98}
local colorDelta = {r = 0, g = 0, b = 0}
local iterations = 40

box:setFillColor(currentColor.r, currentColor.g, currentColor.b)

function changeColor(event)
for k in pairs(currentColor) do
currentColor[k] = currentColor[k] + colorDelta[k]

end
box:setFillColor(currentColor.r, currentColor.g, currentColor.b)
iterations = iterations - 1
if iterations == 0 then
box:setFillColor(finishColor.r, finishColor.g, finishColor.b)
Runtime:removeEventListener(“enterFrame”, changeColor)
end
end

for k in pairs(colorDelta) do
colorDelta[k] = (finishColor[k] - startColor[k]) / iterations
end

Runtime:addEventListener(“enterFrame”, changeColor)[/lua]

Darren [import]uid: 1294 topic_id: 5405 reply_id: 18138[/import]

#3

So then why wouldn’t doesn’t this work?

object2 = display.newRect(0,0,640,960)
object = display.newRect(0,0,640,960)

local function colorShift()

local r = math.random( 0, 255 )
local g = math.random( 0, 255 )
local b = math.random( 0, 255 )
local r4 = math.random( 0, 255 )
local g4 = math.random( 0, 255 )
local b4 = math.random( 0, 255 )

transition.to( object, { time=500, alpha=0.0} )
object:setFillColor(r,g,b)
transition.to( object, { time=500, alpha=1.0} )
object2:setFillColor(r4,g4,b4)

end

timer.performWithDelay(1500, colorShift, 0)

It seems to not want to transistion the alpha multiple times…and it keeps object’s opacity to 1 every time… [import]uid: 14385 topic_id: 5405 reply_id: 18185[/import]

#4

It is changing the alpha but you’re not seeing it because your code is being executed in the same frame event. You’re not giving Corona a chance to draw the image with 0 alpha.

Try this:

[lua]transition.to( object, { time=500, alpha=1.0, delay=500} )[/lua]
[import]uid: 11393 topic_id: 5405 reply_id: 18191[/import]

#5

Thanks, that’d what I needed!
For some reason the fillColor for object is jumping. Do I have to delay that somehow too? [import]uid: 14385 topic_id: 5405 reply_id: 18304[/import]

#6

How is it jumping? [import]uid: 11393 topic_id: 5405 reply_id: 18307[/import]

#7

The transition appears to do that, but really it is setting both objects fill at the same time, instead of waiting until the previous command is done.

How can I delay a setFillColor? [import]uid: 14385 topic_id: 5405 reply_id: 18371[/import]

#8

I’m trying to do timer.performWithDelay but it doesn’t seem to be working, is that because I have it inside a timer.performWithDelay?

Ex:

timer.performWithDelay(5000, object.setFillColor(r,g,b), 1) [import]uid: 14385 topic_id: 5405 reply_id: 18379[/import]

#9

Any help?? Thanks, I’ve been working on this problem for a while, it doesn’t seem that it should be this hard. [import]uid: 14385 topic_id: 5405 reply_id: 19849[/import]

#10

you can’t call a function with parameters in the timer parameters like that

try something like

[lua]timer.performWithDelay(5000,myFillFunction,1)[/lua]

but all that’s going to do is call your function once after 5 seconds
[import]uid: 6645 topic_id: 5405 reply_id: 19866[/import]

#11

@ jmp909 Although you can do:
[lua]timer.performWithDelay(5000, function() object.setFillColor(r,g,b) end, 1)[/lua]
I think that should work, for calling functions with parameters in timer.performWithDelay, anyways. [import]uid: 8782 topic_id: 5405 reply_id: 19876[/import]

#12

ah yes forgot about that

thanks
j
[import]uid: 6645 topic_id: 5405 reply_id: 19898[/import]

#13

If I do object.setFillColor, I get an error though, because it wants a colon. Is there a way around this? Because then it doesn’t work at all. [import]uid: 14385 topic_id: 5405 reply_id: 20171[/import]