17 Replies Latest reply on Apr 7, 2016 9:33 AM by Ivo Marinovic

    Snapping to whole pixel (pixel perfect animation)

    Ivo Marinovic Level 1

      Hello there!

      I have problem. Actually, I always had this problem, but now I have to make 50 different shape animation and the problem erupted. It's really hard to retain clean edges. When "show grid" enabled and you try to create rectangle it does create pixel perfect rectangle, but soon as you move it, scale it, change path or whatever causes it shape change...mess. It's blurry (talking about mouse movement). If you zoom out to 100% and move when grid visible it's ok, but not possible to work. If zoomed in, it doesn't snap to pixel.

      I understand why sub-pixel rendering, anti aliasing and everything behind the scene, but is there any workaround or fix? Like holding SHIFT in Photoshop? So it snaps to whole pixel. Between 2 key frames I don't care if it goes sub-pixel, but in the final or start position I want is snap to pixel. Part of my problem is solved with draft view, but what with shapes that aren't squares?

      I found that Motionwerks has the solution with the rounding script, but that too leaves out the problems when prior pasting script shape positioned at .125 pixel. And what about masks? Ellipse? Point animation?

      I really hope that someone found workaround or adobe makes ae possible to be pixel perfect, because flat animations are really all present and really need to be sharp!

      Any help or suggestion will be highly appreciated! Thanks!

        • 1. Re: Snapping to whole pixel (pixel perfect animation)
          Mylenium Most Valuable Participant

          Long and short: No. I'm not even sure how you arrive at the conclusion that curved shapes could ever be "pixel perfect". They look would look eroded. The real trick is to manipulate the edge colors and Alpha ever so slightly, so the antialiasing pattern changes favorably or is disguised by the blending. In fact you will not even want a circle to be perfectly aligned in such a way its boundaries fall into whole pixels for the simple fact that it looks like it was cut off. Somehow your question/ request doesn't really make much sense - to me, anyway.

           

          Mylenium

          • 2. Re: Snapping to whole pixel (pixel perfect animation)
            Rick Gerard Adobe Community Professional & MVP

            If you are using the pen tool then no, if you are using parametric shapes then yes. Just use the rectangle size, anchor point, position or the layer position properties and make sure that things are in whole pixels and that you rectangle is in even numbers.

             

            I think that you are obsessing about something that usually doesn't matter in video. The only time that perfect pixel matches makes any difference in video is when you have very thin lines. Generally you need lines that are at least 3 pixels wide to be effective in video. You can never judge the final quality of your video file by looking at a single frame in AE at more than 100% magnification factor and full resolution. The only way to judge the final quality is to look at the final render in the delivery format on the intended screen at full resolution and full size. Anything else is a false representation of your final quality.

            • 3. Re: Snapping to whole pixel (pixel perfect animation)
              Ivo Marinovic Level 1

              Thanks both of you. I see you both are experienced, so wmaybe I didn't

              explained well enough.

              I know that ellipse cannot be pixel perfect along the border, but at least

              I expect edges to match the grid.

              Most of my problems goes to point animation where the point doesn't snap to

              grid. I really need it perfect, because I'm exporting svg and use it later

              for web. This plugin that I use, bodymovin, made by Hernan Torrisi does the

              job perfect, but i need to use shapes and masks. No blending modes, no

              effects etc. That's why. Thanks anyway.

              • 4. Re: Snapping to whole pixel (pixel perfect animation)
                Rick Gerard Adobe Community Professional & MVP

                You need to research exporting SVG. After Effects does not deliver vectors in any way shape or form.

                 

                 

                And if you use the Ellipse Tool you can still use position and your point and size data to make things perfectly line up. You will have to take into account your stroke with.

                • 5. Re: Snapping to whole pixel (pixel perfect animation)
                  Ivo Marinovic Level 1

                  I did. Plugin really does everything as supposed to. It exports .json file.

                  Plugin is not the problem. Problem is point not snapping to grid. Nothing

                  else. I would really appreciate help or workaround. I do that with the

                  keyboard holding shift button until the esge is clear. Really slow and

                  painfull.

                  • 6. Re: Snapping to whole pixel (pixel perfect animation)
                    Rick Gerard Adobe Community Professional & MVP

                    Use the numbers, as I said. You just have to use the math. Here it is at 1600% magnification factor.

                    perfect.jpg

                    The white edge of the 2 pixel width stroke is perfectly aligned with the grid for about 4 pixels when the ellipse is 800 X 400. that's how the math works. That's as good as it gets.

                     

                    I don't know how the plug-in converts pixels into vectors but I'm guessing that it draws jaggy lines. You can test this by creating a 1 pixel thick line on a 45ª angle with the start and end points exactly on a pixel. Create your SVG and then scale it way up  and see what it looks like.

                    Screen Shot 2016-03-15 at 1.31.09 PM.png

                    If you want to scale up the SVG and the plug-in turns the pixels into SVG's I'll bet that the edge is not a vector curve but a jaggedly thing.

                     

                    If you are scaling the SVG way up in the browser then you should make it as big as it's going to ever be on the web in AE. That is how you handle the jaggies in the SVG.

                     

                    I'll say it again, I think you are obsessing about things that don't matter and even if they do, then matter much less if the workflow is correct.

                    • 7. Re: Snapping to whole pixel (pixel perfect animation)
                      Ivo Marinovic Level 1

                      I knew if I mention svg, the conversation will lead in that direction. I say it again, no problem with svg, it's doing it's job, there it is: https://youtu.be/zIfh0HSAi_U

                      That was rendered in 720x720 composition and played in 2650x1600 monitor full screen and then screen recorded. Sharp as blade, no artifacts on curves, straight from AE. I'm pasting json at the bottom of the post.

                      The actual problem is this problem - YouTube

                      I hope now someone tells me is there easier way to snap point to grid rather than shifting it with arrow key on high zoom level, and then adding guide which also doesn't snap to grid to align other point to that one. aaaaarghhhh

                      And here's the json file that's exported straight from ae using bodymovin. I use that json to render svg in browser!

                       

                      {"assets":[],"v":"4.0.1","layers":[{"ddd":0,"ind":0,"ty":4,"nm":"Shape Layer 3","ks":{"o":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p8 33_0p833_0p167_0p167"],"t":7.765,"s":[100],"e":[0]},{"t":16}]},"r":{"k":0},"p":{"k":[360,3 60,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"shapes":[{"ty":"gr","it":[{"ty":"rc","d ":1,"s":{"k":[{"i":{"x":[0.083,0.083],"y":[0.896,0.896]},"o":{"x":[0,0],"y":[0,0]},"n":["0 p083_0p896_0_0","0p083_0p896_0_0"],"t":0,"s":[0,0],"e":[800,800],"__fnct":[null,null]},{"t ":28}]},"p":{"k":[0,0]},"r":{"k":792},"nm":"Rectangle Path 1","closed":true},{"ty":"st","fillEnabled":true,"c":{"k":[97,189,109,255]},"o":{"k":50}," w":{"k":3},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"fl","fillEnabled":true,"c":{"k":[97,189,109,255]},"o":{"k":0},"nm":"Fill 1"},{"ty":"tr","p":{"k":[0,-1]},"a":{"k":[0,0]},"s":{"k":[100,100]},"r":{"k":0},"o":{"k": 100}}],"nm":"Rectangle 1"}],"bounds":{"l":-539,"t":-540,"b":538,"r":539},"ip":0,"op":100,"st":0},{"ddd":0,"ind": 1,"ty":4,"nm":"Shape Layer 2","ks":{"o":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p8 33_0p833_0p167_0p167"],"t":7.765,"s":[100],"e":[0]},{"t":22}]},"r":{"k":0},"p":{"k":[360,3 60,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"shapes":[{"ty":"gr","it":[{"ty":"rc","d ":1,"s":{"k":[{"i":{"x":[0.083,0.083],"y":[0.855,0.855]},"o":{"x":[0,0],"y":[0,0]},"n":["0 p083_0p855_0_0","0p083_0p855_0_0"],"t":0,"s":[0,0],"e":[450,450],"__fnct":[null,null]},{"t ":22}]},"p":{"k":[0,0]},"r":{"k":348},"nm":"Rectangle Path 1","closed":true},{"ty":"st","fillEnabled":true,"c":{"k":[97,97,97,255]},"o":{"k":100},"w ":{"k":0},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"fl","fillEnabled":true,"c":{"k":[0,255,18,255]},"o":{"k":10},"nm":"Fill 1"},{"ty":"tr","p":{"k":[0,-1]},"a":{"k":[0,0]},"s":{"k":[100,100]},"r":{"k":0},"o":{"k": 100}}],"nm":"Rectangle 1"}],"bounds":{"l":-303,"t":-304,"b":302,"r":303},"ip":0,"op":100,"st":0},{"ddd":0,"ind": 2,"ty":4,"nm":"Shape Layer 1","ks":{"o":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p8 33_0p833_0p167_0p167"],"t":96,"s":[100],"e":[2]},{"t":99}]},"r":{"k":0},"p":{"k":[360,360, 0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1 ,"s":{"k":[{"i":{"x":[0.076,0.076],"y":[1,1]},"o":{"x":[0,0],"y":[0,0]},"n":["0p076_1_0_0" ,"0p076_1_0_0"],"t":0,"s":[0,0],"e":[300,300],"__fnct":[null,null]},{"i":{"x":[0.833,0.833 ],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p1 67","0p833_0p833_0p167_0p167"],"t":16,"s":[300,300],"e":[300,300],"__fnct":[null,null]},{" i":{"x":[0.011,0],"y":[0.011,1]},"o":{"x":[0,0.167],"y":[0,0]},"n":["0p011_0p011_0_0","0_1 _0p167_0"],"t":57,"s":[300,300],"e":[300,80],"__fnct":[null,null]},{"i":{"x":[0.188,0.188] ,"y":[1,0.188]},"o":{"x":[0.256,0.256],"y":[0,0.256]},"n":["0p188_1_0p256_0","0p188_0p188_ 0p256_0p256"],"t":65,"s":[300,80],"e":[500,80],"__fnct":[null,null]},{"i":{"x":[0.833,0.83 3],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p 167","0p833_0p833_0p167_0p167"],"t":78,"s":[500,80],"e":[500,80],"__fnct":[null,null]},{"i ":{"x":[0.833,0.833],"y":[1,0.833]},"o":{"x":[0.167,0.167],"y":[0,0.167]},"n":["0p833_1_0p 167_0","0p833_0p833_0p167_0p167"],"t":91,"s":[500,80],"e":[1064,80],"__fnct":[null,null]}, {"t":99}]},"p":{"k":[0,0]},"r":{"k":295},"nm":"Rectangle Path 1","closed":true},{"ty":"st","fillEnabled":true,"c":{"k":[97,97,97,255]},"o":{"k":100},"w ":{"k":0},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"fl","fillEnabled":true,"c":{"k":[97,189,109,255]},"o":{"k":30},"nm":"Fill 1"},{"ty":"tr","p":{"k":[0,-1]},"a":{"k":[0,0]},"s":{"k":[100,100]},"r":{"k":0},"o":{"k": 100}}],"nm":"Rectangle 1"}],"bounds":{"l":-906,"t":-203,"b":201,"r":906},"ip":0,"op":100,"st":0}],"ip":0,"op":10 0,"fr":25,"w":720,"h":720}

                       

                      Sorry for the long post!

                      • 8. Re: Snapping to whole pixel (pixel perfect animation)
                        chrisw44157881 Level 4

                        i don't know if this will help you but when I draw lines, I use math.round() or math_floor() to get pixel perfect alignment.

                        here's an example to snap alignment

                         

                        a=Math.round(effect("CC Simple Wire Removal 1b")("Point A")[0]);

                        b=Math.round(effect("CC Simple Wire Removal 1b")("Point A")[1]);

                        [a+.5,b+.5];  this 3rd part I don't think you'd use

                        • 9. Re: Snapping to whole pixel (pixel perfect animation)
                          Mylenium Most Valuable Participant

                          I'm still not clear what you are asking. Design a comp at your screen resolution and it will just as much look "sharp as a blade". You are falling victim to perceptional psychology and obsessing over something that by all means is irrelevant. SVGs can contain fractional values just as well and in reverse, a sharply designed SVG can look "soft" just by editing its DPI flag and thus triggering a different rendering. So where does that leave us? No matter what you do, the physics work both ways, but clearly, forcing everything to a pixel grid is not the solution and only a minor part, if at all. In fact the requirement to use whole pixels for UI design usually has more to do with making it easier for programmers to access those position values and GUI kits requiring pixel-exact positioning to match hit areas.

                           

                          Mylenium

                          • 10. Re: Snapping to whole pixel (pixel perfect animation)
                            Ivo Marinovic Level 1

                            Thanks , you gave me the right direction. Rounding does the trick. I can just paste Math.round on position, path, whatever, and along snap to grid it's working fine. One thing still bothers me. I have exclamation mark if I leave that script alone in the expression field. Is there any way to unify that expression, whether it is position, scale, point... I can just write Math.round but I have exclamation mark. But it's working! Yeeey

                            • 11. Re: Snapping to whole pixel (pixel perfect animation)
                              ashleigha60093430

                              Hi Ivo,

                               

                              You seem to have experience using the Bodymovin extension. Can I ask, is it possible to export as SVG or is it only possible to export as JSON?

                               

                              My end goal is to create a responsive rollover animation of the HOME button on my website.

                               

                              Bodymovin should be able to do this right?

                              • 12. Re: Snapping to whole pixel (pixel perfect animation)
                                Rick Gerard Adobe Community Professional & MVP

                                There are a lot better tools to create rollover buttons for the web than After Effects.

                                • 13. Re: Snapping to whole pixel (pixel perfect animation)
                                  Ivo Marinovic Level 1

                                  Hi ashleigha60093430, Bodymovin exports .json file which is later used to render svg. I use it for more complex animations, text placeholders or transitions in web. I never have used it for button rollover but I believe that it can do the job although there are probably easier tools if you are just using it for the button.

                                  You can find the documentation here.

                                  If you decide to use Bodymovin, feel free to contact me here or vie email.

                                  • 14. Re: Snapping to whole pixel (pixel perfect animation)
                                    ashleigha60093430 Level 1

                                    yes, it's not a simple rollover button like you're thinking, it's a mini text animation, i want the user to be able to hover over our logo and the text change to "home" meaning home page (We are B2B) and some of our users are accustomed to a home button (ew)

                                    im also quiet experienced in after affects, so I can creat the complex morphing of our logo to the word 'home' pretty quickly, as I don't not know how to code so creating an SVG in illustrator and animating it in CSS (e.g. SNAP svg) is way out of my league (I'm marketing manager)

                                    OR can you suggest another method? Feel free to email me ashleighayers91@gmail.com

                                     

                                    how do I render the json file to SVG once I'm finished?

                                    i haven't started the animation, because I'm not sure of the parameters, eg. How complex can I go or am I limited to the amount of movements etc.

                                    • 15. Re: Snapping to whole pixel (pixel perfect animation)
                                      Ivo Marinovic Level 1

                                      It uses shapes, masks and those combined. It has it's limitations but if you are familiar with AE you'll get it soon. I'll help you via email, but the author of this plugin is really cool guy, he'll help you too!

                                      • 16. Re: Snapping to whole pixel (pixel perfect animation)
                                        Rick Gerard Adobe Community Professional & MVP

                                        You can create some really powerful roll over animations at any size using Animate CC. Personally I think AE is the wrong tool for the job. AE builds video and anything else is going to be quire inefficient. Animate CC is really easy to use and there are a bunch of great tutorials on the product home page.

                                        • 17. Re: Snapping to whole pixel (pixel perfect animation)
                                          Ivo Marinovic Level 1

                                          Yeah, and AE is wrong tool for 3D animations, and there it is, VCP Element along with other tools made for people who are more comfortable in AE and want to stick with it. Yeah, people want to stick with AE. Can someone possibly think that it's easier to learn Animate CC or Maya rather than patch the problem, specially if one or couple time use?

                                          My opinion: Deal the problem however you know.  Find your goal, and adjust your knowledge to it. If you plan to do svg animations a lot (or 3D) then find the right tool for it. If it's couple of time use... patch will do fine. Final product is what matters in the end!