Pixel Joint Forum: Videogame sprites

Author

Message

yashar
Seaman
Seaman

Joined: 03 February 2020
Online Status: Offline
Posts: 2

Topic: Videogame sprites
Posted: 06 January 2017 at 7:47am

Hi! I'm wandering about the dimensions of pixel sprites in a videogame.
The programmers want a quite big sprite (about 512x512px) so, they say, they can reduce eventually its dimension. But i think that that's impossible: if the sprite is in pixels, how the hell you can reduce it? All would be messed up, cause every pixel has is precise meaning to be in that position.
So, if a game must be thought for different screen dimensions (pc, phones, consoles...) then there must be a sprite with dimensions sets for every type of screen?

IP Logged

eishiya
Commander

Joined: 04 August 2022
Online Status: Offline
Posts: 1109

Posted: 06 January 2017 at 7:56am

You are correct that pixel art cannot be properly reduced. However, you don't need separate sprites for each type of screen.

Pixel art games are usually designed for the smallest screen they'll be presented on, or even smaller. For larger screens, the games are simply zoomed in, and/or more of the environment or surrounding UI is shown.

IP Logged

yrizoud
Commander

Joined: 03 May 2021
Location: France
Online Status: Offline
Posts: 343

Posted: 06 January 2017 at 10:25am

I think programmer expects non-pixel-art. It sounds like the typical technique of having source graphics in a very large size, even though they are never displayed 1:1.
The graphic will be dynamically reduced to the required size (depending on screen/resolution), AT LEAST 25%, so a minimum of 16 source pixels produce a single output pixel. It will automatically anti-alias, merge colors, and blend sub-pixel details.

This works best if you draw with a painterly technique. Don't bother aligning your lines to 45% multiples, and keep to sharp brushes if possible : It will be the engine's job to merge pixels, and it will look prettier if your source graphic is sharp. Don't worry if single-pixel details are inaccurate/jaggy.

IP Logged

yashar
Seaman
Seaman

Joined: 03 February 2020
Online Status: Offline
Posts: 2

Posted: 08 January 2017 at 3:38am

Thanks both for the help.
In fact programmers are a little confused abaut the graphic style of the game, they want pixels, but imagine them like if they are rasters like in terms of post-redimensioning. I've talk to them about this issue and we are searching for an alternative solution.

Originally posted by eishiya

Pixel art games are usually designed for the smallest screen they'll be presented on, or even smaller. For larger screens, the games are simply zoomed in, and/or more of the environment or surrounding UI is shown.

how can i correctly zoom a pixel sprite, like it happens here in the forum and in the site? i've tried whit photoshop but it mess up the picture a lot.

Originally posted by yrizoud

This works best if you draw with a painterly technique. Don't bother aligning your lines to 45% multiples, and keep to sharp brushes if possible : It will be the engine's job to merge pixels, and it will look prettier if your source graphic is sharp. Don't worry if single-pixel details are inaccurate/jaggy.

if i do so the image will be somehow pixelart-like but not actually pixelart? like a raster digital painting that imitate pixelart? i can give it a try.

IP Logged

eishiya
Commander

Joined: 04 August 2022
Online Status: Offline
Posts: 1109

Posted: 08 January 2017 at 5:29am

To correctly zoom pixel art, there are two things you need to do:
1. Use Nearest Neighbour sampling, do not do any type of colour interpolation. Anything other than Nearest Neighbour will introduce new colours, effectively blurring your work. In a game, this is achieved by simply making sure texture smoothing is off.
2. Zoom by integer factors, never by fractions. 1x (100%), 2x (200%), 3x (300%, and so on, those are integers. This makes sure all the resultant "pixels" are the same size. If you zoom by some non-integer like 2.5x (250%), then you get some "pixels" that are 2x2 screen pixels, while some are 2x3, 3x2, or 3x3 - you get a mess.
If you have a very small game that's getting zoomed above 5x or so, you can afford to start doing fractional zooming because beyond that point the distortion is barely noticeable. For most games, however, it's best to stick to integer zooms. For posting your art on PJ, you should always use integer zooms (or better yet, not zoom at all.)

IP Logged

yrizoud
Commander

Joined: 03 May 2021
Location: France
Online Status: Offline
Posts: 343

Posted: 08 January 2017 at 5:43pm

Eishiya, you seem to have missed how the first post speaks of a 512x512 game sprite. There's no way an animated game character is going to be drawn in pixel art at this size.

I can't find a real example of what I mean, but for example:
https://creativemarket.com/melissareneepohl/10736-Jewel-Game-Pieces-Set/screenshots/#screenshot1 (actually drawn in vectors, using Illustrator)
http://karanak.deviantart.com/art/Sprites-set-196798492

These are the kinds of graphics which can be painted (or rendered, for the first) at a higher resolution than the target real cases.
Since the image is never displayed 1:1 (always considerably smaller, like 1:4), you don't need pixel-precision while drawing, and you can freely use brushes larger than 1x1 pixel.

IP Logged

Resources and Support
Pixel Joint Forum : The Lounge : Resources and Support

Author	Message
yashar Seaman Joined: 03 February 2020 Online Status: Offline Posts: 2	Topic: Videogame sprites Posted: 06 January 2017 at 7:47am
	Hi! I'm wandering about the dimensions of pixel sprites in a videogame. The programmers want a quite big sprite (about 512x512px) so, they say, they can reduce eventually its dimension. But i think that that's impossible: if the sprite is in pixels, how the hell you can reduce it? All would be messed up, cause every pixel has is precise meaning to be in that position. So, if a game must be thought for different screen dimensions (pc, phones, consoles...) then there must be a sprite with dimensions sets for every type of screen?
	IP Logged

eishiya Commander Joined: 04 August 2022 Online Status: Offline Posts: 1109	Posted: 06 January 2017 at 7:56am
	You are correct that pixel art cannot be properly reduced. However, you don't need separate sprites for each type of screen. Pixel art games are usually designed for the smallest screen they'll be presented on, or even smaller. For larger screens, the games are simply zoomed in, and/or more of the environment or surrounding UI is shown.
	IP Logged

yrizoud Commander Joined: 03 May 2021 Location: France Online Status: Offline Posts: 343	Posted: 06 January 2017 at 10:25am
	I think programmer expects non-pixel-art. It sounds like the typical technique of having source graphics in a very large size, even though they are never displayed 1:1. The graphic will be dynamically reduced to the required size (depending on screen/resolution), AT LEAST 25%, so a minimum of 16 source pixels produce a single output pixel. It will automatically anti-alias, merge colors, and blend sub-pixel details. This works best if you draw with a painterly technique. Don't bother aligning your lines to 45% multiples, and keep to sharp brushes if possible : It will be the engine's job to merge pixels, and it will look prettier if your source graphic is sharp. Don't worry if single-pixel details are inaccurate/jaggy.
	IP Logged

yashar Seaman Joined: 03 February 2020 Online Status: Offline Posts: 2	Posted: 08 January 2017 at 3:38am
	Thanks both for the help. In fact programmers are a little confused abaut the graphic style of the game, they want pixels, but imagine them like if they are rasters like in terms of post-redimensioning. I've talk to them about this issue and we are searching for an alternative solution. *Originally posted by eishiya* Pixel art games are usually designed for the smallest screen they'll be presented on, or even smaller. For larger screens, the games are simply zoomed in, and/or more of the environment or surrounding UI is shown. how can i correctly zoom a pixel sprite, like it happens here in the forum and in the site? i've tried whit photoshop but it mess up the picture a lot. *Originally posted by yrizoud* This works best if you draw with a painterly technique. Don't bother aligning your lines to 45% multiples, and keep to sharp brushes if possible : It will be the engine's job to merge pixels, and it will look prettier if your source graphic is sharp. Don't worry if single-pixel details are inaccurate/jaggy. if i do so the image will be somehow pixelart-like but not actually pixelart? like a raster digital painting that imitate pixelart? i can give it a try.
	IP Logged

eishiya Commander Joined: 04 August 2022 Online Status: Offline Posts: 1109	Posted: 08 January 2017 at 5:29am
	To correctly zoom pixel art, there are two things you need to do: 1. Use Nearest Neighbour sampling, do not do any type of colour interpolation. Anything other than Nearest Neighbour will introduce new colours, effectively blurring your work. In a game, this is achieved by simply making sure texture smoothing is off. 2. Zoom by integer factors, never by fractions. 1x (100%), 2x (200%), 3x (300%, and so on, those are integers. This makes sure all the resultant "pixels" are the same size. If you zoom by some non-integer like 2.5x (250%), then you get some "pixels" that are 2x2 screen pixels, while some are 2x3, 3x2, or 3x3 - you get a mess. If you have a very small game that's getting zoomed above 5x or so, you can afford to start doing fractional zooming because beyond that point the distortion is barely noticeable. For most games, however, it's best to stick to integer zooms. For posting your art on PJ, you should always use integer zooms (or better yet, not zoom at all.)
	IP Logged

yrizoud Commander Joined: 03 May 2021 Location: France Online Status: Offline Posts: 343	Posted: 08 January 2017 at 5:43pm
	Eishiya, you seem to have missed how the first post speaks of a 512x512 game sprite. There's no way an animated game character is going to be drawn in pixel art at this size. I can't find a real example of what I mean, but for example: https://creativemarket.com/melissareneepohl/10736-Jewel-Game-Pieces-Set/screenshots/#screenshot1 (actually drawn in vectors, using Illustrator) http://karanak.deviantart.com/art/Sprites-set-196798492 These are the kinds of graphics which can be painted (or rendered, for the first) at a higher resolution than the target real cases. Since the image is never displayed 1:1 (always considerably smaller, like 1:4), you don't need pixel-precision while drawing, and you can freely use brushes larger than 1x1 pixel.
	IP Logged