Weird Image Crushing

[Wander]

Whenever I draw a rectangle and then draw a circle ontop of it, the circle is elangated vertically. The same thing happens with other shapes.

___________
|__________|
|__________|
___________
this becomes

___________
|__________|
|__________|
|__________|
|__________|
|__________|
___________
this....

Please assist.

EDIT: Spaced out the shapes

[Laurent]

Can you show your code?

[Wander]

Heehee. This is gonna take up a lot of space, but Okay! Here you go.

EDIT: TOOK OFF CODE

[Laurent]

Ok... what about a minimal code that reproduces the same problem? I mean, you can probably remove 95% of code that's not relevant to the problem that you describe.

[Wander]

Hehe. Figured you say something to that effect. Hold on a second.

[Wander]

How's this?

Code: [Select]

#include <iostream>
#include <SFML/Graphics.hpp>
#include <SFML/System.hpp>
#include <SFML/Audio.hpp>
#include <fstream>


using std::string;
using std::ios;
using std::ofstream;
using std::ifstream;

int main()
{
    sf::RenderWindow App(sf::VideoMode::GetMode(0), "Laz's Interactive Map :: The Wrath... :: PvP Created");

    /// ///////////////////////////////////////
    /// ///
    /// /// MAP STUFF /////////////////////////
    /// ///
    /// ///////////////////////////////////////

    // Creates the PE map :: 9000x3000
    sf::Shape Map;
    Map.AddPoint(0,0,sf::Color(0,100,0));
    Map.AddPoint(9000,0,sf::Color(0,100,0));
    Map.AddPoint(9000,3000,sf::Color(0,100,0));
    Map.AddPoint(0,3000,sf::Color(0,100,0));
    Map.EnableFill(true);
    Map.EnableOutline(false);
    Map.SetOutlineWidth(10);

    // Adds the 1000x1000 dividing line
    sf::Shape Vert0 = sf::Shape::Line(0, 0, 0, 3000, 20, sf::Color::Green);
    sf::Shape Vert1 = sf::Shape::Line(1000, 0, 1000, 3000, 20, sf::Color::Green);
    sf::Shape Vert2 = sf::Shape::Line(2000, 0, 2000, 3000, 20, sf::Color::Green);
    sf::Shape Vert3 = sf::Shape::Line(2995, 0, 2995, 3000, 10, sf::Color::Green);
    sf::Shape Vert35 = sf::Shape::Line(3005, 0, 3005, 3000, 10, sf::Color::Red);
    sf::Shape Vert4 = sf::Shape::Line(4000, 0, 4000, 3000, 20, sf::Color::Red);
    sf::Shape Vert5 = sf::Shape::Line(5000, 0, 5000, 3000, 20, sf::Color::Red);
    sf::Shape Vert6 = sf::Shape::Line(5995, 0, 5995, 3000, 10, sf::Color::Red);
    sf::Shape Vert65 = sf::Shape::Line(6005, 0, 6005, 3000, 10, sf::Color::Yellow);
    sf::Shape Vert7 = sf::Shape::Line(7000, 0, 7000, 3000, 20, sf::Color::Yellow);
    sf::Shape Vert8 = sf::Shape::Line(8000, 0, 8000, 3000, 20, sf::Color::Yellow);
    sf::Shape Vert9 = sf::Shape::Line(9000, 0, 9000, 3000, 10, sf::Color::Yellow);

    sf::Shape Hor1 = sf::Shape::Line(0, 1000, 9000, 1000, 20, sf::Color::Black);
    sf::Shape Hor2 = sf::Shape::Line(0, 2000, 9000, 2000, 20, sf::Color::Black);
    sf::Shape Hor3 = sf::Shape::Line(0, 3000, 9000, 3000, 20, sf::Color::Black);

    //Makes the view for the map :: Middle Layer
    sf::Vector2f Center(4500, 1500);
    sf::Vector2f HalfSize(2250, 750);
    sf::View View(Center, HalfSize);
    View.Zoom(0.35f);

    /// ///////////////////////////////////////
    /// ///
    /// /// PVP INFORMATION ///////////////////
    /// ///
    /// ///////////////////////////////////////

    // War Capital Coordinates
    sf::Shape WarCap1 = sf::Shape::Circle(3500, 500, 50, sf::Color::Cyan);
    sf::Shape WarCap2 = sf::Shape::Circle(4500, 500, 50, sf::Color::Cyan);
    sf::Shape WarCap3 = sf::Shape::Circle(5500, 500, 50, sf::Color::Cyan);
    sf::Shape WarCap4 = sf::Shape::Circle(3500, 1500, 50, sf::Color::Cyan);
    sf::Shape WarCap5 = sf::Shape::Circle(4500, 1500, 50, sf::Color::Cyan);
    sf::Shape WarCap6 = sf::Shape::Circle(5500, 1500, 50, sf::Color::Cyan);
    sf::Shape WarCap7 = sf::Shape::Circle(3500, 2500, 50, sf::Color::Cyan);
    sf::Shape WarCap8 = sf::Shape::Circle(4500, 2500, 50, sf::Color::Cyan);
    sf::Shape WarCap9 = sf::Shape::Circle(5500, 2500, 50, sf::Color::Cyan);

    /// ///////////////////////////////////////
    /// ///////////////////////////////////////
    /// ///////////////////////////////////////
    /// ///////////////////////////////////////
    /// ///////////////////////////////////////

    // Main loop
    while (App.IsOpened())
    {
        // Event loop
        sf::Event Event;
        while (App.GetEvent(Event))
        {
            // Close window : exit
            if (Event.Type == sf::Event::Closed)
                App.Close();

            // Press escape : exit
            if ((Event.Type == sf::Event::KeyPressed) && (Event.Key.Code == sf::Key::Escape))
                App.Close();
        }
       
        App.SetView(View);

            App.Draw(Map);

            App.Draw(Vert0);
            App.Draw(Vert1);
            App.Draw(Vert2);
            App.Draw(Vert3);
            App.Draw(Vert35);
            App.Draw(Vert4);
            App.Draw(Vert5);
            App.Draw(Vert6);
            App.Draw(Vert65);
            App.Draw(Vert7);
            App.Draw(Vert8);
            App.Draw(Vert9);

            App.Draw(Hor1);
            App.Draw(Hor2);
            App.Draw(Hor3);

            App.Draw(WarCap1);
            App.Draw(WarCap2);
            App.Draw(WarCap3);
            App.Draw(WarCap4);
            App.Draw(WarCap5);
            App.Draw(WarCap6);
            App.Draw(WarCap7);
            App.Draw(WarCap8);
            App.Draw(WarCap9);

            App.Display();
    }



    return 0;
}


[Laurent]

Good enough

The problem is that your view doesn't keep the original aspect ratio of the window, so everything appears wider on the Y axis. You just need to adjust the size of your view.

[Wander]

I'm not even to try to pretend I understand how views work. They confuse me. I've read the tutorial many times, but I don't get it. So, in turn I don't have the faintest idea on how to adjust the aspect ratio of the view. haha

[Laurent]

The view is the part of the 2D world that will be displayed in the window.
In other words, the area of the 2D world defined by the view will be stretched to fit in the whole area of the window. So if their aspect ratio is different, the 2D world will appear distorted.

It's like when you take a picture of you and you display it in fullscreen on your computer. If your monitor doesn't have the same aspect ratio as the original picture, the picture will look distorted.

Let's take a very simple example:
- window = 1000x1000
- view = 1000x500
Here, the X axis will appear unchanged because 1000 pixels of the 2D world will be displayed on exactly 1000 pixels of the window. It's a 1:1 mapping.
However, for the Y axis, 500 pixels of the 2D world will be displayed in 1000 pixels of the window, so the 2D world will be stretched by a factor 2 so that it fits in the window. That's a 2:1 mapping.
As a consequence, things will look twice higher as they are actually.

I hope things are clearer now

[Wander]

Okay. It is clearer, but some questions.

Code: [Select]

//Makes the view for the map :: Middle Layer
    sf::Vector2f Center(4500, 1500);
    sf::Vector2f HalfSize(2250, 750);
    sf::View View(Center, HalfSize);
    View.Zoom(0.35f);

That's my view settings.

The window I'm using is in DesktopMode which, if I understand correctly, is when the window fits itself to the user's desktop. Correct?

So, is there a way to set the to DesktopMode also so that way the aspect ratio doesn't change from screen to screen.

Also, what exactly does Center and halfsize mean?

[Laurent]

So, is there a way to set the to DesktopMode also so that way the aspect ratio doesn't change from screen to screen.

You can change the desktop mode if the window runs in fullscreen mode, I don't know if that's what you want though.

Why don't you adjust the size of your view, instead of adjusting the desktop video mode?

Also, what exactly does Center and halfsize mean?

?
Center is the center point of the view, and half size is half of the size of the view. Sorry, I don't know how to say it differently.

[Wander]

So, is there a way to set the to DesktopMode also so that way the aspect ratio doesn't change from screen to screen.

You can change the desktop mode if the window runs in fullscreen mode, I don't know if that's what you want though.

Why don't you adjust the size of your view, instead of adjusting the desktop video mode?

I meant to say, "Set the VIEW to DesktopMode". Haha! So, you're suggesting not even running in fullscreen at all? Just keep it in a window?

Also, what exactly does Center and halfsize mean?

?
Center is the center point of the view, and half size is half of the size of the view. Sorry, I don't know how to say it differently.

This sounds like the center and halfsize would be the same numbers. The center is halfway across the y and x axis of the shape. So, halfway across the x and y axis of the shape would be the center.

I don't think I'm getting it. haha

[Laurent]

I meant to say, "Set the VIEW to DesktopMode"

Ok I see.
This piece of code creates a view with the same size as the window:

Code: [Select]

sf::View view(sf::FloatRect(0, 0, window.GetWidth(), window.GetHeight());

This sounds like the center and halfsize would be the same numbers. The center is halfway across the y and x axis of the shape. So, halfway across the x and y axis of the shape would be the center.

Indeed, center and half-size are equal if the top-left corner of the view is located at (0, 0).

[Wander]

OH!! Okay! Sweet! It's working now. Awesome thanks.

What are the 4 parameters? I can't find what they mean in the tutorials.

[Laurent]

What are the 4 parameters? I can't find what they mean in the tutorials

This kind of stuff is better explained in the API documentation.
http://www.sfml-dev.org/documentation/1.6/classsf_1_1Rect.htm#0f19f5cf78eb52f122b904fb258acfce