Jump to content

How do you deal with ugly edges?


Recommended Posts



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.



Link to comment
Share on other sites

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.




-Mike at BrashMonkey

Link to comment
Share on other sites

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? :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...