SFML community forums

Help => Graphics => Topic started by: Wander on September 05, 2010, 06:44:32 am

Title: Weird Image Crushing
Post by: Wander on September 05, 2010, 06:44:32 am
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. :D

EDIT: Spaced out the shapes
Title: Weird Image Crushing
Post by: Laurent on September 05, 2010, 10:17:06 am
Can you show your code?
Title: Weird Image Crushing
Post by: Wander on September 05, 2010, 07:28:35 pm
Heehee. This is gonna take up a lot of space, but Okay! :) Here you go.

EDIT: TOOK OFF CODE
Title: Weird Image Crushing
Post by: Laurent on September 05, 2010, 07:31:39 pm
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.
Title: Weird Image Crushing
Post by: Wander on September 05, 2010, 07:32:47 pm
Hehe. Figured you say something to that effect. Hold on a second.
Title: Weird Image Crushing
Post by: Wander on September 05, 2010, 07:39:17 pm
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;
}
Title: Weird Image Crushing
Post by: Laurent on September 05, 2010, 08:36:38 pm
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.
Title: Weird Image Crushing
Post by: Wander on September 05, 2010, 08:39:41 pm
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
Title: Weird Image Crushing
Post by: Laurent on September 05, 2010, 08:48:13 pm
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 ;)
Title: Weird Image Crushing
Post by: Wander on September 05, 2010, 08:51:48 pm
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?
Title: Weird Image Crushing
Post by: Laurent on September 05, 2010, 08:55:56 pm
Quote
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?

Quote
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.
Title: Weird Image Crushing
Post by: Wander on September 05, 2010, 09:01:45 pm
Quote
Quote
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?

Quote
Quote
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
Title: Weird Image Crushing
Post by: Laurent on September 05, 2010, 10:49:33 pm
Quote
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());

Quote
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).
Title: Weird Image Crushing
Post by: Wander on September 05, 2010, 11:49:23 pm
OH!! Okay! Sweet! It's working now. Awesome thanks.

What are the 4 parameters? I can't find what they mean in the tutorials.
Title: Weird Image Crushing
Post by: Laurent on September 06, 2010, 08:26:57 am
Quote
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