This site requires JavaScript, please enable it in your browser!
Greenfoot back
Twitter Twitter.hover
rohwedder
rohwedder wrote ...

2014/5/22

How to smoothly change a background with another?

rohwedder rohwedder

2014/5/22

#
Hi All. I have this issue, which It seems i can't find a proper solution to. I have two background images (One which is more day like, and another which is more evening like), which i want to smoothly change with each other. So it goes from day to night by smoothly fading out the day background and smoothly fading in the night background. I have tried some small solutions, but I can't get it to work at all... So if anyone has a clear solution to this, it would be very much appreciated :)
danpost danpost

2014/5/22

#
What have you tried?
rohwedder rohwedder

2014/5/23

#
I have tried this code, I can't get the other background to load in as I want to... Actually it won't load in at all.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import greenfoot.*;  // (World, Actor, GreenfootImage, Greenfoot and MouseInfo)
 
/**
 * This actor is used to smoothly animate a change of the background image in the game.
 * It will change from day to night and vice versa.
 *
 * @author Martin Rohwedder
 * @version 22-05-2014
 */
public class Background extends Actor
{
    private static final String BACKGROUND_DAY = "background.png";
    private static final String BACKGROUND_NIGHT = "background2.png";
     
    private GreenfootImage bgImage = null;
    private boolean isDay = true;
    private boolean transitionHasBegun = false;
    private int backgroundTransitionDelay = 0;
    private int backgroundDelay = 200;
     
    public void act()
    {
        fadeInBackground();
    }
     
    public void fadeInBackground()
    {
        if(backgroundDelay > 0)
        {
            backgroundDelay--;
            if (backgroundDelay == 0)
            {               
                if (isDay && !transitionHasBegun)
                {
                    bgImage = new GreenfootImage(BACKGROUND_NIGHT);
                }
                else if (!isDay && !transitionHasBegun)
                {
                    bgImage = new GreenfootImage(BACKGROUND_DAY);
                }
                 
                transitionHasBegun = true;
                 
                if (backgroundTransitionDelay < 256)
                {
                    bgImage.setTransparency(backgroundTransitionDelay);
                    setImage(bgImage);
                    backgroundTransitionDelay++;
                     
                    System.out.println("Inside Transition");
                    if (backgroundTransitionDelay == 256)
                    {
                        if (isDay)
                        {
                            isDay = false;
                        }
                        else
                        {
                            isDay = true;
                        }
                        backgroundDelay = 1200;
                        backgroundTransitionDelay = 0;
                        transitionHasBegun = false;
                    }
                }
            }
        }
    }
}
danpost danpost

2014/5/23

#
I will get back to you on this. I think there is a much easier way to deal with it Also, if this is the background image, why are you using an Actor for it?
rohwedder rohwedder

2014/5/23

#
I don't know how to do it with a bacground image, so thats why I tried a solution with an Actor :) - But well it doesn't work either atm :P
danpost danpost

2014/5/23

#
I did not forget about this. I have a solution, but need to re-structure it to be re-usable. How quickly do you want the transitioning between the two images to take (give response in number of seconds)? Also, it one image basically the other image, but darker?
rohwedder rohwedder

2014/5/23

#
The two images is identical, except that the second image is darker than the first yes :) Well... The transition I quess should be around 3 seconds or so (I quess its around 180 - 200 act cycles). I am in no hurry, I am doing some other tasks in the game in the main time, but I am glad you will try to help me :)
danpost danpost

2014/5/23

#
You only need the lighter of the two images, which you will be adding the darkness to. For an image stored in a file with the name of "background.png", in a world called Background, this is what I came up with:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import greenfoot.*;
 
public class Background extends World
{
    GreenfootImage bg;  // the main background image
    GreenfootImage dark; // the 'darkness' image -- used to darken the main bg image
    int dayTimer; // to track the time of day
    int timeRate = 200; // number of acts per hour (one hour is transition time)
     
    public Background()
    {
        super(800, 600, 1);
        // set main background image (scaled to window)
        GreenfootImage background = new GreenfootImage("background.png");
        background.scale(800, 600);
        setBackground(bg = new GreenfootImage(background));
        // create darkness image
        background.fill();
        dark = background;
    }
     
    public void act()
    {
        dayTimer = (dayTimer+1)%(24*timeRate); // next moment in time
        boolean afterdusk = dayTimer < 12*timeRate; // determine day or night time
        if ((dayTimer/timeRate)%12 == 11) // check if transition hour
        {
            setBackground(new GreenfootImage(bg)); // set main background image
            int minute = 60*(dayTimer%timeRate)/timeRate; // determine minute in transition hour
            dark.setTransparency(afterdusk ? 3*minute : 180-3*minute); // adjust darkness
            getBackground().drawImage(dark, 0, 0); // add darkness to main background image
        }
    }
}
rohwedder rohwedder

2014/5/24

#
Sorry I can't get it working, no image is changing or getting darker. However I got my own solution to work with an actor object
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import greenfoot.*;  // (World, Actor, GreenfootImage, Greenfoot and MouseInfo)
 
/**
 * This actor is used to smoothly animate a change of the background image in the game.
 * It will change from day to night and vice versa.
 *
 * @author Martin Rohwedder
 * @version 24-05-2014
 */
public class Background extends Actor
{
    private static final String BACKGROUND_DAY = "background.png";
    private static final String BACKGROUND_NIGHT = "background2.png";
     
    private GreenfootImage bg = null;
    private int backgroundTransitionDelay = 0;
    private int backgroundDelay = 1200;
    private boolean isDay = true;
     
    public void act()
    {
        fadeInBackground();
    }
     
    /**
     * Fade in a new background. If it's day then fade in night background and vice versa.
     * The background will change every 1200 act cycles (about 18-20 seconds).
     */
    public void fadeInBackground()
    {
        if (backgroundDelay < 1)
        {
            backgroundTransitionDelay++;
            if (backgroundTransitionDelay < 256)
            {
                if (isDay)
                {
                    bg = new GreenfootImage(BACKGROUND_NIGHT);
                }
                else
                {
                    bg = new GreenfootImage(BACKGROUND_DAY);
                }
                 
                bg.setTransparency(backgroundTransitionDelay);
                setImage(bg);
            }
            else
            {
                getWorld().setBackground(bg);
                 
                backgroundTransitionDelay = 0;
                backgroundDelay = 1200;
                 
                if (isDay)
                {
                    isDay = false;
                }
                else
                {
                    isDay = true;
                }
            }
        }
        else
        {
            backgroundDelay--;
        }
    }
}
You need to login to post a reply.