[C++ and SFML 2.1] Scrolling backgrounds ( y+) [SOLVED]

[nebula]

hey, i wanted to add a scrolling background to my game and now i have an issue with the background, as the title says (the jpg files are 800x600 just like the window)

i show you my code and screenshots so you can see whats going wrong

#ifndef GUIMOVABLEBACKGROUNDS_H
#define GUIMOVABLEBACKGROUNDS_H

#include <SFML\Graphics.hpp>
# include <iostream>

class MovableBackground
{
public:
        MovableBackground();
        void Update(sf::RenderWindow &window, float elapsedTime);
        void Render(sf::RenderWindow &window);
       
private:
        sf::Texture bg1Tex;
        sf::Texture bg2Tex;

        sf::Sprite      bg1Sprite;
        sf::Sprite      bg2Sprite;

        float bgSpeed;
        float bg1Y;
        float bg2Y;
};
#endif
 

GUImovableBackground.cpp

#include "GUImovableBackground.h"


MovableBackground::MovableBackground()
{
        bgSpeed = 0.1;

        bg1Tex.loadFromFile("graphics//background.jpg");
        bg1Tex.setSmooth(false);
        bg1Sprite.setTexture(bg1Tex);
        bg1Y = bg1Sprite.getPosition().y;

        bg2Tex.loadFromFile("graphics//background.jpg");
        bg2Tex.setSmooth(false);
        bg2Sprite.setTexture(bg2Tex);
        bg2Sprite.setPosition(0, -799);
        bg2Y = bg2Sprite.getPosition().y;
}


void MovableBackground::Update(sf::RenderWindow &window, float elapsedTime)
{
        if (bg1Y >= window.getSize().y)
        {
                bg1Y = - 799;
        }else
        {
                bg1Y += bgSpeed * elapsedTime;
        }

        if (bg2Y >= window.getSize().y)
        {
                bg2Y = - 799;
        }else
        {
                bg2Y += bgSpeed * elapsedTime;
        }

        if (bg1Y == -799)
        {
                std::cout << bg1Y << "\t bg1" << std::endl;
        }
        if (bg2Y == -799)
        {
                std::cout << bg2Y << "\t bg2" << std::endl;
        }

        bg1Sprite.setPosition(0, bg1Y);
        bg2Sprite.setPosition(0, bg2Y);
}
void MovableBackground::Render(sf::RenderWindow &window)
{
        window.draw(bg1Sprite);
        window.draw(bg2Sprite);
 

the first screenshot:


the second screenshot:


As you can see, one time it nearly works, the other time the distance is just too high :/
and this goes on all the time... when background1 is set to - 799 the little gap is there. When background2 is set to - 799 the huge gap is there.

Maybe the mistake i made is simple, but I just dont see it :S
(if you need more code please tell me)

[The Hatchet]

You aren't setting an initial bg1Sprite.setPosition(x, y) is about the only simple thing standing out

[nebula]

You aren't setting an initial bg1Sprite.setPosition(x, y) is about the only simple thing standing out

if i dont set this manually it sets itself to (0,0) as i know

further this does not affect the problem because it is only in the destructor and as you see it is nearly set right
(but just for you i tested it and nothing changed)

here is how i use the class in my game (not my code, that would be way too long)

MovableBackground bg;

while running:
bg.Update (window, elapsedTime);
window.clear();
bg.Render(window);
window.display();

[nebula]

I rewrote this completely... now it works better, but i need to rework the initialization of the bg2Sprite position, because at the beginning there is still a mistake with it :/ here is the code

.h

#ifndef GUIMOVABLEBACKGROUNDS_H
#define GUIMOVABLEBACKGROUNDS_H

#include <SFML\Graphics.hpp>
#include <iostream>

class MovableBackground
{
public:
        MovableBackground();
        void Update(sf::RenderWindow &window, float elapsedTime);
        void Render(sf::RenderWindow &window);
       
private:
        sf::Texture bg1Tex;
        sf::Texture bg2Tex;

        sf::Sprite      bg1Sprite;
        sf::Sprite      bg2Sprite;

        float bgSpeed;
        float bg1Y;
        float bg2Y;
        float windowbg1diff;
};
#endif
 

.cpp

#include "GUImovableBackground.h"


MovableBackground::MovableBackground()
{
        bgSpeed = 0.3;

        bg1Tex.loadFromFile("graphics//background.jpg");
        bg1Tex.setSmooth(false);
        bg1Sprite.setTexture(bg1Tex);
        bg1Y = bg1Sprite.getPosition().y;

        bg2Tex.loadFromFile("graphics//background.jpg");
        bg2Tex.setSmooth(false);
        bg2Sprite.setTexture(bg2Tex);
        bg2Sprite.setPosition(0, 601);
        bg2Y = bg2Sprite.getPosition().y;
}


void MovableBackground::Update(sf::RenderWindow &window, float elapsedTime)
{
        windowbg1diff = bg1Y - window.getSize().y;

        if (bg1Y >= 600)
        {
                bg1Y = - 590;
        }else
        {
                bg1Y += bgSpeed * elapsedTime;
        }

        if (bg2Y >= window.getSize().y)
        {
                bg2Y = - 600;
        }else if (bg2Y < bg1Y)
        {
                bg2Y = windowbg1diff + 5;
        }else
        {
                bg2Y += bgSpeed * elapsedTime;
        }

        bg1Sprite.setPosition(0, bg1Y);
        bg2Sprite.setPosition(0, bg2Y);
}
void MovableBackground::Render(sf::RenderWindow &window)
{
        window.draw(bg1Sprite);
        window.draw(bg2Sprite);
}
 

[wintertime]

Why dont you set the texture to be repeated? Then you should be able to only move the texture rectangle and draw a single fullscreen object.

[nebula]

Why dont you set the texture to be repeated? Then you should be able to only move the texture rectangle and draw a single fullscreen object.

that sounds legit i will read myself through the sfml tutorials for this and replace it. thanks

[nebula]

okay. now the problem is that the background is supposed to move downwards as long as the game runs. and by the setRepeated function i can get a sprite within a texture that i can move to the max of the image. Or did i understand it wrong?

[wintertime]

If you set the texture to repeating its as if there would be copies of it all around it until infinity. So you should be able to set a texture rectangle(x,y,800,600) for your texture of size 800x600 in the sprite of size 800x600, where x,y is the position inside the texture you want to show at screen position 0,0 and it should fill the whole screen. At least thats how it works in OpenGL and SFML would most likely translate this appropriately without imposing more constraints.

[nebula]

        bgTex.loadFromFile("graphics//background.jpg");
        bgTex.setSmooth(false);
        bgTex.setRepeated(true);
        bgSprite.setTexture(bgTex);
        bgSprite.setTextureRect(sf::IntRect(0,0,800,600));
        bgY = bg1Sprite.getPosition().y;
 

like this? but how do i move the background? i tried this:

        if (bgY < 600)
        {
                bgY += bgSpeed * elapsedTime;
        }else
                {
                        bgY = 0;
                }
 

[wintertime]

More like this:

        bgTex.loadFromFile("graphics//background.jpg");
        bgTex.setSmooth(false);
        bgTex.setRepeated(true);
        bgSprite.setTexture(bgTex);
        bgSprite.setPosition(0,0);
        bgY = 0;
        bgSprite.setTextureRect(sf::IntRect(0,bgY,800,600));
 

if (bgY < 600)
{
        bgY += bgSpeed * elapsedTime;
}
else
{
        bgY = 0;
}
bgSprite.setTextureRect(sf::IntRect(0,bgY,800,600));
 

[nebula]

then this happens:

[wintertime]

Ahh I think that was because a Sprite gets implicitly resized with the Texture.
You can switch the type to use a RectangleShape instead and set the size of that at its construction to 800x600; everything else should be nearly the same.

[nebula]

i think i am doin this wrong does not work like i wish

header

#ifndef GUIMOVABLEBACKGROUNDS_H
#define GUIMOVABLEBACKGROUNDS_H

#include <SFML\Graphics.hpp>
#include <iostream>

class MovableBackground
{
public:
        MovableBackground();
        void Update(sf::RenderWindow &window, float elapsedTime);
        void Render(sf::RenderWindow &window);
       
private:
        sf::Texture bgTex;
        sf::Texture bg2Tex;

        sf::RectangleShape bgShape;
        sf::Vector2f bgSize;

        sf::Sprite      bgSprite;
        sf::Sprite      bg2Sprite;

        float bgSpeed;
        float bgY;
        float bg2Y;
        float windowbg1diff;
};
#endif
 

cpp

#include "GUImovableBackground.h"


MovableBackground::MovableBackground()
{
        bgSpeed = 0.3;

        bgTex.loadFromFile("graphics//background.jpg");
        bgTex.setSmooth(false);
        bgTex.setRepeated(true);

        bgY = bgShape.getPosition().y;
        bgSize.x = 800;
        bgSize.y = 600;

        bgShape.setTexture(&bgTex);
        bgShape.setSize(bgSize);
}


void MovableBackground::Update(sf::RenderWindow &window, float elapsedTime)
{
        if (bgY < 600)
        {
                bgY += bgSpeed * elapsedTime;
        }else
                {
                        bgY = 0;
                }
        bgShape.setPosition(0, bgY);
}
void MovableBackground::Render(sf::RenderWindow &window)
{
        window.draw(bgShape);
}
 

[G.]

wintertime kindly gave you a short snippet of code, almost ready to be copied/pasted, and it doesn't seem like you bothered to read it.
Why do you move your background? You're supposed to modify its TextureRect.

It works with a Sprite or a RectangleShape.

[nebula]

i did read all of it. and looked it all up in the api. i try it all again and if i got it going i will post it

I found the mistake

what wintertime did:

    bgY = 0;

what i did:

bgY = bgShape.getPosition().y;

@wintertime thanks a lot! now it does exactly move how it is supposed to. but uhhm did you edit the post? i think the initialization of bgY was not there in first place

ps:
I changed       

bgY += bgSpeed * elapsedTime;

into        

bgY -= bgSpeed * elapsedTime;

because the rect needs to go upwards to get the feeling of the background moving downwards