User Tag List

Results 1 to 6 of 6

Thread: My vector-built backgrounds and sprite images have jaggies, stair-stepping... ?

  1. #1
    Clicker Fusion 2.5

    Join Date
    Jun 2017
    Posts
    47
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    My vector-built backgrounds and sprite images have jaggies, stair-stepping... ?

    So I tried finding an answer on my own but got nowhere so I figured I'd go to the experts here. I notice that my vector-built backgrounds and sprite images have jaggies and a stair-stepping look to them. Not sure why this is. I have checked and unchecked Anti-Aliasing, no difference. I am running the game in 1920 x 1080 although I noticed that it doesn't seem to matter what res I choose, all of the vector-based png images have jagged outer edges. I saved them at 300 dpi, btw.

    The images were created in Inkscape (vector) and exported to png format. Here is a screen shot (in-game, Fusion running) so you can see what I'm talking about:

    image_example.jpg

    Here is another example, this one shows a smooth on-screen image (although blurry, not sure why that is, it looks sharp actually) when I am building the game in Fusion:

    sprite_example_1.jpg

    But then when I actually run the game, the image has stair-stepping:

    sprite_example_2.jpg

    Maybe the term "stair-stepping" isn't entirely accurate -- but the images kind of look like they were cut with scissors around the edges, if you look closely. I know I must be doing something wrong because I've seen amazing pro-looking games like The Escapists running on Fusion (although admittedly that game is a pixel game which is not "smooth" looking at the edges.)

    Any advice is appreciated : )

  2. #2
    Clicker

    Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleXNA Export ModuleUnicode Add-on
    mobichan's Avatar
    Join Date
    Oct 2007
    Location
    Buffalo, NY
    Posts
    3,310
    Mentioned
    28 Post(s)
    Tagged
    0 Thread(s)
    I am not seeing a difference between your 2 images. You need to make sure you are saving your images out as 24bit pngs and not 8bit. That will give you an antialiased edge. The aliased edge (what you call stair stepping) is because you aren't saving with an antialiased alpha channel. Not sure how your vector program handles this.

    As for blurry images, you need to consider all vector art looks crisp in its native format. It is just using math to calculate how to display it. Once you save it to a bitmap file format, you are rasterizing (committing) the image to a specific number of pixels. The lower the size, the blurrier it will be.

  3. #3
    Clicker iOS Export ModuleInstall Creator Pro
    Dex's Avatar
    Join Date
    Jun 2015
    Location
    West Yorkshire, England
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because I work with graphics a lot I can see a diff in the pictures. One looks like its edge is more rounded and smooth while the other has defined square points on it and its not smooth.
    I don't know why it looks like that but apart from what Mobichan has said, I want to add a workaround for this which will help you.

    Back in the day when I programmed games for the 68000 machines we sometimes ran in to the problem of jaggies. In those times when I was making sprites I had to use HAM mode and calls to the Copper to get 4096 colours in to the sprite....Or sometimes we used a colour seeding method to make it look like more colours on screen.
    However, long story short, sometimes because of the jaggies problem, we used a technique to cheat based on something called a disruption pattern (like a moiré pattern).

    What we did was to to take a sprite, and make a copy of it then remove everything but the edge of the sprite.
    We then used a simple method to break up the outline by using a graphic filter set up with a "nearest colour match" parameter.

    What we got at the end was a dotted outline of the sprite.... like this: specshow.png

    Now the clever bit.... We simply overlay the outline on to the sprite with the jaggies and ta-da..... fake AA....no more jaggies.

    So in Fusion, make a copy of your sprite and then make a disruption pattern (use greyscale or if you really want to do it exact let your paint package smooth out the edge for you and just "Cut" the edge away and save it).

    Next in your program put the sprite and the disruption pattern at the same co-ords and bang.... problem solved.

    Hope this helps you a bit. Yes it is a little more work and yes it is a very old way to do it, but it DOES work and it will solve your problem with jaggies.

  4. #4
    Clicker Fusion 2.5

    Join Date
    Jun 2017
    Posts
    47
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dex View Post
    Because I work with graphics a lot I can see a diff in the pictures. One looks like its edge is more rounded and smooth while the other has defined square points on it and its not smooth.
    I don't know why it looks like that but apart from what Mobichan has said, I want to add a workaround for this which will help you.

    Back in the day when I programmed games for the 68000 machines we sometimes ran in to the problem of jaggies. In those times when I was making sprites I had to use HAM mode and calls to the Copper to get 4096 colours in to the sprite....Or sometimes we used a colour seeding method to make it look like more colours on screen.
    However, long story short, sometimes because of the jaggies problem, we used a technique to cheat based on something called a disruption pattern (like a moiré pattern).

    What we did was to to take a sprite, and make a copy of it then remove everything but the edge of the sprite.
    We then used a simple method to break up the outline by using a graphic filter set up with a "nearest colour match" parameter.

    What we got at the end was a dotted outline of the sprite.... like this: specshow.png

    Now the clever bit.... We simply overlay the outline on to the sprite with the jaggies and ta-da..... fake AA....no more jaggies.

    So in Fusion, make a copy of your sprite and then make a disruption pattern (use greyscale or if you really want to do it exact let your paint package smooth out the edge for you and just "Cut" the edge away and save it).

    Next in your program put the sprite and the disruption pattern at the same co-ords and bang.... problem solved.

    Hope this helps you a bit. Yes it is a little more work and yes it is a very old way to do it, but it DOES work and it will solve your problem with jaggies.
    Thank you so much for the idea. Man, I love this community!

  5. #5
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Fusion 2.5+ DLC (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    Volnaiskra's Avatar
    Join Date
    Jan 2014
    Location
    www.sprykegame.com
    Posts
    2,567
    Mentioned
    133 Post(s)
    Tagged
    0 Thread(s)
    I too struggled to see a difference, perhaps because I'm on a phone, though I see now that the outer edge on the left is less gracefully curved in the lower image. It doesn't like like aliasing though. It looks like the vectors are being calculated differently, with one being more angular than the other. But I don't understand how this could happen in Fusion after importing an already raster image.

    Part of the problem with seeing the problem on our end is that your images are covered in blocky jpg artifacts, so it's hard to distinguish that from your real problem. Since you're exporting to png, the jpg conversion must happen later on: probably in your screengrab program, or maybe in the forum attachment. Try uploading a png to imgur.com and linking or embedding that instead.

  6. #6
    Clicker

    Fusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleXNA Export ModuleUnicode Add-on
    mobichan's Avatar
    Join Date
    Oct 2007
    Location
    Buffalo, NY
    Posts
    3,310
    Mentioned
    28 Post(s)
    Tagged
    0 Thread(s)
    Yea, the images are jpg format, so it is very hard to see any difference in the way the pixels are arranged. You can try Dex's suggestion, but it honestly seems like overkill. You just need to export your vectors to a png with a 24bit alpha channel. F2.5 will import that and you will have a smooth result. But as I said before, you are always going to get a certain amount of blurring due to the rasterization process. And different programs will give different results when rasterizing.

Similar Threads

  1. Sprite Editor - Eraser Filling Sprite with White
    By bcgreen24 in forum Fusion 2.5
    Replies: 4
    Last Post: 10th May 2017, 01:37 PM
  2. Importing Sprite Images
    By gondracorn in forum Multimedia Fusion 2 - Technical Support
    Replies: 1
    Last Post: 3rd March 2014, 02:26 AM
  3. Save backgrounds as compressed images within the game?
    By Tsun in forum Multimedia Fusion 2 - Technical Support
    Replies: 22
    Last Post: 10th April 2013, 09:00 AM
  4. Vector Images
    By Bruto in forum SWF/Flash Export Module Version 2.0
    Replies: 7
    Last Post: 28th March 2010, 02:28 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •