Designing skins optimised for Retina displays

[Andrew H]

I am working on a project where I would like the skin to be optimised for viewing on Retina displays, so that the controller buttons take advantage of the much higher pixel density of these screens and thus look crisper than they do on an older, non Retina screen.

I guess one way to do this would be to draw my buttons and create .png files at twice final size and then place them in the skin with the scale setting at 50%.

A drawback of this approach is that the skin editor's WYSIWYG window displays the buttons at their full size and ignores the scale instruction, which makes it difficult to visually place them relative to other elements.

Anyone have any ideas, please?

Regards

Andrew

[Hopki]

Hi Andrew,
Use SVG buttons, SVG's will be used in the HTML5 output and look good with the retina display as long as they are not scaled.
Flash will convert to png as it can not use SVG. However its still good to use the SVG in the skin as you can resize the SVG and then when you output it will be good quality.

For sharp images in Flash use SWF, you can convert an SVG to SWF in Adobe Illustrator or similar program. The same as SVG, they will look good as long as you don't scale them.
Regards,
Hopki