Rounding of vector bounding box dimensions causes jittering of sprite

[adroitwhiz]

Expected Behavior

When you modify a vector costume in the Paint Editor, and its bounding box is recalculated, this should not affect the position of the sprite in any way.

Actual Behavior

Because the paint editor gives SVGs non-integer viewBoxes, but the canvas renderer renders them at integer sizes, and there's tons of code that assumes integer dimensions of textures, there's all kinds of jittering and ugly artifacts.

Fixing this will require proper handling of both non-integral viewBox bounds and rotation centers. A clear separation between a sprite's "rendered" rotation center and bounds and its "logical" rotation center and bounds must be established.

Steps to Reproduce

View this project. Note how in the Paint Editor, Scratch Cat doesn't move at all, but on-stage, he jitters, and nearest-neighbor seams are visible:

Operating System and Browser

Firefox 65.0.1 and Chromium 71.0.3578.98 on Fedora Linux.

[thisandagain]

/cc @cwillisf @kchadha @paulkaplan @fsih

[adroitwhiz]

@cwillisf GitHub's pattern matching unintentionally made #527 close this. Mind reopening?

[adroitwhiz]

Also see https://scratch.mit.edu/discuss/topic/388506/

[BryceLTaylor]

I'm copying this over from #547 which I'm going to close as a duplicate:

The second costume will draw in a slightly different place so that switching between the costumes quickly causes it to "jitter."

Here is a project that shows this issue that came from the community: https://scratch.mit.edu/projects/359990077/

Note: sometimes the project won't appear jittery. I looked at it and saw the jitter but @fsih could not see the jitter. Going into fullscreen mode removed the jitter. Returning to regular screen mode again did not put the jitter back.

Tiny screen mode revealed the jitter every time.

This was reported originally in the forums here: https://scratch.mit.edu/discuss/topic/343787/

Steps to Reproduce

Create a new project Open the costume editor for the cat Delete the second costume for the cat Duplicate the first costume for the cat Switch to the code tab Create this stack: Run the code Note: it looks like the cat is just sitting there on the stage Return to the costume editor Delete the cat's arm (on the right side of the sprite) Note: the cat on the stage rapidly switches back and forth between a cat with and without the arm. Also note that the whole cat bobs up and down. Switch to full screen mode Note: the jitter goes away (or is reduced) Go back to regular screen mode Note: the jitter is still gone (reduced) Switch to small screen mode Note: the jitter is back.

I see this much more severely when I am using an external monitor. Moving it onto the laptop screen removed/reduced the jitter.