[SOLVED] How to properly draw everything and than scale up the screen?

[LakySimi1]

Hi Everyone,

i'm doing my little retro-rpg, with a pixelated low resolution, of course i want it to render, with those big pixels, on higher modern resolution screen.

The method i am using is the following, i do refer to first part of code:

(click to show/hide)

int main()
{
    //WINDOW
   
    if (FullScreen_Enabled)
    {
        window.create(sf::VideoMode(SCREEN_WIDTH, SCREEN_HEIGHT), "LakyTech1", sf::Style::Fullscreen);
        sf::View view(sf::FloatRect(0.f, 0.f, 640.f, 360.f));
        window.setView(view);
    }
    else
    {
        window.create(sf::VideoMode(GAME_SCREEN_WIDTH, GAME_SCREEN_HEIGHT), "LakyTech1");
        if (Windowed_Resize_Enabiled)
            window.setSize(sf::Vector2u(640 * 2, 360 * 2));
    }
   
    window.setFramerateLimit(Framerate_Limit*FramerateLock_Enabled);
    window.setVerticalSyncEnabled(VerticalSync_Enabled);
   
   
    sprite.setTexture(texture);

    //LOADS
    texture.loadFromFile("Texture.png");
    loadMapFile(Map_Size_X, Map_Size_Y, FLOOR_MAP, "Floor_Map");
    loadMapFile(Map_Size_X, Map_Size_Y, WALLS_MAP, "Walls_Map");

    //PRECALCULATION
    Visible_Map_Tiles();

   


    ///MAIN_LOOP
    while (window.isOpen())
    {
        //sf::Event event;
        while (window.pollEvent(Event))
        {
            if (Event.type == sf::Event::Closed)
                window.close();
            else
                RunEvents(window);
        }


        //GAME LOGIC
        //NavigateMap();
        //Draw_World();

        Draw_Sprite_LS();
        Draw_Screen_Grid_8px();

        window.display();;
    }
    return 0;
}

The problem is that drawing lines does not match up with the goals, in fact the following code draws a line of 1 pixel thickness.. how should i proceed?

Line code:

(click to show/hide)

void Draw_Screen_Grid_8px()
{
        // Crea un VertexArray di tipo Line (due punti)
        sf::VertexArray line(sf::Lines, 2);

        // Definisci il primo punto della linea
        line[0].position = sf::Vector2f(100, 100);
        line[0].color = sf::Color::Red;
           

        // Definisci il secondo punto della linea
        line[1].position = sf::Vector2f(700, 500);
        line[1].color = sf::Color::Blue;

        window.draw(line);
}

Results:

(click to show/hide)

[Me-Myself-And-I]

You don't have an sf::view. If you want the pixels to be big ,simply create a View as explained here.
https://www.sfml-dev.org/tutorials/2.6/graphics-view.php
And set the viewport size to make the pixels look big instead of making the actual images big.

[kojack]

A view will scale the coordinate system, and sprites will render scaled (so may look pixelated), but line primitive rendering happens at the resolution of the buffer regardless of view.
(Technically the sprites are also at buffer resolution, if you rotate them the edges will be high res, it's just the texture that is pixelated)

To get a complete pixelated view, what you can do is have a RenderTexture with a low resolution. Render all of the gfx into the rendertexture. Then render the rendertexture onto window using a scaled up sprite.

[LakySimi1]

Thank you very much! I've achieved the goal! (a bit of thanks also to ChatGPT )

Here an example of output, the rectangle rotated to confirm that it does not elaborate in high resolution, as my original code:

(click to show/hide)

Here the code used for the image above, directly implementable:

(click to show/hide)

#include <SFML/Graphics.hpp>

int main()
{
    // Risoluzione desiderata per l&#39;effetto retrogaming (bassa risoluzione)
    const unsigned int retroWidth = 320;
    const unsigned int retroHeight = 240;

    // Risoluzione della finestra (alta risoluzione)
    const unsigned int windowWidth = 1280;
    const unsigned int windowHeight = 960;

    // Creare la finestra principale
    sf::RenderWindow window(sf::VideoMode(windowWidth, windowHeight), "Retro Gaming Effect");

    // Creare la RenderTexture a bassa risoluzione
    sf::RenderTexture renderTexture;
    if (!renderTexture.create(retroWidth, retroHeight)) {
        return -1; // Errore nella creazione della RenderTexture
    }

    // Sprite che useremo per disegnare la RenderTexture sulla finestra principale
    sf::Sprite renderTextureSprite(renderTexture.getTexture());

    // Calcolare il fattore di scala per adattare la RenderTexture alla finestra
    float scaleX = static_cast<float>(windowWidth) / retroWidth;
    float scaleY = static_cast<float>(windowHeight) / retroHeight;
    renderTextureSprite.setScale(scaleX, scaleY);

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        // Disegna sulla RenderTexture a bassa risoluzione
        renderTexture.clear();

        // Esempio: disegna alcune linee e rettangoli
        sf::RectangleShape rect(sf::Vector2f(50, 50));
        rect.setPosition(10, 10);
        rect.setFillColor(sf::Color::Green);
        renderTexture.draw(rect);

        rect.setPosition(100, 100);
        rect.setFillColor(sf::Color::Blue);
        rect.setRotation(17.0f);
        renderTexture.draw(rect);

        sf::Vertex line[] =
        {
            sf::Vertex(sf::Vector2f(150, 150), sf::Color::Red),
            sf::Vertex(sf::Vector2f(200, 200), sf::Color::Red)
        };
        renderTexture.draw(line, 2, sf::Lines);

        sf::Vertex line2[] =
        {
            sf::Vertex(sf::Vector2f(50, 150), sf::Color::Yellow),
            sf::Vertex(sf::Vector2f(100, 200), sf::Color::Yellow)
        };
        renderTexture.draw(line2, 2, sf::Lines);

        renderTexture.display();

        // Disegna la RenderTexture scalata sulla finestra principale
        window.clear();
        window.draw(renderTextureSprite);
        window.display();
    }

    return 0;
}