How can i make look 8x8 Pixel Sprites bigger ?

General discussion about LÖVE, Lua, game development, puns, and unicorns.
Post Reply
Lovingsoul1337
Citizen
Posts: 61
Joined: Fri Feb 21, 2020 1:26 pm

How can i make look 8x8 Pixel Sprites bigger ?

Post 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.
User avatar
Hugues Ross
Party member
Posts: 112
Joined: Fri Oct 22, 2021 9:18 pm
Location: Quebec
Contact:

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

Post 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?
Lovingsoul1337
Citizen
Posts: 61
Joined: Fri Feb 21, 2020 1:26 pm

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

Post 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.
User avatar
Hugues Ross
Party member
Posts: 112
Joined: Fri Oct 22, 2021 9:18 pm
Location: Quebec
Contact:

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

Post 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")
RNavega
Party member
Posts: 385
Joined: Sun Aug 16, 2020 1:28 pm

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

Post 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.
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 12 guests