How do I make a super pixelated sprite?

hey folks....

I am making a retro style game where i want the sprite to be 5x5, but take up a much larger part of the window than 5x5... one way to do it i think is to start with a very small screen size but i want the actual screen size to be 640x960...just make it look like a much lower res screen size....

i know it has something to do with tilesets but not sure?

thanks

Dan

This would scale up a 100 x 100 area of your game to fit the 400 x 400 window, meaning every game-world "pixel" would actually be a 4x4 block of screen pixels.

The problems...

Now, just zooming in will make everything bigger, but if we stop here, you'll also start getting blurry pixels, pixels that don't snap to the pixel grid, and even diagonal pixels if anything rotates.

So, there are a few extra things you'll need to do...

Setting up for pixel art retro games

1: In the Project panel, in the tree view, click the root folder for your project.

(Now in the Properties panel, you should see all the global properties for your project.)

2: In the "Project settings" section, set "Pixel Rounding" to "On".

3: In the "Configuration settings" section, set "Sampling" to "Point".

That should fix the blur and pixel grid snapping, but not the object rotation or scaling issues. (I'll come back to this in a sec...)

Point Sampling

"Point Sampling" means that pixels will stay sharp when you zoom in on them, instead of fade smoothly into each other.

Pixel Rounding

"Pixel Rounding" means that objects are displayed as if they are always at integer coordinates. This means that an object with an X position of 99.8 will be displayed as if it were at X position 100. This keeps objects from drifting out of the pixel grid. This is really nice if you want to keep everything snapped to the pixel grid, but there's one catch; you can still misalign an object's pixels from the world's pixel grid by rotating or scaling the object.

Pixelation post-processing

I've run into this rotation and scaling issue in a few of the retro-style games I've made.

(In fact, my member avatar is from one of them. At the moment, anyway.)

I solve it by pixelating the game environment by the same value as my zoom factor. That is, if my zoom/scaling factor is 3, then I pixilate the game into a mesh of 3x3 pixel blocks. This ensures that anything that rotates off the grid is still converted into a single on-grid pixel with the correct pixel scale.

You can pixelate the entire game by using WebGL effects.

Hope that helps.

i will try this...thanks!

fisholith

so are you saying that i should make my window and layout size much larger than what the actual screen size will be, and scale the layout 10 times (or so) so that most of what is on the layout/window in construct will not be seen when run?

for example make the layout size and window size both 1000x1000, but for a 10x layout scale, only a 100x100 secction in the center of the layout is what will show on the screen....so it would be helpfull to have a 100x100 transparent sprite in the layout to show you when building the layout what will be seen, right?

when i tried this it seemed to work until i rotated the object...a diagonal line, for example, when zoomed in on will display the stair case pixeliated effect i am looking for, but when the object is rotated to vertical, it still has a the staircase pixelated edges, when it should be smooth when vertical

Thanks

Dan