[HTML5 - canvas/webgl] Rounding coordinates

#1

Hi all,
I want to share my experience with all of you:
I noticed that sometimes rounding coordinates of moving objects causes a HUGE difference in fluidity, and I am not talking about giant images.

I first noticed this when working on a fullscreen scrolling text (on canvas rendering), the vertical movement of the draggable container was very ugly and stuttering, so bad that I initially thought I was calculating the coordinates in the wrong way, maybe inverting the scrolling by double-checking Y-range, but then I had the illumination: “let’s round Y!” and it was like magic! Super fluid scrolling! So I started rethinking about what I usually do, and added the same modification (this time by enabling snapping in Actuate tweens) to 2 pretty small panels that scroll in and out in another game (this time on webgl rendering), and it was magic again! Before the magic the panels were slowing everything down when entering/exiting, after the magic they enter and exit without affecting framerate at all.

How is this possible?! I didn’t know that both canvas and webgl were so bad in calculating non-integer coordinates!

I want to point out that I am working on an overpowered machine, with a lightning fast CPU and 16GB of RAM, so hardware performances are not the culprit for sure.

What about you? Let’s share different experiences.

1 Like
#2

Is the rounding occurring in our renderer, or in your code?

We have a roundPixels property in our renderer that used to always be enabled, but I think we had some problems with rotation animation seeming stuttery

#3

I’ve had simular experiences. I was creating an infinite scroll on mobile and the fluidity felt off even through I was pre calculating the velocity and putting it in a vector but rounding the values made all of the difference performance wise and smooth movement.

#4

I added the rounding in my code.
In the past I suggested how to disable roundPixels in the renderer, because the rotations were terrible as you said