Floating Effect - HELP!

How would one make the background image “float” around? (i.e. as if you were in an airplane) [import]uid: 66117 topic_id: 17473 reply_id: 317473[/import]

could you describe what you are trying to do in a little more detail? Doesn’t make much sense to me. [import]uid: 49447 topic_id: 17473 reply_id: 66328[/import]

transitions, runtime functions, timers, sprites, video

choose) [import]uid: 16142 topic_id: 17473 reply_id: 66336[/import]

My menu is supposed to be the inside of an airplane. And for realism I’m wanting the background to kind of move around in a gradual type manner. Similar to the splash screen in the comic book app Trip Harrison Origin. I’ve already tried making physical walls a couple pixels outside the border of the screen and giving my image a linear impulse, but that doesn’t work. [import]uid: 66117 topic_id: 17473 reply_id: 66347[/import]

@joe,
look for parallax scrolling, I think that is what you are looking for.

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 17473 reply_id: 66366[/import]

@OZ,
I’m sorry, I guess didn’t explain myself well enough. My background is just a solid, metal wall; which I would have “hover” randomly around the screen. Although, I probably will use that parallax example later on.

Much appreciated,
J.K. [import]uid: 66117 topic_id: 17473 reply_id: 66369[/import]

FYI, not tested. written from memory
local function moveback()
transition.to(background, {x = 50})
transition.to(background, {delay=500, x = 0, nComplete=moveback()})
end

[import]uid: 79135 topic_id: 17473 reply_id: 66511[/import]

might also want to add some easing to achieve the effect you are looking for

http://developer.anscamobile.com/reference/index/easinginoutexpo [import]uid: 49447 topic_id: 17473 reply_id: 66513[/import]

@andrew,
That works, except for the fact that it is all jerky. I’m wanting it to be a slow, gradual, fluid motion.

@T,
I tried the easing codes and it worked a little better. I’m just not sure how to make the background move in what would seem like a random path to the gamer.

What would be neat is if there was a way to make a path that the background would follow. Is that even possible?

Much appreciated,
J.K.

[import]uid: 66117 topic_id: 17473 reply_id: 66561[/import]

try just passing in a random X val (obviously, retain the easing you added… I didn’t include that here since I’m not sure what your actual code is):

[lua]local mRand = math.random
local function moveback()
transition.to(background, {x = mRand(50)})
transition.to(background, {delay=500, x = 0, nComplete=moveback()})
end[/lua]

you could certainly make a path for it to follow… not sure what to suggest on making that though. If it were me, I’d probably prototype it in flash, or something else where you can actually set keyframes. Then I would output that path to a list of numbers, which could be imported/coded into Corona. [import]uid: 49447 topic_id: 17473 reply_id: 66563[/import]

@T,
I tried passing a random number. The only problem is that the background would eventually move off the screen. I think I could fix this, but it looks like it would be a whole lot of work. As far as flash prototyping is concerned, the only coding experience I have is in Lua with Corona.
[import]uid: 66117 topic_id: 17473 reply_id: 66574[/import]

The only problem is that the background would eventually move off the screen

that shouldn’t be too big of an issue. try something like

[lua]x = mRand((background.contentWidth * 0.5), display.contentWidth - (background.contentWidth * 0.5))[/lua]

the key would be making sure that the random X doesn’t go beyond the limits of the screen (or however far you want it to go) [import]uid: 49447 topic_id: 17473 reply_id: 66579[/import]

Okay, makes sense. Where would I put it? Here?
[lua]local mRand = math.random
local function moveback()
transition.to(background, {x = mRand(50)})
transition.to(background, {delay=500,x = mRand((background.contentWidth * 0.5), display.contentWidth - (background.contentWidth * 0.5))})end [import]uid: 66117 topic_id: 17473 reply_id: 66580[/import]

maybe you could post the image and code you are using now so these suggestions aren’t just shots in the dark. [import]uid: 49447 topic_id: 17473 reply_id: 66743[/import]

for smooth movement.

[lua]background.x = 0
targetx = 50

function moveback()
if targetx ~= math.floor(background.x) then
distancex = background.x - targetx
background.x = background.x + distancex*.1
else
targetx = -targetx
end
end[/lua]
This function should be “smother” than transition.to (except to start with - you can fix that xD)
haven’t tested. wrote in forum.
[import]uid: 79135 topic_id: 17473 reply_id: 66780[/import]

Hi there,

Try this in the enterFrame block:

local speed1 = 100 -- lower values mean faster motion  
local amount1 = 50 -- lower values mean smaller motion  
  
local speed2 = 200 -- lower values mean faster motion  
local amount2 = 20 -- lower values mean smaller motion  
  
image.x = math.sin(system.getTimer/speed1)\*amount1 + math.sin(system.getTimer/speed2)\*amount2  

Basically what you are doing is this: you are creating a sine wave motion, with this starting point:

image.x = math.sin(system.getTimer)  

(if you try this, prepare to be dissapointed since this will look like jittery crap until you go through the following steps!)

Actually since you’re in the enterFrame block you could also use math.sin(event.time) which might be faster. Check.

Now, the math.sin() API call or simply put the mathematical function Sine returns a smoothly changing value from -1 to +1 depending on the (smoothly changing) input you give it. Time is a smoothly changing input, but unfortunately the time value changes so fast that the -1 to +1 output moves too fast as well. Dividing the system time by a value of about 100 will give better (slower) smoother results. So we change the starting point code to this:

image.x = math.sin(system.getTimer/100)  

This will still look like crap! :slight_smile: Why? Because now you have a smootly changing value, but it only goes from -1 to +1, so you only get a 2 pixel range of motion. We need a bigger range of motion, so we need to multiply this with a factor:

image.x = math.sin(system.getTimer/100)\*50  

This will set image.x to a smoothly changing value ranging from -50 to +50. If you need the image to hover around the center of the screen add half the screen width to this value.

That’s basically it! Now the really cool stuff comes when you use one of these lines for the X value, and a similar line but with other speed and range of motion for the Y value. Instant pseudorandom floating motions. For even more fun, add two of these statements to eachother for the X value, but with different speed and motion values. Combine at your leisure!

Enjoy,
Thomas

p.s. If you start combining different speed values, be aware that using clean multiples (e.g. speed1 = 100 and speed2 = 200) will give more ‘mechanical motions’ that clearly repeat, while random speeds like speed1 = 117 and speed 2 = 231 will give everchanging irregular motions. [import]uid: 70134 topic_id: 17473 reply_id: 66796[/import]

@T,
In post #6 you gave me this code:
[lua]x = mRand((background.contentWidth * 0.5), display.contentWidth - (background.contentWidth * 0.5))[/lua]
I put that in a function and It works great. The only problem is when my image is the size of the screen, it doesn’t move. So I tried to change the mRand params to this:
[lua]transition.to(target, {time=5000,y = mRand((target.contentWidth * 0.5), display.contentWidth - (target.contentWidth * 0.5)), transition=easing.inOutExpo}) [/lua]
But it gave me this error:
Runtime error
…s/*******/Desktop/Corona Projects/myGame/main.lua:52: bad argument #2 to ‘mRand’ (interval is empty)
stack traceback:
[C]: ?
[C]: in function ‘mRand’
…s/k96jsmith/Desktop/Corona Projects/Blinded/main.lua:52: in function ‘_listener’
?: in function <?:446>
?: in function <?:215>
[import]uid: 66117 topic_id: 17473 reply_id: 66843[/import]

@T,
“maybe you could post the image and code you are using now so these suggestions aren’t just shots in the dark.”
I don’t know how to post images. Basically I have this:
[lua]local bg = display.newImage(“images/bg.png”)
bg.x = _W/2; bg.y = _H/2[/lua]
That is basically it. I have the menu buttons and text and such, but nothing happening to the bg. I’m really starting with a clean slate

@andrew,
I don’t really know where to put that. Should I make a function? Should I make a move function and have onComplete = move back? I tried that, but it didn’t work.

@thomas6,
Once again, I’m not sure where to put that. I put it in a function, but it gave me this error:

Copyright © 2009-2011 A n s c a , I n c .
Version: 2.0.0
Build: 2011.591
The file sandbox for this project is located at the following folder:
(/Users/*********/Library/Application Support/Corona Simulator/myGame-30321ACD1E39B2DA38DEDD9A0BE54560)
Runtime error
…s/********/Desktop/Corona Projects/Blinded/main.lua:78: attempt to perform arithmetic on field ‘getTimer’ (a function value)
stack traceback:
[C]: ?
…s/********/Desktop/Corona Projects/myGame/main.lua:78: in function <…s projects>
?: in function <?:215>

I don’t exactly know what “runtime block” means.

Y’all will have to forgive me. I’m an absolute newbie. First started coding when I heard about BubbleBall. I really have no idea what I’m doing. It would be helpful if you all could post a little more detailed code. Thanks for your all patience.
[import]uid: 66117 topic_id: 17473 reply_id: 66823[/import] </…s>

Ok…Finally have it up and working. Thank you all so much for your suggestions and patience! I ended up using this:
[lua]local function float2()
transition.to(bg, {time=700, y =math.random(_H/2-5, _H/2+5),transition=easing.inOutQuad})
end
timer.performWithDelay(700, float2, 0)

local function float ()
transition.to(bg, {time = 800, x = math.random(_W/2-5, _W/2+5), transition=easing.inOutQuad})
end
timer.performWithDelay(800, float, 0)[/lua]
Much appreciated,
J.K. [import]uid: 66117 topic_id: 17473 reply_id: 66997[/import]

glad to hear you got it working! [import]uid: 49447 topic_id: 17473 reply_id: 67009[/import]