How can I snap a sprite to every three or so pixels?

Hey guys! I’m currently making a retro style game. I was wondering if anyone could tell me how to make the sprites snap to every three pixels. If you need any additional information please let me know! Thanks! :smile:

A little more detail…

Are you dragging it with the mouse or are you moving it via code or???

Whenever you actually draw your sprite, take each element of your position (X and Y most likely), and divide them by the amount you want them to snap. Then, floor them (or round them, it’s worth testing both to see the effect). After that, you should multiply those results by the same amount you divided them by initially.

This is an easy way to snap any value to any multiple of a value, in this case, your sprite positions!

3 Likes

I’ve also used something like this for snapping to a grid:
plot.X = pos.X - pos.X % 3;
plot.Y = pos.Y - pos.Y % 3;

2 Likes

Alternatively, you might consider just scaling your world up by three when you render. If you’re making a retro style game, that probably fits. You might want to do this anyway, never mind the three pixels… which you may want to actually reconsider since resolutions can change.

A common tactic is to pick some expected world view size (say 128x128 pixels, if we’re going to consider PICO-8 which is currently my new favourite :D). When you render to the screen, figure out how much screen resolution you have to work with and determine what aspect ratio fits within that and scale up accordingly.

For example, rendering 128x128 inside a 1920x1080 window means you’re limited on the vertical axis. You can do 1080x128, which gives 8.4375, which you’d probably want to just round down to 8. Now you can render a 1024x1024 display centered in y our 1920x1080 window. Every unit moved in your world would result in an 8 pixel move on the screen in this case, but you can apply the same principle to any resolution :slight_smile:

I’m moving it with the left and right arrow keys.

Then you should be able to do something as simple as

X += 3; or X -= 3;
Y += 3; or Y -= 3;

That will move it 3 pixels at a time. You would need to make sure that it’s starting position was on a 3 pixel boundary (i.e. 0, 3, 6, 9, etc…).

1 Like

I guess I could do that but i’m also multiplying all the movement by gameTime.ElapsedGameTime.TotalSeconds

I’d recommend drawing your game onto a RenderTarget 1/3 of the size of your window, and then scaling it to the size of you window. A RenderTarget basically allows you to draw textures onto another texture, so you can then draw the RenderTarget, which inherits Texture2D, and draw it with any SpriteBatch.Draw overloads. :smiley:

1 Like