Tips on using sprites/pixelart

[connected_user]

Hey guys, I am completely new to game design and want some tips on how to incorporate pixel art in html5 games. Filetypes, specifications and best practices. Can anyone point me in the right direction?

[mattstyles]

They'll just end up as jpegs or pngs, just include them as you would any other image asset.

Either scale them up using nearest neighbour in your drawing program so they are about the right size for your application, or scale in your application. Note that you want a consistent pixel so you have to be a little careful with how you scale them, and it is preferable not to scale at all. Responsivity to window size is still applicable without scaling, you simply show more or less of your application viewport, this may require some design changes depending on the type of application you're creating.

Also there are literally hundreds of scaling algorithms, sometimes when you are scaling by (e.g.) 2x it actually looks a little better with a little interpolation, which sounds counter-intuitive when you're talking about pixel art, but, just sometimes it can give the look you're after with less work. You have to play around to find the style you're after.

 

[connected_user]

6 hours ago, mattstyles said:

They'll just end up as jpegs or pngs, just include them as you would any other image asset.

Either scale them up using nearest neighbour in your drawing program so they are about the right size for your application, or scale in your application. Note that you want a consistent pixel so you have to be a little careful with how you scale them, and it is preferable not to scale at all. Responsivity to window size is still applicable without scaling, you simply show more or less of your application viewport, this may require some design changes depending on the type of application you're creating.

Also there are literally hundreds of scaling algorithms, sometimes when you are scaling by (e.g.) 2x it actually looks a little better with a little interpolation, which sounds counter-intuitive when you're talking about pixel art, but, just sometimes it can give the look you're after with less work. You have to play around to find the style you're after.

 

I appreciate your response! This may be a little off topic but is pixel art usually just jpegs or pngs in other game development frameworks as well? For instance, when I see a pixel-art game on steam or on mobile, it really doesn't look like simple jpegs or pngs, it almost seems too sharp to be jpgs or pngs. Again, I have no game design experience but I hope I have explained this properly. 

[mattstyles]

Yep, they're just images.

You could, in theory, use something like an svg or some other vector format, but, well, it would get tricky.

There are lots of tricks you can use to change how your images look. For example, a nice trick I saw was to blow everything up 3x and then apply a filter which makes each 'pixel' (now 3x3) look kind of 3d by applying lighting to the top-left cells and shading to the bottom-right cells, when you play around with the light/shade it can give a nice effect which almost blockifies each pixel. Or you can add 'scanlines' this way to simulate retro monitors. Still just an image at the end of the day.

Jpegs and pngs are common on the web and that is to do with file size transfer as much as rendering, native applications generally dont have the bandwidth/size issue so may use other image formats but they're still just rendering images.