So today I began working on some pixel art. I created a simple magnifying glass as a 20x20 pixel art. My idea was to then import this image 4 times into synfig. Then, while using a spiral spline, have the 4 images follow the spiral and converge at the center (bonus question: how do I make a perfect spiral? I made mine by hand and thus is imperfect). Step 1: set the canvas to 50x50 pixels, and time from 0 to 36f at 24fps (1.5s anim)
Step 2: create the spline. Not too hard… only complaint is that the only way to end the spline (that I could tell) is by closing the loop, or clicking on the tool again. (middle mouse button would be more intuitive for me…)
Step 3: import image. Image is very small and “scale” parameter is 7.8x7.8…??? so I set scale to 30x30 (and it looks a little bigger than the normal image). I notice the image isn’t very clear so I set the image to scale via nearest neighbor. Much better. Now I zoom in a lot to see the image better.
Step 4: Link the image to the spline. I click on the image, then with ctrl I click the spline (so both are highlighted) and lastly right click the spline on the canvas and select link to spline. (bonus question 2: no matter what I did, the image would change angles based on the spline so I had to manually set the angle to 0 for all 36 frames…does anyone have a better way?). At this point, the animation looks pretty cool in synfig, but … see next step.
Step 5: preview. Boy this looks terrible. my magnifying glass is hardly recognizable in the preview. Even at quality 5.0 (max) the magnifying glass is no longer circular looking at 100% zoom.
Step 6: render. I use a sprite sheet for my game so I render it as a sprite sheet containing 37 horizontal columns. Look at created image. Yup. this looks terrible and unusable.
I’m guessing my problem originates from when I import the image. (why isn’t the image imported at native resolution, I wonder…) Does anyone have any hints/suggestions?
Hello,
Under Edit->Preferences->Editing there is switch to turn on ‘Scale to fit to canvas’. This ensures that the imported images are always at the same size as your animation. Of course, you can scale it back down or up afterwards if you like, it is only for the first import.
I am sure the import is not the cause of your problem. The nearest neighbor interpolation is the one to blame.
Nearest Neighbor colors the pixel, as the name implies, according to which other pixel is closest to it/ which other pixels covers it the most. If you have a pixel in your image that covers two pixels on the screen by 50% each, both screen-pixels would get colored. The original image would appear to be stretched. In case of your magnifying glass: looking terrible and unusable.
Unless you move your image a perfect integer amount each frame, this is practically unavoidable as it is inherent to nearest neighbor interpolation.
If you are just after the pixel art look I suppose you could render at a higher resolution or do the effect directly in the game engine instead of an animated sprite? I do not know what exactly your end goal is and, thus, cannot provide a better solution right now.
I hope this helps somehow,
best regards
Bonus answer 1:
To create the perfect spiral follow this mathematical formula: x(t) = c*t*cos(t); y(t) = c*t*sin(t) where t = time and c is a constant describing the ‘width’ of your spiral. If you want a more exiting spiral you can choose, for example, a log spline. Whatever you decide for, approximating a spiral by a spline will never be perfect.
Synfig has tools to animate using math formulas, but I never use them and thus cannot tell you exactly how they work.
Bonus answer 2:
The is a layer called ‘Translate’ that moves every layer under it by a its own transform. So you can create a group with a Translate-Layer and your image and link the Translate-Layer to the spline. The image will follow the Translate-Layer without rotating.