• jan@cosmigo.com

Improved sprite rotation


#1

Hi,

since there has been some progress in this field, will we get an improved sprites rotation that evens out jaggy edges ? Oh, and a numeric input would be nice :smiley:


#2

Yes, there is progress on this topic: floating selection with rotation. I should also improve the brush rotation. Concerning jaggies I need to do some experiments. There algorithms like “rotsprite” but yet I did not try all this myself. Still working on lots of refactoring along with adding the floating selection stuff. Let’s see how all this is going.


#3

Jan also please consider better graphic scaling especially going from a larger graphic to a smaller one. If done right this would help me expodentially.


#4

I’ve looked briefly into the newer rotating algorithms, but from what I saw I think that the best approach would be to offer different algorithms to chose from (for both rotation and scaling). None of these offers a best solution with every image, so chances are that one has to try them all and keep the best results.

In Photoshop, for example, when it comes to scaling one usually tries out all the various algorithms available in the scale dialog, tweaks the various settings, and sees which one works best for a given image.

My impression is that currently there is no perfect rotating or scaling algorithm for pixel art — and probably there’ll never be one, because of the very nature of pixel art being based on subtle vision perception effects resulting from fine tuning adjacent pixels by hand.


#5

@Morintari: can you give an example where it should work better? Larger to smaller should be good atm, but there are better algorithms for upscaling today but this is not what you mentioned.


#6

Yes when working on a stereo image the image must be identical when scaled smaller. If you need a visual reference I can provide one thank you Jan any help is greatly appreciated.


#7

Jan I think I may have a solution. We both know when you scale something you throw away information to make it smaller. what if there was a way to mark like highlight the information that you want we’ll call that boundary the information that you don’t want we’ll call that space.Now you just highlight the boundary and leave the space that can be thrown away to be smaller.Now you could just scale that but leave the selected information in tact while throwing away the space. You could call this smart scaling. I’m sure there are many applications for this not just 3-D Thanks Jan any help is greatly appreciated.


#8

The easiest way I see that we can do this without too much of an interface is we can make the option through the layers pallete and menu. Please let me exsplain. In the layers pallete a user could hide all layers except the top 2 the top layer would be the layer that would have the “boundry” infomation the layer directly below it would be the “image layer”.the user would then go up to the layers pallete and select “smart scalling”. a dialog would come up asking the user which color or colors did he use for the boundry. On that dialog there would be a button that reads render. and voilia smart scaling with minimal interface. As usual any help is greatly appriciated.Your the best Jan thank you for all you have done in the past.


#9

@Morintari, this approach seems overtly complicated, especially the inter-layer part.

It seems like what you really mean is a masking-based approach to scaling. I think that using selections is the simplest thing — i.e. only pixels inside the selection mask get scaled. For more complex uses, it should be up to the user to create a custom shape to delineate the mask, and use it as a reference to create selections and apply them across different layers.

Preserving information during scaling seems difficult to achieve via algorithms, whereas just keeping a copy of the original image and reapplying selected parts from it on the scaled versions seems easier to do on the user side, manually.


#10

I too would love to see advanced interpolation options in Pro Motion, for transforms.

Better algos for transforms in Pro Motion means users would need less third party niche tools, like Rotsprite.

Preserving information during scaling…

Made me think of Photoshop’s “smart objects” feature.
FYI - In PS, any layer can be converted into a smart object.
Doing this encapsulates that layer in a new document. It becomes a document within a document.
You can no longer draw in that layer or directly edit it in the parent document but you can transform it all you want, lossless. In order to edit the pixels in your new smart object you must open it just like you do any document.
When you open and save changes made to the smart object layer’s content, it automatically updates inside the original parent document. This means you can scale and rotate those pixels as many times as you want without continually degrading the pixel information.

While smart objects are absolutely vital to how Photoshop is used these days, this type of feature isn’t needed for Pro Motion, imo.
But this type of thing is likely what’s required to be able to “preserve” information during transforms.


#11

Using RotSprite or something similar (need to do experiments) is planned for the new transformation tool set. Don’t know if all this will work. I’m looking for algorithms that can do the job well not only when rotating but also with free transform.


#12

Awesome as always Jan@cosmigo. You never disappoint!


#13

Here are some Ideas that I found, one I don’t understand and the other I do.

Here’s the one that I don’t understand.

https://colececil.io/blog/2017/scaling-pixel-art-without-destroying-it/

the one that I do understand is this

http://www.drpetter.se/project_vectorize.html

What I see out of this one is there can be a basic scaling and rotation and there can be a smart scaling and rotation .The smart scaling turns the graphic into a vector and lets you render it. You can continue to render it at little or no cost to cpu when you are done, you can then throw away the vector information and just leave the rendering/s.


#14

Thanks for the resources. Very interesting!


#15

Jan@Cosmigo I should be thanking you for the awesome program! At any rate your more than welcome!


#16

That is a quite famous article on how to use shaders to scale pixel art in video games without degrading images quality. The first part of the article goes through the classic scaling algorithms (like the ones which Photoshop presents you with when you scale an image) and presents an overview of how those algorithms operate on the pixels to scale the image.

In the second part it goes into the details of how he implemented a shader for scaling pixel art (actually, more than one shader, but since they work together they can be considered as one). Video game engines rely a lot on shaders for special effects, boths in 3D and 2D games. In that article, the shaders are for the Unity engine.

The powerful aspect about shaders is that they operate directly on the graphic card processor unit (GPU), which has some dedicate technologies for handling 3D rendering, and shaders are one of them. Shaders are fast and can be used for a moltitude of effects, from water waves effects, fire, smoke, to 2D images manipulation. So the author thought of using shaders for scaling pixel art in a smart way, letting the GPU handle the details.

Unfortunately, programming shaders is a bit of a pain — they have a limited language, and it’s hard to use. It’s all to do with low level manipulation of vertexs, and involve lot’s of math notions (trigonometry mostly, I think).

In any case, all game engine offer a way to scale images, and usually they employ algorithms like those mentioned in the first part, which don’t work really good for pixel art.

As for the vector approach of the second article, well of course vector images can be rotated and scaled without any losses. There are tools to convert a pixel art image to a vector image (e.g. SVG) so that the image retains it’s pixel blocks style (i.e. no attempt to smoothen edges), But the hard part is optimizing that SVG, so it’s not a huge collection of squares.

The problem with vector images is that they can be computationally expensive, because they’re made of relative coordinates for lines, esges, curves, filled surfaces and colors, which is why they scale losslessy. Also, not all game engines support vector images.

I’ve experimented converting pixel art to SVG vectors, and I like the fact that you can include them scaled-up inside a document and still retain that retro-look delivered by the square pixels. But when you rotate them the retro effect vanishes because the squares are no longer perpendicular.

Some videogames exploit similar techniques successfully, and manage to find a balance between “pure” retro-school pixel art and more modern approaches by mixing 2D images and a 3D scebe, using shaders, lights and ambience, and even mixing images with different pixel proportions.


#17

Thank you tajmone for your explanation. much appreciated.