thewrongvine Posted December 11, 2015 Report Share Posted December 11, 2015 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... Thanks! Quote Link to comment Share on other sites More sharing options...
bwwd Posted December 11, 2015 Report Share Posted December 11, 2015 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 http://brashmonkey.com/forum/index.php?/topic/3394-great-algorithm-for-rotating-pixel-art-sprites/#comment-10343 thewrongvine 1 Quote Link to comment Share on other sites More sharing options...
Mike at BrashMonkey Posted December 12, 2015 Report Share Posted December 12, 2015 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.) cheers. -Mike at BrashMonkey Quote Link to comment Share on other sites More sharing options...
thewrongvine Posted December 12, 2015 Author Report Share Posted December 12, 2015 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... Quote Link to comment Share on other sites More sharing options...
Mike at BrashMonkey Posted December 12, 2015 Report Share Posted December 12, 2015 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. Quote Link to comment Share on other sites More sharing options...
bwwd Posted December 12, 2015 Report Share Posted December 12, 2015 its a mistake to export with 50% scale, this introduces jaggies, a lot of them, export with 100% scale and scale down to 50% in other software.I mean i do export with 60% scale sometimes but im after sprite look and visible pixels so i dont mind. Quote Link to comment Share on other sites More sharing options...
thewrongvine Posted December 12, 2015 Author Report Share Posted December 12, 2015 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. Quote Link to comment Share on other sites More sharing options...
Mike at BrashMonkey Posted December 12, 2015 Report Share Posted December 12, 2015 What program are you using to reduce the images? If you're using something like Photoshop or Krita it should certainly smooth out the jagged edges at least somewhat during a 50 percent scale. Which authoring system or language are you making your game with? Quote Link to comment Share on other sites More sharing options...
thewrongvine Posted December 12, 2015 Author Report Share Posted December 12, 2015 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. Quote Link to comment Share on other sites More sharing options...
Mike at BrashMonkey Posted December 12, 2015 Report Share Posted December 12, 2015 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. Quote Link to comment Share on other sites More sharing options...
thewrongvine Posted December 12, 2015 Author Report Share Posted December 12, 2015 Okay I've emailed you the png. And sweet, I'll check out that importer. Thanks for the search! Quote Link to comment Share on other sites More sharing options...
Mike at BrashMonkey Posted December 13, 2015 Report Share Posted December 13, 2015 Would you mind sending me your Spriter project (just zip up the folder with the scml and all the images it uses)? I'd like to try an exporting method to figure out what can get you the best results. if so, please send to mike@brashmonkey.com Quote Link to comment Share on other sites More sharing options...
thewrongvine Posted December 18, 2015 Author Report Share Posted December 18, 2015 Sorry about the delay, have been swamped with some work. Alright I've sent you a zip containing the folder with everything. Just for simplicity's sake I created a new file with just a quick simple animation to avoid having the clutter of all the other random images my original scml came with. Thanks! Quote Link to comment Share on other sites More sharing options...
Mike at BrashMonkey Posted December 18, 2015 Report Share Posted December 18, 2015 I exported from Spriter at 400 percent, then reduced by 25 percent (in photoshop..krita or gimp should do as well ) and got some very smooth results, as you see here.. If you have to go the sprite-sheet rout, I suggest you use this method. thewrongvine 1 Quote Link to comment Share on other sites More sharing options...
thewrongvine Posted December 18, 2015 Author Report Share Posted December 18, 2015 Woah, very nice! I will give this a shot. We will also try implementing the .scml files directly into our game and see if that ends up working. Thank you for all the sleuthing and testing around sir! Quote Link to comment Share on other sites More sharing options...
Mike at BrashMonkey Posted December 19, 2015 Report Share Posted December 19, 2015 Very glad I was able to help. Quote Link to comment Share on other sites More sharing options...
thewrongvine Posted December 24, 2015 Author Report Share Posted December 24, 2015 Random update but perhaps someone else will come across this later, but the spriter/libgdx importer worked, so we are using that now. Results are much cleaner with the direct spriter file being used! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.