How do you deal with ugly edges?

[shibekin69]

Hi,

 

I'm trying out Spriter with a 2D graphic I made using a vector app and exported as PNG parts. The curved lines are thick enough and look nice and 'crisp' or rather 'smooth' so to speak. Solid colors and solid lines were used. When I use them in Spriter and subsequently in HaxeFlixel, I notice that the curved lines are not rendered perfectly anymore and looks ugly depending on the resolution of the of the images. More so if they have been rotated. I don't know what the industry term for this is, but what do you guys call it, and what do you do in your work flow to avoid this?

 

For example:

 

 

The one on the left is running on Flash using SpriterHaxeEngine, and on the right, is what I see on the Spriter Editor after dragging and dropping the image parts. You can see the subtle imperfection on the rendering on the left.

 

 

[Mike at BrashMonkey]

Hi shibekin69,

 

That would depend entirely on the filtering method used by the game engine.  There's likely nothing you can do about this in Spriter itself.  I'm afraid I can't offer any useful advice, as I've never used HaxeFlixel.

 

I did a quick Google search and maybe his will help... but I'm really not sure.

 

http://forum.haxepunk.com/index.php?topic=513.0

 

-Mike at BrashMonkey

[shibekin69]

Hi Mike,

 

Thanks for the reply. I think that clean, plain, solid shapes and objects will simply make these imperfections stand out. I notice these even slightly in HTML5 via Construct 2. PNG sprite sheet export might be my best bet for now. From an artistic and technical standpoint, would you happen to have tips on sprite creation best practices, what to avoid etc?  Or maybe point me to a site that can give me pointers on making game graphics with such advice? :)

[shibekin69]

Ok, I think I figured this out. Since my output target is Flash and this thing basically resizes the SWF content to fill the Flash Player's window, I'm basically not looking at my work at 100% actual size. Smaller by a couple of pixels as I've set my stage's height to be 800, while my notebook can only do 720 pixels. So since this isn't vector, I've been looking at a rough resizing of bitmaps all this time.

[shibekin69]

And another thing while working with SpriterHaxeEngine, to get rid of the animation jitters, and visual aliasing and shearing, you need to apply the following in FlixelLibrary.hx of SpriterHaxeEngine (spriter/library/FlixelLibrary.hx), in the addGraphic function:

 

After var sprite:FlxSprite declaration, add...

 

//Smoothen each bitmap. Kills alias and shearing

sprite.antialiasing = true;

 

//Smoothen minute animations. Kills jitters

sprite.pixelPerfectRender = false;

 

Performance may be affected, so these may need to be adjusted if you need speed.