Jump to content

Jagged Lines on Rotated Images


Recommended Posts

Hello all, wondering if anyone knows how to solve this issue.

Working on some assets for a game and I've been creating them in Illustrator and exporting them as png's. As an example:


In Spriter of course I have the individual parts separated with bones. Anywho, in Spriter, to animate any piece, if I rotate any of the parts, the lines become jagged. Here's a gif example, if you look at the "ears" on this robot, you see whenever he tilts side to side, and the images are no longer straight, the lines are jagged. 


Note Edit: welp, a gif is obviously not the best way to showcase this as the gif is already so low quality ha, so here's also one frame of the animation, an exported png from Spriter:


So... is this an issue coming from my original png's from Illustrator, with anti-aliasing settings or anything like that? Or is it something within Spriter? Looking in the gallery forum for others' works with Spriter, I notice that a lot of people have jagged lines in their animations as well with any movement or rotations...


Link to comment
Share on other sites

it doesnt matter if you use spriter files directly cause in your game engine it will be fine , smooth sampling is enabled in modes ?

Guys were working on diffferent sampling algorithms about year ago but nothing came out of it, i too would like to see several options like bicubic or lanczos method so jaggies on straight lines wont be so visible when rotating.

I guess its not a priority because spriter animations can be played back in realtime in game engines so they dont care that much about exporting to png's and interpolation methods


Link to comment
Share on other sites

I know its a bit of  a hacky solution. But it might be helpful until we can add more filter options...Maybe try exporting at 2oo percent scale, then reduce the exported frames to 50 percent (this will bring it back to 100 percent size and anti-alias the edges.)



-Mike at BrashMonkey

Link to comment
Share on other sites

Thanks for the replies.

@BrashAdmin And actually I've been doing that already! The assets I made were larger than we needed them to be for the game, so I've been exporting them out of Spriter at 50% anyway.

Or do you mean export out of Spriter at 200% size, then reduce to 50% size externally with another program afterward?

In game though, the lines are still becoming jagged though. Like the final image I posted, with the still frame of the robot tilted, that is how it looks in game. The jagged lines are visible for all the animations in game.

EDIT: @bwwd Question, what do you mean about Spriter animations being able to be played directly in game? Currently I've been just exporting image sequences to be used in game...

Link to comment
Share on other sites

Yes, I meant export them from Spriter bigger than you need, then use an external program to reduce them using whatever flitering method you desire.

I'm confused, are you using exported full frame image or sprite sheets in your game, or the actual Spriter file? If you're using a Spriter implementation to playback Spriter files in the game, then there's no need to export them as full frames, and if you're using the Spriter files directly in game, then the jagged rotating has nothing to do with Spriter and everything to do with the filtering settings in whatever game engine you're using.



Link to comment
Share on other sites

Hmm, alright I've tried that method - exporting at 100% within Spriter but then scaling down in other software to 50%. Unfortunately I am still getting the same issues.

Currently I have been exporting image sequences. "separate numbered image files", which we've been using in game.

How can I use the Spriter file directly in game? That seems like it'd be a lot better way to also save space. 

And yeah, we are looking at filtering settings now for the game. 

Link to comment
Share on other sites

Yeah I've been using Photoshop to test these out. I think the problem is the image I am bringing into Photoshop is the exported png from Spriter, which already has the jagged edges, so Photoshop can slightly smooth it out, but it still won't be as good as if the original png was already anti-aliased smoothly. 

It's actually a mobile game we are creating with libgdx, for Android. 

Link to comment
Share on other sites

Jagged edged angles reduced to 50 percent should clean up and smooth out quite alit, unless you're using nearest neighbor scaling in Photoshop, which is an option but not the default. Would you mind emailing me one of these full sized png frames out of Spriter? ( mike@brashmonkey.com )

Also, I found this but am not sure how current it is or what features are supported yet etc. https://github.com/Trixt0r/spriter

I suggest you contact the creator of this run-time for further questions if the documentation they offer is not adequate.

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...