Sprites not lining up

Help
#1

Hi,
In certain situations a gap is appearing between two sprites when they should be perfectly aligned.
check out this example :
https://try.haxe.org/#Df849

problem
problem.jpg736×393 61.6 KB 

import flash.display.Sprite;
class Test extends Sprite {
    static function main() {
        var box1 = new Sprite();
        box1.graphics.beginFill(0x000000);
        box1.graphics.drawRect(0,0,100,100);
        box1.graphics.endFill();
        flash.Lib.current.addChild(box1);

        var box2 = new Sprite();
        box2.graphics.beginFill(0x000000);
        box2.graphics.drawRect(0,0,100,100);
        box2.graphics.endFill();
        flash.Lib.current.addChild(box2);
        
        box1.y=0.35;
        box1.height=100.1;
        box2.y=box1.y+box1.height;
    }
}

thanks

#2

They cannot be perfectly aligned if the position or height is in fraction. Even though the numbers are right and sometimes the sprites will look good, the renderer has trouble with such situations so I generally try to avoid using fractions if I want objects to be completely aligned.

1 Like
#3

As niceneasy said, you want to round to the nearest pixel.

You can actually set up your Graphics object to do this, but you’ll need to specify an outline. When you call lineStyle(), set the fourth argument to true. This argument (pixelHinting) tells it to round to the nearest pixel every time it draws that line.

Another option is to overlap by a full pixel. So instead of this:

box1.height=100.1;
box2.y=box1.y+box1.height;

You’d write this:

box1.height=101;
box2.y=box1.y+box1.height-1;

You could also try using Tilemap, which uses GL rendering under the hood. OpenGL might do a better job with this kind of thing, but I’m not sure.

1 Like
#4

Thanks so much @niceneasy and @player_03 .
With using linestyle will it keep snapping when the width or height of the sprite is adjusted or will the shapes need to be redrawn to new size ? I will test this myself…