Game resolution dilemma

[Canvas]

Hello there,

I'm having a bit of a hard time with this one, basically I have myself a game which at the moment is perfect for 1024 by 768, now when I made the game full screen some of my graphics start to float because I am using a view, other graphics just stretch out. However this is a huge issue for me.

First off is it ok to code a game to work with just one resolution I.E. the game is coded for 800:600 ratio 4:3 so if the user makes the window taller or wider the ratio will keep stuff in place and stretch to fit the ratio,

Second is there a better way or is that the best way?

I'm want to try and create a game this year and release it to the public (fingers crosses), however the whole idea of different resolutions is quite scary, can anyone help me out understand how I can get around this or how to deal with such a problem.

Cheers for reading

[eXpl0it3r]

You'll simply have to adapt to the new resolution.

There are multiple posibilities to the adaption:

• Stretch everything without keeping the ratio
• Stretch in one side to the maximum and adjust the other with the ratio in mind (letter boxing)
• Add a border around the scene, while keep the scene at the same size
• Reveal more of the overall scene, e.g. if you have a map rendered, it now might render twice as much
• Use higher resolution textures while displaying the same amount of the scene

The question now is, what you really want to happen.

[Canvas]

personally I would like everything to stretch out but keep a correct ratio for example 4:3 so 800 by 600

[eXpl0it3r]

Then all you need to do is adjust the view. Check out the official tutorial on that if you don't know how.

[Canvas]

well at the moment i'm just using a renderwindow with no view, I am only using a view when I want to display the user interface, I take it I should apply a view on the renderwindow straight up and keep using that view instead of applying a view when I want to draw a sprite in an absolute screen position?

[eXpl0it3r]

You're always using a view, it just happens automatically.
Did you take just like one look at the tutorial?

[Canvas]

Yo eXpl0it3r I have taken a look at the sfml view and I kinda understand it, I already use a view to draw my user interface, but basically when I resize my window this is what happens to my game.

I just want everything to stretch out to fill the render window

[Hapax]

If you are using a different view for your UI, you probably need to reset the view back to where it was before drawing the non-UI stuff. You might want to store it (it'll be an sf::View). Then you can switch between the two constantly.

For example (a lot of my stuff tends to look something like this):

window.setView(viewScene);
window.draw(scene);
window.setView(viewUi);
window.draw(ui);

Remember that the default view isn't reset each cycle; it stays as the UI's view until it is set again.

Also, I remember that someone wrote a function that allow you to keep aspect ratio when rescaling the window and it's on the SFML wiki, if that's any interest to you.

[Canvas]

Cheers for the reply Hapax,

Any chance you could send me a link to the post you saw, I just searched the wiki for aspect and I can't find anything

[Gobbles]

I may be wrong, but I believe he's refering to this post:

https://github.com/SFML/SFML/wiki/Source:-Letterbox-effect-using-a-view

[Canvas]

Right,

Gobbles I looked at that piece of code and it seems to be working perfectly, however I am still having an issue, basically me resizing the window does the letterbox effect which is what I want so that is great, however I have myself a user interface which sits at the bottom and moves with the player.

Basically I have a function where I pass in a sf::RenderWindow and then I use that to take the view, update the view and draw my user interface, here is my code

void UserInterface::Draw(sf::RenderWindow& window)
{
        sf::View windowView = window.getView();
        sf::View tempView(sf::FloatRect(0, 0, window.getSize().x, window.getSize().y));
        window.setView(tempView);
        window.draw(BottomBar);
        window.setView(windowView);
}

I have attached a screenshot with my error result, basically I want the red box to be where the blue box is. Once I have that everything will be fine Any chance I could get some more help,

P.S.

I have updated my code like so

sf::View windowView = window.getView();
        sf::View tempView(sf::FloatRect(windowView.getViewport().left, windowView.getViewport().height, windowView.getSize().x, windowView.getSize().y));
        window.setView(tempView);
        window.draw(BottomBar);

        for (int i = 0; i < PowerUpIcons.size(); i++)
        {
                window.draw(PowerUpIcons.at(i));
        }

        if (SelectedPower != 0)
        {
                window.draw(PowerSelected);
        }

        window.setView(windowView);

The second attachment is the new result, but as you can see the bar fills the whole width, not just the correct ratio as the game does.

[AFS]

You need to use the function of the letterbox effect to both your game view and your interface view.  Make sure you are doing that.

I don't think I understand your last code (I'm a little sleepy right now, sorry ), but I noticed you are getting the viewport of the window view and use that to create your interface view and honestly I don't know why.

The thing is not that complicated: create two views at the start of your program, one for the game and other for the interface, and both should have the same size (your UserInterface class could have its view as a member, and you set its size in the constructor). Before drawing your game stuff you set the game view, and before drawing the interface stuff you set the interface view. Also, don't forget to apply the function to both views when you create them and also when you resize the window. That's it.

Cheers!

[Canvas]

That sounds like a perfect idea AFS, I admit my sfml knowledge is a little lacking for the time I have spend using it but hey, we are all here to help each other and I am thankful of you guys helping me out , I will let you know later if I have any more issues.

[SeriousITGuy]

As I am at the moment also working with views, this is a good resource to conquer the "resolution problem".
Thanks guys for all the input, greatly appreciated!

[Canvas]

Hello there AFS

I have just updated my code like so

void UserInterface::Draw()
{
        sf::View windowView = _renderService.Window.getView();
        sf::View tempView(sf::FloatRect(windowView.getViewport().left, windowView.getViewport().height, windowView.getSize().x, windowView.getSize().y));
        tempView = _renderService.getLetterboxView(tempView, tempView.getSize().x, tempView.getSize().y);
        _renderService.Window.setView(tempView);
        _renderService.Window.draw(BottomBar);

        for (int i = 0; i < PowerUpIcons.size(); i++)
        {
                _renderService.Window.draw(PowerUpIcons.at(i));
        }

        if (SelectedPower != 0)
        {
                _renderService.Window.draw(PowerSelected);
        }

        _renderService.Window.setView(windowView);
}

But the same thing happens as in my last screenshot, the UI bar will stretch across the whole bottom, can't seem to set the bottom bar to use the same view as the letter box