How to correct position Phaser Sprites?

[caymanbruce]

I am experimenting positioning the sprites correctly on the screen when setting anchor to the center of the sprite. However I can not get the expected result. For example, I want to have a group of sprites place on the screen like a tile map. Some sprites are on the edge of the screen and have a graphics object as their texture. While sprites not on the edge are image sprites generated from images. I want the image sprites stay on their tile while have their anchor set to 0.5. Here is my code for the example in this URL http://phaser.io/sandbox/vXVjSgyw/play: (You need to paste my code into the create method to see the result)

 

function create() {

    // disable these lines, and the other sprite will be blank
    var sprite = game.add.sprite(0, 0, 'phaser');
    
    // blank sprite will add last used texture
    var pics = game.add.group();
    for (let i = 0; i <= 7; i++) {
        for (let j = 0; j <= 5; j++) {
            var b;
            if (i === 0 || j === 0 || i === 7 || j === 5) {
                b = new Phaser.Sprite(game) // or game.add.sprite(0,0)
                var g = new Phaser.Graphics(0,0)

                g.beginFill(0xFF0000,0.5)
                g.lineStyle(1, 0xAACCCC);
                g.drawRect(0,0,100,100)
                g.endFill()
    
                b.addChild(g)
                b.x = i * 100;
                b.y = j * 100;
                
            } else {
                b = game.add.sprite(i * 100, j * 100, 'mushroom');
            }
            
            b.anchor.set(0.5)
            
            
            pics.add(b)
        }
    }
    

}

When I set all the sprites anchor to 0.5 the image sprites shift to their top left corner. If I only set the edge sprites anchor to 0.5 it looks fine. What is the problem? Does the anchor setting change the texture's position?

[Tua]

Does this solve your problem?

b = game.add.sprite(i * 100 + 50, j * 100 + 50, 'mushroom');

 

[caymanbruce]

20 minutes ago, Tua said:

Does this solve your problem?

b = game.add.sprite(i * 100 + 50, j * 100 + 50, 'mushroom');

 

Thank you. But why? Why don't the edge sprite need to do the same thing? There is a big question mark on top of my head.

Also if I don't set the anchor of anything, and try to draw a line between two sprites' center position (centerX, centerY), this time only the sprites with image textures return the correct center. The sprite with graphics as its texture have center point somewhere close to the top left corner of the sprite. This is really making my head exploded.

[rroylance]

8 hours ago, caymanbruce said:

Thank you. But why? Why don't the edge sprite need to do the same thing? There is a big question mark on top of my head.

Also if I don't set the anchor of anything, and try to draw a line between two sprites' center position (centerX, centerY), this time only the sprites with image textures return the correct center. The sprite with graphics as its texture have center point somewhere close to the top left corner of the sprite. This is really making my head exploded.

It's because you are using the same offset for the mushroom as the boxes, you are positioning the first mushrooms center at 100,100, which is the bottom right of the first border box. You need the + 50 so that you are positioning the mushrooms at the center of the border boxes, not the edges.

[caymanbruce]

38 minutes ago, UncleAcid said:

It's because you are using the same offset for the mushroom as the boxes, you are positioning the first mushrooms center at 100,100, which is the bottom right of the first border box. You need the + 50 so that you are positioning the mushrooms at the center of the border boxes, not the edges.

But why doesn't the first border box position its center at 0, 0 after using anchor.set(0.5)? If I place the image sprite at (0, 0) and then set its anchor to 0.5 its center point will be (0, 0). However it seems this line has no effect on the border box. I think maybe that's because I use Graphics as the texture of the sprite. But I still don't know how it works.

[rroylance]

28 minutes ago, caymanbruce said:

But why doesn't the first border box position its center at 0, 0 after using anchor.set(0.5)? If I place the image sprite at (0, 0) and then set its anchor to 0.5 its center point will be (0, 0). However it seems this line has no effect on the border box. I think maybe that's because I use Graphics as the texture of the sprite. But I still don't know how it works.

I don't believe that graphics object respect anchors, they only deal with top left, width and height. So it doesn't matter where the parent sprites center is, since the graphics object is looking at the sprites top left. I could be wrong, I didn't confirm that at the moment, but I think I remember reading that at some point.