Page 1 of 1

How can i make look 8x8 Pixel Sprites bigger ?

Posted: Sun Nov 26, 2023 11:59 am
by Lovingsoul1337
So that you can on a 1920 x 1080 Screen see the sprites big enough to play this game fullscreen.

Image

like there.

thanks in advance for your help.

Re: How can i make look 8x8 Pixel Sprites bigger ?

Posted: Sun Nov 26, 2023 12:34 pm
by Hugues Ross
I mean, none of the sprites in your example are 8x8.

But anyway, you're probably looking to scale up either the sprites or the view of the game itself. Regular ol' love.graphics.draw lets you set a scaling factor for whatever's being drawn, which could be an option depending on your exact needs.

But more likely, you'll want to scale up the game's view so that it fits to the window size. I'm not going to go through the whole process in too much detail, but there are two main approaches:
  • Draw everything to a Canvas, then draw the Canvas on-screen with a scaling factor. This insurers than everything you draw is 'snapped' to the same pixel grid, you won't have sprites at half-pixels. Whether this is a good thing or a bad thing depends on the context of your game.
  • Use a call to love.graphics.scale at the start of draw call, effectively just applying a scale factor to everything after it (unless you push/pop transforms).
In both instances, you'll also need to figure out how much to scale by. Some games just make this is an option the user can select from, others calculated from the size of the window. That's up to you to decide. You'll also want to call love.graphics.setDefaultFilter with the "nearest" FilterMode before you load any images so that your pixels scale crisply. That should hopefully be enough to get you started?

Re: How can i make look 8x8 Pixel Sprites bigger ?

Posted: Sun Nov 26, 2023 1:34 pm
by Lovingsoul1337
thanks, yes it did ! ;)

i did meant that i want my 8x8 sprites sized as the ones i showed.

and that i want they not blurry i did forget to write.

Re: How can i make look 8x8 Pixel Sprites bigger ?

Posted: Sun Nov 26, 2023 1:50 pm
by Hugues Ross
Hugues Ross wrote: Sun Nov 26, 2023 12:34 pm You'll also want to call love.graphics.setDefaultFilter with the "nearest" FilterMode before you load any images so that your pixels scale crisply. That should hopefully be enough to get you started?
^ This part is what makes them not blurry. It applies to images loaded after you set it, so if you're making a game that's all pixel art I recommend just slapping this in your love.load:

Code: Select all

love.graphics.setDefaultFilter("nearest")

Re: How can i make look 8x8 Pixel Sprites bigger ?

Posted: Mon Nov 27, 2023 2:21 am
by RNavega
The scaling technique used in Shovel Knight is very interesting, it's a compromise between getting the largest canvas size possible, with minimal blurriness.

Image

Image

The steps as described in here by user gaxio: https://gamedev.net/forums/topic/697710 ... n/5384340/

1) Get the client size (the drawable area) of the game window.
2) Find the integer number that scales your off-screen pixel art canvas to be as close in size as possible to the window client size, but not bigger than that window client size, and create your canvas in that scaled size.
That is, if your pixel art off-screen canvas is 320x240, and your game window client area is 800x600, then this integer factor is 2 (the canvas needs to be created as 2 x 320x240 = 640x480), because if you use 3 as the scale then the resulting size (960x720) will be bigger than the window size.
3) Draw graphics to your off-screen canvas, scaling them by that same integer factor (in this case, 2x), and drawn using nearest-neighbor filtering, so no interpolation happens.
4) Draw the canvas itself on screen, scaled to fit the window, this using bilinear filtering. The blurring will be kept very subtle.