2 Replies Latest reply on Dec 15, 2011 6:58 AM by dave.gallant

    How do I compensate for display objects jumping when screen scaling

    DaveGallant Level 1

      I am building an application that is to run at 2 difference stage sizes. 960x640 and 1024x768 (for those paying attention, you may note that those are the high res settings for the iPhone and iPad2)

       

      The app was designed and build to run on a stage of 960x640 and when running at this size, there are no problems.

      When the app loads in the 1024x768 window, it "strechs" the stage to fill the window, but keeps the aspect ratio. Everything looks good and the application runs without any problems expect for one thing.

       

      Sometimes, display objects on the stage "jitter" when moving or animating. I have discovered that this is because the stage is "scaling" the x and y values, and is not pixel snapping the objects on the screen, even though the x and y values of the display object are indeed whole numbers.

       

      A prime example of this is I have 2 bitmapData images. bmData_s and bmData_h.

      bmData_s is 192x388 in size.
      bmData_h is created from a copy of bmData_s with a glow filter stroke on it, resulting in a image that is 198x394 (6 pixels bigger due to a 3 pixel stroke)

       

      I place it on the screen using the following code:

       

      (Background is a bitmap object that is 960x480 and places at 0,0)

      (ObjOffset is a point in my app data to position the object, it's a point set to 53,195)

       

      MyObj.x = Background.x + ObjOffset.x + (bmData_s.width/2);

      MyObj.y = Background.y + ObjOffset.y + (bmData_s.height/2);

       

       

      now, when the mouse rolls over the object, I have an event listener to change MyObj.bitmapData to bmData_h

       

      MyObj.bitmapData = bmData_h;

      MyObj.x = Background.x + ObjOffset.x + Math.floor(bmData_h.width/2);

      MyObj.y = Background.y + ObjOffset.y + Math.floor(bmData_h.height/2);

       

      and back to the _s image on mouse out.

       

       

      Now, when the app runs on the iPhone which is a 960x640 screen size, or on the PC which is using a window of similiar size, the image doesn't appear to move at all... the "stroke" appears and disappears exactly as it is suppose to

      However, when I run it in a window that is 1024x768, the _h image appears to "jump" one pixel up.

       

      I have encountered many other similiar things that only occure when the stage is scaled. There is a spot in the app where I am animating a bitmap by manipulating it's scrollrect x and width (have it's do a wipe in from right to left like a peice of paper unrolling on a table) and due to the scaling, the right edge of the image jumps left and right 1 pixel... but on 960x640 screens, it looks perfect.

       


      Does anyone know how I can compensate for this effect so that this jumping doesn't occur when the stage is stretched to fit the window it's running in?