Page 1 of 1

Backround flow

Posted: Thu Sep 06, 2012 6:08 pm
by BudgieBeater
Forgive me if this question has been asked, I couldnt find it anywhere.

Basically, I am making a top down "binding of isaac" type game. I already have an idea og how to do what im asking, but its not idea.
as you progress in the level, I want the backround to progress as you do. basically having 2 backrounds, but one becomes transparent at your player.x location to reveal the one behind it. I started learning lua a few days ago so im still a begginer, but the only code i could come up with was to first make the backround be loaded. then have a = statement along the lines of

backround.x = player.x
backround.y = 0

this would make the top of the backround image be stable on the y axis, yet follow the player on the x axis. i could even make it = player.x - 5 to have the image follow a little behind. but the problem is Im having the camera follow the player. so you would only end up seeing one small part of the side of the backround the whole time. so instead I would need a way for the backrounds to be stacked on top of eachother, and at player.x -5 have the top layer somehow become transparent, revealing the backround behind it and making a seamless transition.
Sorry if this is extremely simple and im wasting your time, like i said im new to this and have no idea what to search to find something like this. Thanks in advanced for your replies. I look forward to learning more lua.

Re: Backround flow

Posted: Sat Sep 08, 2012 9:21 am
by OmarShehata
Hmm, I'm not sure if I understand exactly what you're trying to achieve. Could you perhaps post a picture of how you want it to look like, or an example versus what you already have now? We may then be able to help you.

Re: Backround flow

Posted: Sat Sep 08, 2012 9:58 am
by coffee
It's seems you need implement top-down parallax scrolling. Fell free to study the many posts or threads in forum about the subject
search.php?keywords=parallax

Re: Backround flow

Posted: Sat Sep 08, 2012 5:23 pm
by BudgieBeater
OmarShehata wrote:Hmm, I'm not sure if I understand exactly what you're trying to achieve. Could you perhaps post a picture of how you want it to look like, or an example versus what you already have now? We may then be able to help you.
well, my texture guy is still working on alot of the backrounds and such, so let me try llike this

NNNNNNNNNNNNNNOOOOOOOOOOO
NNNNNNNNNNNNNNOOOOOOOOOOO
NNNNNNNNNNNNNNOOOOOOOOOOO
NNNNNNNNNNNNNNOOOOOOOOOOO
NNNNNNNNNNNNNNOOOOOOOOOOO
NNNNNNNNNNN CC OOOOOOOOOOO
NNNNNNNNNNN CC OOOOOOOOOOO
NNNNNNNNNNN CC OOOOOOOOOOO

the N's are the new backround. the O's are the old backround. and the C's are the character.
As you play through the level and defeat enemies the old backround would be replaced with a new backround. making it look as if the whole world is changing as you slay evildoers.

Re: Backround flow

Posted: Sun Sep 09, 2012 12:05 am
by scirath
If I'm understanding what you want to accomplish, I think I'd do it with the alpha channel. Roughly, you'd draw your current background as an opaque image, then draw the new background as a transparent image over the top of that ... increase the opacity on the new background until it's fully opaque, then swap it into the role as the current background.

Sketching that into a step-by-step list, it'd look something like:

1. set to fully opaque -- love.graphics.setColor(255,255,255,255)
2. draw current background
3. is it time to fade in the new background?
- no: skip to 4
- yes:
3a. increment alpha step
3b. set to new alpha -- love.graphics.setColor(255,255,255,alphastep)
3c. draw new background
3d. does alpha == 255?
- no: skip to 4
- yes:
3d1. change current background to point at the new one
3d2. set alpha step back to 0
4. set to fully opaque -- love.graphics.setColor(255,255,255,255)
5. draw the rest of your stuff
6. loop

Re: Backround flow

Posted: Sun Sep 09, 2012 12:09 am
by BudgieBeater
Well, how would i do that at the characters current x position instead of the whole backround?

Re: Backround flow

Posted: Sun Sep 09, 2012 12:24 am
by scirath
BudgieBeater wrote:Well, how would i do that at the characters current x position instead of the whole backround?
I'm not understanding what you're getting at. Do you mean a scrolling background that begins fading in only at the character's position, becoming more solid as the player moves forward?

Could you scrounge up a video of a game that does what you want? That'd really help me visualize things.

Re: Backround flow

Posted: Sun Sep 09, 2012 12:44 am
by BudgieBeater
http://www.youtube.com/watch?v=PGpc7jJkqHU

sorry its the bee movie but this is the only thing i can imagine thats close to what im wanting. from 1:06 when the bees are flying over the flowers and the flowers are changing as they go. imagine that in 2d with the revived flowers being the backround of where you have already been and the dead flowers as where in the map your walking towards.

Re: Backround flow

Posted: Sun Sep 09, 2012 1:00 am
by scirath
Hmm. Maybe tiled backgrounds, doing a fadeover as the player moves over it. There's probably a better way of doing it with canvases or something, but I'm no use there (my laptop doesn't support them, so I haven't had the chance to work with 'em).

Edit: Attached a so-so example of a tiled background with fadeover. WASD/arrow keys to move, R to reset. Movement & precision aren't too smooth or nail-on, but ehh ... hope it helps.

Edit Again: Ahh, crap. Found a bug. I set alpha transparency when drawing the reviving flowers to i instead of meadowstate. Fixed, and changed update to go by dt. Also sped up the bee a little.