6 Replies Latest reply on Mar 31, 2016 1:52 AM by ddhayles

    Hi-DPI quality

    ColbyFulton Level 1

      How do you get the published files to look sharp on retina displays? Even the text looks blurry. Old .swf files were nice and sharp, and same with Edge files. Help!

        • 1. Re: Hi-DPI quality
          oneuppedgames Level 1

          I use .SVG instead of PNG / JPG. That seems to upscale properly on Retina / Mobile (as it is vector). Also make your text into .SVG (don't forget to 'create outlines').

          • 2. Re: Hi-DPI quality
            marjantrajkovski Level 4

            Like for any other images on the web, for retina good looking use doubled sizes.

            • 3. Re: Hi-DPI quality
              ddhayles Level 3

              The problem with double size images is that they look great on retina screen but will look blurry on non retina screens.

               

              As Edge doesn't natively support x2 images along side normal images, you have to choose which you prefer. However there is a way of hacking into the published edge.js file to make the browser automatically select retina or non retina images. I did this once before so i'll try and dig out my code and paste it here.

               

              1 person found this helpful
              • 4. Re: Hi-DPI quality
                ddhayles Level 3

                OK, so this simple piece of code will allow you to use “retina display images” in your Edge Animate project.

                 

                Once you have saved your EA project for the first time open up the HTML file and copy the following code above the line that says <!--Adobe Edge Runtime-->:

                 

                <script>

                  function getDevicePixelRatio() {

                  if(window.devicePixelRatio === undefined) return 1; // No pixel ratio available. Assume 1:1.

                  return window.devicePixelRatio;

                  }

                  if(getDevicePixelRatio() > 1) {

                  var im='imagesRetina/';

                  } else {

                  var im='images/';

                  }

                  </script>

                 

                This script checks your display type.

                 

                Next continue as you normally would when building your project placing all your images in the image folder.

                 

                Once you have completed your project, publish it and create a second folder in the published ‘web’ folder called imagesRetina, place all your retina images in here.

                 

                Now open up the yourfile_edge.js file from your published folder, find and delete the following piece of code:

                 

                var im='images/',

                 

                Save the file and test.

                • 5. Re: Hi-DPI quality
                  resdesign Adobe Community Professional & MVP

                  Thanks for posting this. This will help people.

                  • 6. Re: Hi-DPI quality
                    ddhayles Level 3

                    No worries, if I can find an improvement to the initial script i'll post an update.