Layer distance

[StuntHacks]

I hope this is the right place for this, if not: sorry ^^'

So, I want to have this effect with multiple layers of graphics: At the beginning the first layer should be displayed in it's default size and the second one should be displayed a bit smaller so that it looks like there is some distance between the layers. Then, if the users triggers an event or presses a button or something, the view should zoom into the screen so that layer two is displayed in it's original size and layer one is displayed a bit bigger. How could I solve this efficiently and, if possible, with views and without rescaling the layers?

Thanks in advice
 ~ StuntHacks

[G.]

What have you tried?

It's easy with a view for each layer, each with a different size. Modify each view size when you want to switch from one layer to another.

Here's a simple proto I made. (and 2 beautiful artworks made especially for this thread)

#include <SFML/Graphics.hpp>

int main()
{
    sf::RenderWindow window(sf::VideoMode(400, 300), "");

    sf::Texture textureForeground;
    textureForeground.loadFromFile("lay1.png");
    sf::Texture textureBackground;
    textureBackground.loadFromFile("lay2.png");

    sf::View viewForeground({200, 150}, {400, 300});
    sf::View viewBackground({200, 150}, {400, 300});

    viewBackground.setSize(480, 360);

    sf::Clock clock;

    bool alt = false;
    bool transition = false;
    sf::Time transitionTime = sf::Time::Zero;
    sf::Time transitionDuration = sf::milliseconds(200);
    float transitionPercent = 0.f;

    while (window.isOpen())
    {
        sf::Time elapsed = clock.restart();
        if (transition) {
            transitionTime += elapsed;
            transitionPercent = transitionTime.asSeconds() / transitionDuration.asSeconds();
            if (transitionPercent >= 1.f) {
                transition = false;
                transitionPercent = 1.f;
            }
            if (alt) {
                viewBackground.setSize(400 * transitionPercent + 480 * (1.f - transitionPercent), 300 * transitionPercent + 360 * (1.f - transitionPercent));
                viewForeground.setSize(320 * transitionPercent + 400 * (1.f - transitionPercent), 240 * transitionPercent + 300 * (1.f - transitionPercent));
            }
            else {
                viewBackground.setSize(480 * transitionPercent + 400 * (1.f - transitionPercent), 360 * transitionPercent + 300 * (1.f - transitionPercent));
                viewForeground.setSize(400 * transitionPercent + 320 * (1.f - transitionPercent), 300 * transitionPercent + 240 * (1.f - transitionPercent));
            }
        }

        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed) {
                window.close();
            }
            if (event.type == sf::Event::KeyReleased && event.key.code == sf::Keyboard::Key::Escape) {
                window.close();
            }
            if (event.type == sf::Event::KeyReleased && event.key.code == sf::Keyboard::Key::Space) {
                alt = !alt;
                transition = true;
                transitionTime = sf::milliseconds(0);
            }
        }

        window.clear();
        window.setView(viewBackground);
        window.draw(sf::Sprite(textureBackground));
        window.setView(viewForeground);
        window.draw(sf::Sprite(textureForeground));
        window.display();
    }

    return EXIT_SUCCESS;
}

[StuntHacks]

Yeah, worked. I think, this is solved now.