I've noticed that games like Diep.io are using floating decimal points for thin stroke lines on the grid. I have even tried this myself, by adding 0.5 to all of the positions for the grid lines to make the lines more thin.

I heard it from a friend that drawing on half pixels causes the GPU to do more work to smooth it out, like anti-aliasing. I am really trying to make my game look nice, by making the most smoothest lines as I can. How much slower is it really, and should I use it in an online competitive 2D game using Canvas?

  • 2
    \$\begingroup\$ Have you tried profiling your game with & without the 0.5 offset to measure whether there's a substantial performance difference in your use case? \$\endgroup\$ – DMGregory Feb 15 '19 at 3:22
  • \$\begingroup\$ @DMGregory I would try, but I am not familiar with the profiling tree, so I don't know how to use it. \$\endgroup\$ – Jacob Gunther Feb 15 '19 at 5:57
  • 2
    \$\begingroup\$ @JacobGunther I would really recommend you to familiarize yourself with the profiler. It's an invaluable tool if you want to troubleshoot performance problems in more complex games. \$\endgroup\$ – Philipp Feb 15 '19 at 9:31

Since the GPU is already used to rendering on subpixels, it's not really an issue there. Also, no, it doesn't do anti-aliasing by default and no, it doesn't need to smooth it out.

On CPUs however, drawing a pixel at a corner of 4 actual ones can certainly lead to some performance issues, but it's still very minimal (even in the worst case scenario you're only drawing an extra border around the polygons).

If you still want to test it, there are built-in profilers in most modern browsers. In chrome it's F12 > performance/profiling > hit the red button and stop after a while

| improve this answer | |
  • \$\begingroup\$ I don't have a lot of experience in this area, but I always assumed when drawing "between" two pixels, the colour is simply divined into it's neighbour pixels, to give the illusion that it's in the middle. If that's the case it doesn't really sound it can do much harm in performance (at least not noticeable) \$\endgroup\$ – TomTsagk Feb 15 '19 at 10:00
  • \$\begingroup\$ @TomTsagk First of all, it's not divided. Neither GPUs nor CPUs do anti aliasing that way (CPUs usually overdraw then scale it down, GPUs simply query multiply points in a single pixel and average the results, there are other options for both, but these are the most basic). Secondly, taking every pixel and drawing a quarter of them in 4 separate pixels would be 4 times slower, as simply drawing it once \$\endgroup\$ – Bálint Feb 15 '19 at 10:55

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.