Html5 circle looks horrible when rotate

Help
#1

Don’t know if this topic was discussed before. I can’t find something similar.
Problem is when I am drawing a circle and rotating it , it looks horrible, I have tried to compile in flash and it looks just fine but html5 is causing the problem,

sun = new Sprite();

		sun.graphics.lineStyle(0,0xFF6600);

		sun.graphics.beginFill(0xFF3300);

		sun.graphics.drawCircle(0,0,40);

		sun.graphics.endFill();

addEventListener(Event.ENTER_FRAME, orbit);

private function orbit(e):Void 

	{

		sun.rotation++;

	}

Notice that orange and blue both circle are kinda cut off , and when they rotate they are kinda shaky.

#2

I can’t help with the weird shapes.

Try opening this class: openfl/xxx/openfl/_internal/renderer/canvas/CanvasRenderer.hx (I think your target is HTML5 canvas), and change

renderSession.roundPixels = true;

to

renderSession.roundPixels = false;

This should eliminate the stuttering rotations forever.
Same story for the other renderers.

#3

Hi GiG.

I ran into the same problem as Galib a while back: http://community.openfl.org/t/jerky-rotation-on-html5/8850
Unfortunately no one ever replied. I just looked at CanvasRenderer.hx
and GLRenderer.hx and you know what? With OpenFL 4.9.1 renderSession.roundPixels
seems to be false by default. This ain’t giving me smooth rotations though.
Could you do me a favor and check the code snippet in the post I’ve linked
and tell me if it’s looking smooth?

Cheers!

#4

Nevermind GiG.

I just did some testing and found out that renderSession.roundPixels actually affects the smoothness of
a rotation. The object to be rotated needs to be a Bitmap though and furthermore it’s smoothing property
should be set to true. If it’s a simple shape as in my example above the rotation will be stuttering no
matter what you do.

#5

@Galib - Try this workaround:

package;

import openfl.display.Sprite;
import openfl.display.Shape;
import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.events.*;
import openfl.Lib;
import openfl.geom.Matrix;

class Main extends Sprite 
{
    private var sun:Sprite = new Sprite();
	
    public function new() 
    {
        super();
        var shape = new Shape();
        shape.graphics.lineStyle(0,0xFF6600);
        shape.graphics.beginFill(0xFF3300);
        shape.graphics.drawCircle(0,0,40);
        shape.graphics.endFill();
        
        var bmpData:BitmapData = new BitmapData(Math.ceil(shape.width)+1, Math.ceil(shape.height)+1, true, 0x00ff00);
        var mat:Matrix = new Matrix();
        mat.translate(bmpData.width / 2, bmpData.height / 2);
        bmpData.draw(shape,mat);
        var bmp:Bitmap = new Bitmap(bmpData);
        bmp.smoothing = true;
        sun.addChild(bmp);        
        bmp.x -= bmp.width / 2;
        bmp.y -= bmp.height / 2;
        sun.x = sun.y = 100;
        
        addChild(sun);
        addEventListener(Event.ENTER_FRAME, orbit);
    }
    
    private function orbit(e):Void
    {
        sun.rotation++;
    }
}

This will help with the rotation - the cropped look remains though.