Need Help with the relationship btwn View, RenderWindow, Aspect Ratios and Jpg

[Mormegil]

I'm a complete noob to programming and SFML -
I am using the "Beginning C# Game Programming" and after much struggle with config hell I was able to get the main screen of my first game to display!

Right now I am working through the examples on how to set up sf::Text and position them on the screen.

It works but I can tell that something is wrong because Text is being cut off by the boundaries of the screen/window.

1. Is Aspect Ratio a description of  the number of Pixels horizontally and vertically? This seems confusing to me because I thought pixels are really small. I'm pretty sure that my monitor has way more pixels than 1920 across the top.

2. Do I have the wrong expectations that the image should scale to whatever I set the View?

3. What is the relationship between Aspect Ratio and Screen Resolution and Physical Screen Size?

4. What is the relationship between the data from my previous question and the correct settings for ViewMode?

Here is the code I'm using to set up and display the window

// Create a video mode object
   VideoMode vm(1920, 1080);

   // Create and open a window for the game
   RenderWindow window(vm, "Timber!!!", Style::Fullscreen);

   // Create a texture to hold a graphic on the GPU
   Texture textureBackground;

   // Load a graphic into the texture
   textureBackground.loadFromFile("graphics/background.png");

   // Create a sprite
   Sprite spriteBackground;

   // Attach the texture to the sprite
   spriteBackground.setTexture(textureBackground);

   // Set the spriteBackground to cover the screen
   spriteBackground.setPosition(0, 0);

...
...

      // Clear everything from the last frame
      window.clear();

      // Draw our game scene here
      window.draw(spriteBackground);

      window.display();

What ends up happening is that the program starts takes over my entire screen but seems to only displaying what I would judge to be 35% to 45% of the image. Its as if the View is only showing the left top portion of the image.

I experimented changing the ViewMode to (1366, 760), (800, 600), (3840, 2160) and I get basically the same results. Myview window size changed but the image itself is still not scaling to fit within the bounds.

I've been searching these forums and the web but I can't seem to find an answer. Maybe I'm not asking the question correctly? Maybe its too simple? Thanks in advance!

[eXpl0it3r]

The aspect ration is the ratio between width and height, so width divided by height.

A normal full HD screen does really just have a resolution of 1920 by 1080 pixels. Pixels are small but unless you have a high DPI screen (e.g. retina screen), you can easily make out a single pixel if you look really closely at the screen.

A texture will be displayed at it's normal size. So if the texture is e.g. 200x200px, than it will only cover a small area of the screen.

You're talking about the view, but I'm not sure whether you just mean the window size or whether you actually mean sf::View?

[Mormegil]

Thanks for the explanation I think that clarifies things a little better for me.

Based on what you said, I think the issue is with scaling the image the author provided.

So maybe what I'm trying to ask/understand is what is the proper way to set up the ViewMode and RenderWindow calls so that the loaded texture/sprite fits completely within my monitor or what ever size monitor my program is run on?

The "background.png" from the author says that its "dimensions" are 1920 x 1080.
If my screen is "smaller" (ex 1366 x 760) (which maybe means has less resolution?) how can I display the full "background.png?"

Is the correct answer that the image has to be resized first? Using some graphics editor?
Does that mean I would have to have a pre-sized version of each graphic prepared for each expected screen resolutions?

Should View Mode resolution be set to the size of the expected texture or to the resolution of the screen it will be displayed on? Can you programatically scale the texture to the resolution of the users screen?

screen size == physical size of monitor i.e. 27"
resolution == number of pixels horizontally and vertically ?
Am I confusing the terms resolution and screen size?
How can a 27" monitor and 42" monitor both have the same resolution? Wouldn't that mean that the pixels are larger on the 42" screen and thus less HD?
ex - so many TV's of different sizes are advertised as 1080p -

Thanks so much for helping!

[Hapax]

You can set the view to any size; this does not change the size of the window. The view size affects the co-ordinate system used when setting positions and sizes etc..

If, then, you want to display an image 1920x1080 to fit the screen, you may wish to set the view size to 1920x1080 so that all of your co-ordinates then act as if the window/display is 1920x1080 regardless of the fact that its actual resolution (the number of pixels displayed) might be lower (or higher). If your display has a resolution of 1366x760 and your view is set to 1920x1080, you should display then image as 1920x1080 to fill the display. However, if your resolution is 1366x760 but your view is set to 1366x760, you will need to draw the image scaled down to be 1366x760.

You can scale the image when your draw it. Some detail may be lost when scaling; for smoother results, you may wish to turn on smoothing for the texture.

You can scale a sprite using its scale method.
The scale is a ratio of its full size so, in the case of the view being 1366x760, you would divide the required size by the original size (member by member), maybe something like:

sprite.setScale(sf::Vector2f(view.getSize().x / window.getSize().x, view.getSize().y / window.getSize().y));

The scale in the above example would be: (1366 / 1920, 760 / 1080) = (0.714583..., 0.703703...)

[Mormegil]

I figured out a solution - thanks to everyone's help.
Hapax put me on the right track when mentioning sprite.setScale().
http://www.sfml-dev.org/documentation/2.4.1/classsf_1_1Transformable.php#aaec50b46b3f41b054763304d1e727471

-- Bottom Line - You can scale all the sprites by the ratio of the THE USERS DesktopMode

   

// Create a video mode object
        VideoMode vm = VideoMode::getDesktopMode();
        // Create and open a window for the game
        RenderWindow window(vm, "XYZ GAME!!!", Style::Fullscreen);
        // Create a texture to hold a graphic on the GPU
        Texture textureBackground;
        // Load a graphic into the texture
        textureBackground.loadFromFile("graphics/background.png");
        // Determine SCALE factors based on "largest item" and users screen
        float SCALE_X = (float)vm.width / (float)textureBackground.getSize().x;
        float SCALE_Y = (float)vm.height / (float)textureBackground.getSize().y;
        // Create a sprite
        Sprite spriteBackground;
        // Attach the texture to the sprite
        spriteBackground.setTexture(textureBackground);
        // Scale based on the games "background" --
        // which will presumably be the largest texture
        spriteBackground.scale(SCALE_X, SCALE_Y);
... etc ...
        // Create a texture to hold a graphic on the GPU
        Texture textureBee;
        // Load a graphic into the texture
        textureBee.loadFromFile("graphics/bee.png");
        // Create a sprite
        Sprite spriteBee;
        // Attach the texture to the sprite
        spriteBee.setTexture(textureBee);
        spriteBee.scale(SCALE_X, SCALE_Y);
        spriteBee.setPosition(vm.width + 10, 250 * SCALE_Y);

etc ...
 

I don't know why the author didn't just explain these concepts in the beginning when setting up the background. Seems like it would be useful because so many people will have different screen resolutions.

Hapax also introduced the idea of a View - which I still need to learn about - perhaps that makes all this scaling easier?

Cheers!