Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: [SOLVED] Stretch game rendering to fullscreen using sprite  (Read 4377 times)

0 Members and 1 Guest are viewing this topic.

LakySimi1

  • Newbie
  • *
  • Posts: 35
    • View Profile
Hi guys!
I'm making my own raycasting engine, the game resolution is the classic 320x200 windowed.
Obviously i want to make it run let's say zoomed in so for now i'm using two ways, the first one is simply to click "fullscreen" button on the window, it lost the aspect ratio but works; the second one is to use a simple scale function to make a window 3 times larger, and it works as well.

The problem is that if in original 320x200 uses 20% of cpu while the 2 scale methods raise it to 32/35%! 70% of more CPU usage just for fullscreen?!

So i'm wondering if there's a proper way to do it, do you know some?
I'm thinking about those games that first change the PC resolution and then go fullscreen, i think is the best way..?


Here the scaleup function that i made:
Code: [Select]
void RESOLUTION_SCALE()
{
    for (i = 0; i < width; i++)
        for (j=0; j < height; j++)
            for (iterX = 0 ; iterX < scaleRESOL ; iterX++)
                for (iterY = 0 ; iterY < scaleRESOL ; iterY++)
                {
                    pixelsFinal[( (j*scaleRESOL +iterY)*windowWidth + i*scaleRESOL + iterX)*4]    = pixels[(j*width + i)*4];
                    pixelsFinal[( (j*scaleRESOL +iterY)*windowWidth + i*scaleRESOL + iterX)*4 +1] = pixels[(j*width + i)*4 +1];
                    pixelsFinal[( (j*scaleRESOL +iterY)*windowWidth + i*scaleRESOL + iterX)*4 +2] = pixels[(j*width + i)*4 +2];
                }
}

WITH:
width = 320;
height = 200;
scaleRESOL = 3;
pixels = 320x200;
pixelsFinal = 960x600;
« Last Edit: May 14, 2020, 06:33:22 pm by LakySimi1 »

Hapax

  • Hero Member
  • *****
  • Posts: 3379
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Fullscreen window and changing PC resolution?
« Reply #1 on: May 12, 2020, 12:41:30 am »
You can fix the aspect ratio problem either by adding letterbox effect or allowing your view to be rescaled. For a letterbox effect, you could try this from the wiki:
https://github.com/SFML/SFML/wiki/Source%3A-Letterbox-effect-using-a-view
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

LakySimi1

  • Newbie
  • *
  • Posts: 35
    • View Profile
Re: Fullscreen window and changing PC resolution?
« Reply #2 on: May 12, 2020, 01:20:50 pm »
Yes, i was already thinking about something like that, or change the FOV (field of view of game) to mantain the proper ratio in any resolution.

I partially solved the problem, i just set window(sf::Style::Fullscreen) (sorry for not checking this before) and it goes fullscreen, changing the desktop resolution to 320x200, with letterbox and original aspect ration, and most important keeping the original windowed CPU usage, that's great!!

But there is another little problem, in this way the image is blurry, i dont't know if is a SFML problem or maybe Microsoft Windows. What i want is a pixeled image, like the one on the RIGHT:

(click to show/hide)

If i'm not clear please ask me!

Hapax

  • Hero Member
  • *****
  • Posts: 3379
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Fullscreen with low resolution is blurred!
« Reply #3 on: May 12, 2020, 09:11:24 pm »
If you are using fullscreen and changing its resolution to a low one and it's blurry because of that, it'll likely be the result of the monitor (or possibly graphics card/driver) trying to stretch that resolution to a larger one.

To have more control, you could set it to (or keep it at) the monitor's native resolution and stretch the image manually.

If you are stretching the image manually (or allowing SFML to do it automatically), a "quick-fix" for blurry images could be drawing with a pixelation shader.

Another option could be drawing to a render texture at the size of your pixel resolution and then draw that render texture - stretched - to the window. Remember to turn off smooth texture to avoid blurring.

And another option is to draw directly to the window and keep track of the rectangles used for pixels (one rectangle/quad per pixel.

For the last option, you could use Selba Ward's Pixel Display, which allows you to keep a sort of "tile map" of pixels (just coloured tiles) and it draws them as quads so you can stretch however you like...
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

LakySimi1

  • Newbie
  • *
  • Posts: 35
    • View Profile
Re: Fullscreen with low resolution is blurred!
« Reply #4 on: May 13, 2020, 12:21:43 am »
What i was doing until now is take my 320x200 image, stretch it by a factor of 3 (1 pixel correspont to a 3x3 sqare of pixels) and then draw this last one in a 960x600 window; or render a 320x200 window and then enlarge it as you would do with a normal window; in both way the image remain well pixeled (like the right image). The problem is that boht these processes use too CPU.

To be clear, on the first scaleup method: i create a firstWindow 320x200 and on this one draw the game render, then i upscale this firstWindow copying each pixel 9 times (3x3) in a secondWindow (320x3)x(200x3) and then i draw this last one on the final window, it works well. Do you mean this method to stretch the original image? Is there a more CPU efficient way? I'm sorry i don't know well SFML.. :-[


Hapax

  • Hero Member
  • *****
  • Posts: 3379
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Fullscreen with low resolution is blurred!
« Reply #5 on: May 13, 2020, 12:53:53 am »
How are your stretching from one window to another? Copying each pixel manually? :o

The render texture technique is similar to what you seem to be doing.

Create a window. This can be any size but full screen and native resolution would be fine.
Create a render texture; this is very similar to a window but doesn't show anywhere. This allows you to draw to it without it actually been drawn to a window. The render texture should be 320x200 in your case.
Since you can use the texture of a render texture as a standard texture, you can create a sprite with that texture and draw that to the main window, scaled however you like.
Without scaling, the sprite would appear as 320x200 since this is the size of the original (render) texture. You can set the sprite's scale so that one edge reaches the window edge or just a static value, like three.

It might look something like this:

sf::RenderTexture renderTexture;
renderTexture.create(320, 200);
sf::Window window(sf::VideMode::getDefaultMode(), "", sf::Style::Fullscreen);

// prepare render sprite to draw the render texture
sf::Sprite renderSprite(renderTexture.getTexture());
renderSprite.setScale({ 3.f, 3.f }); // scale it x3
// position the render sprite in the center of the window
renderSprite.setOrigin(sf::Vector2f(renderSprite.getTexture()->getSize() / 2u));
renderSprite.setPosition(window.getView().getCenter());

while (window.isOpen())
{
    // process events

    // do updates

    // draw your stuff to the render texture (320x200)
    renderTexture.clear();
    renderTexture.draw(yourStuff);
    renderTexture.display();

    // draw the render sprite to the window
    window.clear();
    window.draw(renderSprite);
    window.display();
}
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

LakySimi1

  • Newbie
  • *
  • Posts: 35
    • View Profile
Re: Fullscreen with low resolution is blurred!
« Reply #6 on: May 14, 2020, 05:40:30 pm »
///CREATE
sf::Texture texture;             texture.create(width, height);
sf::Sprite sprite(texture);

sf::Uint8* pixels = new sf::Uint8[width * height * 4];
window.create(sf::VideoMode(windowWidth, windowHeight), "RAY-CASTING", sf::Style::Fullscreen);

///RENDER
texture.update(pixels);
window.draw(sprite);
window.display();

This is what i do, i draw pixel by pixel my 320x200(RGBA) array of pixels, and then copy into texture/sprite and eventually draw it. I think is similiar to your method.

I will try soon your method for stretch the sprite :)

PS
I've tried my game on a diferent PC with a different desktop resolution and the Style::fullscreen doesn't fill the monitor as it did on my laptop, so it was just luck :/

LakySimi1

  • Newbie
  • *
  • Posts: 35
    • View Profile
Re: Fullscreen with low resolution is blurred!
« Reply #7 on: May 14, 2020, 06:31:14 pm »
You hit the point! I've tried to stretch the sprite with your method and i think we get hit :D!
In fact i can strentch it using a float value so i can fill the entire screen properly (for other screen resolutions i just have to change the stretch factor and the original 320x200 game resolution a little bit) and the CPU usage in a stressfull game condition (120 sprites rendered) for the process raises from 20% for a 320x200 windowed mode to 24% for sprite stretched and fullscreen mode, my previous method of stretch the pixels array pixel per pixel and then draw it uses 29%.. i think that's very good!

Thank you very much Hapax!  ;D