Jump to content

How to correct position Phaser Sprites?


caymanbruce
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...