1
\$\begingroup\$

As you can see from the title, I'm working on a game using pixel art. To archive that, I create a 160x90 texture, draw everything onto that and scale it up. But the player in this game only moves about 10 pixels per second in some places. Luckily, the position isn't stored in pixels, but as a float, so the player can also be at (10.234, 3.76543). Because the map is big, the player is always centered on the screen and the world moves, instead. But as of my current implementation, I round the player's position to whole pixels in each update call. Otherwise, the engine would place all the world's sprites between the pyhsical pixels and they would be interpolated and look very unsharp and not very pixel-artish.

And there comes the problem: because the player moves just 10px/sec, the world only moves on the screen every 1/10 second. And that, of course looks like the game was running at 10 fps (it actually runs at 60fps).

So what is the recommended approach for that? Should I stick to what I current have got or should I let the graphic card do what it wants to do and let it interpolate the pixels and simply ignore the blurry effect.

PS: I know this question is similar but the difference is that in his case, he wants to avoid this staircase effect, while in my case, I want to avoid the lag

\$\endgroup\$
  • \$\begingroup\$ That is a very low resolution, couldn't you at least use 480x270? I'm sure the game will be plenty pixellated at that resolution, and the resulting visual 30 fps should be reasonable. \$\endgroup\$ – aaaaaaaaaaaa May 3 '14 at 13:53
  • \$\begingroup\$ We experimented with that a bit and this was the resolution we came up with. And even if we scaled it up - the assets (and there are plenty of them) would stay 16x16. \$\endgroup\$ – jalgames May 3 '14 at 14:20
  • 2
    \$\begingroup\$ Rather than drawing everything onto a 160x90 texture and scaling the result up, you could render just the background, scale it up, then render each sprite independently at their float positions, scaling each one up. This would eliminate the texture blur, while letting your sprites move more smoothly. \$\endgroup\$ – Nairou May 3 '14 at 16:09
  • 1
    \$\begingroup\$ @jalgames You have moved into pre-VGA territory, practically no games released during the last 20 years have used less than 320x200 resolution. When you decided to use a 160x90 resolution you decided to have ugly graphics. Aside from undoing that decision there is nothing you can do to make your game look good. Various tricks might make it a little less ugly, but ugly none the less. \$\endgroup\$ – aaaaaaaaaaaa May 3 '14 at 22:09
3
\$\begingroup\$

Update

The player does not see the games' framerates. The players see the amount of changes that happen on the screen per second (i.e. the amount of frames that are different from the frames before them per second).

There are some ways to increase this value from 10 to 30, 60 or 120.

  1. Make the world a grid of rectangles (blocks of pixels) and make the motion itself in pixels which are fractions of blocks. The player will always stop in integral positions so the world aligns with the gui when the player stops but we'll slide when the player moves around.
  2. Make the player's character animation more detailed, adding more frames so the player character itself will be changing when the player is moving (does not make sense to me but could work while keeping the world always aligned).
  3. Add some animated things in the background and foreground that constantly move or flicker (stars, clouds and etc.) to keep the feel of animation.

If you are not adding something that moves with higher frequency or a different frequency at least then the game is not actually refreshing at a frequency greater than 0.1 seconds.


From what you are saying the game is in 160 X 90 but I'm sure the actual view could be in 800 x 450 for instance? Then you could maintain the "blocky" look and keep the image sharpness by simply drawing each pixel as a 5 x 5 rectangle and moving the world in steps of 0.2 instead of integral steps. This way you would get a feel of 50fps and will not get the blurriness you described.

You could also do something like deepnight often does in Ludum Dare where the pixels are actually replaced by large blocks to give a look reminiscent of 8-bit games on a CRT.

http://dl.dropboxusercontent.com/u/4952054/ludumdare20/postRelease/index.html

\$\endgroup\$
  • \$\begingroup\$ I see problems with the hud as it may not always be aligned with the pixels below. And the player wouldn't be aligned, too \$\endgroup\$ – jalgames May 3 '14 at 20:57
  • \$\begingroup\$ @jalgames Actually, some of the modern retro look games have used pixellated assets without aligning them to a screen-resolution-like grid, or even having a standard pixel size. Rogue Legacy for instance does this, and the result feels pretty good. \$\endgroup\$ – aaaaaaaaaaaa May 3 '14 at 22:13
  • \$\begingroup\$ @jalgames Read update \$\endgroup\$ – wolfdawn May 4 '14 at 8:03
  • \$\begingroup\$ Thanks for this answer! I think if I combine these, I'll get the results I want! \$\endgroup\$ – jalgames May 4 '14 at 8:22
1
\$\begingroup\$

Move the player faster? If it already looks the way you want but the problem is that the movement is too slow, as you seem to say.

Also I think it is possible to disable interpolation in the drawing, we do that in our pixel art game. (using cocos2d-iphone which is OpenGL)

\$\endgroup\$
  • \$\begingroup\$ Yes, but if I disable interpolation, it will move only every 1/10 second again, but thanks for the tip! \$\endgroup\$ – jalgames May 4 '14 at 8:21
  • \$\begingroup\$ Err, with the interpolation I meant the draw effect that makes scaled up images blurry. See the differences of GL_NEAREST and GL_LINEAR in open.gl/textures . That certainly does not affect player movement speeds I'd think. Hm or perhaps you mean that as you scale your whole game up it does? \$\endgroup\$ – antont May 4 '14 at 8:23
  • \$\begingroup\$ When I mentioned interpolation in my question, it was because the player keps at the same place (he is always in the center of the screen) and the world below scrolls. So if I don't round the player coordinates, it places the world's tiles are rendered "between" the pixels and become blurry. If I disable interpolation, it would be like rounding the coordinates previeously so it is aligned to the pixel grid \$\endgroup\$ – jalgames May 4 '14 at 8:39
  • \$\begingroup\$ ok i now finally got this too and also see that there's a good answer now too - sorry for the noise. i think the solution is simply to use a high resolution screen, scaled up graphics, and then scroll that smoothly. \$\endgroup\$ – antont May 4 '14 at 9:05
  • \$\begingroup\$ No, you don't have to excuse for the noise! It was you trying to help me and it should be me saying thanks! \$\endgroup\$ – jalgames May 4 '14 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.