How do you create animations for different screen resolutions?

[aglem]

Hi all,

I think that´s just a simple question for you:

I generate images for my corona project with Adobe Illustrator. Because Illustrator is based on vectors, I can easily export the images in different resolutions to support phones as well as tablets.

Now I want to start a project with animations, based on sprites.

If I generate images and animate them with a tool like Spine 2D (http://esotericsoftware.com), I need to do the same animation for images in a higher resolution, isn´t it? Or is somewhere a tool which can handle vector based images?

I´ve read much blogs which tells that the people make images with Adobe Photoshop. I wonder how they handle different screen resolutions because Photoshop is based on pixels.

Well, I just want to ask you how do you handle that? I believe there is preferred way to do that.

Thanks in advance and best regards,

Alex

[bjsorrentino]

Hi Alex,

I think it depends on they type of art/images you’re doing. If you’re using non-vector artwork (i.e. Photoshop), a fairly good approach is to just design everything very large (for the largest display you plan on supporting), then down-sample to other sizes. At least in this case, you won’t have significant resolution loss like you would by scaling up.

Best regards,

Brent

P.S. - When dealing with sprites, you should build high-res image sheets (sprite atlases) just like you’d build hi-res static images.

[aglem]

@bjsorrentino

Hi Alex,

I think it depends on they type of art/images you’re doing. If you’re using non-vector artwork (i.e. Photoshop), a fairly good approach is to just design everything very large (for the largest display you plan on supporting), then down-sample to other sizes. At least in this case, you won’t have significant resolution loss like you would by scaling up.

Best regards,

Brent

P.S. - When dealing with sprites, you should build high-res image sheets (sprite atlases) just like you’d build hi-res static images.

Hi Brent,

thanks for your answer. I didn´t know that I don’t get significant resolution loss by down-sample images.

Thank you for your help.

Best regards,

Alex

[bjsorrentino]

Hi Alex,

Glad to help. It’s possible you’ll still get some loss of quality by down-sizing, but more likely it would be like jagged edges, or very thin lines getting blurred, depending on the art style.

The best approach is to test in Photoshop how it looks when down-sized, and (optionally) experiment with Photoshop’s “Resample image” options like “Bilinear”, “Bicubic”, “Bicubic Smoother”, “Bicubic Sharper” and “Nearest Neighbor”, as these algorithms can have a subtle effect (or potentially severe) effect on the down-sized result.

Best regards,

Brent

[bjsorrentino]

Hi Alex,

I think it depends on they type of art/images you’re doing. If you’re using non-vector artwork (i.e. Photoshop), a fairly good approach is to just design everything very large (for the largest display you plan on supporting), then down-sample to other sizes. At least in this case, you won’t have significant resolution loss like you would by scaling up.

Best regards,

Brent

P.S. - When dealing with sprites, you should build high-res image sheets (sprite atlases) just like you’d build hi-res static images.

[aglem]

@bjsorrentino

Hi Alex,

I think it depends on they type of art/images you’re doing. If you’re using non-vector artwork (i.e. Photoshop), a fairly good approach is to just design everything very large (for the largest display you plan on supporting), then down-sample to other sizes. At least in this case, you won’t have significant resolution loss like you would by scaling up.

Best regards,

Brent

P.S. - When dealing with sprites, you should build high-res image sheets (sprite atlases) just like you’d build hi-res static images.

Hi Brent,

thanks for your answer. I didn´t know that I don’t get significant resolution loss by down-sample images.

Thank you for your help.

Best regards,

Alex

[bjsorrentino]

Hi Alex,

Glad to help. It’s possible you’ll still get some loss of quality by down-sizing, but more likely it would be like jagged edges, or very thin lines getting blurred, depending on the art style.

The best approach is to test in Photoshop how it looks when down-sized, and (optionally) experiment with Photoshop’s “Resample image” options like “Bilinear”, “Bicubic”, “Bicubic Smoother”, “Bicubic Sharper” and “Nearest Neighbor”, as these algorithms can have a subtle effect (or potentially severe) effect on the down-sized result.

Best regards,

Brent