sfml view issue

[Omyk]

Hi, bonjour

I have a question regarding the sf::View feature in sfml 2.0

I am actually trying to make a very low resolution game (1 ingame pixel = 16 pixels) but i encounter an issue.
The way that i am programming this is that i make a scene 4 times smaller than the actual window size and when i need to render it i just use a view which will zoom in 4 times.

everything works fine except the sprite.

What i don't understant is that when i move the sprite, it moves it in the high resolution definition, and not the smaller one i made before rendering.

Another issue is that when i rotate the sprite, it does not rotate a small sprite, but a 4 times bigger copy of it, so the whole low resolution thing is a big fail.

Is there another way to do this to keep everything in low resolution ?

I thought of re-writing another function that can replace the zoom one, it would actually get each pixel from the pixelPtr of the small scene and create a 4x bigger pixelPtr with each pixel from the small array would be equal to 16 in the big one, but that would be kind of slow i guess.

So any answer is welcome, i also speak french, alors n'hésitez pas !

Thank you

[Laurent]

What i don't understant is that when i move the sprite, it moves it in the high resolution definition, and not the smaller one i made before rendering.

Another issue is that when i rotate the sprite, it does not rotate a small sprite, but a 4 times bigger copy of it, so the whole low resolution thing is a big fail.

Sorry, but I fail to understand the problems that you describe. Maybe with a screenshot? Or a more detailed explanation?

[Omyk]

Okay here's a pic:



To the left is what i get, to the right is what i would like to have, you see on the left, the pixels are rotated, and that fails the purpose of low-res.

Thank you for helping !

[eXpl0it3r]

For me the left pictures looks better than the right one. Why should the image get malformed when rotated? How did you generate the right image?

[Omyk]

Look, that's the whole point of having a low resolution game.

The thing that i want to make is actually a game with like 100 * 100 pixel as resolution, but expanded on 400 * 400 for example, so that it looks like a reaaalllly old game, when screens had a really low resolution, and big pixels.

That said, each square in my game is supposed to be a big pixel, and a pixel cannot rotate! and that is why i am having this problem. The image to the left is a wheel with a low resolution, that has been zoomed in 4 times, but when i rotate it, i would like it to look like if you rotated a low resolution image, so it is supposed to be looking like on the right side. The problem i have with rotated pixels are mainly the collision detection that would work on a whole different manner, and also the aestethic, this does not look old if you can rotate pixels.

What i don't understand is that when you create a view on a low resolution sprite, and zoom in, and then if you rotate the low resolution sprite, the view does not display the zoomed in sprite, it creates a new sprite, copy of the other one, zoomed in 4 times and then rotated. This does not give the same result at all!

So what method can i use to get the desired effect ?

to get the right image, i made the window 4 times smaller, to get the authentic low resolution sprite, then i made a print screen, and zoomed in from paint 4 times.

Any solutions please?

[Omyk]

tell me if you want me to explain in french, it may be easyer ? ( i am french )

[FRex]

Try and draw everthing to a render texture and then use this texture to draw a sprite that you'll scale up 4 times? (wild guess)

[eXpl0it3r]

Ah now I understand.

Have tried texture.setSmooth(false)?

When you say the sprite gets copied what do you mean by that? Is that just what you think happens while observing the result, or does that happen in the code?

Maybe if you provide a minimal example one will be able to test it.

Btw there's also a dedicated French forum, but your English is fine, just wanted to point it out.

[Omyk]

@Frex

Yes that's what i thought of in the first place: have a final image, then get the pixelptr, and create a new pixelptr from the previous one, but 16 times bigger, and then copy 16 times the same pixel data for each pixel, and then copy that into another image, and finally displaying that image, but that would be REALLY slow wouldn't it ?

@eXpl0it3r

where would i put setsmooth ? are you sure this is what i want? because what i actually do is draw everything on a tiny sprite, and use a view to zoom in 4 times, so i don't think this would change anything ?

And the copy thing is just an observation, because view (what i have seen) does not really zoom in on a sprite, what  it does is (what  think) copy every sprite into a bigger one and displaying that instead, while applying the transformations on  the bigger sprites.

I am sorry i cannot give you code, it's too messy and long, but if you're willing to try for yourself do this:

make a program with a tiny window (say 100 * 100) draw sprites on it (low res) and rotate them.
It would be difficult to see properly because of the smallness of all this, but after, try this:

You make a window 4 times bigger than the original (400*400) but you keep every sprite and what you displayed before in the same resolution. (normally everything that you display will be visible in 1/4th of the screen (top left corner) with the rest black. Ok now create a view, (size 100*100) draw everything on the view, then use a viewport of 1, (that would normally display your sprites on the whole size of the window, (4 times as big as before)
If you don't rotate them, they look fine, but with rotation, you can see that The
resulting sprites != original sprites.

If you don't use the view you get something like the image to the right, but 4 times smaller, if you use the view you get something like the image to the left.

Sorry, i don't know if  i can be more detailed...

for the french forum, i just think that it'd be less populated, and people from france won't answer at this time (2am)
That's why i posted here, and i also thought that Laurent Gomila was french ?

Nevertheless, thanks for helping out

[FRex]

Yes that's what i thought of in the first place: have a final image, then get the pixelptr, and create a new pixelptr from the previous one, but 16 times bigger, and then copy 16 times the same pixel data for each pixel, and then copy that into another image, and finally displaying that image, but that would be REALLY slow wouldn't it ?

Create a sprite and scale it 4x x and y, and assign it to render texture. Then draw clear and dislay to texture and only : clear, draw sprite, display window.

[eXpl0it3r]

SetSmooth would be applied to the texture, but it's disabled by default, it doesn't help.

I can't experiment around right now but I'll try in the morning if your problem doesn't get solved in the meantime.

[Omyk]

hmm, i'll try to rotate the sprite, then scaling it, tomorrow, but honestly i think it would make the same result...

[Tex Killer]

You have to rotate the sprite and draw it rotated on some texture... Then you put that texture on a sprite, scale it and draw it scaled on the screen.

[Laurent]

You won't be able to get true bigger pixels with just a view. The target (the window) still has more pixels, so it can (and does) render your big pixels perfectly rotated, instead of aligned to your "virtual" big pixels grid.

The render-texture solution should work, and is very easy to write.

What i don't understand is that when you create a view on a low resolution sprite, and zoom in, and then if you rotate the low resolution sprite, the view does not display the zoomed in sprite, it creates a new sprite, copy of the other one, zoomed in 4 times and then rotated. This does not give the same result at all!

Hmm? No, this is the same sprite, but since you have more pixels it can be rotated perfectly, as I explained above. The view zooms the 2D scene, pixel rasterization happens after zooming the 2D entities. So you don't get bigger pixels, just bigger entities.

i also thought that Laurent Gomila was french ?

I am. But if you want to speak french you have to post on the french forum

[Omyk]

Sooo, i've tried the rotate + scale after technique but that does not work either...

I wanted to try out another method that i was certain would work, but i have no idea on how to do it.

I was thinking about copying the pixels and scaling them directly in a bigger pixel array, but i just found out that the pixels do not move, because the image always stays the same... Then i tried to get the sprite transform, and apply it to another texture, but there is no such method, only in RenderTexture, but which is protected...

I have no clue on how to do this now...

Can someone give me a clear explanation please or some code part ?

Just another question btw, i wanted to do a wheel, and i wanted to make it spin, but when i use setOrigin, it still isn't precicely in the center... Should i make the wheel size 21 * 21 or 20 * 20?  i thought of 21*21 so that the one pixel in the center would be an axle for spinning so i setOrigin(10, 10) but that doesn't work... Any clue?

Thanks for helping out