gotcha

Author Topic: Trace Pixelart not working with transparent background like i want to  (Read 2645 times)

August 19, 2017, 10:58:35 AM
Read 2645 times

RifleRound

  • Sr. Newbie

  • Offline
  • **

  • 4

sooo... i want to make a video game and im using Inkscape to make my pixelart to more beautiful graphics

Im using "Trace Pixelart" on this sprite


The result is unsatisfying:


It would be satisfying if the vector graphic i get from "trace pixel art" would be like... if the pixel art would have a WHITE background instead a transparent background . Like this:





^but this image is useless for my game, since i want a transparent background, and not a white background.

How do you use "trace pixelart" ... with... getting... the desired... vector graphics out?
Or..
Is there a "quick way" to do this?
I played with the numbers already.

August 20, 2017, 12:59:14 AM
Reply #1

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
Welcome to the forum!

I'm not clear what you're asking.  It seems you've contradicted yourself.  You've said that you want a WHITE background in one place and a transparent background in another place.

When I use the default settings for TPA on your original image, I get a transparent background.  If you want a white background, you'll need to draw a white rectangle the same dimensions as the image, and then put it behind.

Or if you can clarify what you're asking, we'll try again  :)
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

August 20, 2017, 05:51:51 AM
Reply #2

RifleRound

  • Sr. Newbie

  • Offline
  • **

  • 4
the 2 example images are ... wrong.

the ugly one is in fact transparent and the transparent one has a white background.

August 20, 2017, 06:44:46 AM
Reply #3

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
What?

Which one is ugly?

How can it have a transparent background and a white background?

I'm going to go out on a limb and  try to guess what you're talking about (although my track record for mind-reading is not very good).  There's a very thin gap between each object, so that if you put a white background behind it, looks like a thin white line between objects.  If you put a red object behind it, it would look like a thin red line.  Is that it?

First, at the size of the original objects, that gap will probably not show up.  So you probably don't need to do anything.  Try putting it at 100% zoom and find out.  I mean they look like approx 16 x 16 px icons.  I can't see the gap at their original size.

Second, the easiest way to get rid of it will be to add a stroke to each object, which is the same color as each object (black stroke for black pieces, gray stroke for gray pieces, etc.).

Third, the best way to get rid of it is to manually edit each and every piece.  By nodes,  using the Node tool, make objects underlap each other.  Don't move the objects, but move the nodes.

If that's not what you meant, please try again to explain it
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

August 20, 2017, 07:45:29 AM
Reply #4

RifleRound

  • Sr. Newbie

  • Offline
  • **

  • 4



The first row is showing what i do to get the unsatisfying image:
I insert a pixel art with transparent background - i get ugly vector graphic.

The second row is showing what i do to get the satisfying image but with unsatisfying (white) background:
I insert a pixel art with white background - i get beautiful vector graphic, but with white background.

Current solution:
currently im doing a gimp import and changing the white to transparent and export
But Gimp changes the colors from white to grey, instead leaving them with grey-transparent outlines.
Which causes shader errors.

What I really want is to get that transparent background-vector in Inkscape

i hope this image proves useful

August 20, 2017, 07:57:07 AM
Reply #5

Moini

  • IC Mentor

  • Offline
  • ******

  • 1,568
    • VektorRascheln
I think you can just ungroup and remove the white background on the trace result.

August 20, 2017, 09:13:01 AM
Reply #6

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
Ok, so comparing the first rectangle on the top to the 2nd rectangle in the middle.  The first one starts with the image with a transparent background.  The 2nd one starts with the image on a white background.  Where does the white background come from?  Do you just have 2 different raster versions of the image?

If so, are they absolutely identical, except for the background?  Because when I use your original with transparent background, I get a very different result from you.  Is there any chance you accidentally used the wrong image or something?

Can you provide both versions for us to test?  I don't understand why there should be any difference in the results, if the only difference in the originals is the white background.

I'm guessing that Moini is right, that you just need to Ungroup the results, and remove the white background.  Or if you don't want to ungroup, you could use Ctrl + click to select the white rectangle, and then delete.

But personally, I'm curious why the white background should make any difference, if the image is otherwise identical.  So that's why I wanted to test both versions.  I got the one with the transparent background from your first message.  But the way you showed the one with the white background, I can't get to it.
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

August 20, 2017, 10:41:06 AM
Reply #7

RifleRound

  • Sr. Newbie

  • Offline
  • **

  • 4
How did you import the pixel art?

perhaps it has to do with the import settings :-/




Transparent Original PNG



Which gets me This:
(Blocky but Transparent)
http://svgshare.com/i/2gZ.svg


Whitebackground Original PNG


Which gets me This:
http://svgshare.com/i/2gm.svg


I think maybe i messed up some configuration about trace pixel art?

 :-S


Where does the white background come from? 

I made it, so i get more beautiful vectors from the "Trace Pixel Art" function of Inkscape  :-D

If so, are they absolutely identical, except for the background?

Yes

Is there any chance you accidentally used the wrong image or something?
No

August 20, 2017, 11:20:44 AM
Reply #8

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
You may be onto something with the import settings!  If you choose "blocky (optimizeSpeed) you'll literally get the pixels.  That would seem to be the ideal for tracing pixel art!

Just saved the files and I'll test.

Edit
Well, I mean the blocky import option would seem to be ideal if you want to preserve the pixel art appearance.  If you don't want to preserve that appearance, use the auto option (or smooth).
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

August 20, 2017, 11:49:43 AM
Reply #9

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
Interesting!  I guess it must be the anti-aliasing which accounts for such a difference between the transparent and white background versions.  I wouldn't have thought it would make that much difference.  But I guess being such small images.....requiring so much zoom to really see them, where the difference really seems exaggerated.

Anyway, as I said, if you want to preserve the appearance of pixel art, import with the blocky setting.  If you want the pixel art appearance to not be there, use either auto or smooth option for import.  And also use the original with the white background.  And then you can remove the background from the result.  (Ungroup > select > delete.  Or Ctrl + click > delete)

Or if you don't want the pixel art appearance, you could start out not using pixel art for the trace.  If pixel art is all you have, then you could just slightly scale the image up, and that would pixelate it, which would have the effect of blurring the pixels.  Or if GIMP has a blur tool, you could use that, and not need to scale it.  Then use that slightly blurred one for the trace.
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann