Problem With Rotating Sprites Makes Edges Jagged

[Taz]

Hi all. I'm having a weird problem with rotating sprites. When I use Canvas rendering it's fine, but with WebGL rendering, the edges are jagged when I rotate the sprite. The sprite is created from a texture that is made with PIXI.Texture.fromCanvas. I used the HTML-Canvas API to make the simple rectangle. Here's a code pen project that explains better: code. And here are attached pictures of WebGL rendering and Canvas-fallback rendering. Any help fixing this would be greatly appreciated

 

 

[ForgeableSum]

EDIT: OOPS, didn't realize i was in the pixi forum (not phaser), so none of the below applies. Hmm, have you tried changing the sprite blend mode? 

http://pixijs.download/dev/docs/PIXI.html#.BLEND_MODES

 

Lots of things you can try.

1. On the sprite, set its smoothed property to true. sprite.smoothed = true.

2. Enable anti-aliasing when you create the game. e.g.

var enableAA = true; 

var game = new Phaser.Game('100', '100', Phaser.AUTO, 'game', null, true, enableAA);
3. Round pixels: 

    game.renderer.renderSession.roundPixels = true;
 

The solution should be one of those 3 options. 

 

 

[Taz]

Hi feudalwars. Thanks for the suggestions! Setting antialias option to true fixed it, BTW. Turns out I was using "antiAlias" instead of "antialias"

[ivan.popelyshev]

"antiAlias", "antialias", yeah, that happens  Glad you found it!